/* ==========================================================================
   skeuo-b-surfaces.css - take B, the per-surface sheet.

   Take B says the page is the product, photographed in a dark studio:
   soft-touch matte plastic with a slightly convex face, a polished chamfer
   catching a cyan rim light, glass over anything that shows a picture, glossy
   pills for anything you press, and labels moulded into the plastic rather
   than printed on it.

   skeuo-b.css owns the shared chrome and re-materialises every --sk-* token,
   so anything in the six A surface sheets that reads a token changes material
   for free. This file only has to deal with what those sheets draw DIRECTLY:
   fixings, brushed grain, knurled bays, rack grooves, machined keycap
   chamfers and lamp sockets. Same objects, same copy, same markup - B
   material.

   Loaded last, unlayered, so nothing here needs !important. Hex literals live
   in the :root block below and nowhere else, under --b2-* names.
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------
     Materials
     -------------------------------------------------------------------- */
  --b2-glass:      #05080f;   /* behind glass: a screen, a code channel  */
  --b2-reading:    #131a27;   /* the flat slab running text sits on      */
  --b2-reading-2:  #0e141f;   /* the same slab, one step back            */
  --b2-slot:       #1b2333;   /* inside a moulded slot, lighter than the face */
  --b2-slot-lit:   #232d42;
  --b2-well:       #070b13;   /* the moulding a slot or a rail is sunk into */
  --b2-thumb-hi:   #e6ecf6;   /* a glossy switch thumb, lit crown        */
  --b2-thumb-lo:   #7a879c;
  --b2-bad:        #ff6b6b;

  /* --------------------------------------------------------------------
     Stacks used by more than one component
     -------------------------------------------------------------------- */

  /* A label moulded INTO the plastic: shadow above the glyph, light below. */
  --b2-deboss:
    0 -1px 1px var(--b-cast-60),
    0 1px 0 var(--b-deboss-dn);

  /* A shallow moulded recess: a slot, a channel, a well. */
  --b2-recess:
    inset 0 0 0 1px var(--b-edge-lo),
    inset 0 3px 7px -2px var(--b-cast-60),
    inset 0 -1px 0 var(--b-edge-mid);

  /* Glass laid over something. One sweep, raking from the upper left, gone
     before the middle of the pane so nothing is ever read through it. */
  --b2-sweep:
    linear-gradient(var(--sk-glare, 168deg),
      var(--b-glass-16) 0,
      var(--b-glass-04) 26%,
      transparent 56%);

  /* A glossy pill you can press. */
  --b2-gloss-face:
    linear-gradient(180deg, var(--b-glass-16) 0, transparent 44%),
    linear-gradient(180deg, var(--b-face-1) 0, var(--b-face-2) 52%, var(--b-face-3) 100%);

  --b2-gloss-shadow:
    inset 0 1px 0 var(--b-glass-34),
    inset 0 0 0 1px var(--b-edge-mid),
    inset 0 -3px 6px -2px var(--b-cast-60),
    0 1px 2px var(--b-cast-40),
    0 8px 18px -7px var(--b-cast-60);

  --b2-gloss-pressed:
    inset 0 3px 8px var(--b-cast-60),
    inset 0 -1px 0 var(--b-glass-08),
    inset 0 0 0 1px var(--b-edge-lo);

  /* --------------------------------------------------------------------
     The A sheets draw their fixings, grain and knurl through these five
     tokens. Emptying them here retires every screw, every brushed field and
     every knurled bay on the site in one move, without editing a shared file
     and without leaving a dead pseudo-element behind: a background-image of
     `none` paints nothing and still satisfies the layer count beside it.
     -------------------------------------------------------------------- */
  --sk-screw:   none;
  --sk-screw-b: none;
  --sk-hole:    none;
  --sk-brush:   none;
  --sk-knurl:   none;

  /* --------------------------------------------------------------------
     The surface sheets own local tokens, re-pointed at B materials.
     -------------------------------------------------------------------- */
  --doc-slab-fallback:   var(--b2-reading);
  --doc-slab-2-fallback: var(--b2-reading-2);
  --doc-slab:            var(--b2-reading);
  --doc-slab-2:          var(--b2-reading-2);
  --doc-chip-ink:        var(--b-cast);
  --doc-groove-dark:     var(--b-chamfer-lo);
  --doc-groove-lit:      var(--b-edge-mid);
  --doc-engrave:         var(--b2-recess);

  --legal-slab:      var(--b2-reading);
  --legal-slab-edge: var(--b-chamfer-lo);
  --legal-plate:     var(--b-face-2);
  --legal-rule:      var(--b-edge-mid);

  --skf-slot:      var(--b2-slot);
  --skf-slot-lit:  var(--b2-slot-lit);
  --skf-slot-deep: var(--b2-slot);
  --skf-track-off: var(--b2-well);
  --skf-thumb:
    linear-gradient(180deg,
      var(--b2-thumb-hi) 0%,
      var(--b2-thumb-lo) 54%,
      var(--b-face-3) 100%);

  --sk-guide-rail-well: var(--b2-well);
  --sk-guide-code:      var(--b2-glass);
}

