/* ==========================================================================
   DESIGN EXPERIMENT - Direction A, "bench instrument" (heavy pass)

   The page is a rack of test-bench gear. Every surface is a brushed
   dark-aluminium panel with a machined edge and fixings in its corners, every
   screen is inset glass behind a bezel, every button is a physical control that
   travels when it is pressed, and every module carries a lit indicator.

   This file only ever overrides. It is linked unlayered AFTER the layered site
   sheets, so an unlayered rule beats every layered one at the same specificity
   and nothing here needs !important and nothing shared has to be edited.

   The brand is untouched: the navy ground, the cyan accent reserved for
   emissive things, 16px corners, 100px pill buttons, the glow, Outfit on the
   headings, DM Sans in the body, JetBrains Mono on the labels.

   Textures are gradients, shadow stacks, masks and inline SVG only. No images.
   Hex literals are confined to the :root block below, and every one of them is
   derived from the existing palette rather than invented. One light source, top
   left, expressed once in the tokens and never hand-written afterwards.
   ========================================================================== */

:root {
  /* The aluminium ramp. Cool navy-grey, sampled between --ink-600 and
     --ink-900 so a panel still reads as the same family as the page. This pass
     widens the ramp at the top: a panel has to be visibly lighter than the
     ground or none of the edge lighting reads. */
  --sk-metal-top:  #41506d;   /* the lit crown of a bevel */
  --sk-metal-hi:   #33405a;   /* the lit upper face */
  --sk-metal:      #262f46;   /* the panel body */
  --sk-metal-lo:   #1a2131;   /* the shaded lower face */
  --sk-metal-deep: #070a11;   /* the gap between panels */
  --sk-cast:       #05070c;   /* the casting under everything */

  /* Edge lighting. One cool-white highlight and one true shadow, both at
     hairline width so an edge reads as machined rather than as a border. */
  --sk-edge-lit:   rgba(212, 228, 255, 0.34);
  --sk-edge-lit-2: rgba(212, 228, 255, 0.14);
  --sk-edge-lit-3: rgba(212, 228, 255, 0.07);
  --sk-edge-dark:  rgba(3, 5, 9, 0.9);

  /* Glass. What sits in front of a screen: near-black at rest, with one raking
     highlight across the top left. */
  --sk-glass:      #04060b;
  --sk-glass-lit:  rgba(214, 234, 255, 0.16);
  --sk-scanline:   rgba(0, 0, 0, 0.26);

  /* Rubber. The feet under a module and the moulded skirt of a button. */
  --sk-rubber:     #0a0e17;
  --sk-rubber-hi:  #1b2230;

  /* The indicator lamp, lit and dark. Both are the brand cyan. */
  --sk-led-on:  var(--color-accent);
  --sk-led-off: color-mix(in srgb, var(--color-accent) 20%, #080c14);

  /* The one warm value on the page: the hazard rule on the safety notice. */
  --sk-hazard: #d9a441;

  /* Pure white and pure black exist only as the two ends of a color-mix, never
     as a shadow or a highlight of their own. */
  --sk-white: #ffffff;
  --sk-black: #000000;

  /* The moulded cable leaving the chassis: a dark jacket with one lit side. */
  --sk-jacket:    #05080e;
  --sk-jacket-hi: #232b39;
  --sk-jacket-lo: #0a0e16;

  /* The near-black well behind a lit readout, and the lip of a casting. */
  --sk-well:      #03050a;
  --sk-well-2:    #0a1018;
  --sk-well-warm: #0b111c;
  --sk-lamp-dead: #04070d;
  --sk-lip:       #0d121a;

  /* The sticker stock in the footer. */
  --sk-sticker:     #c9cdd4;
  --sk-sticker-ink: #10151f;

  /* ----- Reusable stacks. Declaring them once is what keeps thirty
     components agreeing about which way the light is coming from. ----- */

  /* Brushed grain. Three periods stacked so the streaks never visibly tile. */
  --sk-brush:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.030) 0 1px, rgba(0,0,0,0.045) 1px 2px),
    repeating-linear-gradient(90deg,
      rgba(255,255,255,0.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,
      transparent 0 2px, rgba(0,0,0,0.035) 2px 5px);

  /* Knurling. Crossed hatch, kept under the alpha at which it fights text. */
  --sk-knurl:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg,
      rgba(0,0,0,0.10) 0 1px, transparent 1px 4px);

  /* The face of a raised panel: a sheen falling from the top left over a
     top-to-bottom metal ramp. */
  --sk-panel-face:
    linear-gradient(157deg,
      rgba(216,232,255,0.10) 0,
      rgba(216,232,255,0.030) 22%,
      transparent 48%,
      rgba(0,0,0,0.14) 100%),
    linear-gradient(180deg,
      var(--sk-metal-top) 0,
      var(--sk-metal-hi) 4%,
      var(--sk-metal) 20%,
      var(--sk-metal) 74%,
      var(--sk-metal-lo) 100%);

  /* A darker plate, for things that are screwed ONTO a panel. */
  --sk-plate-face:
    linear-gradient(157deg,
      rgba(216,232,255,0.06) 0, transparent 44%,
      rgba(0,0,0,0.20) 100%),
    linear-gradient(180deg,
      var(--sk-metal-hi) 0, var(--sk-metal) 10%, var(--sk-metal-lo) 68%, var(--sk-metal-deep) 100%);

  --sk-bevel:
    inset 0 1px 0 var(--sk-edge-lit),
    inset 1px 0 0 var(--sk-edge-lit-2),
    inset -1px 0 0 var(--sk-edge-lit-2),
    inset 0 -2px 0 var(--sk-edge-dark);

  --sk-lift:
    0 1px 0 var(--sk-edge-dark),
    0 3px 4px rgba(0,0,0,0.55),
    0 10px 22px rgba(0,0,0,0.55),
    0 28px 60px rgba(0,0,0,0.45);

  --sk-recess:
    inset 0 3px 9px rgba(0,0,0,0.85),
    inset 0 1px 0 rgba(0,0,0,0.9),
    inset 0 -1px 0 var(--sk-edge-lit-2);

  /* A screw head, drawn once as an SVG so the slot and the countersink come
     for free and one background layer carries the whole fixing. Two slot
     angles so a row of them does not read as a repeat. */
  --sk-screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='d' cx='36%25' cy='30%25' r='78%25'%3E%3Cstop offset='0' stop-color='%23d3ddef'/%3E%3Cstop offset='.28' stop-color='%23879ab8'/%3E%3Cstop offset='.66' stop-color='%23485672'/%3E%3Cstop offset='1' stop-color='%23151b28'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10.4' r='9.4' fill='%23000308' opacity='.75'/%3E%3Ccircle cx='10' cy='10' r='9' fill='%230d1320'/%3E%3Ccircle cx='10' cy='9.7' r='7.6' fill='url(%23d)'/%3E%3Cpath d='M5.2 12.6 13.2 6.4' stroke='%230a0f19' stroke-width='2.4' stroke-linecap='round' opacity='.92'/%3E%3Cpath d='M5.7 13.4 13.7 7.2' stroke='%23aebbd2' stroke-width='1' stroke-linecap='round' opacity='.3'/%3E%3C/svg%3E");

  --sk-screw-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='e' cx='36%25' cy='30%25' r='78%25'%3E%3Cstop offset='0' stop-color='%23d3ddef'/%3E%3Cstop offset='.28' stop-color='%23879ab8'/%3E%3Cstop offset='.66' stop-color='%23485672'/%3E%3Cstop offset='1' stop-color='%23151b28'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10.4' r='9.4' fill='%23000308' opacity='.75'/%3E%3Ccircle cx='10' cy='10' r='9' fill='%230d1320'/%3E%3Ccircle cx='10' cy='9.7' r='7.6' fill='url(%23e)'/%3E%3Cpath d='M6.4 5.6 13.9 12.8' stroke='%230a0f19' stroke-width='2.4' stroke-linecap='round' opacity='.92'/%3E%3Cpath d='M6 6.4 13.5 13.6' stroke='%23aebbd2' stroke-width='1' stroke-linecap='round' opacity='.3'/%3E%3C/svg%3E");

  /* A rack-ear mounting hole: a punched hole with a lit lower lip. */
  --sk-hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='5.4' fill='%23020409'/%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='%23c8d6ef' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M3.4 10.4A5.4 5.4 0 0 0 12.6 10.4' fill='none' stroke='%23d6e2f7' stroke-opacity='.2' stroke-width='1.2'/%3E%3C/svg%3E");

  /* Film grain over the whole page, one layer, very low alpha. */
  --sk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   The bench itself.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-page);
  background-image:
    radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0, transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.022) 0, transparent 30%),
    var(--sk-brush);
  background-attachment: fixed;
}

