@charset "UTF-8";
/* ===========================================================================
   Gallop Post — dark.css
   Loaded immediately after style.css. Dark is the site's default theme:
   render_head() writes data-theme="dark" into the markup, and the first-paint
   script only ever rewrites it to "light".

   THIS SHEET IS LOADED UNCONDITIONALLY. Every rule in it therefore carries the
   :root[data-theme="dark"] prefix. A rule left plain here would also apply in
   the light theme, arriving from the later sheet at equal specificity and
   quietly beating its light counterpart — the ordering trap recorded as scar
   #23 in research/08-engine.md. There is no bare selector below.

   Two kinds of rule live here:
     (a) token overrides — the whole palette, swapped;
     (b) component overrides a token swap cannot reach: a literal colour in
         style.css, an alpha blend, a shadow, a hue that has to be re-chosen
         rather than re-lit. Each of those is commented with what it fixes.
   The one dark rule that is NOT here is :root[data-theme="dark"]
   .formpill.is-place; style.css says why it has to sit next to its light twin.

   ---------------------------------------------------------------------------
   MEASURED CONTRAST IN THIS THEME — relative luminance, (L1+0.05)/(L2+0.05).

   body text on page     #E7EAF0 on #0B0D12   16.13
   body text on panel    #E7EAF0 on #141821   14.74
   muted text on page    #8A93A6 on #0B0D12    6.30
   muted text on panel   #8A93A6 on #141821    5.76
   link on page          #4FD1C5 on #0B0D12   10.42
   link on panel         #4FD1C5 on #141821    9.52
   amber on panel        #F2A93B on #141821    8.89
   focus ring            #1F8C84 on #0B0D12    4.76   (not overridden here)
                         #1F8C84 on #141821    4.35
   .is-win row    (text) #E7EAF0 on #19302E   11.59
   .is-win row    (rule) #35C47B on #19302E    6.21
   .is-win row    (bg)   #19302E vs #141821    1.27  — which is why the rule
                                                      carries it, not the tint

   Supporting figures, all computed: text-2 #C2C9D6 on panel 10.67; zebra
   #171C25 holds body text at 13.56 and muted at 5.54; the table head #1B2029
   holds body text at 13.56 and muted at 5.29; the field border #7C8495 reads
   4.73:1 on the panel; the ochre #D98A4A reads 6.50:1 on the panel; ink
   #0B0D12 on the amber fill reads 9.73:1 and on the win fill 8.64:1.

   SPEC.md §2 is followed exactly in this theme: #0B0D12 page, #141821 panels,
   #F2A93B amber, #4FD1C5 cyan, ochre, #35C47B win, #F2555A error, #8A93A6
   void. Every one of them measures above its floor against dark surfaces, so
   nothing in the dark palette needed overriding. The three overrides recorded
   in style.css (amber-as-text, muted, link) are all light-theme fixes.
   =========================================================================== */

/* ====================================================== 1. TOKEN OVERRIDES */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces — ink and panels, SPEC.md §2. */
  --page:     #0B0D12;
  --panel:    #141821;
  --panel-2:  #1B2029;
  --zebra:    #171C25;
  --line:     #262D3A;
  --line-2:   #333B4A;
  --line-3:   #7C8495;   /* field and control borders — 4.73:1 on the panel */

  /* Ink */
  --text:     #E7EAF0;
  --text-2:   #C2C9D6;
  --muted:    #8A93A6;   /* --void from the spec; 6.30:1 here, and it stands */
  --on-accent:#0B0D12;

  /* Accents. On ink there is no need to split amber into a fill colour and a
     text colour the way the light theme has to: #F2A93B measures 8.89:1 on
     the panel, so both tokens take the spec value. */
  --accent:     #F2A93B;
  --accent-text:#F2A93B;
  --link:       #4FD1C5;
  --link-hover: #7FE0D6;   /* 12.53:1 on the page */
  --ochre:      #D98A4A;   /* the spec's #B4662F is 4.13:1 on the panel and
                              holds as a rule, but as a 3px edge beside amber
                              and cyan it reads muddy; lightened on the same
                              hue to 6.50:1, which keeps the track-dirt
                              identity and matches the other two in weight */
  --win:        #35C47B;
  --error:      #F2555A;
  --void:       #8A93A6;

  /* State surfaces */
  --win-row:  #19302E;
  --sel-row:  #273040;
  --hover-row:#1B2029;
  --accent-wash: #1E1A12;   /* amber over ink; body text 14.38:1 */
  --ok-wash:  #13241C;
  --bad-wash: #241417;
  --ok-ink:   #6FDFA4;      /* 9.84:1 on --ok-wash */
  --bad-ink:  #F79094;      /* 7.89:1 on --bad-wash */

  /* --ring is NOT overridden. #1F8C84 was chosen to clear 3:1 against all
     four surfaces in both themes (4.76 / 4.35 here, 4.08 / 3.74 on paper), so
     the ring is the one thing on the site that does not change with the
     theme. A reader who learns what a focus ring looks like here sees the
     same ring on paper. */

  /* Category tag hues, re-chosen rather than re-lit: a dark-on-paper hue at
     these sizes is a smudge on ink. Measured on --panel-2 #1B2029, the
     lowest-contrast surface a tag renders on: News 8.62, Industry 6.98,
     Explainer 8.76, Analysis 7.50, Opinion 8.18, Games 7.26, Culture 7.84,
     Correction 4.84. All clear 4.5:1 at the chip's 10.5px. */
}