/* ==========================================================================
   1. Documentation surfaces
   ========================================================================== */

/* The reading slab is flat in both takes. Only the edge changes: a moulded
   plastic lip instead of a machined cut. */
.doc-slab {
  background-color: var(--b2-reading);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow:
    inset 0 1px 0 var(--b-glass-04),
    0 1px 0 var(--b-edge-mid);
}

/* A section heading is moulded into the face, and the rule under it is the
   parting line of that moulding: one dark groove, one lit lip. */
.doc-engraved {
  text-shadow: var(--b2-deboss);
}

.doc-engraved::after {
  background: linear-gradient(180deg,
    var(--b-chamfer-lo) 0 2px,
    var(--b-edge-hi) 2px 3px);
}

/* The name plate: a moulded plate with the chamfer catching the rim light.
   A B plate is bonded, not screwed. */
.doc-nameplate {
  background-color: var(--b-face-2);
  background-image: var(--b2-sweep), var(--b-module-face);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b-module-shadow);
}

.doc-nameplate::after {
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--b-rim-faint);
}

/* The portrait is a print behind glass on a soft-touch tray. */
.hero-media.doc-portrait {
  background-color: var(--b-face-3);
  background-image: var(--b-module-face);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b-module-shadow);
}

.hero-media.doc-portrait img {
  box-shadow:
    inset 0 0 0 1px var(--b-edge-lo),
    0 0 0 1px var(--b-glass-08);
}

/* The non-affiliation line: moulded into the plate, not printed on it. */
.doc-plate {
  background-color: var(--b2-reading-2);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
  text-shadow: var(--b2-deboss);
}

/* The step numeral: debossed into a small glossy pill. */
.doc-steps > li::before {
  color: var(--color-text);
  text-shadow: var(--b2-deboss);
  background-color: var(--b-face-2);
  background-image: var(--b2-gloss-face);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b2-gloss-shadow);
}

/* The question bay: a soft-touch module, not a knurled tray. */
.qa {
  background-color: var(--b-face-3);
  background-image: var(--b-module-face);
  box-shadow: var(--b-module-shadow);
}

.qa > * {
  background-color: var(--b2-reading);
  box-shadow: var(--b2-recess);
}

/* The question is the moulded label on the plate; the answer stays flat. */
.qa h3 {
  text-shadow: var(--b2-deboss);
  border-bottom: 1px solid var(--b-chamfer-lo);
  box-shadow: 0 1px 0 var(--b-edge-mid);
}

/* --------------------------------------------------------------------------
   Data tables. Flat stays flat: the stacking, the overflow fades and the
   stacked-cell labels are untouched, and only the fill under the fades is
   re-tinted so a fade still lands on the colour behind it.
   -------------------------------------------------------------------------- */
.table-wrap {
  border: 1px solid var(--b-chamfer-lo);
  background-color: var(--b2-reading);
  box-shadow:
    inset 0 1px 0 var(--b-edge-mid),
    0 2px 5px var(--b-cast-40);
  background-image:
    linear-gradient(90deg, var(--b2-reading) 40%, transparent),
    linear-gradient(270deg, var(--b2-reading) 40%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--b-cast-60), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--b-cast-60), transparent);
}

