/* ─────────────────────────────────────────────────────────────
   CometFare Dark Pages — shared design system for the info pages
   (releases, blog, support, voyager, discover).

   This REPLACED cometfare-sky-pages.css + cometfare-sky-footer.css
   (2026-07-28 rebuild); both were deleted 2026-07-30 once confirmed
   unreferenced. The sky-blue/white system is gone; the info
   pages now speak the landing page's language:

   - dark mode: the page is black, every card is a black slab
   - COLD (#6cbcff vivid blue) × WARM (#b3d6ff pale blue): the resting →
     engaged pair the sky header and the hero download CTA run. ⚠️ As of
     2026-07-29 this pair paints TYPE AND FILLS ONLY. Borders left the
     accent entirely — see the EDGES block below: every edge is now a grey
     darker than the box it wraps, so a border reads as the seam under a
     slab instead of a blue line drawn on top of it. The two survivors are
     keyboard focus on a field and the admin/staff reply rings, both of
     which carry meaning rather than decoration.
     ⚠️ The "warm" half was periwinkle (#c9b3ff) until 2026-07-29,
     when purple was removed site-wide; the pair is now two blues that
     differ in lightness, not in hue, so keep enough distance between
     them or the resting/engaged signal stops being readable. The names
     --cf-warm / --cf-cold are historical — read them as
     "resting" / "engaged".
   - the landing page's own dark ocean blue is deliberately ABSENT here:
     these pages sit on black and only ever use the pale accent
   - no top hero image: each page opens with a left-aligned title
     block (.dark-page-head)
   - NO liquid decoration at all. The full border went first (2026-07-29,
     releases.html was the last page to wear it; its call to
     cometfare-goo-frame.js is commented out rather than deleted), and
     the .goo-sep separator that replaced it on blog/discover/support
     went on 2026-08-04. The .goo-frame rules below survive because
     .goo-frame is also releases.html's layout column.
   - compact: paddings are tight on purpose so a page fits in one
     screen and the first scroll lands on the footer

   Like its sky predecessor it restyles the same cf-* component
   classes the page scripts generate, so the functional JS keeps
   working untouched. Load with cometfare-sky-header.css; the footer
   comes from cometfare-footer.js (the black site-wide footer).
   ───────────────────────────────────────────────────────────── */