/* One grain pass over everything. Pointer-transparent, and dropped entirely in
   forced colours. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--sk-grain);
  background-size: 160px 160px;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* Engraved and embossed lettering. Engraved carries a light edge BELOW it,
   embossed carries the light above. Never applied to body copy. */
.eyebrow,
.fact-label,
.card-foot,
.section-note,
.footer h2,
.screenshot figcaption,
.shots-swipe,
.callout-title {
  text-shadow: 0 1px 0 rgba(255,255,255,0.07), 0 -1px 1px rgba(0,0,0,0.85);
}

h1, h2, h3, .fact-value, .wordmark {
  text-shadow: 0 1px 0 rgba(0,0,0,0.7), 0 -1px 0 rgba(255,255,255,0.06);
}

/* Links read as etched labels: the underline is a hairline of accent light
   sitting in the cut rather than a browser underline. */
.prose a,
.card-body a {
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-accent) 45%, transparent);
}
.prose a:hover,
.card-body a:hover {
  text-decoration: none;
  box-shadow: 0 1px 0 var(--color-accent), 0 2px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

:is(a, button, summary, .screenshot[role='button']):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Masthead - the rack rail across the top of the bench.
   -------------------------------------------------------------------------- */
.masthead {
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face), var(--sk-brush);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit),
    inset 0 -3px 6px rgba(0,0,0,0.5),
    0 3px 0 rgba(0,0,0,0.6),
    0 14px 30px rgba(0,0,0,0.55);
}

/* Rack ears: a darker strip at each end of the rail. */
.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.55) 0 34px, transparent 34px),
    linear-gradient(270deg, rgba(0,0,0,0.55) 0 34px, transparent 34px),
    linear-gradient(90deg, transparent 33px, var(--sk-edge-lit-2) 33px 34px, transparent 34px),
    linear-gradient(270deg, transparent 33px, var(--sk-edge-lit-2) 33px 34px, transparent 34px);
}

/* Four mounting holes in the ears. */
.masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--sk-hole), var(--sk-hole), var(--sk-hole), var(--sk-hole);
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position:
    11px 24%, 11px 76%,
    calc(100% - 11px) 24%, calc(100% - 11px) 76%;
}

.masthead-inner { position: relative; z-index: 1; padding-inline: var(--step-5); }

/* On a phone the rail has no room for a full-width ear, so it narrows rather
   than running under the wordmark. */
@media (max-width: 47.999rem) {
  .masthead::before {
    background-image:
      linear-gradient(90deg, rgba(0,0,0,0.55) 0 18px, transparent 18px),
      linear-gradient(270deg, rgba(0,0,0,0.55) 0 18px, transparent 18px),
      linear-gradient(90deg, transparent 17px, var(--sk-edge-lit-2) 17px 18px, transparent 18px),
      linear-gradient(270deg, transparent 17px, var(--sk-edge-lit-2) 17px 18px, transparent 18px);
  }
  .masthead::after {
    background-size: 10px 10px;
    background-position: 5px 26%, 5px 74%, calc(100% - 5px) 26%, calc(100% - 5px) 74%;
  }
  .masthead-inner { padding-inline: var(--step-3); }
}

/* The wordmark is cut into the rail: dark fill, light shadow below. */
.wordmark {
  color: color-mix(in srgb, var(--color-text) 62%, var(--sk-metal-deep));
  text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.9);
}
.wordmark:hover { color: color-mix(in srgb, var(--color-text) 78%, var(--sk-metal-deep)); }

/* The power lamp beside it, in a countersunk socket. */
.wordmark-mark {
  width: 0.6rem;
  height: 0.6rem;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--sk-led-on) 45%, var(--sk-white)) 0 24%,
    var(--sk-led-on) 58%,
    color-mix(in srgb, var(--sk-led-on) 50%, var(--sk-black)) 100%);
  box-shadow:
    0 0 6px var(--sk-led-on),
    0 0 18px color-mix(in srgb, var(--sk-led-on) 60%, transparent),
    0 0 0 2px rgba(0,0,0,0.75),
    0 0 0 3px var(--sk-edge-lit-2),
    inset 0 -1px 2px rgba(0,0,0,0.5);
}

/* --------------------------------------------------------------------------
   The online counter, as a lit readout behind glass.
   -------------------------------------------------------------------------- */
.devices-online {
  background: linear-gradient(180deg, var(--sk-glass) 0, var(--sk-well-warm) 100%);
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-tight);
  padding: 0.3rem 0.62rem;
  box-shadow: var(--sk-recess), 0 1px 0 var(--sk-edge-lit-2);
}

.devices-online #devices-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--sk-led-on);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--sk-led-on) 85%, transparent),
    0 0 18px color-mix(in srgb, var(--sk-led-on) 40%, transparent);
}

.online-dot {
  box-shadow: 0 0 7px var(--sk-led-on), 0 0 0 2px rgba(0,0,0,0.7);
}

/* The menu button is a keycap in the rail. */
.nav-toggle {
  border-radius: var(--radius-tight);
  background-image: var(--sk-panel-face), var(--sk-brush);
  background-color: var(--sk-metal);
  border: 1px solid var(--sk-cast);
  box-shadow: var(--sk-bevel), 0 2px 0 var(--sk-rubber), 0 4px 10px rgba(0,0,0,0.5);
}
.nav-toggle:active {
  transform: translateY(2px);
  box-shadow: inset 0 3px 7px rgba(0,0,0,0.75);
}

/* --------------------------------------------------------------------------
   Buttons - real controls with travel.

   The stack is a moulded skirt under the key, the shadow it casts on the
   panel, a lit top bevel and a shaded bottom bevel. Pressing removes the skirt
   and the cast shadow and moves the face down by the same amount, so the
   travel is genuine rather than a colour change.
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  border: 1px solid var(--sk-cast);
  font-weight: 600;
  transition:
    box-shadow 90ms ease-out,
    transform 90ms ease-out,
    background-color var(--dur) var(--ease-spring),
    color var(--dur) var(--ease-spring);
}

/* The keycap chamfer: a 1px inset face lit from the top. */
.btn::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.16) 0, rgba(255,255,255,0.02) 42%, transparent 60%);
}

/* The primary key is backlit. */
.btn-primary {
  background-image: linear-gradient(180deg,
    color-mix(in srgb, var(--color-accent) 78%, var(--sk-white)) 0,
    var(--color-accent) 44%,
    var(--color-accent-dim) 100%);
  color: var(--color-page);
  border-color: color-mix(in srgb, var(--color-accent-dim) 60%, var(--sk-black));
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -3px 4px rgba(0,0,0,0.3),
    0 5px 0 color-mix(in srgb, var(--color-accent-dim) 40%, var(--sk-black)),
    0 8px 18px rgba(0,0,0,0.6),
    0 0 28px var(--color-glow-strong);
}

.btn-primary:hover {
  transform: none;
  color: var(--color-page);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -3px 4px rgba(0,0,0,0.3),
    0 5px 0 color-mix(in srgb, var(--color-accent-dim) 40%, var(--sk-black)),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 44px var(--color-glow-strong);
}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 1px 0 color-mix(in srgb, var(--color-accent-dim) 40%, var(--sk-black)),
    0 0 16px var(--color-glow);
}

/* The secondary action is a rocker in the panel's own metal. */
.btn-secondary {
  background-image:
    linear-gradient(180deg, rgba(226,238,255,0.18) 0, rgba(226,238,255,0.03) 42%, rgba(0,0,0,0.34) 100%),
    var(--sk-brush);
  background-color: var(--sk-metal-hi);
  color: var(--color-text);
  border-color: var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit),
    inset 0 -3px 4px rgba(0,0,0,0.45),
    0 5px 0 var(--sk-rubber),
    0 8px 16px rgba(0,0,0,0.55);
}

