/* =============================================================================
   DARK HOME — the dark edition of index.html, used by /indexdark.html
   =============================================================================

   Small, because site.css was already two-tone. The hero band (.band--deep)
   redefines --ink, --line and --accent for a dark ground and then fixes the
   three places where --ink is used as a BACKGROUND rather than as a text
   colour. This sheet promotes that same token set to the root and applies the
   same three fixes page-wide. There is no second palette here — it is the
   palette the design system already had, asked for at full page scale.

   Scoped to html[data-dark] and loaded last, so the light edition cannot be
   regressed by anything in this file, and indexdark.html can be regenerated
   from index.html (mkdarkhome.py) without re-doing any of it.

   THE ONE RULE when adding to this file: if a declaration reads a token, it
   needs nothing here. Only literals need answering, and the literals worth
   hunting are the ones where white or #FAFAFA is a SURFACE. `grep -n '#fff\|
   255, *255, *255\|#FAFAFA' assets/css/site.css` is the list.
   ========================================================================== */

html[data-dark] {
    /* Lifted verbatim from .band--deep — same values, same reasoning. --ink-55
       stays the quieter of the two inks and still clears the body-text floor
       against the deep ground. */
    --ink:        #FFFFFF;
    --ink-77:     rgba(255, 255, 255, .72);
    --ink-55:     rgba(255, 255, 255, .58);
    --line:       rgba(255, 255, 255, .16);
    --line-soft:  rgba(255, 255, 255, .09);
    /* --line-dark is the inverse token: it exists for hairlines drawn ON the
       deep band while the page is light. With the page itself dark it has to
       flip the other way or those rules draw white on white. */
    --line-dark:  rgba(30, 38, 43, .22);

    /* #C2410C is a print red chosen for white paper; on the deep ground it goes
       to the warm mark the console uses, which is what .band--deep already
       switches to and what holds at the 1px the eyebrow rules draw. */
    --accent:     #F97316;

    /* --------------------------------------------------------------------
       THE TONAL LADDER. This is the part that is not a token flip.

       The light page has three grounds, and the gaps between them are what
       give the document its rhythm: #ffffff, then #FAFAFA for the quiet
       alternating band, then #11161C for the deep band — a whisper and then a
       full inversion. Flip the tokens naively and all three collapse onto the
       same near-black: every section boundary disappears and the page reads as
       one undifferentiated column.

       So the ladder is rebuilt rather than inverted. Same shape as the light
       one — ground, a whisper above it, then a clear step — just travelling
       upward in lightness instead of down:

           --paper      #0C1116   the page
           .band--tint  #0F151B   the whisper   (was #FAFAFA)
           --deep       #1A222C   the step      (was #11161C)

       --deep is raised rather than lowered because on a dark page the way to
       make a band stand out is to lift it toward the light, not push it further
       into the black where the type has nothing to sit on. -------------------- */
    --paper:      #0C1116;
    --deep:       #1A222C;
    --deep-soft:  #212A35;
    --muted:      #8A9199;   /* #717171 is 3.0:1 on the deep ground */

    color-scheme: dark;
    background: var(--paper);
}

html[data-dark] body { background: var(--paper); color: var(--ink-77); }

/* --------------------------------------------------------------- bands ---- */
/* .band--deep keeps its own tokens and its own #11161C, which now reads as a
   raised panel rather than as the dark thing on a light page. The two literal
   light grounds have to be answered by hand: #FAFAFA on the tint band and
   #FCFCFC on the strips. Two shades of near-white that a grep for one of them
   will not find — the audit that catches this is "any opaque surface over
   40000px² whose luminance is above .6", not a search for a colour. */