:root {
    color-scheme: dark;
    /* the cold × warm pair — same values as the hero download CTA */
    --cf-cold: #6cbcff;
    --cf-cold-deep: #1d5488;
    --cf-warm: #b3d6ff;

    /* ── RESTING TYPE IS INDUSTRIAL WHITE (2026-07-29, TESTING) ──
       --cf-warm used to paint BOTH the resting type and the pale surfaces
       (the nav bar, the primary button fill). Those two jobs have been
       split: SURFACES keep --cf-warm's pale blue, TYPE takes the cool
       off-white below. The engaged colour is unchanged, so the page's one
       rule is now "white at rest → blue when engaged".

       Not pure #ffffff on purpose — a hair of grey and a hair of blue, so
       it reads as painted signage rather than as a screen blowing out.
       ⚠️ This is a TEST value. To go back to the all-blue look, point
       --cf-ink-rest / -soft / -faint at #b3d6ff / rgba(179,214,255,…)
       again; nothing else has to move. */
    --cf-ink-rest: #e9edf0;
    --cf-warm-soft: rgba(233, 237, 240, 0.72);
    --cf-warm-faint: rgba(233, 237, 240, 0.45);

    /* ── THE PAGE GREY IS SPOTIFY'S GREY, 15% DARKER (2026-07-29) ──
       Spotify's dark-mode background is #121212. This is that value ×0.85 —
       #0f0f0f. Earlier this was keyed to the chat's Classic/no-image grey
       (#222222) with a blue lean, then to a near-black cool blue-grey
       (#0e131c/#151b27/#1a2130) before that — all replaced now that a plain
       neutral grey is what's wanted. Three steps, darkest to lightest:
       page → card → nav control. The card and nav steps were tuned against
       the earlier page value, so if you move --cf-bg much further, re-check
       that the ramp still reads.
       ⚠️ --cf-bg is used by BOTH the page and the footer, which now meet on
       a plain seam (the .goo-sep strip that used to cover it is gone). If the
       two stop matching, that seam becomes a visible line. */
    --cf-bg: #0f0f0f;                              /* the page + the footer */
    --cf-surface: #2a2c33;                         /* card / panel slabs */
    --cf-surface-hover: #32353e;                   /* the same slab, engaged */

    /* ── EDGES ARE SHADOW, NOT ACCENT (2026-07-29) ──
       Every border on these pages used to be a translucent wash of the
       accent blue (rgba(179,214,255,.22) at rest, vivid blue on hover).
       On a grey page that reads as a stray glowing outline: the border
       belonged to the palette rather than to the box it was drawn around,
       so a card, a field and a table rule all wore the SAME blue line
       regardless of what they were sitting on or how deep they sat.

       The rule now: an edge is always DARKER than the surface it wraps,
       and it is a grey off the same ramp as that surface — so the line
       reads as the shadowed seam where the slab meets the page, not as
       decoration painted on top. Three steps, matched to the three
       surfaces they belong to:

         --cf-edge         the card slab (#2a2c33) → darker than the page
         --cf-edge-soft    things nested INSIDE a card → a half step, so
                           inner boxes don't cut as hard as outer ones
         --cf-edge-strong  the deepest seam: engaged/settled shapes

       ⚠️ Do not point any of these back at --cf-cold/--cf-warm. If you
       retune --cf-surface, move these with it and keep each one darker
       than its box; that relationship IS the design. Accent blue is now
       reserved for the two places it actually carries meaning: keyboard
       focus on a field, and the fill of a selected chip/button. */
    --cf-edge: #14161a;                            /* resting card border */
    --cf-edge-soft: #1e2026;                       /* border inside a card */
    --cf-edge-strong: #0c0d10;                     /* engaged / deepest seam */
    --cf-edge-active: var(--cf-edge-strong);       /* legacy name, kept in step */
    --cf-text: rgba(255, 255, 255, 0.88);
    --cf-text-soft: rgba(255, 255, 255, 0.62);
    --card-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);

    /* ── SOLID BUTTON PALETTE (2026-07-29) ──
       Every control on these pages is a FILLED shape. The old system gave
       buttons a black/transparent background and signalled state with the
       border and text colour only, which on a black page made them read as
       floating labels rather than buttons — worst over the artwork on
       releases.html, where the "slab" was whatever the render behind it
       happened to be. These four opaque colours are the whole vocabulary:
       primary (pale blue) → the one action that matters, engaged (blue) →
       hover/active, secondary/quiet (solid slate greys) → everything else.
       ⚠️ Keep them opaque. An rgba() fill re-creates the see-through
       button this replaced.

       The two accent fills are the palette's own --cf-warm / --cf-cold, so
       recolouring the pair at the top of this block recolours every button
       on all five pages. The greys are deliberately neutral slate rather
       than tinted, so they keep working whichever way the accent moves. */
    --btn-primary: var(--cf-warm);
    --btn-primary-ink: #05101c;
    --btn-engaged: var(--cf-cold);
    --btn-engaged-ink: #04121f;
    --btn-secondary: #393c44;
    --btn-secondary-hover: #454852;
    --btn-secondary-ink: #e6eeff;
    --btn-quiet: #303338;
    --btn-quiet-hover: #393c44;
    --btn-quiet-ink: #a8bdd8;
    --btn-disabled: #3d3f47;
    --btn-disabled-ink: #78838f;

    /* ── THE NAV'S DARK (2026-07-29) ──
       The five dark pages invert the header: a pale blue bar with dark
       controls on it. That dark is the top step of the grey ramp above —
       the same value the header stylesheet gives --skyui-black. Keep the
       two in step. */
    --cf-nav-slab: #1a1a1a;

    /* legacy names some inline styles/scripts still reference */
    --ink: #ffffff;
    --soft-ink: rgba(255, 255, 255, 0.62);
    --sky: var(--cf-cold);
    --sky-deep: var(--cf-cold);
    --sky-hover: #8ecbff;
    --cf-card-bg: var(--cf-surface);
    --cf-line: var(--cf-edge);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    position: relative;
    margin: 0;
    min-width: 320px;
    font-family: "Quicksand", "Nunito", system-ui, sans-serif;
    background: var(--cf-bg);
    color: var(--cf-text);
    overflow-x: hidden;
    /* the page is one column: the framed box, then the footer under it */
    display: flex;
    flex-direction: column;
}