.btn-secondary:hover {
  transform: none;
  background-color: var(--sk-metal-hi);
  border-color: var(--sk-cast);
  color: var(--color-text);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit),
    inset 0 -3px 4px rgba(0,0,0,0.45),
    0 5px 0 var(--sk-rubber),
    0 8px 18px rgba(0,0,0,0.55),
    0 0 22px var(--color-glow);
}

.btn-secondary:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,0.75),
    inset 0 -1px 0 var(--sk-edge-lit-2),
    0 1px 0 var(--sk-rubber);
}

@media (prefers-reduced-motion: reduce) {
  /* No transition at all. A 90ms box-shadow fade is still animation, and the
     pressed state is a state, not a movement: it can simply be there. */
  .btn { transition: none; }
  .btn:active { transform: none; box-shadow: inset 0 4px 8px rgba(0,0,0,0.75); }
}

/* --------------------------------------------------------------------------
   Card rails become recessed equipment bays.

   The bay is cut into the page and the modules sit in it on a 3px seam, which
   is what turns a grid of cards into a rack of hardware.
   -------------------------------------------------------------------------- */
.sk-bay {
  gap: 3px;
  padding: 7px;
  border-radius: calc(var(--radius-card) + 7px);
  background-color: var(--sk-cast);
  background-image: var(--sk-knurl);
  box-shadow:
    var(--sk-recess),
    inset 0 0 0 1px rgba(0,0,0,0.9),
    0 1px 0 var(--sk-edge-lit-2);
}

@media (min-width: 40rem) {
  .sk-bay { padding: 8px; }
}

/* --------------------------------------------------------------------------
   Cards - instrument modules.
   -------------------------------------------------------------------------- */
.card {
  overflow: visible;
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  padding-inline: calc(var(--space-card) + var(--step-3));
  box-shadow: var(--sk-bevel), var(--sk-lift);
}

/* Four fixings in the corners of every module, with a punched label-tab slot
   along the bottom edge. One pseudo-element carries the lot. */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw),
    linear-gradient(180deg, var(--sk-cast) 0 3px, var(--sk-edge-lit-2) 3px 4px, transparent 4px);
  background-repeat: no-repeat;
  background-size: 15px 15px, 15px 15px, 15px 15px, 15px 15px, 42px 4px;
  background-position:
    12px 12px,
    calc(100% - 12px) 12px,
    12px calc(100% - 12px),
    calc(100% - 12px) calc(100% - 12px),
    50% calc(100% - 7px);
}

/* The accent hairline the base file fades in on hover becomes a lit seam
   sitting just under the top bevel. */
.card::before { top: 2px; left: 12%; right: 12%; height: 1px; }

a.card:hover,
.card-interactive:hover {
  background-color: var(--sk-metal-hi);
  transform: translateY(-3px);
  box-shadow:
    var(--sk-bevel),
    0 1px 0 var(--sk-edge-dark),
    0 6px 8px rgba(0,0,0,0.6),
    0 16px 32px rgba(0,0,0,0.6),
    0 36px 70px rgba(0,0,0,0.5);
}

.card-title { color: var(--color-text); }

.card-foot {
  border-top: 1px solid var(--sk-cast);
  box-shadow: 0 1px 0 var(--sk-edge-lit-2);
  color: var(--color-text-muted);
}

/* The module indicator: a real lamp in a countersunk bezel, clear of the
   corner fixing. */
.module { padding-top: calc(var(--space-card) + var(--step-4)); }

.led {
  position: absolute;
  top: calc(var(--step-4) + 2px);
  right: calc(var(--step-6) + var(--step-3));
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--sk-led-on) 45%, var(--sk-white)) 0 22%,
    var(--sk-led-on) 56%,
    color-mix(in srgb, var(--sk-led-on) 50%, var(--sk-black)) 100%);
  box-shadow:
    0 0 8px var(--sk-led-on),
    0 0 20px color-mix(in srgb, var(--sk-led-on) 50%, transparent),
    0 0 0 2px rgba(0,0,0,0.8),
    0 0 0 3px var(--sk-edge-lit-2),
    inset 0 -1px 2px rgba(0,0,0,0.55);
}

/* A dark lamp reads as an instrument that is wired rather than decorated. */
.led-off {
  background: radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--sk-led-off) 65%, var(--sk-white)) 0 16%,
    var(--sk-led-off) 58%,
    var(--sk-lamp-dead) 100%);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,0.9),
    0 0 0 2px rgba(0,0,0,0.8),
    0 0 0 3px var(--sk-edge-lit-2);
}

/* --------------------------------------------------------------------------
   The hero instrument: a machined chassis around inset glass.
   -------------------------------------------------------------------------- */
.hero {
  border-bottom: 1px solid var(--sk-cast);
  box-shadow: 0 1px 0 var(--sk-edge-lit-3);
}

.bezel {
  position: relative;
  padding: clamp(1rem, 3vw, 1.75rem);
  border-radius: calc(var(--radius-card) + 10px);
  background-color: var(--sk-metal);
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,0.045) 0deg 0.55deg,
      transparent 0.55deg 1.5deg),
    var(--sk-panel-face),
    var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    inset 0 0 0 2px rgba(0,0,0,0.35),
    0 2px 3px rgba(0,0,0,0.75),
    0 18px 34px rgba(0,0,0,0.6),
    0 46px 90px -18px rgba(0,0,0,0.8),
    0 0 60px var(--color-glow);
  isolation: isolate;
}

/* Corner fixings in the bezel face, plus a chamfer ring. */
.bezel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 14px 22px -14px rgba(255,255,255,0.14);
  background-image: var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-repeat: no-repeat;
  background-size: 19px 19px;
  background-position:
    13px 13px, calc(100% - 13px) 13px,
    13px calc(100% - 13px), calc(100% - 13px) calc(100% - 13px);
  z-index: 3;
}

/* The glass in front of the screen: a raking highlight across the top left, a
   corner vignette, and a soft inner shadow all round from the bezel lip. */
.bezel::after {
  content: '';
  position: absolute;
  inset: clamp(1rem, 3vw, 1.75rem);
  pointer-events: none;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(146deg,
      var(--sk-glass-lit) 0,
      rgba(214,234,255,0.045) 24%,
      transparent 44%),
    radial-gradient(120% 120% at 50% 42%, transparent 52%, rgba(0,0,0,0.42) 100%);
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(0,0,0,0.8),
    inset 0 0 24px rgba(0,0,0,0.5),
    inset 0 -1px 0 var(--sk-edge-lit-2);
  z-index: 2;
}

.bezel img {
  position: relative;
  border-radius: var(--radius-sm);
  border: 0;
  display: block;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* The part reference etched along the bottom lip of the chassis. */
.sk-etch {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  white-space: nowrap;
  color: rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(255,255,255,0.07);
  pointer-events: none;
}

/* Rubber feet under the chassis, and the strain-relieved cable stub leaving
   its lower right corner. */
.sk-feet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 12px;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse at 50% 26%, var(--sk-rubber-hi) 0 34%, var(--sk-rubber) 60%, transparent 72%),
    radial-gradient(ellipse at 50% 26%, var(--sk-rubber-hi) 0 34%, var(--sk-rubber) 60%, transparent 72%);
  background-repeat: no-repeat;
  background-size: 46px 12px, 46px 12px;
  background-position: 14% 0, 86% 0;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.8));
}

.sk-cable {
  position: absolute;
  right: 12%;
  bottom: -20px;
  width: 15px;
  height: 24px;
  z-index: 0;
  pointer-events: none;
  border-radius: 0 0 6px 6px;
  background-image:
    repeating-linear-gradient(180deg, rgba(255,255,255,0.07) 0 2px, rgba(0,0,0,0.4) 2px 5px),
    linear-gradient(90deg, var(--sk-jacket) 0, var(--sk-jacket-hi) 34%, var(--sk-jacket-lo) 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,0.8);
}

/* --------------------------------------------------------------------------
   Device screenshots - glass panes in a frame, on a mounting rail.
   -------------------------------------------------------------------------- */
.shots {
  position: relative;
  padding-block: var(--step-5);
}

/* The recessed groove the panes are mounted on, faded away at both ends. */
.shots::before {
  content: '';
  position: absolute;
  /* Flush with the rail by default. The groove only runs out past the content
     column where the page's own margins can absorb it; below that width the
     bleed was 56px of horizontal page scroll that nothing visible accounted
     for, because a pseudo-element does not show up in an element sweep. */
  left: 0;
  right: 0;
  top: 50%;
  height: 8px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sk-cast) 0, var(--sk-lip) 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), 0 1px 0 var(--sk-edge-lit-2);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0,0,0) 22px, rgb(0,0,0) calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgb(0,0,0) 22px, rgb(0,0,0) calc(100% - 22px), transparent 100%);
}

