/* ── The phone is dark all the way down ─────────────────────────
   An experiment, kept in a file of its own so it can be taken out again by
   deleting this and the line that links it.

   The site alternates grounds by design: a list is void, a shelf of
   products is bone, and the seam between them is what says one has ended.
   Across a desktop window that reads as composition, because two or three
   of those surfaces are on screen at once and the alternation is visible
   as a pattern. On a phone only one is ever on screen, so the same
   alternation arrives as a series of unrelated screens, and the reader
   crosses a hard edge every time they scroll past a section.

   So below 860px there is one ground. About keeps its own: it is a
   statement set in a frame, the only page on the site whose ground is the
   point, and it is excluded here by :not(.ab) rather than by being
   forgotten.

   HOW THIS WORKS, because it is four lines doing the work of a hundred:
   every light surface on the site draws itself from --bone and --void, and
   every partial ink on it is rgba(var(--rgb-void), a). Swapping those four
   tokens ON the surface turns it over, and every rule inside it follows
   without knowing anything happened. Nothing below names a component.

   The literals those tokens replaced were converted in the same commit as
   this file, and the conversion was verified to change no computed colour
   on any page at any width. That check is what makes the swap trustworthy:
   if a rule still carried a hardcoded ink, it would not flip here and
   would be dark ink left on a dark ground. */

@media (max-width: 860px) {
  /* The surfaces that are light. Measured rather than guessed: these are
     what a sweep for a light background returned on every page type. */
  html:not(.ab) .bags-panel,
  html:not(.ab) .books-panel,
  html:not(.ab) .gear-subs,
  html:not(.ab) .bk-panel--split,
  html:not(.ab) .bk-panel--ess,
  html:not(.ab) .gd-panel,
  /* An opened shelf, on Books and Knowledge and every gear category page.
     Missed by the first sweep because a shut .row-body is zero pixels tall
     and a sweep for light grounds only finds what has a height. Found
     26.09.2026 by opening one. */
  html:not(.ab) .row-body,
  html:not(.ab).paper body,
  .sc body,
  html:not(.ab) .foot {
    --bone: #0C0C0C;
    --void: #EFEBE4;
    --rgb-bone: 12, 12, 12;
    --rgb-void: 239, 235, 228;

    /* These two are declared at :root from the triples above, so they are
       already resolved by the time a rule in here asks for one. Restated
       on the surface so a hairline keeps meaning "a line you can just see
       on this ground" rather than following the swap into invisibility. */
    --hair: rgba(239, 235, 228, 0.18);
    --hair-dark: rgba(239, 235, 228, 0.16);

    background: #0C0C0C;
    color: #EFEBE4;
  }

  /* The ground itself. Every page but About is already void here, so this
     changes nothing on most of them; the scenario decks are the exception,
     because scenario.css gives body a bone ground of its own and there is
     no class on those pages to name them by. A background rather than a
     token swap, so nothing inside the body is turned over twice.

     The Action Plan strip is set the same way and for the same reason: on
     a scenario page it is given a bone ground by a rule in that file, and
     swapping its tokens would have taken its bone lettering with it. */
  html:not(.ab) body { background: #0C0C0C; }
  html:not(.ab) body .plan-ticker { background: #0C0C0C; }

  /* Two things that were never on a side to begin with, and so must not be
     turned over with the surface they happen to sit inside.

     The Action Plan band is signal red with bone on top at every width and
     in both schemes. The strip at the foot of the screen is void with bone
     on top, and so is the menu, which covers the page entirely and brings
     its own ground. All three are descendants of surfaces that have just
     swapped, so without this they inherit the swap and are handed void ink
     on their own grounds. The menu showed it worst: on the paper guides
     and the scenario decks it came out fully inverted, bone panel with
     void lettering, which is the same fault that block in home.css was
     written to fix from the other direction. */
  html:not(.ab) .plan-band,
  html:not(.ab) .plan-band *,
  html:not(.ab) .plan-ticker,
  html:not(.ab) .plan-ticker *,
  html:not(.ab) .menu,
  html:not(.ab) .menu * {
    --bone: #EFEBE4;
    --void: #0C0C0C;
    --rgb-bone: 239, 235, 228;
    --rgb-void: 12, 12, 12;
  }

  /* The chrome scrims exist so a bone wordmark stays legible while it
     crosses a light panel. Nothing is light for it to cross now. */
  html:not(.ab) .on-light .mark,
  html:not(.ab) .on-light .burger {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* One ground under the chrome, not three.

     Once the page has moved, the wordmark and the burger each still had a
     blurred scrim box of their own, AND the band under the whole row
     arrived on top of them. The boxes are 44px tall, the band about 53, and
     the boxes hang a few pixels past it, so whatever scrolled under a
     corner showed through as a blurred grey patch below the burger: white
     Action Plan pages, red reel titles. On a phone it read as a rendering
     fault, which is what it was.

     So when the band is up the boxes step aside, and the band ends in a
     short fade instead of a hard edge, so content passes under the header
     rather than being cut off by it. Before the band arrives the boxes are
     left exactly as they were: that is the cover and the first few pixels
     of every other page, where nothing sits under the chrome. The band
     keeps its own literal void because .on-light hands it var(--bone), and
     on a phone there is no light ground left for that to match.

     Not the scenario decks. Their chrome takes its ink from the card under
     it, dark on the bone cards, and on a dark band that wordmark vanished.
     They keep the chrome they had until they are reworked. */
  html:not(.ab):not(.sc).chrome-on .mark,
  html:not(.ab):not(.sc).chrome-on .burger {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html:not(.ab):not(.sc) body::after {
    height: calc(var(--chrome-h) + 24px);
    background: linear-gradient(to bottom,
      #0C0C0C 0,
      #0C0C0C calc(100% - 24px),
      rgba(12, 12, 12, 0.6) calc(100% - 12px),
      rgba(12, 12, 12, 0) 100%);
  }
}