/* ── THE FOLD RULE ──
   The framed box is ALWAYS at least one full screen tall, so the footer
   begins exactly at the fold and is never partly visible on a page whose
   content came up short.

   ⚠️ The floor belongs HERE, on the frame — not on <body>. A body-level
   `min-height: 100dvh` looks like it does the same job but doesn't: body
   is the frame PLUS the footer, so filling the viewport with both leaves
   the frame only (100dvh − footer height) and the footer's top edge sits
   inside the first screen. That is exactly the peeking bug this replaces.

   ⚠️ 100vh, deliberately NOT 100dvh. On mobile `vh` resolves to the LARGE
   viewport (chrome retracted), which is the only value that still clears
   the fold once the URL bar scrolls away; dvh shrinks with the chrome and
   would let the footer creep back into view, and it re-lays-out mid-scroll
   while doing it. Over-reserving when the chrome is showing is the
   harmless direction.

   Two class names, one behaviour: releases.html keeps `.goo-frame`
   (it is still a painted frame); blog/discover/support/voyager use
   `.page-column`, which is the same layout column with no fluid on it. */
.goo-frame,
.page-column {
    flex: 1 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* <main> eats the slack, so the frame's bottom edge lands at the fold
   rather than hugging short content halfway up the screen */
.goo-frame > main,
.page-column > main { flex: 1 0 auto; }

.cf-footer { flex: 0 0 auto; }

/* ── THE FOOTER IS DARKER THAN THE PAGE, AND IS NOT THE PAGE'S GREY ──
   cometfare-footer.js is site-wide and hard-codes the same #08090c, so this
   is normally a no-op. It is here as the guarantee: the footer is the floor on
   every page and must NOT drift onto --cf-bg when the page body is retuned.
   (It was briefly bound to var(--cf-bg) on 2026-07-29; that is exactly the
   mistake this line now prevents.)
   The value was #000000 until 2026-08-03 — see the long note at the top of
   cometfare-footer.js for why it moved off pure black.

   ⚠️ `body .cf-footer`, not `.cf-footer`. The footer's own rule is
   injected as a <style> at runtime, i.e. AFTER this stylesheet's <link>,
   so a same-specificity selector would lose the tie on load order. The
   extra element bumps this to (0,1,1) and it wins wherever it sits. */
body .cf-footer { background: #08090c; }

/* ── THE LIQUID FRAME ──
   .goo-frame is the positioned host cometfare-goo-frame.js paints in.
   It spans from the very top of the page to the bottom of <main>, so
   the fluid borders the top, both sides, and the content's floor. The
   canvas never catches the pointer and sits under the content. */
.goo-frame { position: relative; isolation: isolate; }

/* ⚠️ The canvas MUST be excluded from the .goo-frame > * rule below.
   Both selectors are specificity (0,1,0), so the later one wins — and
   `position: relative` on the canvas drops it back INTO the flow: it
   becomes a page-tall block at the top that shoves every bit of content
   down by its own height, and its in-flow height then re-triggers the
   ResizeObserver in a loop. Hence :not() here rather than reordering. */
.goo-frame > .goo-frame__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.goo-frame > *:not(.goo-frame__canvas) { position: relative; z-index: 1; }

/* ── THE GOO SEPARATOR IS GONE (2026-08-04) ──
   blog/discover/support each carried a .goo-sep strip — the same band
   engine index.html ran between its colour areas — straddling the seam
   between <main> and the footer. All of them were removed along with
   index's own goo bands; the content now meets the footer on a plain
   join, both being --cf-bg / #08090c. Nothing replaced it, so there is
   no rule here any more. Don't reintroduce one without the markup. */

a { color: inherit; }
img { display: block; max-width: 100%; }

/* ── PAGE HEAD: left-aligned title, no hero, no image ──
   Clears the fixed sky nav, then gets straight to the point. */
.dark-page-head {
    width: min(1180px, calc(100% - clamp(64px, 8vw, 110px)));
    margin: 0 auto;
    padding: clamp(96px, 14vh, 128px) 0 clamp(14px, 2vh, 22px);
    text-align: left;
}

.dark-page-head h1,
.cf-title {
    margin: 0;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: clamp(2rem, 4.6vw, 3.2rem);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.01em;
    color: var(--cf-ink-rest);
}

.dark-page-head p,
.cf-lead {
    margin: 10px 0 0;
    max-width: 62ch;
    font-size: clamp(0.92rem, 1.3vw, 1rem);
    font-weight: 600;
    line-height: 1.55;
    color: var(--cf-text-soft);
}

/* ── PAGE SHELL — compact on purpose ── */
.cf-page-shell,
.sky-shell,
.dark-shell {
    width: min(1180px, calc(100% - clamp(64px, 8vw, 110px)));
    margin: 0 auto;
    padding: clamp(10px, 1.6vh, 18px) 0 clamp(30px, 4vh, 48px);
}

.cf-page-shell > * + * { margin-top: clamp(12px, 1.8vw, 18px); }

/* section headings inside page bodies */
.sky-section-title {
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--cf-ink-rest);
}

/* ── BUTTONS: SOLID FILLS, NO OUTLINES ──
   Secondary is a filled slate slab; `.is-primary` is the accent fill;
   `.is-quiet` is a darker filled slab (still a shape you can see, just a
   receding one). Engaging any of them swaps the FILL, not the border —
   there are no borders left to swap. */
.cf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 10px 18px;
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: var(--btn-secondary);
    color: var(--btn-secondary-ink);
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.cf-btn:hover,
.cf-btn:focus-visible {
    background: var(--btn-secondary-hover);
    color: #ffffff;
}

.cf-btn.is-primary {
    background: var(--btn-primary);
    color: var(--btn-primary-ink);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

.cf-btn.is-primary:hover,
.cf-btn.is-primary:focus-visible {
    background: var(--btn-engaged);
    color: var(--btn-engaged-ink);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.cf-btn.is-quiet {
    background: var(--btn-quiet);
    color: var(--btn-quiet-ink);
}

.cf-btn.is-quiet:hover,
.cf-btn.is-quiet:focus-visible {
    background: var(--btn-quiet-hover);
    color: var(--btn-secondary-ink);
}

/* filled, not faded — `opacity` would make a disabled button translucent
   and put us right back where we started */
.cf-btn:disabled,
.cf-btn:disabled:hover {
    background: var(--btn-disabled);
    color: var(--btn-disabled-ink);
    box-shadow: none;
    cursor: not-allowed;
}

/* ── CHIPS (filters, tag picker, reply actions) ──
   Same rule, pill-shaped: a filled slab at rest, the accent fill when
   selected. Black type on the accent, never accent-on-accent-tint. */
.cf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 6px 13px;
    border-radius: 999px;
    border: none;
    background: var(--btn-quiet);
    color: var(--btn-quiet-ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.cf-chip:hover {
    background: var(--btn-secondary-hover);
    color: var(--btn-secondary-ink);
}

.cf-chip.is-active {
    background: var(--btn-engaged);
    color: var(--btn-engaged-ink);
}

.cf-vote-chip.is-up.is-active { background: #22c55e; color: #04180c; }
.cf-vote-chip.is-down.is-active { background: #ef4444; color: #1e0503; }

/* ── FIELDS ── */
.cf-field,
.cf-select,
.cf-textarea,
.cf-search {
    width: 100%;
    font: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--cf-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cf-edge);
    border-radius: 13px;
    padding: 11px 15px;
    outline: none;
    transition: border-color 0.15s ease;
}

/* Focus is the ONE border that is still allowed to be blue: it is a
   keyboard-accessibility signal, not decoration, and it has to be
   unmistakable against every neutral edge around it. Hover, by contrast,
   deepens the seam — no colour involved. */
.cf-field:focus,
.cf-select:focus,
.cf-textarea:focus,
.cf-search:focus { border-color: var(--cf-cold); }

.cf-field:hover:not(:focus),
.cf-select:hover:not(:focus),
.cf-textarea:hover:not(:focus),
.cf-search:hover:not(:focus) { border-color: var(--cf-edge-strong); }

.cf-field::placeholder,
.cf-textarea::placeholder,
.cf-search::placeholder { color: rgba(233, 237, 240, 0.34); font-weight: 600; }

.cf-textarea { min-height: 96px; resize: vertical; }

.cf-select { cursor: pointer; }
.cf-select option { background: var(--cf-surface); color: var(--cf-text); }

.cf-search { max-width: 300px; }

.cf-field-group { display: grid; gap: 7px; }

.cf-field-label {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--cf-ink-rest);
}

.cf-field-hint {
    font-weight: 600;
    color: var(--cf-text-soft);
    font-size: 0.78rem;
}

/* ── FORM CARD: the black slab with the resting warm edge ── */
.cf-form-card {
    background: var(--cf-surface);
    border: 1px solid var(--cf-edge);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    padding: clamp(16px, 2.4vw, 26px);
    display: grid;
    gap: 12px;
}

.cf-form-card strong { font-size: 1rem; font-weight: 800; color: var(--cf-ink-rest); }

.cf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cf-tag-picker { display: flex; flex-wrap: wrap; gap: 7px; }

.cf-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.cf-actions-form { justify-content: space-between; }

.cf-status-line {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--cf-text-soft);
    line-height: 1.5;
}

/* ── TOOLBAR ── */
.cf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.cf-filters { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── CARD LISTS ── */
.cf-card-list { display: grid; gap: 10px; }

.cf-wide-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 2vw, 22px);
    background: var(--cf-surface);
    border: 1px solid var(--cf-edge);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: clamp(13px, 2vw, 20px);
    transition: border-color 0.16s ease, background 0.16s ease;
}

/* engaged = the slab comes UP: fill one step lighter, seam one step
   deeper. The card gets more present without anything changing hue. */
.cf-wide-card:hover {
    background: var(--cf-surface-hover);
    border-color: var(--cf-edge-strong);
}

.cf-wide-card h2,
.cf-wide-card h3 {
    margin: 0 0 5px;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: var(--cf-ink-rest);
}

.cf-wide-card p {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--cf-text-soft);
}

.cf-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cf-warm-faint);
    white-space: nowrap;
}