.data-table thead th {
  background-color: var(--b2-reading-2);
  border-bottom: 1px solid var(--b-chamfer-lo);
  box-shadow: inset 0 -2px 0 -1px var(--b-edge-mid);
  text-shadow: var(--b2-deboss);
}

/* ==========================================================================
   2. Legal surfaces
   ========================================================================== */

/* The effective-date field, moulded into the hero plate. */
.hero-solo .hero-copy .lede:last-child strong {
  border: 1px solid var(--b-edge-mid);
  background: var(--b2-reading);
  box-shadow: var(--b2-recess);
}

/* On this page: a glass-fronted list in a soft-touch surround. */
.legal-toc {
  border: 1px solid var(--b-chamfer-lo);
  background-color: var(--b-face-2);
  background-image: var(--b-module-face);
  box-shadow: var(--b-module-shadow);
}

.legal-toc > summary { text-shadow: var(--b2-deboss); }

.legal-toc[open] > summary { border-bottom: 1px solid var(--b-chamfer-lo); }

.legal-toc ol {
  border-radius: var(--radius-tight);
  background: var(--b2-reading);
  box-shadow: var(--b2-recess);
  margin: 0 var(--step-3) var(--step-3);
}

/* Running legal text: still a flat slab, now a moulded one. */
.legal-doc .prose,
.legal-doc .qa,
.legal-doc .callout {
  background: var(--b2-reading);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: inset 0 1px 0 var(--b-glass-04);
}

.legal-doc .qa { background-image: none; }
.legal-doc .qa > * { background: none; box-shadow: none; }
.legal-doc .qa > * + * { border-top: 1px solid var(--b-edge-mid); }
.legal-doc .qa h3 { text-shadow: var(--b2-deboss); border-bottom: 0; box-shadow: none; }

/* Danger stays deliberately plain in both takes. */
.legal-doc .callout-danger {
  background: var(--b2-reading);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Thank yous. Each entry is a moulded badge plate: convex face, chamfer rim
   light, no fixings, and the names on a flat slab inside it.
   -------------------------------------------------------------------------- */
.contrib {
  border: 1px solid var(--b-chamfer-lo);
  border-top: 0;
  background-color: var(--b-face-2);
  background-image: var(--b-module-face);
  box-shadow: var(--b-module-shadow);
}

.contrib::before {
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--b-rim-faint);
}

.contrib-head { border-bottom: 1px solid var(--b-edge-mid); }

.contrib-body {
  border: 1px solid var(--b-chamfer-lo);
  background: var(--b2-reading);
  box-shadow: var(--b2-recess);
}

.contrib-figure img {
  border-color: var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
}

/* ==========================================================================
   3. Photographs and the gallery
   ========================================================================== */

/* A print behind glass on a soft-touch tray. */
.photo {
  background-color: var(--b-face-2);
  background-image: var(--b-module-face);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b-module-shadow);
}

/* The fixings are gone; what is left is the hairline where the glass meets
   the tray. */
.photo::before {
  background-image: none;
  box-shadow:
    inset 0 0 0 1px var(--b-glass-08),
    inset 0 1px 0 var(--b-rim-soft);
}

.photo img {
  background: var(--b2-glass);
  box-shadow:
    0 0 0 1px var(--b-chamfer-lo),
    inset 0 2px 8px var(--b-cast-60);
}

/* The specular sweep, still confined to the top edge of the print. */
.photo::after {
  background-image: var(--b2-sweep);
}

/* The caption sits on the tray, and there are no fixings left to clear. */
.photo figcaption { padding-inline: var(--step-2); }

.photo-scroll {
  background: var(--b2-glass);
  box-shadow:
    0 0 0 1px var(--b-chamfer-lo),
    inset 0 2px 8px var(--b-cast-60);
}

/* The rail under a photo row: a moulded ridge in the studio floor rather than
   a length of rack extrusion. */
