/* ─────────────────────────────────────────────────────────────
   CometFare Support — the "soft stack" layout (2026-08-05)

   Loads AFTER cometfare-dark-pages.css and only styles support.html.
   It inherits that file's body and footer, then replaces the page's
   own furniture with a different system.

   This replaced the old "ledger" (square cells sharing 1px borders,
   blue accent). Nothing about the page's BEHAVIOUR changed with it —
   every class name, state hook and aria attribute the script touches
   is still here. Only the paint is different.

   The system, in three rules:

     1. ONE RADIUS.  --sup-radius is the only corner value on the page.
        A card, a tab, a tag chip and a vote button all wear the same
        curve. Do not add a second radius "just for small things" —
        the equal curve at every size is the look.
     2. ONE SPACING PAIR.  --sup-pad inside every surface, --sup-gap
        between every two things. No one-off margins, no stacked
        paddings. If something needs air, it gets --sup-gap.
     3. GREYSCALE.  Every colour below is a neutral grey. There is no
        hue anywhere on this page, deliberately — emphasis is carried
        by BRIGHTNESS and FILL, not by colour. Status, errors and the
        destructive action all still read, because each is also spelled
        out in words next to it.

   Surfaces nest exactly two deep: the sheet (--sup-sheet) holds cells
   (--sup-cell), and a cell may hold one nested cell (--sup-cell-deep)
   for threaded replies. There is no third step; if you need one, the
   thing is too nested.

   ⚠️ Spacing between bands is FLEX GAP, not borders or margins. Bands
   on this page get hidden at runtime (the reply form on a solved post,
   the empty status note) — a display:none flex child contributes no
   gap, so hiding one can never strand a divider or a margin the way
   the old `:last-child` borders could.

   Everything is prefixed .sup- so nothing here can leak into the four
   other pages that share cometfare-dark-pages.css.
   ───────────────────────────────────────────────────────────── */

:root {
    /* ── THE ONE RADIUS ──
       Used by every surface AND every control. See rule 1 above. */
    --sup-radius: 14px;

    /* ── THE ONE SPACING PAIR ── */
    --sup-pad: 16px;                     /* inside every surface */
    --sup-gap: 12px;                     /* between any two things */

    /* ── SURFACES ──
       Solid greys, never translucent: translucency over the page's
       animated backdrop made every panel shimmer.

       Two levels and one chip step, and that is the whole ramp:
         sheet   the card
         cell    a row / field / control sitting ON the card
         chip    a small control sitting ON a cell (tag, route, vote)
       A chip is LIGHTER than a cell so it stays visible wherever it
       lands. Nothing goes deeper — a fourth step would need a fourth
       grey nobody can tell from the third. */
    --sup-sheet: #141414;
    --sup-cell: #1e1e1e;
    --sup-cell-hover: #292929;
    --sup-chip: #2e2e2e;
    --sup-chip-hover: #3a3a3a;

    --sup-line: rgba(255, 255, 255, 0.08);
    --sup-line-strong: rgba(255, 255, 255, 0.18);

    /* ── INK — brighter than the dark-pages defaults. This page is
       read, not skimmed. ── */
    --sup-ink: rgba(255, 255, 255, 0.92);
    --sup-ink-soft: rgba(255, 255, 255, 0.68);
    --sup-ink-dim: rgba(255, 255, 255, 0.5);
    --sup-warm: #f2f2f2;                 /* titles */

    /* ── EMPHASIS ──
       The page's "accent" is simply a light fill with dark type on it.
       It marks the primary action and the chosen state of any toggle,
       and it is the only place light-on-dark inverts. */
    --sup-fill: #ededed;
    --sup-fill-hover: #ffffff;
    --sup-fill-ink: #111111;

    /* disabled: muted solid, not faded — a see-through button reads as
       a rendering bug */
    --sup-off: #262626;
    --sup-off-ink: #6a6a6a;

    /* status/report ink: greyscale, separated by brightness. The words
       next to these ("Locked:", "Report", the confirm() dialog) carry
       the meaning; this only carries the weight. */
    --sup-loud: #f5f5f5;                 /* something went wrong / danger */
    --sup-quiet: #b9b9b9;                /* something went right */

    --sup-focus: rgba(255, 255, 255, 0.55);
}

/* ── THE COLUMN ──
   Narrower than .dark-shell (1180px): this page is a form and a list,
   and neither wants to be 1180px wide. */
.sup-wrap {
    width: min(820px, calc(100% - clamp(28px, 6vw, 88px)));
    margin: 0 auto;
    /* clears the fixed sky nav for BOTH views — put it here, not on
       .sup-head, which the detail view never renders */
    padding-top: clamp(84px, 12vh, 116px);
    color: var(--sup-ink);
}