:root[data-theme="dark"] .tag--news       { --tag: #7FC4F2; }
:root[data-theme="dark"] .tag--industry   { --tag: #E09A62; }
:root[data-theme="dark"] .tag--explainer  { --tag: #4FD1C5; }
:root[data-theme="dark"] .tag--analysis   { --tag: #C0A3E8; }
:root[data-theme="dark"] .tag--opinion    { --tag: #F2A93B; }
:root[data-theme="dark"] .tag--games      { --tag: #35C47B; }
:root[data-theme="dark"] .tag--culture    { --tag: #F09ABF; }
:root[data-theme="dark"] .tag--correction { --tag: #F2555A; }

/* ================================================ 2. COMPONENT OVERRIDES */
/* Each of these fixes something a token swap cannot reach. */

/* A literal, not a token: style.css sets white on the light theme's #1E7A47
   win fill (5.34:1). The same white on this theme's #35C47B measures 2.25:1 —
   a fail. Ink on it measures 8.64:1. */
:root[data-theme="dark"] .formpill.is-win {
  color: var(--on-accent);
}

/* The livery SVG draws its own 1px rgba(0,0,0,.35) frame, which disappears
   inside a dark livery on a dark panel. The element lends it a light inner
   hairline instead; an inset shadow is not expressible as a colour token. */
:root[data-theme="dark"] .livery {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px rgba(231, 234, 240, .16);
}

/* A shadow tuned for paper is invisible on ink, so the two floating listboxes
   get depth from a darker-than-the-page shadow plus a brighter edge. */
:root[data-theme="dark"] .suggest {
  border-color: var(--line-3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .62);
}

/* The footer sits one step below the page rather than one step above it: on
   paper --panel-2 reads as a raised band, on ink it reads as a lit one, which
   is the wrong signal for the quietest furniture on the site. #0F1319 holds
   muted at 6.04:1, secondary text at 11.19:1 and links at 9.99:1. */
:root[data-theme="dark"] .foot {
  background: #0F1319;
  border-top-color: var(--line-2);
}

/* Same reasoning for the two full-width strips that bracket the footer. */
:root[data-theme="dark"] .signup { background: #0F1319; }
:root[data-theme="dark"] .cycle-strip { background: #10141C; }

/* The sticky masthead sits over scrolling content. On paper an opaque white
   bar is enough; on ink the panel tone separates it from the page beneath,
   and the bottom rule has to be the stronger of the two hairlines to survive
   a dark hero scrolling under it. */
:root[data-theme="dark"] .masthead {
  background: #10141C;
  border-bottom-color: var(--line-2);
}

/* Field and search inputs: on paper they are lighter than the panel they sit
   on, on ink they have to be darker, which is a direction a single --page
   token cannot express for both themes. */
:root[data-theme="dark"] .field input,
:root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] .field select,
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background: #0F1319;
  color: var(--text);
}

/* The sticky table head has to stay opaque over scrolling rows. Raising it
   one step to #242C3A only buys 1.22:1 against the zebra stripe — at these
   luminances a tone step cannot do the job — so the separation is carried by
   the 1px rule beneath it, --line-3 at 3.74:1 on the head, over the 3:1 floor
   for a non-text boundary. The head holds its own label at 11.64:1. */
:root[data-theme="dark"] .table thead th {
  background: #242C3A;
  border-bottom-color: var(--line-3);
}

/* The hero scrim is the same in both themes, because a photograph under it is
   the same in both themes — but on ink the frame may run a little brighter
   without risking the copy. At 40% over #0B0D12, with the gradient's 55% in
   the text zone, the photo keeps only (1-0.55)x0.40 = 18% of the pixel and the
   effective ink alpha is 0.82: worst case, a blown-white sky directly behind
   the copy composites to #37393D, which holds the title at 10.32:1, the amber
   kicker at 5.79:1 and the dim lead at 6.95:1. */
:root[data-theme="dark"] .hero__img { opacity: .40; }

/* A 1.08 brightness lift on an amber fill is nearly invisible on ink. */
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .form button:hover,
:root[data-theme="dark"] .searchpanel__form button:hover,
:root[data-theme="dark"] .hero__search button:hover,
:root[data-theme="dark"] .comments form button:hover,
:root[data-theme="dark"] .signup button:hover {
  filter: brightness(1.14);
}

/* Images carried over from the light-graded set: a hair of dimming stops a
   white-background diagram glowing out of an ink page. Photographs and
   composed frames are already graded dark, so this is deliberately slight
   and never applied to the hero, which has its own opacity above. */
:root[data-theme="dark"] .card__shot img,
:root[data-theme="dark"] .vcard__shot img,
:root[data-theme="dark"] .listc img {
  filter: brightness(.94);
}

/* The skip link lands on the page, not on a panel, and on ink the amber fill
   needs the page's own edge to read as a floating slab rather than a hole. */
:root[data-theme="dark"] .skip { box-shadow: 0 2px 0 0 rgba(0, 0, 0, .5); }