.photos::before {
  background: linear-gradient(180deg, var(--b-cast) 0, var(--b-face-3) 100%);
  box-shadow:
    inset 0 2px 5px var(--b-cast-60),
    0 1px 0 var(--b-edge-mid);
}

/* ==========================================================================
   4. The story form and the story plates
   ========================================================================== */

.story-form {
  background: var(--b-module-face);
  border: var(--hairline) solid var(--b-chamfer-lo);
  box-shadow: var(--b-module-shadow);
}

.story-form::before {
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--b-rim-faint);
}

.field label { text-shadow: var(--b2-deboss); }

/* A field is a slot moulded into the face: flat fill, lighter than the plastic
   around it so typed text keeps its contrast. */
.field input:not([type='checkbox']):not([type='radio']):not([type='file']),
.field select,
.field textarea {
  /* background-color, not the shorthand: the shorthand also resets
     background-size and background-position, and the select's own arrow is
     three background layers positioned by those two properties. */
  background-color: var(--b2-slot);
  background-image: none;
  border: var(--hairline) solid var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
}

/* The select keeps its own arrow, and the layer under it becomes flat. */
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%),
    linear-gradient(180deg, var(--b2-slot) 0, var(--b2-slot) 100%);
}

/* Outline plus glow, unchanged in kind. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  box-shadow: var(--b2-recess), 0 0 0 4px var(--color-glow), 0 0 18px var(--color-glow-strong);
}

/* An error is still flat: a red edge and a sentence, no change of relief. */
.field input[aria-invalid='true']:not([type='checkbox']):not([type='radio']):not([type='file']),
.field select[aria-invalid='true'],
.field textarea[aria-invalid='true'],
.consent input[aria-invalid='true'] {
  border-color: var(--b2-bad);
  box-shadow: var(--b2-recess), inset 0 0 0 2px var(--b2-bad);
}

.dropzone {
  background: var(--b2-slot);
  border: 2px dashed var(--b-chamfer-hi);
  box-shadow: var(--b2-recess);
}

.file-native:focus-visible + .dropzone {
  box-shadow: var(--b2-recess), 0 0 0 4px var(--color-glow);
}

/* The consent housing: a moulded sub-plate on the form face. */
.consent-set {
  border: var(--hairline) solid var(--b-chamfer-lo);
  background: var(--b-module-face);
  box-shadow:
    inset 0 1px 0 var(--b-edge-hi),
    inset 0 -1px 0 var(--b-edge-lo);
}

.consent-set > legend { text-shadow: var(--b2-deboss); }

.consent-set .consent {
  background: var(--b2-reading-2);
  border-color: var(--b-chamfer-lo);
  box-shadow: inset 0 1px 0 var(--b-glass-04);
}

/* A rocker switch: a moulded track with a glossy thumb that travels. The
   travel, the tick and the focus ring are the A behaviour, kept exactly. */
.consent input[type='checkbox'] {
  background: var(--b2-well);
  border: var(--hairline) solid var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
}

.consent input[type='checkbox']::after {
  background: var(--skf-thumb);
  box-shadow:
    inset 0 1px 0 var(--b-glass-70),
    inset 0 -2px 3px -1px var(--b-cast-60),
    0 1px 2px var(--b-cast-60),
    0 3px 6px -1px var(--b-cast-60);
}

.consent input[type='checkbox']:checked {
  background: linear-gradient(180deg, var(--b-rim-soft) 0, var(--b2-well) 100%);
  border-color: var(--color-accent);
}

.consent input[type='checkbox']:focus-visible {
  box-shadow: var(--b2-recess), 0 0 0 4px var(--color-glow);
}

/* The submit key: a big glossy pill. The fill is the accent the button already
   carries - a primary action is the one thing on the page that is not made of
   plastic - so only the gloss on top of it is added here. */
.key-submit {
  box-shadow: var(--b2-gloss-shadow), 0 0 24px var(--color-glow);
}

.key-submit:active {
  box-shadow: var(--b2-gloss-pressed);
}

/* A published story: a moulded plate with the words on a flat slab. */
.story-plate {
  background: var(--b-module-face);
  border: var(--hairline) solid var(--b-chamfer-lo);
  box-shadow: var(--b-module-shadow);
}