/* Buttons and links get a visible keyboard ring, since most of them drop
   the browser default in favour of a fill change.
   ⚠️ The TYPING areas must not. Their cell already lights its border on
   :focus-within, so a ring on top drew a second rectangle around a box
   that was already saying the same thing — and being inset inside the
   rounded cell, it read as a stray square. */
.sup-wrap button:focus-visible,
.sup-wrap a:focus-visible {
    outline: 2px solid var(--sup-focus);
    outline-offset: 2px;
}

.sup-wrap input:focus,
.sup-wrap input:focus-visible,
.sup-wrap textarea:focus,
.sup-wrap textarea:focus-visible { outline: none; }

.sup-head { padding-bottom: clamp(16px, 2.6vh, 26px); }

.sup-head h1 {
    margin: 0;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--sup-warm);
}

.sup-head p {
    margin: 9px 0 0;
    max-width: 58ch;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--sup-ink-soft);
}

/* ═══════════════════════════════════════════════════════════
   THE CARD PRIMITIVE
   (still called .sup-table in the markup — the class name is what
   the page ships; only what it paints changed)
   ═══════════════════════════════════════════════════════════ */
.sup-table {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
    padding: var(--sup-pad);
    margin-bottom: var(--sup-gap);
    background: var(--sup-sheet);
    border: 1px solid var(--sup-line);
    border-radius: var(--sup-radius);
}

/* ⚠️ no overflow:hidden here — the moderation popover (.sup-menu) is
   absolutely positioned inside a reply inside this card, and clipping
   would swallow it. Corners stay clean because children carry their
   own radius instead. */

/* ── A LABELLED ROW ──
   Label above its field, both full width. The old 116px label gutter
   with its own fill and right border was the most table-like thing on
   the page; stacking removes it and makes the narrow layout identical
   to the wide one. */
.sup-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sup-row-label {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--sup-ink-dim);
}

.sup-row-cell {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sup-gap);
    padding: 12px var(--sup-pad);
    background: var(--sup-cell);
    border: 1px solid transparent;
    border-radius: var(--sup-radius);
    transition: border-color 0.15s ease;
}

/* the whole cell lights up when what it holds has focus — the row
   responds, not just the 1px under the caret */
.sup-row-cell:focus-within { border-color: var(--sup-line-strong); }

/* ═══ THE ASK LINE ═══
   Collapsed it is one rounded row. Clicking it (or tabbing to it and
   pressing enter/space) reveals the rest. The grid-template-rows
   0fr → 1fr trick animates without hard-coding a height. */

/* block, not the card's flex column: a flex gap would sit under the
   collapsed composer as dead space, because the panel is 0px tall but
   still a flex item */
.sup-ask { display: block; }

.sup-ask-line {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 14px var(--sup-pad);
    font: inherit;
    font-size: 0.99rem;
    font-weight: 700;
    text-align: left;
    color: var(--sup-warm);
    background: var(--sup-cell);
    border: 0;
    border-radius: var(--sup-radius);
    cursor: text;
    transition: background 0.16s ease;
}

.sup-ask-line:hover,
.sup-ask-line:focus-visible { background: var(--sup-cell-hover); }

.sup-ask-line svg {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    stroke: var(--sup-ink-soft);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sup-ask-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sup-ask.is-open .sup-ask-panel { grid-template-rows: 1fr; }

.sup-ask-panel > div {
    overflow: hidden;
    min-height: 0;
}

/* the gap between the ask line and the fields lives INSIDE the clipped
   div, so a collapsed composer has none of it */
.sup-ask-inner {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
    margin-top: var(--sup-gap);
}

/* ── THE ENTRY GLOW ──
   On arrival the prompt sweeps a bright band through its own letters
   twice and the row breathes one soft glow, then everything hands the
   colour back and never fires again. It is the only moving thing on
   the page, which is what makes it read as "start here" rather than as
   decoration. */
@media (prefers-reduced-motion: no-preference) {
    .sup-ask:not(.is-open) .sup-ask-line > span {
        background-image: linear-gradient(100deg,
            var(--sup-warm) 0%,
            var(--sup-warm) 32%,
            #8f8f8f 44%,
            #ffffff 52%,
            #8f8f8f 60%,
            var(--sup-warm) 72%,
            var(--sup-warm) 100%);
        background-size: 260% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: sup-sweep 2.5s ease-in-out 0.4s 2 both;
    }

    .sup-ask:not(.is-open) .sup-ask-line {
        animation: sup-breathe 2.5s ease-in-out 0.4s 2 both;
    }
}

/* `both` leaves the sweep parked on the gradient's pale tail, so the
   settled colour is the ordinary title white */
@keyframes sup-sweep {
    from { background-position: 175% 0; }
    to { background-position: -75% 0; }
}

@keyframes sup-breathe {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0); }
    50% { box-shadow: inset 0 0 44px -14px rgba(255, 255, 255, 0.32); }
}