@media (min-width: 87.5rem) {
  .shots::before { left: -5rem; right: -5rem; }
}

.shots > * { position: relative; z-index: 1; }

/* The caption sits inside the frame, so the frame keeps extra stock along its
   bottom edge for the fixings to live in clear of a two-line caption. */
.screenshot {
  position: relative;
  padding: var(--step-3) var(--step-3) var(--step-5);
  border-radius: var(--radius-sm);
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    0 2px 3px rgba(0,0,0,0.7),
    0 12px 26px rgba(0,0,0,0.6),
    0 0 34px var(--color-glow);
}

@media (min-width: 60rem) {
  .shots .screenshot { padding: var(--step-2) var(--step-2) var(--step-5); }
}

.screenshot::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  background-image: var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-repeat: no-repeat;
  background-size: 11px 11px;
  background-position:
    6px 6px, calc(100% - 6px) 6px,
    6px calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  z-index: 3;
}

.screenshot img { position: relative; z-index: 1; }

/* The screen-door: a scanline every third pixel, the raking glass highlight and
   a corner vignette. Sized to the image box, so it never runs over the caption.
   The glare angle is varied per pane below. */
.screenshot::after {
  content: '';
  position: absolute;
  left: var(--step-3);
  right: var(--step-3);
  top: var(--step-3);
  aspect-ratio: 4 / 3;
  pointer-events: none;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(var(--sk-glare, 146deg), var(--sk-glass-lit) 0, rgba(214,234,255,0.04) 22%, transparent 42%),
    radial-gradient(120% 120% at 50% 45%, transparent 52%, rgba(0,0,0,0.4) 100%),
    repeating-linear-gradient(180deg, transparent 0 2px, var(--sk-scanline) 2px 3px);
  box-shadow:
    inset 0 3px 9px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(0,0,0,0.85),
    inset 0 0 18px rgba(0,0,0,0.45);
  z-index: 2;
}

@media (min-width: 60rem) {
  .shots .screenshot::after { left: var(--step-2); right: var(--step-2); top: var(--step-2); }
}

.shots .screenshot:nth-child(2) { --sk-glare: 108deg; }
.shots .screenshot:nth-child(3) { --sk-glare: 124deg; }

.screenshot figcaption {
  position: relative;
  z-index: 4;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--size-2xs);
  line-height: 1.35;
  /* Held clear of the corner fixings, which sit 6px in. */
  padding-inline: 14px;
  color: var(--color-text-muted);
}

/* The lightbox is a pane too, but it has no rail behind it and no fixings. */
#shot-dialog.screenshot::before,
#shot-dialog.screenshot::after { content: none; }

/* --------------------------------------------------------------------------
   The facts strip - an engraved data plate screwed to the panel.
   -------------------------------------------------------------------------- */
.facts {
  position: relative;
  padding: var(--step-6) var(--step-4);
  border-block: 0;
  border-radius: var(--radius-sm);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-plate-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow: var(--sk-bevel), var(--sk-lift);
  gap: var(--step-5) 0;
}

/* Four fixings in the plate's corners. */
.facts::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-repeat: no-repeat;
  background-size: 13px 13px;
  background-position:
    9px 9px, calc(100% - 9px) 9px,
    9px calc(100% - 9px), calc(100% - 9px) calc(100% - 9px);
}

.facts > * {
  position: relative;
  padding-inline: var(--step-3);
  text-align: center;
}

/* Etched grooves between cells: a dark cut with a lit lower lip. */
.facts > * + * {
  border-left: 1px solid var(--sk-cast);
  box-shadow: inset 1px 0 0 var(--sk-edge-lit-2);
}

/* The value sits in its own recessed cell and is lit from behind. */
.fact-value {
  display: block;
  margin-inline: auto;
  margin-bottom: var(--step-3);
  padding: 0.28rem 0.5rem;
  max-width: max-content;
  border-radius: var(--radius-tight);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--sk-well) 0, var(--sk-well-2) 100%);
  color: var(--color-accent);
  text-shadow:
    0 0 6px color-mix(in srgb, var(--color-accent) 80%, transparent),
    0 0 20px color-mix(in srgb, var(--color-accent) 35%, transparent);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.9),
    inset 0 0 0 1px rgba(0,0,0,0.8),
    0 1px 0 var(--sk-edge-lit-2);
}

.fact-label {
  color: var(--color-text-muted);
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   Section legends and number plates.

   The eyebrow index becomes a small metal plate with a fixing at each side and
   an engraved numeral, which is the cheapest per-section instrument cue there
   is. The rule that trails the legend becomes a two-tone machined groove.
   -------------------------------------------------------------------------- */
.eyebrow {
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.eyebrow::after {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sk-cast) 0 2px, var(--sk-edge-lit-2) 2px 3px);
}

/* The number is a printed label on the part, not a bolted-on plate: the same
   flat mono box as .stamp, one hairline and 2px corners. */
.eyebrow-index {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin-right: var(--step-2);
  padding: 0.25em 0.6em;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: var(--tracking-label);
  color: var(--s6-mute);
  text-shadow: none;
  background-color: transparent;
  background-image: none;
  border: 1px solid var(--s6-hair);
  box-shadow: none;
}

.eyebrow-index::after { content: none; }

/* A section is a panel bolted below the one above it. */
.section + .section {
  border-top: 1px solid var(--sk-cast);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-3);
}

/* --------------------------------------------------------------------------
   The privacy plate - the one full-width slab of heavier gauge on the page.
   -------------------------------------------------------------------------- */
.section-privacy {
  background-color: var(--sk-metal-lo);
  background-image:
    var(--sk-knurl),
    linear-gradient(180deg,
      var(--sk-metal-hi) 0,
      var(--sk-metal) 6%,
      var(--sk-metal-lo) 62%,
      var(--sk-metal-deep) 100%),
    var(--sk-brush);
  border-top: 1px solid var(--sk-cast);
  border-bottom: 0;
  box-shadow:
    inset 0 2px 0 var(--sk-edge-lit),
    inset 0 -3px 0 var(--sk-cast),
    0 -2px 0 rgba(0,0,0,0.6);
}

/* The visible bottom edge of the casting: a machined lip. */
.section-privacy::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(180deg, var(--sk-lip) 0, var(--sk-cast) 100%);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-3);
}

/* Fixings down both edges of the slab, top and bottom. */
.section-privacy > .container::before {
  content: '';
  position: absolute;
  inset: calc(var(--space-section) * -0.42) -6px;
  pointer-events: none;
  z-index: 2;
  background-image: var(--sk-screw), var(--sk-screw-b), var(--sk-screw-b), var(--sk-screw);
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: 0 0, 100% 0, 0 100%, 100% 100%;
}

/* The headline is deep-engraved into the slab. Display size only: no body copy
   is ever engraved. */
.section-privacy h2 {
  color: color-mix(in srgb, var(--sk-cast) 30%, var(--color-text));
  text-shadow:
    0 1px 0 rgba(255,255,255,0.15),
    0 2px 1px rgba(255,255,255,0.05),
    0 -1px 1px rgba(0,0,0,0.75);
}

/* The stamped compliance badge: an embossed disc with a debossed legend. */
.sk-stamp {
  position: absolute;
  top: 0;
  right: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  pointer-events: none;
  display: grid;
  place-items: center;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,0.05) 0deg 2deg, transparent 2deg 6deg),
    radial-gradient(circle at 36% 30%, var(--sk-metal-top) 0, var(--sk-metal) 46%, var(--sk-metal-lo) 100%);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit),
    inset 0 -2px 3px rgba(0,0,0,0.7),
    inset 0 0 0 4px rgba(0,0,0,0.28),
    0 2px 3px rgba(0,0,0,0.7),
    0 10px 20px rgba(0,0,0,0.5);
}

.sk-stamp::after {
  content: 'OPEN SOURCE';
  width: 46px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--sk-cast) 58%, var(--color-text));
  text-shadow: 0 1px 0 rgba(255,255,255,0.16), 0 -1px 1px rgba(0,0,0,0.85);
}