/* ── TAGS ── */
.cf-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.cf-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(108, 188, 255, 0.12);
    color: var(--cf-cold);
    font-size: 0.72rem;
    font-weight: 800;
}

.cf-status-tag.is-open { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.cf-status-tag.is-solved { background: rgba(108, 188, 255, 0.16); color: var(--cf-cold); }
.cf-status-tag.is-closed { background: rgba(255, 255, 255, 0.08); color: var(--cf-text-soft); }

/* ── STATES ── */
.cf-empty,
.cf-loading,
.cf-error {
    border-radius: 16px;
    padding: 18px;
    font-weight: 700;
    font-size: 0.88rem;
    text-align: center;
}

/* the empty state is a HOLE, not a card: it sits below the page grey and
   its dashed seam is darker still, so it reads as an unfilled slot */
.cf-empty {
    background: rgba(0, 0, 0, 0.16);
    color: var(--cf-text-soft);
    border: 1px dashed var(--cf-edge);
}

.cf-loading {
    background: rgba(108, 188, 255, 0.07);
    color: var(--cf-cold);
}

.cf-error {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* ── DASHBOARD PANELS ── */
.cf-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cf-panel {
    background: var(--cf-surface);
    border: 1px solid var(--cf-edge);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: clamp(13px, 2vw, 20px);
}

.cf-panel > strong { font-size: 0.95rem; font-weight: 800; color: var(--cf-ink-rest); }

.cf-panel .cf-card-list { margin-top: 10px; }

/* ── DETAIL VIEW ── */
.cf-detail { display: grid; gap: 14px; }

.cf-detail > .cf-btn { justify-self: start; }

.cf-detail-card {
    background: var(--cf-surface);
    border: 1px solid var(--cf-edge);
    border-radius: 20px;
    box-shadow: var(--card-shadow);
    padding: clamp(18px, 3vw, 34px);
}

.cf-detail-card h1 {
    margin: 8px 0 0;
    font-family: "Fredoka", "Quicksand", sans-serif;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--cf-ink-rest);
}

.cf-prose {
    margin-top: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--cf-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── REPLIES ── */
.cf-reply-list { display: grid; gap: 10px; }

/* a reply sits INSIDE a card, so it takes the half-step edge — an inner
   box cutting as hard as the card around it makes the nesting unreadable */
.cf-reply {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--cf-edge-soft);
    border-radius: 14px;
    padding: 12px 14px;
}

/* nesting alternates lighter/darker. The darker step is a tint of the
   page grey, not of black — plain rgba(0,0,0,…) would drain the blue
   back out of the card it sits on. */
.cf-reply .cf-reply {
    margin-top: 9px;
    background: rgba(14, 19, 28, 0.6);
}

.cf-reply .cf-reply .cf-reply { background: rgba(255, 255, 255, 0.035); }

/* these two ARE meaning-carrying outlines (who wrote the reply), the
   sibling of the green staff ring — so they stay coloured while every
   structural edge around them went grey */
.cf-reply.is-admin { box-shadow: inset 0 0 0 1px rgba(108, 188, 255, 0.5); }
.cf-reply.is-staff { box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.45); }