/* Hovering, focusing or opening the composer stops the sweep and gives
   the text its own colour back.
   ⚠️ These MUST repeat the `.sup-ask:not(.is-open)` prefix. The rule
   that starts the sweep is (0,3,1); a bare `.sup-ask-line:hover > span`
   is (0,2,1) and loses, so hovering would leave the gradient running
   and the text stuck transparent. */
.sup-ask:not(.is-open) .sup-ask-line:hover > span,
.sup-ask:not(.is-open) .sup-ask-line:focus-visible > span,
.sup-ask.is-open .sup-ask-line > span {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
}

/* ── FIELDS ──
   A field has no box of its own: the CELL around it is the box. */
.sup-input,
.sup-area {
    width: 100%;
    font: inherit;
    color: var(--sup-ink);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 3px 0;
    outline: none;
    resize: none;
}

.sup-input::placeholder,
.sup-area::placeholder { color: rgba(255, 255, 255, 0.36); font-weight: 600; }

.sup-input {
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--sup-warm);
}

.sup-area {
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.62;
    min-height: 58px;
    overflow: hidden; /* JS auto-grows it — no scrollbar, no drag grip */
}

/* ═══ TOGGLES — route switch and tags ═══
   Both are the same object: a rounded chip that is a quiet fill when
   off and the light fill when on. They are written as one block so the
   two can never drift apart. */
.sup-route,
.sup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

.sup-route button,
.sup-tags button {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 7px 15px;
    border: 0;
    border-radius: var(--sup-radius);
    background: var(--sup-chip);
    color: var(--sup-ink-soft);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sup-route button:hover,
.sup-tags button:hover {
    background: var(--sup-chip-hover);
    color: var(--sup-warm);
}

/* chosen = the light fill. No outline, no underline, no second colour:
   the inversion is the whole signal */
.sup-route button[aria-pressed="true"],
.sup-tags button[aria-pressed="true"] {
    background: var(--sup-fill);
    color: var(--sup-fill-ink);
}

/* the 3-tag cap is shown with a muted solid, not with opacity */
.sup-tags button:disabled,
.sup-tags button:disabled:hover {
    background: var(--sup-off);
    color: var(--sup-off-ink);
    cursor: default;
}

/* ── COMPOSER FOOT ── */
.sup-ask-foot,
.sup-inline-foot,
.sup-write-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

.sup-note {
    margin: 0;
    margin-right: auto;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sup-ink-soft);
}

.sup-note.is-bad { color: var(--sup-loud); font-weight: 700; }
.sup-note.is-good { color: var(--sup-quiet); }

/* ── BUTTONS ──
   Send is the page's one primary action, so it wears the light fill.
   Everything else is a quiet chip of the same size and curve. */
.sup-send {
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    padding: 8px 20px;
    border: 0;
    border-radius: var(--sup-radius);
    background: var(--sup-fill);
    color: var(--sup-fill-ink);
    cursor: pointer;
    transition: background 0.16s ease;
}

.sup-send:hover,
.sup-send:focus-visible { background: var(--sup-fill-hover); }

.sup-send:disabled,
.sup-send:disabled:hover {
    background: var(--sup-off);
    color: var(--sup-off-ink);
    cursor: not-allowed;
}