/* On a phone the slab reaches the screen edges, so its edge fixings and its
   stamp would be cut in half by them. Both come off. */
@media (max-width: 47.999rem) {
  .sk-stamp { display: none; }
  .section-privacy > .container::before { content: none; }
}

/* Code is a terminal window cut into the panel. */
.prose code {
  background-color: var(--sk-glass);
  background-image: repeating-linear-gradient(180deg, transparent 0 3px, rgba(0,0,0,0.35) 3px 4px);
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-tight);
  padding: 0.1em 0.4em;
  color: color-mix(in srgb, var(--color-accent) 62%, var(--color-text));
  box-shadow:
    inset 0 1px 4px rgba(0,0,0,0.85),
    inset 0 1px 0 color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* --------------------------------------------------------------------------
   The safety notice - the one hazard rule on the page.
   -------------------------------------------------------------------------- */
.callout-safety {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  border-inline-width: 1px;
  border-radius: var(--radius-sm);
  padding-top: calc(var(--step-4) + 6px);
  box-shadow: var(--sk-bevel), var(--sk-lift);
}

/* The hazard rule across the top lip. On ::after rather than ::before, because
   the tier tab further down this file owns ::before on every callout. */
.callout-safety::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: repeating-linear-gradient(45deg,
    var(--sk-hazard) 0 9px, var(--sk-cast) 9px 18px);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   The closing note under a section: a small plate screwed to the panel.
   -------------------------------------------------------------------------- */
.section-note {
  position: relative;
  display: inline-block;
  padding: var(--step-3) var(--step-6);
  border-radius: var(--radius-tight);
  color: var(--color-text-muted);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-plate-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow: var(--sk-bevel), 0 2px 3px rgba(0,0,0,0.6), 0 10px 20px rgba(0,0,0,0.45);
}

.section-note::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--sk-screw), var(--sk-screw-b);
  background-repeat: no-repeat;
  background-size: 9px 9px;
  background-position: 5px 50%, calc(100% - 5px) 50%;
}

.shots-swipe { color: var(--color-text-muted); }

/* --------------------------------------------------------------------------
   Footer - the chassis underside.
   -------------------------------------------------------------------------- */
.footer {
  position: relative;
  background-color: var(--sk-cast);
  background-image:
    linear-gradient(180deg, var(--sk-metal-lo) 0, var(--sk-metal-deep) 40%, var(--sk-cast) 100%),
    var(--sk-brush);
  border-top: 2px solid var(--sk-cast);
  box-shadow: inset 0 2px 0 var(--sk-edge-lit), inset 0 -1px 0 rgba(0,0,0,0.9);
  padding-bottom: calc(var(--step-8) + var(--step-5));
}

/* Ventilation slots across the top of the casting, masked away at both ends. */
.footer::before {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: var(--step-6);
  height: 18px;
  pointer-events: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--sk-cast) 0 3px,
      rgba(255,255,255,0.05) 3px 4px,
      transparent 4px 10px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9), inset 0 -1px 0 var(--sk-edge-lit-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, rgb(0,0,0) 14%, rgb(0,0,0) 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, rgb(0,0,0) 14%, rgb(0,0,0) 86%, transparent);
}

/* Rubber feet at the two bottom corners of the casting. */
.footer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 50% 22%, var(--sk-rubber-hi) 0 30%, var(--sk-rubber) 58%, transparent 70%),
    radial-gradient(ellipse at 50% 22%, var(--sk-rubber-hi) 0 30%, var(--sk-rubber) 58%, transparent 70%);
  background-repeat: no-repeat;
  background-size: 64px 16px, 64px 16px;
  background-position: 7% 100%, 93% 100%;
}

.footer > .container { position: relative; padding-top: var(--step-7); }

.footer h2 { color: var(--color-text-muted); }

.footer-base {
  border-top: 1px solid var(--sk-cast);
  box-shadow: 0 -1px 0 var(--sk-edge-lit-3);
  align-items: center;
}

/* The regulatory sticker: printed stock on the casting, applied very slightly
   askew, the way a real one is. */
.footer-base > span:last-child {
  padding: var(--step-2) var(--step-4);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--sk-sticker) 0, color-mix(in srgb, var(--sk-sticker) 82%, var(--sk-black)) 100%);
  color: var(--sk-sticker-ink);
  text-shadow: none;
  rotate: -0.4deg;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 6px 14px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* --------------------------------------------------------------------------
   Accessibility fallbacks.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wordmark-mark { animation: none; }
  .hero::before { animation: none; }
}

@media (forced-colors: active) {
  * { text-shadow: none !important; }
  body::after { display: none; }
  .card,
  .bezel,
  .facts,
  .screenshot,
  .section-note,
  .eyebrow-index,
  .devices-online,
  .btn { border: 1px solid CanvasText; }
  .card::after,
  .bezel::before,
  .facts::before,
  .screenshot::before,
  .screenshot::after,
  .section-note::after,
  .eyebrow-index::after,
  .masthead::before,
  .masthead::after,
  .footer::before,
  .footer::after,
  .shots::before,
  .sk-feet,
  .sk-cable,
  .sk-stamp,
  .sk-etch { display: none; }
}

/* ==========================================================================
   SHARED CHROME (build-out pass)

   Everything below skins the parts of the instrument that every page carries:
   the two surface tokens the per-page sheets read, the navigation rail and its
   disclosure panels, the breadcrumb, the screenshot lightbox, the map window,
   the callout tiers, the back-to-top control and the search console.

   Same rules as the head of this file: one light source top left, hex literals
   only in :root, textures from gradients and inline SVG only, and no box-shadow
   ever transitions.
   ========================================================================== */

:root {
  /* Two surface tiers. A panel is textured and bevelled and WRAPS content; a
     reading slab is flat, near-solid and slightly lighter than the page ground,
     and HOLDS the content. Text never sits on the panel texture.

     Both tokens are background COLOURS. A panel additionally paints
     `background-image: var(--sk-panel-face), var(--sk-brush)`; a reading slab
     paints no image at all, which is the whole point of it. The `.slab` class
     below is the ready-made version of the second tier. */
  --sk-reading:      #131926;   /* the printed card mounted in the instrument */
  --sk-reading-edge: #070b12;   /* the cut its edge sits in */
  --sk-cap-ink:      #dde5f2;   /* flat caption ink, high contrast, no relief */
  --sk-danger-face:  #2a1008;   /* flat, loud, deliberately off-theme */
  --sk-danger-edge:  #f0762c;

  --surface-panel:   var(--sk-metal);
  --surface-reading: var(--sk-reading);
}

/* The reading slab, for any track that needs one. Flat fill, no gradient, no
   grain, a hairline cut around it so it still reads as mounted stock. */
.slab {
  background-color: var(--surface-reading);
  background-image: none;
  border: 1px solid var(--sk-reading-edge);
  border-radius: var(--radius-sm);
  padding: var(--step-5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.04);
  color: var(--color-text);
}

@media (min-width: 60rem) {
  .slab { padding: var(--step-6); }
}

/* --------------------------------------------------------------------------
   The rail, condensed.

   Track 0b puts `.is-condensed` on the masthead once the page has scrolled past
   the first screen. Only the rail's own height variable and its inner padding
   move, and only the padding and a transform are transitioned, because a shadow
   transition on a full-width sticky plate is the one thing that reliably costs
   a frame on this kind of surface.
   -------------------------------------------------------------------------- */
.masthead-inner {
  transition: padding var(--dur-fast) var(--ease);
}

.masthead.is-condensed {
  --nav-height: 3rem;
  border-bottom-color: var(--sk-metal-deep);
}

.masthead.is-condensed .masthead-inner {
  padding-block: 0;
  padding-inline: var(--step-4);
}

.masthead .wordmark {
  transition: transform var(--dur-fast) var(--ease);
}

.masthead.is-condensed .wordmark {
  transform: scale(0.94);
  transform-origin: left center;
}

@media (min-width: 66rem) {
  .masthead.is-condensed { --nav-height: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead-inner,
  .masthead .wordmark { transition: none; }
  .masthead.is-condensed .wordmark { transform: none; }
}

/* --------------------------------------------------------------------------
   Cross-document transitions.

   The rail is the one element shared by every page, so it is the one element
   named across the transition: the bar holds still while the content behind it
   changes. Anything else animating between two documents is decoration.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

.masthead { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* --------------------------------------------------------------------------
   Navigation: silkscreened legends on the rail.
   -------------------------------------------------------------------------- */
.nav-list > li > a,
.nav-details > summary {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);
}