.story-plate::before {
  background-image: none;
  box-shadow: inset 0 0 0 1px var(--b-rim-faint);
}

.story-plate blockquote {
  background: var(--b2-reading);
  box-shadow: var(--b2-recess);
}

.story-plate .story-attrib {
  border-top-color: var(--b-chamfer-lo);
  box-shadow: 0 -1px 0 var(--b-edge-mid);
}

/* ==========================================================================
   5. The card viewer - the device body itself
   ========================================================================== */

.vdemo {
  background-image: var(--b-module-face);
  box-shadow: var(--b-module-shadow);
}

/* Soft-touch plastic, convex face, chamfer rim light. This is the one place on
   the site where the object being drawn IS the product. */
.vd-enclosure {
  /* The face stops at the mid tone rather than running down to the module
     black: the screen inside is near-black, and a bezel that meets it in the
     same value stops reading as a body around a display. */
  background:
    linear-gradient(168deg, var(--b-glass-08) 0, transparent 40%),
    linear-gradient(180deg, var(--b-face-1) 0, var(--b-face-2) 62%, var(--b-face-3) 100%);
  box-shadow: var(--b-module-shadow);
}

/* The chamfer, on the bezel only. The screen paints over it, so nothing at all
   lands on the active display area. */
.vd-enclosure::before {
  box-shadow:
    inset 0 0 0 1px var(--b-edge-hi),
    inset 0 2px 0 -1px var(--b-rim),
    inset 0 -1px 0 var(--b-edge-lo);
  background: linear-gradient(180deg, var(--b-glass-16), transparent 18%);
}

/* The lamp is emissive, so it keeps its glow and loses its machined socket. */
.vd-lamp {
  box-shadow:
    0 0 4px var(--color-accent),
    0 0 12px var(--color-glow-strong),
    0 0 0 2px var(--b-cast-60),
    0 0 0 3px var(--b-glass-08);
}

/* Glass over the screen: the pane itself is clear, and the display area under
   it is untouched. */
.vd-screen {
  background: var(--b2-glass);
  box-shadow:
    var(--b2-recess),
    inset 0 1px 0 var(--b-glass-16);
}

/* The control panel stays deliberately flat and web-like. */
.vd-panel input[type='range']::-webkit-slider-thumb {
  border: 1px solid var(--b-chamfer-lo);
  background: var(--skf-thumb);
  box-shadow: inset 0 1px 0 var(--b-glass-70), 0 2px 5px var(--b-cast-60);
}

.vd-panel input[type='range']::-moz-range-thumb {
  border: 1px solid var(--b-chamfer-lo);
  background: var(--skf-thumb);
  box-shadow: inset 0 1px 0 var(--b-glass-70), 0 2px 5px var(--b-cast-60);
}

/* Preset keys: small glossy pills. */
.vd-key {
  border: var(--hairline) solid var(--b-chamfer-lo);
  background: var(--b2-gloss-face);
  box-shadow: var(--b2-gloss-shadow);
}

.vd-key:active { box-shadow: var(--b2-gloss-pressed); }

.vd-key[aria-pressed='true'] {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 0 var(--b-glass-34), 0 0 14px var(--color-glow);
}

/* ==========================================================================
   6. The flashing console
   ========================================================================== */

.flash-panel {
  background-image: var(--b-module-face);
  background-color: var(--b-face-2);
  border-color: transparent;
  border-top-color: var(--color-accent);
  box-shadow: var(--b-module-shadow);
}

/* A moulded module set into the panel above, with no fixings holding it on. */
.flash-console {
  border: 1px solid var(--b-chamfer-lo);
  background-image: var(--b-module-face);
  background-color: var(--b-face-3);
  box-shadow: var(--b-module-shadow);
}

.flash-screw { display: none; }

.flash-console .flash-sub,
.flash-lamp-label,
.flash-ack-state {
  text-shadow: var(--b2-deboss);
}

/* The status window: real glass over a near-black readout. One sweep along the
   top edge, no scanlines - a coated pane, not a tube. */