/* secondary actions ("back", "cancel", "remove") */
.sup-text-btn {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 15px;
    border: 0;
    border-radius: var(--sup-radius);
    background: var(--sup-cell);
    color: var(--sup-ink-soft);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sup-text-btn:hover,
.sup-text-btn:focus-visible {
    background: var(--sup-cell-hover);
    color: var(--sup-warm);
}

/* the destructive one cannot use red here, so it uses the loudest
   thing greyscale has left: a ring. It is the only ringed control on
   the page, and it still opens a confirm() that spells out what it
   does. */
.sup-text-btn.is-danger:hover,
.sup-text-btn.is-danger:focus-visible {
    background: var(--sup-cell-hover);
    color: var(--sup-loud);
    box-shadow: inset 0 0 0 1px var(--sup-line-strong);
}

/* ═══ TAB STRIP + SEARCH ═══
   A row of chips and a rounded search field, all on the card's own
   surface. The old header band with its cell fill and 1px dividers is
   gone; the selected tab is a fill, same as every other toggle. */
.sup-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

.sup-tab {
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 9px 15px;
    border: 0;
    border-radius: var(--sup-radius);
    background: var(--sup-cell);
    color: var(--sup-ink-soft);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.sup-tab:hover { background: var(--sup-cell-hover); color: var(--sup-warm); }

.sup-tab[aria-selected="true"] {
    background: var(--sup-fill);
    color: var(--sup-fill-ink);
}

/* the count rides its tab, dimmer than the label */
.sup-tab b {
    font-weight: 700;
    opacity: 0.55;
    margin-left: 6px;
}

.sup-search {
    flex: 1 1 160px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 var(--sup-pad);
    background: var(--sup-cell);
    border: 1px solid transparent;
    border-radius: var(--sup-radius);
    cursor: text;
    transition: border-color 0.15s ease;
}

.sup-search:focus-within { border-color: var(--sup-line-strong); }

.sup-search svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    stroke: var(--sup-ink-dim);
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    transition: stroke 0.15s ease;
}

.sup-search:focus-within svg { stroke: var(--sup-warm); }

.sup-search input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--sup-ink);
    background: none;
    border: 0;
    padding: 10px 0;
    outline: none;
}

.sup-search input::placeholder { color: rgba(255, 255, 255, 0.38); }

/* ═══ THE LIST — a stack of equal rounded rows ═══ */
.sup-list {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
}

.sup-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sup-gap);
    padding: 12px var(--sup-pad);
    background: var(--sup-cell);
    border-radius: var(--sup-radius);
    text-decoration: none;
    color: inherit;
    transition: background 0.14s ease;
}

.sup-item:hover { background: var(--sup-cell-hover); }

.sup-item-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--sup-warm);
}

/* status is a small circle; the meta line under it still spells the
   word out, which is what carries the meaning in greyscale */
.sup-dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sup-ink-dim);
}

.sup-dot.is-open { background: #f2f2f2; }
.sup-dot.is-solved { background: #8c8c8c; }
.sup-dot.is-closed { background: #3d3d3d; box-shadow: inset 0 0 0 1px var(--sup-line-strong); }

.sup-item-meta {
    margin: 4px 0 0 17px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--sup-ink-dim);
    /* one line, clipped — a long tag list can never push a row to two
       lines and break the stack's rhythm */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sup-item-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--sup-ink-dim);
    white-space: nowrap;
}

/* ── EMPTY / LOADING / ERROR ── */
.sup-blank {
    padding: 28px var(--sup-pad);
    font-size: 0.89rem;
    font-weight: 600;
    color: var(--sup-ink-soft);
    text-align: center;
}

.sup-blank.is-error { color: var(--sup-loud); }

/* ═══ DETAIL ═══ */
.sup-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: var(--sup-gap);
    padding: 8px 15px;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--sup-ink-soft);
    background: var(--sup-cell);
    border-radius: var(--sup-radius);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

.sup-back:hover { background: var(--sup-cell-hover); color: var(--sup-warm); }

/* the post's status line — type only, no band */
.sup-detail-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--sup-ink-dim);
}

.sup-detail-body h1 {
    margin: 0;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: clamp(1.4rem, 2.8vw, 1.95rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--sup-warm);
}

.sup-prose {
    margin: var(--sup-gap) 0 0;
    font-size: 0.96rem;
    font-weight: 600;
    line-height: 1.68;
    color: var(--sup-ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* tags on the left, "mark solved" on the right */
.sup-detail-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

.sup-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

/* a detail tag is the same chip as a composer tag, just not clickable */
.sup-detail-tags span {
    padding: 6px 14px;
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--sup-ink-soft);
    background: var(--sup-cell);
    border-radius: var(--sup-radius);
}

/* ═══ REPLIES ═══ */
.sup-thread-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sup-gap);
}

.sup-thread-head strong {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--sup-ink-dim);
}

#replies {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
}

/* a post with no replies must not leave an empty gap behind */
#replies:empty { display: none; }

.sup-reply {
    padding: 12px var(--sup-pad);
    background: var(--sup-cell);
    border-radius: var(--sup-radius);
}

/* depth is an inset, not a rail: a nested reply is the same rounded
   shape drawn as an outline, and the parent's own padding is the
   indent. It stays UNFILLED at every depth on purpose — stacking
   lighter fills would run out of distinguishable greys by level three,
   and would swallow the chips sitting inside it. */
.sup-reply .sup-reply {
    margin-top: var(--sup-gap);
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--sup-line);
}

/* a staff/admin answer is marked by its badge and a brighter name.
   With no hue available, a differently-coloured box would only read as
   "some other box". */