.nav-list > li > a:hover,
.nav-details > summary:hover,
.nav-details[open] > summary { color: var(--color-text); text-decoration: none; }

.nav-list > li > a[aria-current='page'] { color: var(--color-accent); }

/* The chevron is a machined marker, not a glyph that fades. */
.nav-chev { opacity: 0.55; color: var(--color-text-faint); }
.nav-details[open] > summary .nav-chev,
.nav-details > summary:hover .nav-chev { opacity: 1; color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .nav-chev { transition: none; }
}

/* The disclosure panel is a hatch that has swung down off the rail: a panel
   face, a lit top edge, the casting's shadow underneath. */
@media (min-width: 66rem) {
  .nav-panel {
    background-color: var(--sk-metal);
    background-image: var(--sk-panel-face), var(--sk-brush);
    border: 1px solid var(--sk-cast);
    border-radius: var(--radius-sm);
    box-shadow:
      var(--sk-bevel),
      0 2px 3px rgba(0,0,0,0.7),
      0 16px 34px rgba(0,0,0,0.62);
  }

  /* A short lip joining the hatch back to the rail, so the panel does not read
     as floating free of the bar that opened it. */
  .nav-panel::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--step-3));
    left: var(--step-5);
    width: 2.5rem;
    height: var(--step-3);
    background: linear-gradient(180deg, var(--sk-metal-lo), var(--sk-cast));
  }
}

/* Each entry in the panel is a labelled slot: flat inside, so the two lines of
   text keep their contrast, with a recessed wash under the pointer. */
.nav-panel a {
  min-height: 2.75rem;
  border: 1px solid transparent;
  color: var(--color-text);
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background-color: var(--sk-well-2);
  border-color: var(--sk-cast);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.65);
}

.nav-panel a[aria-current='page'] {
  background-color: var(--sk-well);
  border-color: var(--sk-cast);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.8),
    inset 2px 0 0 var(--color-accent);
}

.nav-panel-label { color: var(--color-text); }
.nav-panel-note { color: var(--color-text-muted); }

/* On a phone the panel expands inline, so it is a channel cut into the rail
   rather than a hatch hanging off it. */
@media (max-width: 65.999rem) {
  .nav-list[data-open='true'] {
    background-color: var(--sk-metal-lo);
    background-image: var(--sk-panel-face), var(--sk-brush);
    border-bottom: 2px solid var(--sk-cast);
    box-shadow: inset 0 1px 0 var(--sk-edge-lit-2), 0 18px 34px rgba(0,0,0,0.6);
  }

  .nav-group { border-bottom-color: var(--sk-cast); box-shadow: 0 1px 0 var(--sk-edge-lit-3); }

  /* In the drawer the legends become a menu. A stencilled rail label works at
     one line across a bar; eight of them stacked full width does not. */
  .nav-details > summary,
  .nav-list > li > a {
    text-transform: none;
    letter-spacing: normal;
    font-family: var(--font-body);
    font-size: var(--size-base);
  }

  .nav-panel {
    background-color: var(--sk-well-warm);
    border-left: 2px solid var(--sk-cast);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.55);
  }
}

/* The Build one key: backlit, and it travels. Colour is not the only signal for
   the current page; the fill, the border and the relief all change with it. */
.nav-cta {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sk-cast);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--color-accent) 88%, var(--sk-white)),
              var(--color-accent-dim));
  border: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -2px 4px rgba(0,0,0,0.35),
    0 1px 2px rgba(0,0,0,0.7),
    0 0 20px var(--color-glow);
}

.nav-cta:active { transform: translateY(2px); }

.nav-cta.is-current {
  background: var(--sk-metal-lo);
  background-image: var(--sk-panel-face);
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.75), inset 0 -1px 0 var(--sk-edge-lit-3);
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta { transition: none; }
  .nav-cta:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Breadcrumb: a stamped route legend under the rail.
   -------------------------------------------------------------------------- */
.crumbs {
  color: var(--color-text-faint);
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}
.crumbs a { color: var(--color-text-muted); box-shadow: none; }
.crumbs a:hover { color: var(--color-accent); box-shadow: none; text-decoration: none; }
.crumbs [aria-current='page'] { color: var(--color-text); }
.crumbs li:not(:last-child)::after { color: var(--color-text-faint); opacity: 0.55; }

/* --------------------------------------------------------------------------
   Skip link: a service tag that pops out of the rail.
   -------------------------------------------------------------------------- */
.skip-link {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--sk-cast);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--color-accent) 88%, var(--sk-white)),
              var(--color-accent-dim));
  border: 1px solid var(--sk-cast);
  box-shadow: 0 2px 4px rgba(0,0,0,0.7), 0 10px 26px rgba(0,0,0,0.55);
  transition: transform var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* --------------------------------------------------------------------------
   Back to top.

   Markup lives at the end of the footer. Hidden from everyone until the page
   has actually scrolled, which Track 0b marks with `.is-scrolled` on the body,
   so it is never a control that does nothing. Fades and lifts; the shadow is
   set once and never transitioned.
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: max(var(--step-5), env(safe-area-inset-right));
  bottom: max(var(--step-5), env(safe-area-inset-bottom));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  color: var(--color-accent);
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit-2),
    inset 0 -2px 4px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.7),
    0 12px 26px rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              visibility 0s linear var(--dur);
}
/* Fixed bottom right with no gutter to sit in, it lands on the body text at
   320. The bar is a scroll away on a phone. */
@media (max-width: 48rem) {
  .to-top { display: none; }
}


/* The chevron is drawn in CSS: two borders on a square, rotated. */
.to-top::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.2rem;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

body.is-scrolled .to-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.to-top:active { transform: translateY(2px); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* --------------------------------------------------------------------------
   The screenshot lightbox.

   Markup is pinned: `dialog#shot-dialog > img + figcaption`. Track 0b sets
   `--ar` on the dialog, as "w / h", in the same task as src, alt and caption.

   The whole point of the sizing below is that the caption wraps only as wide as
   the picture actually rendered, including the case where the image is limited
   by height rather than by width. Three things do that together:

     * the dialog shrink-wraps its content (`width: fit-content`);
     * `--ar` reproduces the height limit as a width limit, so the height cap
       never binds and never shrinks the image inside a wider box;
     * the caption contributes nothing to that width (`inline-size: 0`) and then
       fills whatever width settled (`min-inline-size: 100%`). Percentages
       resolve after the width settles, so there is no cycle.

   The floor exists so a small device capture opens as a picture rather than as
   a postage stamp; it is written with the same three terms as the cap, so it
   can never exceed it.

   The frame comes off here. In the grid a capture is a pane mounted in metal;
   opened, it is the picture on near-black, with the physicality moved into the
   backdrop.
   -------------------------------------------------------------------------- */
#shot-dialog.screenshot {
  --cap-h: 78dvh;
  /* The pane treatment above sets `position: relative` on every .screenshot,
     and this dialog carries that class. A relative dialog is laid out in normal
     flow instead of being centred against the viewport, which pushed the top of
     the picture off the top of the screen. The UA's own modal placement has to
     be put back explicitly. */
  position: fixed;
  inset: 0;
  margin: auto;
  width: fit-content;
  /* A floor, so a device capture opens as a picture rather than as a postage
     stamp, set at twice the 320px the screen actually is. Written with the same
     three terms as the cap below, so it can never exceed it. */
  min-inline-size: min(92vw, 40rem, calc(var(--cap-h) * (var(--ar, 4 / 3))));
  max-inline-size: min(92vw, 1400px, calc(var(--cap-h) * (var(--ar, 4 / 3))));
  max-block-size: 92dvh;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-image: none;
  box-shadow: none;
  overflow: visible;
}

#shot-dialog.screenshot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: var(--cap-h);
  aspect-ratio: var(--ar, auto);
  object-fit: contain;
  border-radius: var(--radius-tight);
  background-color: var(--sk-glass);
  box-shadow: 0 2px 4px rgba(0,0,0,0.8), 0 30px 70px -20px rgba(0,0,0,0.85);
}