.flash-glass {
  background-color: var(--b2-glass);
  background-image: var(--b2-sweep);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow:
    var(--b2-recess),
    inset 0 1px 0 var(--b-glass-16);
}

/* The lamp stays emissive - it is the one thing on the module that makes its
   own light - and loses the countersunk socket around it. */
.flash-lamp-dot {
  box-shadow:
    0 0 8px var(--fl-lamp),
    0 0 18px color-mix(in srgb, var(--fl-lamp) 45%, transparent),
    0 0 0 2px var(--b-cast-60),
    0 0 0 3px var(--b-glass-08),
    inset 0 -1px 2px var(--b-cast-60);
}

.flash-console[data-phase="unsupported"] .flash-lamp-dot {
  background: radial-gradient(circle at 34% 30%,
    var(--b-face-1) 0 40%, var(--b-cast) 100%);
  box-shadow:
    inset 0 2px 3px var(--b-cast-60),
    0 0 0 2px var(--b-cast-60),
    0 0 0 3px var(--b-glass-08);
}

/* The consent gate keeps its housing, moulded rather than knurled. The gate
   line itself, the switch and the locked key are untouched behaviour. */
.flash-install .consent {
  background-color: var(--b2-reading-2);
  background-image: none;
  box-shadow: var(--b2-recess);
}

/* The install key: the biggest glossy pill on the site. */
.flash-key-install:not([disabled]) {
  box-shadow: var(--b2-gloss-shadow), 0 0 24px var(--color-glow);
}

.flash-key-install:not([disabled]):active {
  box-shadow: var(--b2-gloss-pressed);
}

.flash-preflight,
.flash-need {
  border: 1px solid var(--b-chamfer-lo);
  background-color: var(--b-face-3);
  background-image: var(--b-module-face);
  box-shadow:
    inset 0 1px 0 var(--b-edge-hi),
    inset 0 -1px 0 var(--b-edge-lo),
    0 2px 6px -2px var(--b-cast-60);
}

.build-slab,
.flash-banner {
  background-image: none;
  background-color: var(--b2-reading);
  border: 1px solid var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
}

/* Board button names are keycaps: glossy, with a moulded legend. */
.flash-key {
  background-image: var(--b2-gloss-face);
  background-color: var(--b-face-2);
  border-color: var(--b-chamfer-lo);
  box-shadow: var(--b2-gloss-shadow);
  text-shadow: var(--b2-deboss);
}

.flash-steps > li::before {
  box-shadow:
    inset 0 1px 0 var(--b-glass-34),
    inset 0 -2px 3px -1px var(--b-cast-60),
    0 1px 3px var(--b-cast-60);
}

/* The manual route's terminal block: a recessed channel with a flat fill. */
.flash-manual pre {
  background-color: var(--b2-glass);
  background-image: none;
  border-color: var(--b-chamfer-lo);
  box-shadow: var(--b2-recess);
}

/* The copy key on the rim of the channel. */
.flash-copy,
.guide-copy {
  background: var(--b2-gloss-face);
  box-shadow: var(--b2-gloss-shadow);
}

.flash-copy:active,
.guide-copy:active {
  box-shadow: var(--b2-gloss-pressed);
}