.sup-reply.is-admin > .sup-reply-head .sup-who,
.sup-reply.is-staff > .sup-reply-head .sup-who { color: #ffffff; }

.sup-reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.sup-who {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--sup-warm);
}

.sup-when {
    margin-left: 9px;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--sup-ink-dim);
}

/* admin badge: filled. staff badge: ringed. Same chip, two weights. */
.sup-badge {
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: var(--sup-radius);
    background: var(--sup-fill);
    color: var(--sup-fill-ink);
    font-size: 0.72rem;
    font-weight: 800;
}

.sup-badge.is-staff {
    background: transparent;
    color: var(--sup-warm);
    box-shadow: inset 0 0 0 1px var(--sup-line-strong);
}

.sup-reply-body {
    margin-top: 6px;
    font-size: 0.93rem;
    font-weight: 600;
    line-height: 1.62;
    color: var(--sup-ink);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── REPLY ACTIONS ──
   Dimmed until the reply is hovered or something inside it has focus,
   so a 30-reply thread isn't 120 competing controls. */
.sup-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.35;
    transition: opacity 0.16s ease;
}

.sup-reply:hover > .sup-reply-head .sup-acts,
.sup-reply:focus-within > .sup-reply-head .sup-acts { opacity: 1; }

/* touch devices have no hover — never hide the controls there */
@media (hover: none) {
    .sup-acts { opacity: 1; }
}

.sup-vote {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 11px;
    border: 0;
    border-radius: var(--sup-radius);
    background: var(--sup-chip);
    color: var(--sup-ink-soft);
    cursor: pointer;
    transition: color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.sup-vote:hover { background: var(--sup-chip-hover); color: var(--sup-warm); }

/* cast votes: up is the light fill (same as every other "on" state),
   down is the ring — the two directions have to differ by SHAPE here,
   not by colour */
.sup-vote.is-up[aria-pressed="true"] {
    background: var(--sup-fill);
    color: var(--sup-fill-ink);
}

.sup-vote.is-down[aria-pressed="true"] {
    background: var(--sup-chip);
    color: var(--sup-warm);
    box-shadow: inset 0 0 0 1px var(--sup-fill);
}

.sup-vote:disabled,
.sup-vote:disabled:hover {
    background: var(--sup-off);
    color: var(--sup-off-ink);
    cursor: not-allowed;
    box-shadow: none;
}

/* ── MODERATION POPOVER ── */
.sup-more { position: relative; }

.sup-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 168px;
    padding: 6px;
    background: var(--sup-sheet);
    border: 1px solid var(--sup-line);
    border-radius: var(--sup-radius);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.75);
}

.sup-menu button {
    text-align: left;
    background: none;
    padding: 9px 12px;
}

.sup-menu button:hover { background: var(--sup-cell-hover); }

/* ── INLINE EDIT / REPORT ──
   Opens in place under the reply, so the text being edited or reported
   stays on screen while you type. */
.sup-inline {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
    margin-top: var(--sup-gap);
    padding: var(--sup-pad);
    background: var(--sup-sheet);
    border: 1px solid var(--sup-line-strong);
    border-radius: var(--sup-radius);
}

.sup-inline-label {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--sup-ink-dim);
}

/* the report panel says so with a brighter label, since the border
   cannot turn red */
.sup-inline.is-danger .sup-inline-label { color: var(--sup-loud); }

/* every textarea that isn't already inside a .sup-row-cell wears the
   cell surface itself — and, having no cell to light up around it, says
   "focused" with its own inset edge instead */
.sup-inline .sup-area,
.sup-write > .sup-area {
    padding: 12px var(--sup-pad);
    background: var(--sup-cell);
    border-radius: var(--sup-radius);
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow 0.15s ease;
}

.sup-inline .sup-area:focus,
.sup-write > .sup-area:focus { box-shadow: inset 0 0 0 1px var(--sup-line-strong); }

/* ── REPLY COMPOSER ── */
.sup-write {
    display: flex;
    flex-direction: column;
    gap: var(--sup-gap);
}

/* an empty note must not leave an empty gap behind */
.sup-write-note:empty { display: none; }

/* ── the page's bottom breathing room ── */
.sup-tail { margin-bottom: clamp(28px, 5vh, 52px); }

/* ── NARROW ──
   Almost nothing to do: the labelled rows already stack, and every
   surface is already full width. */
@media (max-width: 640px) {
    :root { --sup-pad: 14px; }

    .sup-search { flex: 1 1 100%; }

    .sup-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sup-item-count { margin-left: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .sup-ask-panel { transition: none; }
}