/* ==========================================================================
   Remark42 — discussion section + widget overrides
   Layer A: the wrapper around #remark42 (100% under our control).
   Layer B: CSS custom properties consumed by the Remark42 widget itself
            (its embed reads a small set of --clr-* / --font-family
            variables from its host root; values that the widget doesn't
            read are simply ignored, so the file is safe to ship as-is).
   ========================================================================== */

/* ----- Layer A: section wrapper ----- */

.discussion {
    margin-top: var(--s7);
    padding-top: var(--s5);
    border-top: 1px solid var(--rule-strong);
}

.discussion-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.discussion-head h2 {
    margin: 0;
}

.discussion-head .count {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.discussion-note {
    font-family: var(--mono);
    color: var(--ink-soft);
    margin: 0 0 var(--s5);
    max-width: 48rem;
}

.discussion-note a {
    color: var(--signal);
}

#remark42 {
    font-family: var(--mono);
    color: var(--ink);
}

#remark42 a {
    color: var(--signal);
}

/* Remark42 renders nothing until the bundle loads — keep a visible
   placeholder so the section doesn't collapse on slow networks. */
#remark42:empty::before {
    content: "Загружается…";
    display: block;
    font-family: var(--mono);
    font-size: 0.875rem;
    color: var(--ink-faint);
    padding: var(--s4) 0;
}

/* ----- Layer B: variables the Remark42 widget consumes ----- */
/* These match the palette in app.css:6-34. Variables the widget doesn't
   reference are silently ignored — see Remark42 web/app/styles for the
   live list per release. */

#remark42 {
    --font-family: var(--mono);
    --secondary-font-family: var(--mono);

    --color-light: var(--paper);
    --color-dark: var(--ink);

    --primary-color: var(--signal);
    --primary-hover-color: #b8370a;

    --bg-color: var(--paper);
    --separator-color: var(--rule);

    --input-bg-color: var(--paper-dim);
    --input-border-color: var(--rule-strong);
    --input-color: var(--ink);

    --button-text-color: var(--paper);
    --button-bg-color: var(--signal);
    --button-hover-bg-color: #b8370a;

    --link-color: var(--signal);
    --link-hover-color: #b8370a;

    --comment-bg-color: var(--paper);
    --comment-border-color: var(--rule);
    --comment-author-color: var(--ink);
    --comment-time-color: var(--ink-faint);
    --comment-text-color: var(--ink);

    --user-name-color: var(--ink);
    --user-id-color: var(--ink-faint);

    --vote-color: var(--ink-faint);
    --vote-up-color: var(--pass);
    --vote-down-color: var(--fail);

    --error-color: var(--fail);
    --success-color: var(--pass);
}