.flash-copy[data-done],
.guide-copy[data-done] {
  color: var(--color-accent);
  box-shadow:
    var(--b2-gloss-pressed),
    0 0 0 1px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* ==========================================================================
   7. The guide
   ========================================================================== */

@media (min-width: 60rem) {
  .guide-toc {
    background: var(--b-module-face);
    box-shadow: var(--b-module-shadow);
  }
}

.guide-toc-title { text-shadow: var(--b2-deboss); }

/* The entries sit behind glass, which is what makes the lit bar read as
   travelling inside the device rather than over it. */
.guide-toc nav {
  background: var(--b2-well);
  background-image: linear-gradient(180deg, var(--b-glass-08) 0, transparent 14%);
  box-shadow:
    var(--b2-recess),
    inset 0 1px 0 var(--b-glass-16);
}

.guide-toc-indicator {
  background: var(--color-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 55%, transparent);
}

.guide-toc-phone {
  background: var(--b-module-face);
  border: 0;
  box-shadow: var(--b-module-shadow);
}

.guide-toc-phone > summary { text-shadow: var(--b2-deboss); }

/* The firmware stamp: a moulded plate under the title. */
.guide-stamp {
  background: var(--b2-reading-2);
  box-shadow: var(--b2-recess);
  text-shadow: var(--b2-deboss);
}

/* Keycaps: glossy pills with a moulded legend and a millimetre of travel. */
.guide-key {
  background: var(--b2-gloss-face);
  border: 0;
  box-shadow: var(--b2-gloss-shadow);
  text-shadow: var(--b2-deboss);
}

/* The step chip: a numeral moulded into a glossy pill. */
.guide-chip {
  background: var(--b2-gloss-face);
  box-shadow: var(--b2-gloss-shadow);
  text-shadow: var(--b2-deboss);
}

/* Code is a channel recessed into the plastic. The fill behind the glyphs
   stays flat and near-black; only the lip around it is B. */
.guide-code pre {
  background: var(--b2-glass);
  border: 0;
  box-shadow:
    var(--b2-recess),
    inset 0 1px 0 color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.guide-dl dt,
.guide-time { text-shadow: var(--b2-deboss); }

/* ==========================================================================
   8. Fallbacks

   Nothing above animates: the only transitions in these components are the
   switch thumb's travel and a keycap's press, both already gated on
   prefers-reduced-motion by the sheets that own them, and no rule here
   transitions a box-shadow. The block below holds the transforms still for a
   reader who has asked for less movement.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .guide-key:hover,
  .guide-copy:active,
  .flash-copy:active,
  .vd-key:active,
  .key-submit:active,
  .flash-key-install:not([disabled]):active { transform: none; }
}

/* Every boundary above is a shadow or a gradient, and neither survives here,
   so the ones that carry meaning come back as real borders. */
@media (forced-colors: active) {
  .doc-slab,
  .doc-plate,
  .doc-nameplate,
  .hero-media.doc-portrait,
  .qa,
  .qa > *,
  .table-wrap,
  .legal-toc,
  .legal-toc ol,
  .contrib,
  .contrib-body,
  .photo,
  .photo-scroll,
  .story-form,
  .story-plate,
  .consent-set,
  .vd-enclosure,
  .vd-screen,
  .vd-key,
  .flash-console,
  .flash-glass,
  .flash-preflight,
  .flash-need,
  .build-slab,
  .flash-key,
  .flash-manual pre,
  .flash-copy,
  .guide-toc nav,
  .guide-stamp,
  .guide-key,
  .guide-chip,
  .guide-code pre,
  .guide-copy {
    background-image: none;
    box-shadow: none;
    border: 1px solid CanvasText;
  }

  .doc-engraved,
  .doc-plate,
  .qa h3,
  .doc-steps > li::before,
  .data-table thead th,
  .field label,
  .consent-set > legend,
  .legal-toc > summary,
  .guide-toc-title,
  .guide-toc-phone > summary,
  .guide-stamp,
  .guide-key,
  .guide-chip,
  .guide-dl dt,
  .guide-time,
  .flash-key,
  .flash-console .flash-sub,
  .flash-lamp-label,
  .flash-ack-state { text-shadow: none; }

  .photo::before,
  .photo::after,
  .photos::before,
  .contrib::before,
  .story-form::before,
  .story-plate::before,
  .doc-nameplate::after { display: none; }

  .guide-toc-indicator { background: Highlight; }
}

/* --------------------------------------------------------------------------
   The threshold panel's row rhythm.

   Stacked, the control's 7rem flex basis is read as a row HEIGHT, so a row
   whose label and slider come to 52px was laid out at 112px and the panel read
   as two controls floating in dead bands. The basis only ever meant a width.
   -------------------------------------------------------------------------- */
@media (max-width: 50rem) {
  .vd-controls > .vd-control { flex: 0 0 auto; }
}

/* The stat chips are set in tabular figures already; a floor on the width stops
   a one-character value sitting narrower than the value beside it. */
.fact-value { min-width: 4ch; }