#shot-dialog.screenshot figcaption {
  inline-size: 0;
  min-inline-size: 100%;
  margin-block-start: 0.75rem;
  padding-inline: 0;
  font-family: var(--font-body);
  font-size: var(--size-sm);
  line-height: 1.5;
  /* Flat and plain on purpose: relief, small caps and letter-spacing all widen
     a caption, and this one has to stay inside the picture. */
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  text-wrap: pretty;
  color: var(--sk-cap-ink);
}

@media (max-width: 37.5rem) {
  #shot-dialog.screenshot figcaption { padding-inline: var(--step-4); }
}

/* Opening the dialog puts focus on the dialog itself, and the site's focus ring
   then drew a cyan rectangle tight around the picture, which read as a frame
   rather than as focus. The ring stays, held far enough off the edge that it
   cannot be mistaken for one. */
#shot-dialog.screenshot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 10px;
}

/* A deep vignette rather than a flat wash, so the picture sits in the middle of
   a darkened bench instead of on a grey sheet. */
#shot-dialog::backdrop {
  background-color: rgba(2, 4, 8, 0.9);
  background-image: radial-gradient(120% 120% at 50% 42%, rgba(10,16,26,0.55) 0, rgba(0,0,0,0.92) 100%);
}

/* --------------------------------------------------------------------------
   The map window: a glass instrument port in the bench.
   -------------------------------------------------------------------------- */
.map-dialog {
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    var(--sk-bevel),
    0 3px 5px rgba(0,0,0,0.75),
    0 40px 90px -20px rgba(0,0,0,0.85);
}

.map-head {
  border-bottom: 1px solid var(--sk-cast);
  box-shadow: 0 1px 0 var(--sk-edge-lit-3);
}

.map-canvas {
  background-color: var(--sk-glass);
  border-block: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,0.85),
    inset 0 0 0 1px rgba(0,0,0,0.85),
    inset 0 0 26px rgba(0,0,0,0.5);
}

.map-foot {
  border-top: 1px solid var(--sk-cast);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-3);
}

.map-close {
  border: 1px solid var(--sk-cast);
  background-color: var(--sk-metal);
  background-image: var(--sk-panel-face);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-2), 0 1px 2px rgba(0,0,0,0.6);
}
.map-close:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Callouts.

   A note is an engraved plate: cut INTO the panel, never raised off it. Danger
   deliberately breaks the theme, because a warning that reads as decoration is
   a warning nobody acts on: flat fill, a loud edge, no texture, no relief.
   -------------------------------------------------------------------------- */
.callout {
  background-color: var(--sk-reading);
  background-image: none;
  border-color: var(--sk-cast);
  border-inline-start-color: var(--color-accent-dim);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 var(--sk-edge-lit-3);
}

.callout-title { color: var(--color-text); }

.callout-danger {
  background-color: var(--sk-danger-face);
  background-image: none;
  border: 2px solid var(--sk-danger-edge);
  color: var(--color-text);
  text-shadow: none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--signal-red) 70%, transparent),
    0 0 0 7px color-mix(in srgb, var(--signal-red-deep) 60%, transparent),
    0 0 40px 18px color-mix(in srgb, var(--signal-red-deep) 25%, transparent);
}

.callout-danger .callout-title { color: var(--sk-cap-ink); text-shadow: none; }

/* --------------------------------------------------------------------------
   Keys: the states the base pass left out.
   -------------------------------------------------------------------------- */
.btn-block { width: 100%; justify-content: center; }

.btn:disabled,
.btn[aria-disabled='true'] {
  background: var(--sk-metal-lo);
  background-image: none;
  color: var(--color-text-faint);
  border-color: var(--sk-cast);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.7);
  transform: none;
  cursor: not-allowed;
}
.btn:disabled::before,
.btn[aria-disabled='true']::before { opacity: 0.25; }

/* --------------------------------------------------------------------------
   A hero photograph that is NOT in a chassis bezel.

   The about page carries a portrait of a person, and putting a face behind
   instrument glass with scanlines over it is the wrong joke. It gets stock and
   a cut edge, and nothing else.
   -------------------------------------------------------------------------- */
.hero-media:not(.bezel) {
  padding: var(--step-2);
  border-radius: var(--radius-card);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face);
  border: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit-2),
    0 2px 3px rgba(0,0,0,0.6),
    0 18px 40px -14px rgba(0,0,0,0.6);
}

.hero-media:not(.bezel) img {
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}

/* --------------------------------------------------------------------------
   Search console.

   Placeholder skin for the command palette Track 0b is building: a recessed
   glass console dropped into the top of the bench. The class names come from
   that track; if they land different, only this block moves.
   -------------------------------------------------------------------------- */
#search-dialog {
  width: min(40rem, 92vw);
  max-block-size: 80dvh;
  margin: 10vh auto auto;
  padding: var(--step-3);
  color: var(--color-text);
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-card);
  box-shadow:
    var(--sk-bevel),
    0 3px 5px rgba(0,0,0,0.75),
    0 40px 90px -20px rgba(0,0,0,0.85);
  overflow: hidden;
}

#search-dialog::backdrop {
  background-color: rgba(2, 4, 8, 0.82);
}

/* A real input, cut into the console face and filled LIGHTER than it, so typed
   text keeps its contrast. */
.search-input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: var(--step-3) var(--step-4);
  font-family: var(--font-body);
  font-size: var(--size-base);
  color: var(--color-text);
  background-color: var(--sk-reading);
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-input);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7), inset 0 -1px 0 var(--sk-edge-lit-3);
}

.search-input::placeholder { color: var(--color-text-faint); }

.search-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7), 0 0 18px var(--color-glow);
}

.search-results {
  margin-top: var(--step-3);
  padding: 0;
  list-style: none;
  max-block-size: 56dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.search-result {
  display: block;
  padding: var(--step-3) var(--step-4);
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  color: var(--color-text);
  text-decoration: none;
}

.search-result + .search-result { margin-top: var(--step-1); }

/* Selection is a lit slot, not a colour wash: the fill recesses, a cyan rule
   appears down the leading edge, and the label brightens. Three signals. */
.search-result:hover,
.search-result[aria-selected='true'] {
  background-color: var(--sk-well);
  border-color: var(--sk-cast);
  color: var(--color-text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), inset 2px 0 0 var(--color-accent);
}

.search-result mark {
  padding: 0 0.1em;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  border-radius: 2px;
}

.search-hint {
  padding: var(--step-3) var(--step-4);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-faint);
  text-shadow: 0 1px 0 rgba(0,0,0,0.7);
}

.search-empty {
  padding: var(--step-3) var(--step-4);
  font-family: var(--font-body);
  font-size: var(--size-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Forced colours: boundaries come from borders, never from a shadow, and every
   texture, lamp and relief effect is dropped.
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .slab,
  .nav-panel,
  .nav-panel a,
  .nav-cta,
  .skip-link,
  .to-top,
  .map-dialog,
  .map-close,
  .map-canvas,
  .callout,
  .callout-danger,
  .hero-media:not(.bezel),
  #search-dialog,
  .search-input,
  .search-result,
  #shot-dialog.screenshot img { border: 1px solid CanvasText; }

  .slab,
  .nav-panel a,
  .search-result,
  .to-top,
  .map-close { box-shadow: none; }

  .nav-panel::before { display: none; }

  .search-result[aria-selected='true'] { border: 2px solid Highlight; }

  #shot-dialog.screenshot { background: Canvas; }
}

/* --------------------------------------------------------------------------
   The sequence pager and the "where next" chips.

   Two blank plates screwed to the bottom of the page. The hover lift is a
   transform, and the shadow under it is set once rather than transitioned.
   -------------------------------------------------------------------------- */
.pager a {
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face), var(--sk-brush);
  border: 1px solid var(--sk-cast);
  box-shadow:
    inset 0 1px 0 var(--sk-edge-lit-2),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 1px 2px rgba(0,0,0,0.6),
    0 10px 22px -8px rgba(0,0,0,0.55);
  transition: transform var(--dur-fast) var(--ease);
}

.pager a:hover { transform: translateY(-2px); text-decoration: none; }
.pager a:active { transform: translateY(1px); }

.pager-dir { text-shadow: 0 1px 0 rgba(0,0,0,0.75); }
.pager-title { color: var(--color-text); }
.pager a:hover .pager-title { color: var(--color-accent); }

.related h2 { text-shadow: 0 1px 0 rgba(0,0,0,0.75); }