html[data-dark] .band--tint { background: #0F151B; }
/* The strips band sits between two content sections on the light page and reads
   as a divider; it takes the whisper too, not the step. */
html[data-dark] .strips     { background: #0F151B; border-color: var(--line); }

/* ----------------------------------------------------------------- nav ---- */
/* rgba(255,255,255,.86) over a light page becomes its mirror. The blur stays:
   it is what separates the bar from the type running under it. */
html[data-dark] .nav {
    background: rgba(12, 17, 22, .86);
    border-bottom-color: var(--line-soft);
}
html[data-dark] .nav__links a::after { background: var(--ink); }

/* ------------------------------------------------- ink-as-a-background ---- */
/* The three places site.css itself calls out, plus the two buttons. In each,
   --ink is the FILL and the text on it must be the ground colour — so on a dark
   page the fill goes white and the label goes dark, which is the exact inverse
   of the light edition and the exact behaviour .band--deep already has. */
/* The skip link is the same pattern and the easiest one to miss, because it
   lives at left:-9999px until a keyboard user focuses it — it is invisible to
   every check that only looks at what is on screen, and it is the very first
   thing that user reaches. background:var(--ink) + color:#fff was white on
   white here. */
html[data-dark] .skip                         { background: var(--ink); color: var(--paper); }
html[data-dark] .btn                          { background: var(--ink); color: var(--paper); }
html[data-dark] .btn:hover                    { background: rgba(255, 255, 255, .86); color: var(--paper); }
html[data-dark] .btn--ghost                   { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-dark] .btn--ghost:hover             { background: var(--ink); color: var(--paper); border-color: var(--ink); }
html[data-dark] .filter[aria-pressed="true"]  { background: var(--ink); border-color: var(--ink); color: var(--paper); }
html[data-dark] .practice:hover               { background: var(--deep-soft); }
html[data-dark] .entry:hover                  { background: var(--deep-soft); }
html[data-dark] .practice:hover .practice__i  { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* .btn--outline is the hero's, already white-on-dark, and its hover fills white
   with dark type. Both are correct here — but it is now used against the page
   ground as well as the hero, so the hover's --ink reference has to resolve to
   the ground, not to white-on-white. */
html[data-dark] .btn--outline:hover           { background: #fff; color: #11161C; border-color: #fff; }

/* ------------------------------------------------------ the edition pill -- */
/* The track is an ink wash on paper; here it is a white wash on ink. The thumb
   keeps --ink as its fill, which is now white, so the lit glyph must go dark. */
html[data-dark] .mode-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
    border-color: var(--line);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-dark] .mode-pill__thumb {
    background: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
}
html[data-dark] .mode-pill__seg          { color: var(--ink-55); }
html[data-dark] .mode-pill__seg.is-on    { color: #11161C; }

/* ---------------------------------------------------------------- menu ---- */
html[data-dark] .menu__scrim   { background: rgba(0, 0, 0, .58); }
html[data-dark] .menu__panel   { background: #0F151B; box-shadow: -18px 0 60px rgba(0, 0, 0, .5); }
html[data-dark] .menu__q       { background: rgba(255, 255, 255, .05); color: var(--ink); }
html[data-dark] .menu__q::placeholder { color: var(--ink-55); }
html[data-dark] .menu__clear:hover,
html[data-dark] .menu__tile:hover     { background: rgba(255, 255, 255, .07); }
html[data-dark] .menu__pin     { background: rgba(249, 115, 22, .1); }
html[data-dark] .menu__row     { color: var(--ink-77); }
html[data-dark] .menu__row:hover { color: var(--ink); }

/* The News Hub thumbnail is a drawing of a page. On the light edition it is a
   drawing of the paper hub; here it should be a drawing of the console, or it
   is a white rectangle advertising a black page. */
html[data-dark] .menu__thumb        { background: var(--deep); border-color: var(--line); }
html[data-dark] .menu__thumb .t-ink  { fill: #FFFFFF; }
html[data-dark] .menu__thumb .t-line { fill: rgba(255, 255, 255, .18); }
html[data-dark] .menu__thumb .t-card { fill: rgba(255, 255, 255, .07); }
html[data-dark] .menu__thumb .t-acc  { fill: var(--accent); }
/* The record's centre hole. It has to match the PLATE it is punched through,
   and in dark the plate is --deep (line 147), not --paper — using --paper here
   painted the hole two steps darker than the thumbnail around it, which reads as
   a dark dot on the label rather than a hole. */
html[data-dark] .menu__thumb .t-bg   { fill: var(--deep); }
html[data-dark] .menu__row--thumb:hover .menu__thumb {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------- misc ----- */
/* Shadows are drawn for a white page; on a dark one they read as grime unless
   they get darker and tighter. */
html[data-dark] .entry, html[data-dark] .practice, html[data-dark] .card {
    box-shadow: none;
}
html[data-dark] ::selection { background: rgba(249, 115, 22, .3); color: #fff; }
html[data-dark] ::-webkit-scrollbar-track { background: #0C1116; }
html[data-dark] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }
/* The strip that crawls the property list: its chips are paper cards. */
html[data-dark] .strip-chip, html[data-dark] .chip {
    background: rgba(255, 255, 255, .04);
    border-color: var(--line);
    color: var(--ink-77);
}

/* The strip chip hover is a literal #fff in site.css — on paper that is "the
   chip becomes paper", which is right. On the dark ground it painted the
   chip's white ink onto a white pill: a complete whiteout under the cursor.
   A dark hover LIFTS the chip toward the light instead of handing it a sheet
   of paper — same rule as the band ladder. */
html[data-dark] .s-chip:hover {
    background: rgba(255, 255, 255, .09);
    border-color: var(--ink);
}


/* The roulette pill follows the chips: on the dark ground a hover lifts. */
html[data-dark] .roulette:hover {
    background: rgba(255, 255, 255, .07);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}


/* Back-to-top on the dark ground: a lifted disc, not a paper one. */
html[data-dark] .to-top {
    background: var(--deep);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

/* Its mirror, the lower-left roulette, takes the same lift. */
html[data-dark] .to-roll {
    background: var(--deep);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}