.cf-reply-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cf-warm-faint);
}

.cf-reply-body {
    margin-top: 7px;
    font-size: 0.89rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--cf-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.cf-role-badge {
    display: inline-flex;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(108, 188, 255, 0.18);
    color: var(--cf-cold);
    font-size: 0.66rem;
    font-weight: 800;
    vertical-align: middle;
}

.cf-role-badge.is-staff { background: rgba(34, 197, 94, 0.2); color: #4ade80; }

/* moderation dropdown built inline by the page scripts — its colours
   come from --cf-card-bg / --cf-line above */
.cf-moderation-menu {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* ── THE NAV BAR ──
   Nothing. Deliberately (2026-08-04).

   This file used to repaint .sky-nav into an opaque white bar with dark type
   on these five pages, while index.html kept the transparent scrim bar. The
   two drifted, voyager.html then overrode the override back to transparent,
   and there was no longer one answer to "what does the nav look like".

   There is now exactly one nav, and cometfare-sky-header.css owns all of it.
   Do not add .sky-* rules here — a rule in this file only reaches five of the
   six pages that carry the bar, which is how the drift started. */

/* ── MISC ── */
.cf-hidden { display: none !important; }

@media (max-width: 860px) {
    .cf-dashboard,
    .cf-form-grid { grid-template-columns: 1fr; }

    .cf-wide-card {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .cf-wide-card .cf-actions { justify-content: flex-start; }

    .cf-search { max-width: 100%; }
}