/* Palette and geometry measured from the 2026 driver.
   See docs/superpowers/specs/2026-08-18-step1-exam-ui-design.md */
:root {
  --chrome:        #004976;
  --chrome-accent: #5490cc;
  --panel:         #d7dced;
  --row-alt:       lightgray;
  --dark-accent:   #94EAFF;
  --dark-muted:    #d6d6d6;
  --hover-dark:    #325B77;
  --dialog-head:   #0A8CBD;
  --alert:         red;

  /* 1vw as the ITEM sees it. The driver renders the item in an iframe, so
     every `vw` in reference/itd-item-frame.txt resolves against that frame,
     not against the 1280px window: reference/itd-measure.json's
     `iframe#ElementDisplayFrame` measures 1169.47px wide, so 1vw = 11.6947px.
     We render inline with no iframe, which is exactly why this cannot be
     written as a literal `vw` — `56vw` here would resolve to 716.8px against
     the window instead of the driver's 654.9px. Every item-column width is
     calc()'d off this token so the citation survives in one place. */
  --item-vw:     11.6947px;

  --rail-w:      104px;
  --rail-row-h:  20px;
  --navseq-w:    27px;
  --header-h:    61px;
  --footer-h:    60px;
  --cpbutton-h:  57px;

  --font-shell:  "Open Sans", Verdana, sans-serif;
  /* Bare Arial, no fallback list: the driver's computed value for button text
     is exactly "Arial", and the geometry gate compares font-family exactly. */
  --font-button: Arial;
  --font-item:   "Arial Unicode MS", Arial, Helvetica, "Lucida Sans Unicode", sans-serif;

  --ground:      #fff;
  --ink:         #000;
  --rail-bg:     #fff;
  --rail-ink:    #000;
  --sel-bg:      var(--chrome);
  --sel-ink:     #fff;
}

html.white-on-black {
  --ground:   #000;
  --ink:      #fff;
  --rail-bg:  #000;
  --rail-ink: #fff;
  --sel-bg:   var(--dark-accent);
  --sel-ink:  #000;
  --row-alt:  #444;
}

/* Two INDEPENDENT things move when the reader changes Resize Text, and the
   driver moves them with two independent mechanisms:

   --zoom      how much bigger the type gets. Ours; applied as `zoom` on
               #itemBody (css/item.css). The driver's own text-scaling
               mechanism is not in any captured file, so this stays as it was.
   --item-cols how wide the text COLUMN gets, counted in item-frame vw.
               56 / 66 / 80 / 98, straight off reference/itd-item-frame.txt:
               2557-2560. NOT derivable from --zoom: the driver's ladder is
               1x / 1.18x / 1.43x / 1.75x, not 1x / 1.25x / 1.5x / 2x. Before
               this token existed the column was a single fixed percentage,
               so raising the zoom made the line LENGTH shrink (measured:
               567 -> 562 -> 557 -> 547px) while the driver widens it. */
html.zoom100 { --zoom: 1;    --item-cols: 56; }
html.zoom125 { --zoom: 1.25; --item-cols: 66; }
html.zoom150 { --zoom: 1.5;  --item-cols: 80; }
html.zoom200 { --zoom: 2;    --item-cols: 98; }