.related a {
  background-color: var(--sk-metal-lo);
  background-image: var(--sk-panel-face);
  border: 1px solid var(--sk-cast);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-2), 0 1px 2px rgba(0,0,0,0.6);
  transition: transform var(--dur-fast) var(--ease);
}

.related a:hover { transform: translateY(-1px); color: var(--color-accent); text-decoration: none; }
.related a:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .pager a,
  .related a { transition: none; }
  .pager a:hover,
  .related a:hover { transform: none; }
}

@media (forced-colors: active) {
  .pager a,
  .related a { border: 1px solid CanvasText; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   The rail's width budget on a phone.

   The row carries six items on a narrow screen: the wordmark, the search entry,
   the online counter, the menu button, the (collapsed) list and the Build one
   key. At the wide gap they do not fit, and because the menu button was the
   only shrinkable item, flex crushed it to 14px and its icon drew outside the
   viewport, which is where the horizontal scroll at 320 and 400 came from. The
   counter unhides about a second after load, which is why the overflow arrived
   late and looked like a script bug.

   So: nothing in the rail shrinks, the gap and the side padding tighten in two
   steps, and below 350px the counter drops out. It is the only item of the six
   that is a readout rather than a route, its label has already been dropped at
   that width, and the alternative is a menu button that cannot be hit.
   -------------------------------------------------------------------------- */
@media (max-width: 65.999rem) {
  .masthead-inner > * { flex: none; }
  .nav-toggle { flex: none; margin-right: 0; }
}

@media (max-width: 47.999rem) {
  .masthead-inner { gap: var(--step-3); padding-inline: var(--step-3); }
}

@media (max-width: 30rem) {
  .masthead-inner { gap: var(--step-2); padding-inline: var(--step-2); }
  .wordmark { font-size: var(--size-base); }
  .nav-cta { padding-inline: var(--step-2); }
}

@media (max-width: 21.875rem) {
  .devices-online { display: none; }
}

/* --------------------------------------------------------------------------
   Callout tiers: a shape and a word, never a colour.

   The three tiers were told apart by the edge colour alone, which is nothing to
   a reader who cannot separate amber from orange, and nothing at all in forced
   colours. Each callout now opens with a stamped tab carrying the tier's mark
   and its name in words. The mark is a background image rather than a mask
   because the tab also carries text, and a mask would eat the word with it; the
   three are therefore drawn once per tier, in the tier's own ink.
   -------------------------------------------------------------------------- */
:root {
  --sk-ico-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d4ff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9.6'/%3E%3Cpath d='M12 10.4v6.4' stroke-linecap='round'/%3E%3Cpath d='M12 7.2v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
  --sk-ico-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eab308' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.6 22.6 21H1.4Z'/%3E%3Cpath d='M12 9.6v4.8' stroke-linecap='round'/%3E%3Cpath d='M12 17.6v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
  --sk-ico-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0762c' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M8.1 1.8h7.8L22.2 8.1v7.8l-6.3 6.3H8.1L1.8 15.9V8.1Z'/%3E%3Cpath d='M12 6.8v6.4' stroke-linecap='round'/%3E%3Cpath d='M12 16.8v.1' stroke-linecap='round' stroke-width='2.6'/%3E%3C/svg%3E");
}

.callout::before {
  content: 'Note';
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--step-3);
  padding: 0.3em 0.7em 0.3em 2.1em;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid currentColor;
  border-radius: var(--radius-tight);
  text-shadow: none;
  background-image: var(--sk-ico-note);
  background-repeat: no-repeat;
  background-position: 0.65em center;
  background-size: 1em 1em;
}

.callout-safety::before {
  content: 'Warning';
  color: var(--glucose-high);
  background-image: var(--sk-ico-warn);
}

/* Last, so the one callout that carries both classes reads as the higher tier. */
.callout-danger::before {
  content: 'Danger';
  color: var(--sk-danger-edge);
  background-image: var(--sk-ico-danger);
}

@media (forced-colors: active) {
  .callout::before { border: 1px solid CanvasText; color: CanvasText; }
}

/* --------------------------------------------------------------------------
   The search console, against the markup as built.

   The palette is a recessed glass window dropped into the rail: a dark well
   behind the field and the results, keycap hints along the bottom, and no
   chrome competing with the one thing the reader is reading.
   -------------------------------------------------------------------------- */

/* The entry point in the rail: a slot with a key legend in it, so it reads as
   a control rather than as another navigation link. */
.nav-search {
  display: inline-flex;
  align-items: center;
  gap: var(--step-2);
  min-height: 2.25rem;
  padding: 0 var(--step-2) 0 var(--step-3);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--sk-well-2);
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.7), inset 0 -1px 0 var(--sk-edge-lit-3);
  text-decoration: none;
}

.nav-search:hover { color: var(--color-text); text-decoration: none; }
.nav-search:hover .nav-search-key { color: var(--color-accent); border-color: var(--color-accent); }

.nav-search-key {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.3em;
  font-size: 0.9em;
  color: var(--color-text-faint);
  background: linear-gradient(180deg, var(--sk-metal-hi), var(--sk-metal-lo));
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-tight);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-2), 0 1px 1px rgba(0,0,0,0.7);
}

/* Below the tablet breakpoint the rail has no room for the word, and the key
   hint means nothing without a keyboard. The control stays, as the icon. */
@media (max-width: 47.999rem) {
  .nav-search { padding-inline: var(--step-2); }
  .nav-search-label,
  .nav-search-key { display: none; }
}

.search-form { display: block; }

/* The well the field and the results sit in. */
#search-dialog {
  padding: 0;
  overflow: hidden;
}

.search-form,
.search-results,
.search-hint { padding-inline: var(--step-4); }

.search-form { padding-block: var(--step-4) var(--step-3); }

.search-results {
  margin-top: 0;
  padding-block: 0 var(--step-3);
  border-top: 1px solid var(--sk-cast);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-3);
}

.search-results:empty { display: none; }

.search-result { cursor: pointer; }

.search-result-heading {
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--color-text);
}

/* One line, always. A page title long enough to wrap this stencilled line put
   more of the row into the breadcrumb than into the result. */
.search-result-page {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-text {
  margin-top: var(--step-1);
  font-size: var(--size-sm);
  line-height: 1.45;
  color: var(--color-text-muted);
  /* Two lines of context, never a paragraph: the list has to stay scannable. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.search-result[aria-selected='true'] .search-result-page { color: var(--color-accent); }

/* The hint rail along the bottom of the console, on the casting. */
.search-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--step-2);
  margin: 0;
  padding-block: var(--step-3);
  border-top: 1px solid var(--sk-cast);
  background-color: var(--sk-metal-lo);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-3);
}

.search-hint kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35em;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  background: linear-gradient(180deg, var(--sk-metal-hi), var(--sk-metal-lo));
  border: 1px solid var(--sk-cast);
  border-radius: var(--radius-tight);
  box-shadow: inset 0 1px 0 var(--sk-edge-lit-2), 0 1px 1px rgba(0,0,0,0.7);
  text-shadow: none;
}

.search-hint[data-mode='loading'] { color: var(--color-text-faint); }

@media (max-width: 37.5rem) {
  #search-dialog { width: 94vw; margin-top: 4vh; }
  .search-results { max-block-size: 50dvh; }
}

@media (forced-colors: active) {
  .nav-search,
  .nav-search-key,
  .search-hint kbd { border: 1px solid CanvasText; box-shadow: none; }
}

/* --------------------------------------------------------------------------
   The palette's hint rail on a narrow screen.

   As one wrapping run the rail broke between a key and the words that name it,
   so "Enter" sat at the end of one line and "to open" at the start of the next.
   One pair per line at this width; the pairs are spans the palette writes.
   -------------------------------------------------------------------------- */
.search-hint-pair { display: inline-flex; align-items: center; gap: var(--step-2); }

/* Stacked, the rail cost 126px of a 320px screen to name shortcuts a thumb
   cannot press. A touch reader gets the results instead; a keyboard reader
   keeps the rail on one line. */
@media (pointer: coarse) {
  .search-hint { display: none; }
}

/* --------------------------------------------------------------------------
   Preview furniture clearance.

   The look switch is fixed over the bottom of the page, so the last paragraph
   has to end above it rather than behind it. The reserve is the bar's own
   height plus its offset; it goes here and is matched in the B sheet so both
   skins clear it by the same amount.
   -------------------------------------------------------------------------- */
body { padding-block-end: 4rem; }