/* ==========================================================================
   Rotary Test Cell - css/style.css
   All styling and design tokens (SPEC 8.1 - 8.3, 8.7). No external assets.

   Contents
     1  Design tokens (light "Vellum", dark "Cell at night")
     2  Base, focus, utilities
     3  Keys: buttons, segmented groups, toggles, selects, text fields
     4  App shell - desktop (>= 1280)
     5  Header
     6  Results: tiles, readouts, lamps
     7  WHY line, pane tabs
     8  Control rail: top block, groups, rows, sliders, footer, notes, lesson
     9  Engine: toolbar, legend, canvas stack, HUD
    10  Instruments: panels, chart wrappers
    11  Cycle timeline: transport, strip chart
    12  Drawer, popover, toast, coach marks, no-JS notice
    13  Laptop / tablet landscape (900 - 1279)
    14  Narrow (< 900)
    15  Motion and contrast preferences
   ========================================================================== */

/* --------------------------------------------------------------------------
   1  Design tokens
   -------------------------------------------------------------------------- */

:root, [data-theme="light"] {          /* "Vellum" */
  --bg: #F3EFE6;            /* page */
  --panel: #FAF8F2;         /* panels, canvases */
  --inset: #ECE7DC;         /* number fields, track wells, pressed keys */
  --rule: #D3CCBD;          /* hairlines, axes, panel borders */
  --text: #1A1E22;          /* values, live traces */
  --text-mid: #4B545C;      /* labels, captions */
  --text-low: #697178;      /* units, ticks, off lamps */
  --ink: #1A1E22;           /* canvas outlines */
  --ghost: #808790;         /* baseline and drag-ghost traces and outlines */
  --hatch: #B9B1A0;         /* section hatching */
  --metal-housing: #E4DFD3;
  --metal-rotor: #CFC9BB;
  --metal-shaft: #B8B2A4;
  --side-plate: #EFEAE0;    /* side housing seen through the chambers */
  --port-well: #C9C1B0;
  --seal: #3A4047;
  --coolant: #CFE0E6;
  --coolant-hot: #E9B48C;
  --phase-intake: #1F6FC4;
  --phase-compression: #B58400;
  --phase-power: #9C1420;
  --phase-exhaust: #6F777F;
  --flame: #FFE9A8;
  --gas-fresh: #1F6FC4;
  --gas-burned: #5B6068;
  --accent: #B0156F;        /* "you can drag or press this" */
  --good: #0E7C55;
  --bad: #C22F3D;
  --warn: #8F5F00;          /* caution text and strokes */
  --warn-fill: #F2B632;     /* caution lamp fill */
  --danger: #C62828;
}

[data-theme="dark"] {                  /* "Cell at night" */
  --bg: #12161A; --panel: #181D22; --inset: #1F262D; --rule: #2B353E;
  --text: #E9EDF0; --text-mid: #A9B4BD; --text-low: #7C8994; --ink: #E9EDF0; --ghost: #6F7B86;
  --hatch: #3A4650; --metal-housing: #232B33; --metal-rotor: #3A444E; --metal-shaft: #4A5661;
  --side-plate: #151A1F; --port-well: #0A0F14; --seal: #D9D3C6; --coolant: #1D3540; --coolant-hot: #6A3A22;
  --phase-intake: #4BA3F5; --phase-compression: #FFD23F; --phase-power: #E5484D; --phase-exhaust: #8E98A3;
  --flame: #FFE9A8; --gas-fresh: #BFE3FF; --gas-burned: #C9C2B4;
  --accent: #FF7AC0; --good: #3CCB8F; --bad: #F26D78; --warn: #FFC53D; --warn-fill: #FFC53D; --danger: #FF5A5F;
}

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-label: Bahnschrift, "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;   /* DIN-style engineering lettering */
  --font-num: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, "Liberation Mono", monospace;
  --fs-cap: 11px;  --fs-axis: 10.5px;  --fs-ui: 13px;  --fs-body: 14px;  --fs-read: 13px;  --fs-tile: 30px;  --fs-h: 16px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --radius: 2px;
  --row-h: 44px;
}

/* Private tokens of this file (no other module reads them). */
:root, [data-theme="light"] {
  --lamp-warn-ink: #1A1E22;   /* text on a caution lamp */
  --lamp-danger-ink: #FFFFFF; /* text on a warning lamp (5.6:1 on --danger) */
  --shade: rgba(26, 30, 34, 0.16);   /* the one soft shadow (popover, drawer) */
  color-scheme: light;
}
[data-theme="dark"] {
  --lamp-warn-ink: #12161A;
  /* SPEC-GAP: 8.3 asks for "light text" on a warning lamp, but white on the dark
     theme's --danger (#FF5A5F) is 3.0:1 and 8.7 requires 4.5:1 for all text.
     The dark theme therefore uses dark ink on the red fill (6.6:1). */
  --lamp-danger-ink: #12161A;
  --shade: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root {
  --key-h: 26px;            /* height of a key (button) */
  --thumb: 14px;            /* slider thumb, 22 px below 900 */
  --well: 6px;              /* slider track well height */
  --rail-pad: 12px;
  --tr-fast: 120ms ease-out;
}

/* --------------------------------------------------------------------------
   2  Base, focus, utilities
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-ui)/1.35 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
canvas { display: block; }

::selection { background: var(--accent); color: var(--panel); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* thin, quiet scrollbars inside the instrument */
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-low); background-clip: content-box; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Advanced-only elements (8.2) */
#app[data-mode="basic"] [data-tier="A"],
#app[data-mode="basic"] .adv { display: none; }

/* phase swatch for phase names written in text: <span class="swatch intake"></span> */
.swatch {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 4px;
  vertical-align: baseline;
  border: 1px solid var(--ink);
  background: var(--phase-exhaust);
}
.swatch.intake, .swatch[data-phase="intake"] { background: var(--phase-intake); }
.swatch.compression, .swatch[data-phase="compression"] { background: var(--phase-compression); }
.swatch.power, .swatch[data-phase="power"] { background: var(--phase-power); }
.swatch.exhaust, .swatch[data-phase="exhaust"] { background: var(--phase-exhaust); }

/* "Show me": a control pulsed from a lamp popover (ui.js adds .pulse for about 1.5 s) */
@keyframes pulse-ring {
  0%, 100% { outline-color: var(--accent); outline-offset: 2px; }
  50%      { outline-color: transparent;   outline-offset: 6px; }
}
.pulse {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  animation: pulse-ring 500ms ease-in-out 3;
}

/* --------------------------------------------------------------------------
   3  Keys: buttons, segmented groups, toggles, selects, text fields
   -------------------------------------------------------------------------- */

:where(button) {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--key-h);
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text-mid);
  font: 600 var(--fs-cap)/1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast), box-shadow var(--tr-fast);
}
:where(button):hover { color: var(--text); border-color: var(--text-low); }
:where(button):active { background: var(--inset); }
:where(button)[aria-pressed="true"] {
  background: var(--inset);
  color: var(--text);
  border-color: var(--text-low);
  box-shadow: inset 0 -2px 0 var(--accent);     /* pressed key: accent underline */
}
:where(button):disabled,
:where(button)[aria-disabled="true"] {
  color: var(--text-low);
  border-color: var(--rule);
  background: transparent;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.55;
}

/* segmented group: keys sharing their borders */
.seg {
  display: inline-flex;
  align-items: stretch;
  flex: none;
}
.seg > button {
  position: relative;
  border-radius: 0;
  margin-left: -1px;
}
.seg > button:first-child { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.seg > button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg > button:only-child { border-radius: var(--radius); }
.seg > button:hover,
.seg > button[aria-pressed="true"],
.seg > button:focus-visible { z-index: 1; }

:where(select) {
  appearance: none;
  -webkit-appearance: none;
  height: var(--key-h);
  margin: 0;
  padding: 0 24px 0 8px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background-color: var(--panel);
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font: 500 var(--fs-ui)/1 var(--font-ui);
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color var(--tr-fast);
}
:where(select):hover { border-color: var(--text-low); }
:where(select):disabled { opacity: 0.55; cursor: not-allowed; }
option { background: var(--panel); color: var(--text); }

:where(input[type="text"], input[type="search"], input[type="number"]) {
  appearance: none;
  -webkit-appearance: none;
  height: var(--key-h);
  margin: 0;
  padding: 0 6px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--inset);
  color: var(--text);
  font: 400 var(--fs-ui)/1 var(--font-ui);
}
:where(input[type="number"]) {
  -moz-appearance: textfield;
  appearance: textfield;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(input):hover { border-color: var(--text-low); }
:where(input):disabled { opacity: 0.55; cursor: not-allowed; }
input::placeholder { color: var(--text-low); opacity: 1; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: var(--radius);
  background: var(--inset);
  color: var(--text);
  font: 500 12px/1.4 var(--font-num);
  text-align: center;
}

.badge {
  display: inline-block;
  padding: 2px 5px 1px;
  border: 1px solid var(--text-low);
  border-radius: var(--radius);
  color: var(--text-mid);
  font: 600 var(--fs-axis)/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 1px;
}
.badge:empty { display: none; }

/* --------------------------------------------------------------------------
   4  App shell - desktop (>= 1280)
   --------------------------------------------------------------------------
   +--------------------------------------------------------------+
   | #hdr 44                                                      |
   | #head 76   tiles | readouts | lamps                          |
   | #why 28                                                      |
   +-----------+--------------------------+-----------------------+
   | #rail 320 | #engine                  | #inst clamp(400,31vw, |
   |           |                          |        520)           |
   |           +--------------------------+-----------------------+
   |           | #strip 150                                       |
   +-----------+--------------------------------------------------+ */

#app {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100vh;
  height: max(100dvh, 640px);
  min-width: 320px;
}

#pane-tabs { display: none; }

#main {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) clamp(400px, 31vw, 520px);
  grid-template-rows: minmax(0, 1fr) 150px;
  min-height: 0;
  min-width: 0;
}
#rail   { grid-column: 1; grid-row: 1 / 3; }
#engine { grid-column: 2; grid-row: 1; }
#inst   { grid-column: 3; grid-row: 1; }
#strip  { grid-column: 2 / 4; grid-row: 2; }

/* --------------------------------------------------------------------------
   5  Header
   -------------------------------------------------------------------------- */

#hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: var(--sp-2);
  color: var(--text);
  font: 700 var(--fs-h)/1 var(--font-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand::before {        /* the mark: a rotor in its housing, drawn from the real curves (K = 7) */
  content: "";
  flex: none;
  width: 24px; height: 28px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.66 12L20.69 12.66L20.74 13.52L20.76 14.65L20.6 16.04L20.15 17.61L19.29 19.22L17.99 20.72L16.27 21.95L14.22 22.76L12 23.04L9.78 22.76L7.73 21.95L6.01 20.72L4.71 19.22L3.85 17.61L3.4 16.04L3.24 14.65L3.26 13.52L3.31 12.66L3.34 12L3.31 11.34L3.26 10.48L3.24 9.35L3.4 7.96L3.85 6.39L4.71 4.78L6.01 3.28L7.73 2.05L9.78 1.24L12 0.96L14.22 1.24L16.27 2.05L17.99 3.28L19.29 4.78L20.15 6.39L20.6 7.96L20.76 9.35L20.74 10.48L20.69 11.34ZM19.56 12L19.59 11.27L19.65 10.42L19.66 9.39L19.52 8.16L19.13 6.8L18.38 5.4L17.24 4.09L15.74 3.01L13.95 2.31L12 2.06L10.05 2.31L8.26 3.01L6.76 4.09L5.62 5.4L4.87 6.8L4.48 8.16L4.34 9.39L4.35 10.42L4.41 11.27L4.44 12L4.41 12.73L4.35 13.58L4.34 14.61L4.48 15.84L4.87 17.2L5.62 18.6L6.76 19.91L8.26 20.99L10.05 21.69L12 21.94L13.95 21.69L15.74 20.99L17.24 19.91L18.38 18.6L19.13 17.2L19.52 15.84L19.66 14.61L19.65 13.58L19.59 12.73Z'/%3E%3Cpath fill-rule='evenodd' d='M18.95 7.69A15.41 15.41 0 0 1 14.03 21.2A15.41 15.41 0 0 1 4.79 10.19A15.41 15.41 0 0 1 18.95 7.69ZM14.69 13.03A2.1 2.1 0 1 0 10.49 13.03A2.1 2.1 0 1 0 14.69 13.03Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M20.66 12L20.69 12.66L20.74 13.52L20.76 14.65L20.6 16.04L20.15 17.61L19.29 19.22L17.99 20.72L16.27 21.95L14.22 22.76L12 23.04L9.78 22.76L7.73 21.95L6.01 20.72L4.71 19.22L3.85 17.61L3.4 16.04L3.24 14.65L3.26 13.52L3.31 12.66L3.34 12L3.31 11.34L3.26 10.48L3.24 9.35L3.4 7.96L3.85 6.39L4.71 4.78L6.01 3.28L7.73 2.05L9.78 1.24L12 0.96L14.22 1.24L16.27 2.05L17.99 3.28L19.29 4.78L20.15 6.39L20.6 7.96L20.76 9.35L20.74 10.48L20.69 11.34ZM19.56 12L19.59 11.27L19.65 10.42L19.66 9.39L19.52 8.16L19.13 6.8L18.38 5.4L17.24 4.09L15.74 3.01L13.95 2.31L12 2.06L10.05 2.31L8.26 3.01L6.76 4.09L5.62 5.4L4.87 6.8L4.48 8.16L4.34 9.39L4.35 10.42L4.41 11.27L4.44 12L4.41 12.73L4.35 13.58L4.34 14.61L4.48 15.84L4.87 17.2L5.62 18.6L6.76 19.91L8.26 20.99L10.05 21.69L12 21.94L13.95 21.69L15.74 20.99L17.24 19.91L18.38 18.6L19.13 17.2L19.52 15.84L19.66 14.61L19.65 13.58L19.59 12.73Z'/%3E%3Cpath fill-rule='evenodd' d='M18.95 7.69A15.41 15.41 0 0 1 14.03 21.2A15.41 15.41 0 0 1 4.79 10.19A15.41 15.41 0 0 1 18.95 7.69ZM14.69 13.03A2.1 2.1 0 1 0 10.49 13.03A2.1 2.1 0 1 0 14.69 13.03Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hdr-field, .rail-field {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-mid);
  font: 600 var(--fs-cap)/1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hdr-field select, .rail-field select {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: none;
  letter-spacing: 0;
}
.hdr-field { flex: 1000 1 170px; max-width: 286px; }
.hdr-spacer { flex: 1 1 0; min-width: 0; }

#btn-theme { min-width: 58px; }

/* --------------------------------------------------------------------------
   6  Results: tiles, readouts, lamps
   -------------------------------------------------------------------------- */

#head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}

/* headline tiles: caption + unit / value / delta chip */
#tiles {
  display: grid;
  grid-template-columns: repeat(4, auto);
  min-width: 0;
}
.tile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 14px 34px 14px;
  grid-template-areas:
    "cap   unit"
    "val   val"
    "delta delta";
  align-content: center;
  column-gap: 6px;
  min-width: 116px;
  padding: 6px var(--sp-2) 6px;
  border-right: 1px solid var(--rule);
}
.tile-cap {
  grid-area: cap;
  align-self: end;
  color: var(--text-mid);
  font: 600 var(--fs-cap)/14px var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tile-unit {
  grid-area: unit;
  align-self: end;
  justify-self: end;
  color: var(--text-low);
  font: 500 var(--fs-cap)/14px var(--font-label);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.tile-val {
  grid-area: val;
  align-self: center;
  min-width: 5ch;
  color: var(--text);
  font: 600 var(--fs-tile)/34px var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tile-delta {
  grid-area: delta;
  align-self: start;
  color: var(--text-mid);
  font: 500 var(--fs-axis)/14px var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tile-delta:empty::before { content: "\00a0"; }       /* keeps the line, so tiles never jump */
.good, .tile.good .tile-delta, .ro.good .ro-delta { color: var(--good); }
.bad,  .tile.bad .tile-delta,  .ro.bad .ro-delta  { color: var(--bad); }

/* secondary readouts: label over value, set as a small table with fixed column
   proportions, so nothing moves when a value changes length. The column widths
   are budgets in px measured with the longest metric and US strings plus room
   for a delta chip; they stretch in proportion on wider screens.
   From 1700 px: two rows of six, in the order of SPEC 1.3. Below that: three
   rows of four (media queries after section 12). */
#readouts {
  display: grid;
  grid-template-columns:
    minmax(0, 114fr) minmax(0, 98fr) minmax(0, 206fr) minmax(0, 226fr) minmax(0, 130fr) minmax(0, 76fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  row-gap: 2px;
  min-width: 0;
  padding: 5px 0 5px 10px;
  overflow: hidden;
}
.ro {
  min-width: 0;
  padding-right: 5px;
}
.ro[data-out="bmepBar"]    { grid-area: 1 / 1; }
.ro[data-out="ve"]         { grid-area: 1 / 2; }
.ro[data-out="mapKpa"]     { grid-area: 1 / 3; }
.ro[data-out="peakP"]      { grid-area: 1 / 4; }
.ro[data-out="egtK"]       { grid-area: 1 / 5; }
.ro[data-out="xr"]         { grid-area: 1 / 6; }
.ro[data-out="overlapDeg"] { grid-area: 2 / 1; }
.ro[data-out="leakFrac"]   { grid-area: 2 / 2; }
.ro[data-out="knockIdx"]   { grid-area: 2 / 3; }
.ro[data-out="spark"]      { grid-area: 2 / 4; }
.ro[data-out="fuelKgH"]    { grid-area: 2 / 5; }
.ro > dt {
  overflow: hidden;
  color: var(--text-mid);
  font: 500 var(--fs-axis)/12px var(--font-label);
  font-stretch: 75%;                 /* Bahnschrift has a width axis: its condensed cut for the long labels */
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ro > dd {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--text);
  font: 500 var(--fs-read)/16px var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ro[tabindex], .ro > dt[tabindex], .tile[tabindex] { cursor: help; }
.ro-delta, .ro .delta {
  color: var(--text-mid);
  font-size: var(--fs-axis);
}
.ro-delta.good, .ro .delta.good { color: var(--good); }
.ro-delta.bad,  .ro .delta.bad  { color: var(--bad); }
.ro-tag, .ro .tag {                 /* MBT / knock-limited / manual */
  padding: 0 3px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-mid);
  font: 600 var(--fs-axis)/14px var(--font-label);
  font-stretch: 75%;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ro-tag[data-tag="knock-limited"], .ro-tag.warn { border-color: var(--warn); color: var(--warn); }

/* small bar gauge (detonation risk 0 ... 1.2): <span class="gauge"><i style="width:35%"></i></span>
   or a native <meter>; the 1.0 mark sits at 83.3 % */
.gauge, .ro-gauge {
  position: relative;
  flex: none;
  display: inline-block;
  width: 26px; height: 8px;
  border: 1px solid var(--text-low);
  background: var(--inset);
}
.gauge > *, .ro-gauge > * {
  display: block;
  height: 100%;
  max-width: 100%;
  background: var(--text);
}
.gauge::after, .ro-gauge::after {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  left: 83.3%;
  width: 1px;
  background: var(--danger);
}
.gauge[data-level="1"] > *, .ro-gauge[data-level="1"] > * { background: var(--warn); }
.gauge[data-level="2"] > *, .ro-gauge[data-level="2"] > * { background: var(--danger); }
meter {
  flex: none;
  width: 26px; height: 8px;
  border: 1px solid var(--text-low);
  border-radius: 0;
  background: var(--inset);
}
meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 0; background: var(--inset); }
meter::-webkit-meter-optimum-value { background: var(--text); border-radius: 0; }
meter::-webkit-meter-suboptimum-value { background: var(--warn); border-radius: 0; }
meter::-webkit-meter-even-less-good-value { background: var(--danger); border-radius: 0; }
meter::-moz-meter-bar { background: var(--text); border-radius: 0; }

/* warning lamps: off = outlined capitals; caution = amber fill, dark text;
   warning = red fill plus an outer ring. No blinking. */
#lamps {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  grid-auto-rows: 24px;
  align-content: center;
  justify-content: start;
  gap: 7px 6px;
  padding: 0 var(--sp-2);
  border-left: 1px solid var(--rule);
  list-style: none;
}
.lamp {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--text-low);
  font: 600 var(--fs-axis)/1 var(--font-label);
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--tr-fast), border-color var(--tr-fast), color var(--tr-fast);
}
.lamp:has(> button) { padding: 0; }
.lamp > button {
  width: 100%; height: 100%;
  padding: 0 5px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-stretch: inherit;
  letter-spacing: inherit;
}
.lamp:hover { border-color: var(--text-low); }
.lamp[data-level="1"] {
  border-color: var(--warn-fill);
  background: var(--warn-fill);
  color: var(--lamp-warn-ink);
}
.lamp[data-level="2"] {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--lamp-danger-ink);
  outline: 1px solid var(--danger);       /* the ring: readable without colour */
  outline-offset: 2px;
}
.lamp:focus-visible, .lamp > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the summary lamp only exists below 1280 px (section 13) */
.lamp-summary { display: none; }

/* --------------------------------------------------------------------------
   7  WHY line, pane tabs
   -------------------------------------------------------------------------- */

#why {
  position: relative;
  min-height: 28px;
  padding: 4px var(--sp-3) 5px 62px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-ui)/1.45 var(--font-ui);
  /* SPEC-GAP: 8.2 gives this line 28 px (one line) but a WHY sentence can run to
     about 45 words. One line is kept as the normal case; a longer sentence wraps
     and the row grows rather than being cut off (at most three lines). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
#why::before {
  content: "WHY";
  position: absolute;
  left: var(--sp-3);
  top: 6px;
  padding: 2px 6px 1px;
  background: var(--text);
  color: var(--bg);
  font: 700 var(--fs-axis)/1.2 var(--font-label);
  letter-spacing: 0.12em;
}

/* --------------------------------------------------------------------------
   8  Control rail
   -------------------------------------------------------------------------- */

#rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--rule);
  background: var(--panel);
}
#rail > * { flex: none; }

/* 8.1 top block: preset note, port style, reset */
#rail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 10px var(--rail-pad) var(--sp-3);
}
#preset-note, #style-desc {
  color: var(--text-mid);
  font: 400 12px/1.4 var(--font-ui);
}
#preset-note:has(#preset-conf:empty):has(#preset-note-text:empty),
#style-desc:empty { display: none; }
#preset-conf { margin-right: 2px; }
.rail-field { justify-content: space-between; }
.rail-field select { max-width: 200px; }
#btn-reset { justify-self: start; }

/* 8.2 groups: <section class="group" data-group> with a header button that
   collapses it, then the rows. The header is matched structurally (a button
   that is the group's first child, or sits in its heading), so the classes
   .group-head / .group-toggle / .group-title / .group-sum / .group-body are
   optional hooks. */
.group { border-top: 1px solid var(--rule); }
.group-head, .group > :where(h2, h3, h4, header) { margin: 0; font: inherit; }
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary) {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 2px 8px;
  width: 100%;
  height: auto;
  min-height: 34px;
  padding: 6px var(--rail-pad);
  border: 0;
  border-radius: 0;
  background: var(--bg);
  box-shadow: none;
  color: var(--text);
  font: 700 12px/1.2 var(--font-label);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
  cursor: pointer;
  list-style: none;
}
.group summary::-webkit-details-marker { display: none; }
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary)::before {
  content: "";                 /* chevron: down when open, right when collapsed */
  grid-column: 1;
  grid-row: 1;
  width: 6px; height: 6px;
  margin: -3px 2px 0 1px;
  border: solid var(--text-mid);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
  transition: transform var(--tr-fast);
}
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle)[aria-expanded="false"]::before,
.group.collapsed :is(button.group-head, .group-toggle)::before,
.group details:not([open]) > summary::before {
  margin: 0 3px 0 0;
  transform: rotate(-45deg);
}
/* item numbers, as on a parts list: 01 OPERATING POINT */
#groups { counter-reset: grp; }
.group { counter-increment: grp; }
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary)::after {
  content: counter(grp, decimal-leading-zero);
  content: counter(grp, decimal-leading-zero) / "";
  grid-column: 2;
  grid-row: 1;
  color: var(--text-low);
  font: 500 var(--fs-axis)/1 var(--font-num);
  letter-spacing: 0;
}
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary):hover { background: var(--inset); }
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary):focus-visible { outline-offset: -2px; }
.group-title { grid-column: 3; grid-row: 1; }
/* one-line value summary of a collapsed group, under the title */
.group-sum, .group-summary,
:is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary) > span + span {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  overflow: hidden;
  color: var(--text-mid);
  font: 400 var(--fs-cap)/1.3 var(--font-num);
  letter-spacing: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}
.group-sum:empty, .group-summary:empty { display: none; }
.group-body, .group > :is(div, fieldset):not(.row) { margin: 0; padding: 2px var(--rail-pad) var(--sp-2); border: 0; }
.group.collapsed > .group-body, .group.collapsed > :is(div, fieldset):not(.row) { display: none; }
/* rows placed straight inside the group (no body wrapper) */
.group > .row { margin: 0 var(--rail-pad); }

/* 8.3 control row (structure fixed by SPEC 8.1) */
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  min-height: var(--row-h);
  padding: 4px 0 3px;
  border-bottom: 1px solid transparent;
}
.row + .row { border-top: 1px dotted var(--rule); }
.row-head {
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
}
.row-label {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--text);
  font: 500 var(--fs-ui)/1.2 var(--font-ui);
  cursor: pointer;
}
.row-info {
  flex: none;
  position: relative;
  width: 15px; height: 15px;
  padding: 0;
  border: 1px solid var(--text-low);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--text-mid);
  font: 600 var(--fs-axis)/1 var(--font-num);
  letter-spacing: 0;
  text-transform: none;
}
.row-info::after { content: ""; position: absolute; inset: -6px; }      /* larger hit area */
.row-info:hover, .row-info[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: transparent; }
.row-num {
  flex: none;
  width: 58px;
  height: 22px;
  margin-left: auto;
  padding: 0 5px;
  font-size: var(--fs-read);
}
.row-unit, .row-head > span {
  flex: 0 1 auto;
  min-width: 24px;
  max-width: 44%;
  color: var(--text-low);
  font: 500 var(--fs-cap)/1.15 var(--font-label);
  letter-spacing: 0.02em;
}
.row-head > .row-num ~ span { text-align: left; }
.row-reset {
  flex: none;
  height: 18px;
  padding: 0 4px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--accent);
  font-size: var(--fs-axis);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.row-reset:hover { border-color: var(--accent); color: var(--accent); }

/* slider: a 2 px line in an inset well, square accent thumb with a centre hairline */
.row-range {
  grid-row: 2;
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.row-range::-webkit-slider-runnable-track {
  height: var(--well);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--text-low), var(--text-low)) 0 50% / 100% 2px no-repeat,
    var(--inset);
}
.row-range::-moz-range-track {
  height: var(--well);
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(var(--text-low), var(--text-low)) 0 50% / 100% 2px no-repeat,
    var(--inset);
}
.row-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--thumb); height: var(--thumb);
  margin-top: calc((var(--well) - var(--thumb)) / 2);
  border: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--panel), var(--panel)) 50% 50% / 1px 60% no-repeat,
    var(--accent);
  cursor: grab;
}
.row-range::-moz-range-thumb {
  width: var(--thumb); height: var(--thumb);
  border: 0;
  border-radius: var(--radius);
  background:
    linear-gradient(var(--panel), var(--panel)) 50% 50% / 1px 60% no-repeat,
    var(--accent);
  cursor: grab;
}
.row-range:active::-webkit-slider-thumb { cursor: grabbing; }
.row-range:active::-moz-range-thumb { cursor: grabbing; }
.row-range:focus-visible { outline-offset: 1px; }

/* preset and baseline ticks under the track. ui.js positions them either with an
   inline `left`, or by setting --pos (0 ... 1) and leaving `left` to this rule.
   Their containing block is the slider's own grid cell. */
.tick-preset, .tick-base {
  position: absolute;
  grid-row: 2;
  grid-column: 1;
  left: calc(var(--thumb) / 2 + var(--pos, 0) * (100% - var(--thumb)));
  bottom: 0;
  z-index: 0;
  width: 1px;
  height: 5px;
  margin-left: -0.5px;
  background: var(--text-low);
  pointer-events: none;
}
.tick-base {
  width: 2px;
  height: 6px;
  margin-left: -1px;
  background: var(--ghost);
}
.tick-base::after {            /* a foot, so baseline and preset ticks differ in shape too */
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: 0;
  height: 1px;
  background: var(--ghost);
}

/* enum and bool rows */
.row-seg {
  grid-row: 2;
  display: flex;
  margin: 2px 0 3px;
}
.row-seg > button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-tog {
  grid-row: 2;
  justify-self: start;
  gap: 7px;
  margin: 2px 0 3px;
}
.row-tog::before {             /* check box: hollow = off, filled with a tick = on */
  content: "";
  flex: none;
  width: 10px; height: 10px;
  border: 1px solid var(--text-low);
  background: var(--panel);
}
.row-tog[aria-pressed="true"]::before {
  border-color: var(--accent);
  background:
    linear-gradient(var(--panel), var(--panel)) 50% 50% / 4px 4px no-repeat,
    var(--accent);
}
.row-note {
  grid-row: 3;
  margin: 1px 0 2px;
  padding-left: 14px;
  color: var(--warn);
  font: 500 11.5px/1.35 var(--font-ui);
  background: linear-gradient(var(--warn), var(--warn)) 3px 5px / 5px 5px no-repeat;   /* square marker */
}

/* automatic spark row: still grabbable, shown dimmed with the caption "auto" */
.row.auto .row-label::after {
  content: "auto";
  margin-left: 6px;
  padding: 1px 4px 0;
  border: 1px solid var(--text-low);
  border-radius: var(--radius);
  color: var(--text-mid);
  font: 600 var(--fs-axis)/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}
.row.auto .row-num { color: var(--text-low); }
.row.auto .row-range::-webkit-slider-thumb {
  background:
    linear-gradient(var(--panel), var(--panel)) 50% 50% / 1px 60% no-repeat,
    var(--ghost);
}
.row.auto .row-range::-moz-range-thumb {
  background:
    linear-gradient(var(--panel), var(--panel)) 50% 50% / 1px 60% no-repeat,
    var(--ghost);
}

/* locked rows (lesson) and rows that do not apply (octane on E85) */
.row.locked .row-label, .row.disabled .row-label, .row[aria-disabled="true"] .row-label,
.row:has(.row-range:disabled) .row-label,
.row:has(.row-seg > button:disabled) .row-label,
.row:has(.row-tog:disabled) .row-label { color: var(--text-low); cursor: default; }
.row-range:disabled { cursor: not-allowed; opacity: 1; }
.row-range:disabled::-webkit-slider-thumb { background: var(--rule); cursor: not-allowed; }
.row-range:disabled::-moz-range-thumb { background: var(--rule); cursor: not-allowed; }
.row-range:disabled::-webkit-slider-runnable-track {
  background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 2px no-repeat, var(--inset);
}
.row-range:disabled::-moz-range-track {
  background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 2px no-repeat, var(--inset);
}

/* 8.4 geometry footer: a title block of derived values */
#geo-footer {
  padding: var(--sp-2) var(--rail-pad) var(--sp-3);
  border-top: 1px solid var(--rule);
  background: var(--bg);
}
#geo-footer:empty { display: none; }
#geo-footer :where(h2, h3, h4), .rail-title {
  margin: 2px 0 6px;
  color: var(--text-mid);
  font: 700 var(--fs-cap)/1.2 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#geo-footer dl { display: block; }
#geo-footer .ro, #geo-footer .geo-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 4px 0;
  border-top: 1px dotted var(--rule);
}
#geo-footer .ro > dt, #geo-footer .geo-row > dt {
  font: 500 var(--fs-cap)/1.3 var(--font-label);
  white-space: normal;
}
#geo-footer .ro > dd, #geo-footer .geo-row > dd {
  display: block;
  overflow: visible;
  font: 400 12px/1.4 var(--font-num);
  white-space: normal;
}

/* 8.5 mechanic's note card ("Did you know") */
#notes {
  margin: var(--sp-3) var(--rail-pad);
  padding: 10px var(--sp-3);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--text-low);
  background: var(--bg);
  font: 400 12.5px/1.45 var(--font-ui);
  color: var(--text-mid);
}
#notes :where(h2, h3, h4) {
  margin: 0 0 4px;
  color: var(--text);
  font: 600 var(--fs-ui)/1.3 var(--font-ui);
}
#notes .note-topic, #notes .note-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--text-mid);
  font: 700 var(--fs-axis)/1.2 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#notes .note-nav, #notes > div:last-child:has(button) {
  display: flex;
  gap: 6px;
  margin-top: var(--sp-2);
}

/* 8.6 lesson card: pinned to the top of the rail while a lesson runs */
#lesson {
  order: -1;
  position: sticky;
  top: 0;
  z-index: 5;
  max-height: min(62vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px var(--rail-pad) var(--sp-3);
  border-bottom: 1px solid var(--ink);
  border-top: 3px double var(--ink);
  background: var(--panel);
  color: var(--text);
  font: 400 var(--fs-body)/1.5 var(--font-ui);
}
#lesson > * + *, #lesson .lesson-body > * + * { margin-top: var(--sp-2); }
/* any bare row of buttons (options, Back / Next) gets spacing */
:is(#lesson, #notes, #popover, .coach) div:has(> button):not(.lesson-options) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lesson-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}
#lesson :where(h2, h3), .lesson-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font: 700 var(--fs-h)/1.2 var(--font-label);
  letter-spacing: 0.04em;
}
.lesson-count, .lesson-step {
  flex: none;
  color: var(--text-mid);
  font: 600 var(--fs-cap)/1.6 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lesson-text { font: 400 var(--fs-body)/1.5 var(--font-ui); }
.lesson-watch {
  padding-left: 10px;
  border-left: 2px solid var(--text-low);
  color: var(--text-mid);
  font: 400 12.5px/1.45 var(--font-ui);
}
.lesson-q, .lesson-predict > p:first-child {
  font: 600 var(--fs-body)/1.4 var(--font-ui);
}
.lesson-options {
  display: grid;
  gap: 5px;
  margin-top: 6px;
  list-style: none;
}
.lesson-options button {
  justify-content: flex-start;
  width: 100%;
  text-align: left;
}
.lesson-feedback, .lesson-explain {
  padding: 6px 10px;
  background: var(--inset);
  font: 400 var(--fs-ui)/1.45 var(--font-ui);
}
.lesson-done, .lesson-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-mid);
  font: 500 12.5px/1.3 var(--font-ui);
}
.lesson-check {                 /* hollow ring; fills with a tick when the step is done */
  position: relative;
  flex: none;
  display: inline-block;
  width: 16px; height: 16px;
  border: 1.5px solid var(--text-low);
  border-radius: 50%;
  vertical-align: -3px;
}
.lesson-check.done, .lesson-check[data-done="true"], .lesson-check[aria-checked="true"],
.done > .lesson-check {
  border-color: var(--good);
  background: var(--good);
}
.lesson-check.done::after, .lesson-check[data-done="true"]::after, .lesson-check[aria-checked="true"]::after,
.done > .lesson-check::after {
  content: "";
  position: absolute;
  left: 4.5px; top: 1.5px;
  width: 4px; height: 8px;
  border: solid var(--panel);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.lesson-targets { display: grid; gap: 4px; list-style: none; font-size: var(--fs-ui); }
.lesson-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.lesson-nav .lesson-restore, .lesson-nav > :last-child:not(:only-child):not(:nth-child(2)) { margin-left: auto; }
.lesson-takeaway {
  padding: var(--sp-2) 10px;
  border: 1px solid var(--ink);
  background: var(--bg);
  font: 500 var(--fs-body)/1.45 var(--font-ui);
}
.lesson-takeaway::before {
  content: "TAKEAWAY";
  display: block;
  margin-bottom: 3px;
  color: var(--text-mid);
  font: 700 var(--fs-axis)/1.2 var(--font-label);
  letter-spacing: 0.1em;
}

/* buttons inside reading surfaces are sentence-case keys */
:where(#lesson, #notes, #drawer, #popover, .coach) button {
  height: auto;
  min-height: 28px;
  padding: 4px 10px;
  font: 500 var(--fs-ui)/1.25 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
:where(#lesson, #drawer, #popover, .coach) button.primary,
.lesson-next {
  border-color: var(--text);
  background: var(--text);
  color: var(--panel);
}
:where(#lesson, #drawer, #popover, .coach) button.primary:hover,
.lesson-next:hover { color: var(--panel); border-color: var(--accent); }
.lesson-close, .drawer-close {
  flex: none;
  min-width: 28px;
  padding: 4px 8px;
}

/* --------------------------------------------------------------------------
   9  Engine
   -------------------------------------------------------------------------- */

#engine {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--panel);
  container-type: inline-size;
}

#eng-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-height: 32px;
  padding: 4px var(--sp-2) 3px;
  border-bottom: 1px solid var(--rule);
}
#eng-toolbar button {
  height: 24px;
  padding: 0 5px;
  font-stretch: 75%;                 /* condensed cut: the whole strip fits one line at 1440 */
  letter-spacing: 0.05em;
}
#seg-follow > button { min-width: 23px; }
/* the layer toggles read as one strip of switches */
#eng-toolbar > .tog { border-radius: 0; }
#eng-toolbar > .tog + .tog { margin-left: -7px; }
#eng-toolbar > .tog:hover,
#eng-toolbar > .tog[aria-pressed="true"],
#eng-toolbar > .tog:focus-visible { position: relative; z-index: 1; }

#eng-legend {
  flex: none;
  min-height: 18px;
  padding: 3px var(--sp-2) 2px;
  color: var(--text-low);
  font: 500 var(--fs-cap)/14px var(--font-label);
  font-stretch: 75%;
  letter-spacing: 0.03em;
}
#eng-legend:empty { display: none; }

/* The drawing sheet. It fills the column and is never taller than it is wide
   (SPEC 8.2 "aspect-ratio 1 / 1 at most"; the phone rule "min(46vh, 100vw)" is
   the same idea). SPEC-GAP: the desktop diagram calls it a "square stack"; the
   extra width is kept because the fit rule of 6.1 wants 0.9 R of spare width for
   port runners, plugs and margin labels. */
#engine-stack {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 100vw;
  max-height: 100cqw;
  overflow: hidden;
  background: var(--panel);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
/* FIX(review): the outline was painted over by the canvases; the ring is drawn by a layer above them */
#engine-stack:focus-visible { outline: none; }
#engine-stack:focus-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  box-shadow: inset 0 0 0 3px var(--focus, var(--accent));
  pointer-events: none;
}
#engine-stack::after {          /* the sheet's border line, as on a drawing */
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 2;
  border: 1px solid var(--rule);
  pointer-events: none;
}
#eng-static, #eng-dynamic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* followed-chamber card, top right of the sheet */
#eng-hud {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: calc(100% - 16px);
  padding: 4px var(--sp-2);
  border: 1px solid var(--ink);
  background: var(--panel);
  color: var(--text);
  font: 500 12px/1.4 var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: pre;
  pointer-events: none;
  z-index: 3;
}
#eng-hud:empty { display: none; }
#eng-hud > :first-child:not(:only-child) { font-weight: 700; }
#eng-hud .hud-letter { font-weight: 700; }
#eng-hud .hud-phase {
  font: 700 var(--fs-cap)/1.4 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   10  Instruments
   -------------------------------------------------------------------------- */

#inst {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 38fr) minmax(0, 40fr) minmax(0, 22fr);
  min-width: 0;
  min-height: 0;
  border-left: 1px solid var(--rule);
  background: var(--panel);
}
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.panel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--rule);
}
.panel-row > .panel + .panel { border-left: 1px solid var(--rule); }
#slot-energy { border-top: 1px solid var(--rule); }

.panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 6px 3px var(--sp-2);
}
.panel-head button {
  height: 22px;
  padding: 0 6px;
  font-stretch: 75%;
  letter-spacing: 0.05em;
}
.panel-head > .seg { flex: 0 1 auto; min-width: 0; }
.panel-head > .seg > button { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.panel-head > button { margin-left: auto; }
.panel-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--text-mid);
  font: 600 var(--fs-cap)/1.2 var(--font-label);
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
#btn-pvlog { text-transform: none; }

/* every chart: a base canvas and, where there is a moving cursor, a cursor canvas on top */
.chart-wrap {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
}
.chart, .chart-cur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.chart-cur { z-index: 1; }
/* charts that scrub or set a value by dragging: let a vertical swipe still scroll the page */
#wrap-strip, #wrap-pv, #wrap-dyno {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
#wrap-strip, #wrap-pv { cursor: crosshair; }
#wrap-dyno { cursor: ew-resize; }

/* --------------------------------------------------------------------------
   11  Cycle timeline
   -------------------------------------------------------------------------- */

#strip {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-top: 1px solid var(--rule);
  background: var(--panel);
}

#transport {
  flex: none;
  display: grid;
  grid-template-columns: repeat(6, auto) auto minmax(0, 1fr);
  grid-template-rows: 15px 15px;
  align-items: center;
  align-content: center;
  column-gap: 4px;
  height: 36px;
  padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
#transport > button, #transport > .seg {
  grid-row: 1 / 3;
}
#transport > button {
  min-width: 30px;
  padding: 0 7px;
}
#btn-prev-ev, #btn-step-back, #btn-step-fwd, #btn-next-ev {
  font: 700 12px/1 var(--font-num);
  letter-spacing: 0;
}
#btn-play {
  min-width: 62px;
  border-color: var(--text);
  background: var(--text);
  color: var(--panel);
}
#btn-play:hover { border-color: var(--accent); color: var(--panel); }
#btn-turn { margin-left: 6px; }
#seg-speed { margin-left: 6px; }
#seg-speed > button {
  padding: 0 6px;
  font-family: var(--font-num);
  letter-spacing: 0;
  text-transform: none;
}
#angle-readout, #slowdown {
  grid-column: 8;
  justify-self: end;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#angle-readout {
  grid-row: 1;
  color: var(--text);
  font: 500 var(--fs-cap)/15px var(--font-num);
  font-variant-numeric: tabular-nums;
}
#slowdown {             /* "6000 rpm shaft / 2000 rpm rotor - slowed 82x" */
  grid-row: 2;
  color: var(--text-mid);
  font: 600 var(--fs-axis)/15px var(--font-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#wrap-strip { flex: 1 1 0; }

/* --------------------------------------------------------------------------
   12  Drawer, popover, toast, coach marks, no-JS notice
   -------------------------------------------------------------------------- */

#drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 40;
  width: 380px;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 20px 28px;
  border-left: 1px solid var(--ink);
  background: var(--panel);
  box-shadow: -14px 0 36px var(--shade);
  color: var(--text);
  font: 400 var(--fs-body)/1.5 var(--font-ui);
}
#drawer > :first-child {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -20px var(--sp-3);
  padding: var(--sp-3) 20px 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.drawer-head, #drawer > header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
#drawer :where(h2), .drawer-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font: 700 var(--fs-h)/1.25 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
#drawer :where(h3) {
  margin: var(--sp-4) 0 var(--sp-1);
  color: var(--text);
  font: 700 12px/1.3 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#drawer :where(p) { margin: 0 0 10px; }
#drawer :where(ul, ol) { margin: 0 0 10px; padding-left: 18px; }
#drawer :where(li) { margin: 0 0 6px; }
#drawer :where(a) { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 2px; }
#drawer :where(input[type="search"], input[type="text"]) {
  width: 100%;
  height: 32px;
  margin: 0 0 var(--sp-3);
  padding: 0 10px;
  font-size: var(--fs-body);
}
/* glossary */
#drawer :where(dl) { margin: 0; }
#drawer :where(dt) {
  margin: 0;
  padding-top: 10px;
  border-top: 1px dotted var(--rule);
  color: var(--text);
  font: 600 var(--fs-body)/1.35 var(--font-ui);
}
#drawer :where(dd) {
  margin: 2px 0 10px;
  color: var(--text-mid);
  font: 400 var(--fs-ui)/1.5 var(--font-ui);
}
#drawer mark, #popover mark { background: var(--warn-fill); color: var(--lamp-warn-ink); }
/* lesson and challenge lists */
.lesson-list, .challenge-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
#drawer .lesson-list > li, #drawer .challenge-list > li { margin: 0; }
.lesson-item, #drawer :where(.lesson-list, .challenge-list) button {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 2px;
  width: 100%;
  padding: var(--sp-2) 10px;
  text-align: left;
}
.lesson-item-title, .lesson-item > strong, #drawer :where(.lesson-list, .challenge-list) button > strong {
  color: var(--text);
  font: 600 var(--fs-body)/1.3 var(--font-ui);
}
.lesson-item-meta, .lesson-item > small, #drawer :where(.lesson-list, .challenge-list) button > small {
  color: var(--text-low);
  font: 600 var(--fs-axis)/1.3 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lesson-item-goal, .lesson-item > span:last-child {
  color: var(--text-mid);
  font: 400 12.5px/1.4 var(--font-ui);
}
/* shortcut list */
#drawer :where(table) {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-ui);
}
#drawer :where(th, td) {
  padding: 5px 0;
  border-top: 1px dotted var(--rule);
  text-align: left;
  vertical-align: baseline;
}
#drawer :where(th, td):first-child { width: 132px; padding-right: var(--sp-2); white-space: nowrap; }
#drawer :where(th) { font-weight: 600; }

#popover {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: min(320px, calc(100vw - 16px));
  padding: 10px var(--sp-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 6px 20px var(--shade);
  color: var(--text);
  font: 400 var(--fs-ui)/1.45 var(--font-ui);
}
#popover :where(h3, h4, strong:first-child), .pop-title {
  display: block;
  margin: 0 0 4px;
  color: var(--text);
  font: 700 var(--fs-cap)/1.3 var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#popover :where(p) + :where(p) { margin-top: 6px; }
#popover :where(button) { margin-top: var(--sp-2); }
.pop-actions { display: flex; gap: 6px; }

#toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 70;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: var(--sp-2) 14px;
  border: 1px solid var(--text);
  border-radius: var(--radius);
  background: var(--text);
  color: var(--panel);
  font: 500 var(--fs-ui)/1.4 var(--font-ui);
  text-align: center;
}
/* FIX(review): action button inside a toast ('Restore my engine' after a lesson is closed) */
#toast .toast-act {
  margin-left: var(--sp-2);
  padding: 2px 10px;
  border: 1px solid var(--panel);
  border-radius: var(--radius);
  background: transparent;
  color: var(--panel);
  font: inherit;
  cursor: pointer;
}
#toast .toast-act:hover { background: var(--panel); color: var(--text); }
#toast .toast-act:focus-visible { outline: 2px solid var(--panel); outline-offset: 2px; }

/* first-run coach marks: ui.js positions them (left / top) over their anchor */
.coach {
  position: absolute;
  z-index: 30;
  width: max-content;
  max-width: 260px;
  padding: var(--sp-2) 10px;
  border: 1px solid var(--accent);
  border-top-width: 3px;
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font: 400 var(--fs-ui)/1.4 var(--font-ui);
}
.coach :where(button) { margin-top: 6px; }

.noscript {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 80;
  transform: translate(-50%, -50%);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ink);
  background: var(--panel);
  color: var(--text);
  font: 600 var(--fs-h)/1.3 var(--font-ui);
  text-align: center;
}

/* Desktop below 1700 px. SPEC-GAP: 8.2 gives the results strip 76 px with two
   rows of readouts, but the eleven readouts of 1.3 with their units and delta
   chips measure about 850 px as two rows and only about 600 px is left between
   the tiles and the lamps at 1440. Below 1700 px the strip therefore takes a
   third row (100 px): columns = output and breathing | flows | combustion |
   charge quality. Nothing is cut or hidden. */
@media (min-width: 1280px) and (max-width: 1699.98px) {
  #head { min-height: 100px; }
  #readouts {
    grid-template-columns: minmax(0, 114fr) minmax(0, 145fr) minmax(0, 226fr) minmax(0, 91fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .ro[data-out="bmepBar"]    { grid-area: 1 / 1; }
  .ro[data-out="ve"]         { grid-area: 2 / 1; }
  .ro[data-out="overlapDeg"] { grid-area: 3 / 1; }
  .ro[data-out="mapKpa"]     { grid-area: 1 / 2; }
  .ro[data-out="egtK"]       { grid-area: 2 / 2; }
  .ro[data-out="fuelKgH"]    { grid-area: 3 / 2; }
  .ro[data-out="peakP"]      { grid-area: 1 / 3; }
  .ro[data-out="spark"]      { grid-area: 2 / 3; }
  .ro[data-out="knockIdx"]   { grid-area: 3 / 3; }
  .ro[data-out="xr"]         { grid-area: 1 / 4; }
  .ro[data-out="leakFrac"]   { grid-area: 2 / 4; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  #lamps { grid-template-columns: repeat(4, max-content); }
  .tile { padding-left: 6px; padding-right: 6px; min-width: 112px; }
}
/* 1280 - 1365: no room for the readouts' delta chips (the tiles keep theirs) */
@media (min-width: 1280px) and (max-width: 1365.98px) {
  #readouts { grid-template-columns: minmax(0, 98fr) minmax(0, 116fr) minmax(0, 178fr) minmax(0, 62fr); }
  #readouts .ro-delta, #readouts .ro .delta { display: none; }
}
/* short desktop screens (1366 x 768, 1280 x 720): a lower timeline gives the engine more room */
@media (min-width: 1280px) and (max-height: 819.98px) {
  #main { grid-template-rows: minmax(0, 1fr) 120px; }
}

/* --------------------------------------------------------------------------
   13  Laptop / tablet landscape (900 - 1279) and everything narrower
   -------------------------------------------------------------------------- */

@media (max-width: 1279.98px) {
  :root { --fs-tile: 24px; }

  /* one pane at a time */
  #pane-tabs {
    display: flex;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  #pane-tabs > button {
    flex: 1 1 0;
    height: 100%;
    border-width: 0 0 0 1px;
    border-radius: 0;
    margin: 0;
    background: transparent;
  }
  #pane-tabs > button:first-child { border-left: 0; border-radius: 0; }
  #pane-tabs > button:last-child { border-radius: 0; }
  #pane-tabs > button[aria-pressed="true"] { background: var(--panel); }
  #pane-tabs > button:focus-visible { outline-offset: -3px; }
  #app[data-pane="controls"] #inst,
  #app[data-pane="instruments"] #rail { display: none; }

  /* instruments become one scrolling column */
  #inst {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 0;
  }
  #inst .panel-row { display: block; }
  .panel-row > .panel + .panel { border-left: 0; border-top: 1px solid var(--rule); }
  #slot-a { height: 264px; }
  #slot-pv { height: 264px; }
  #slot-b { height: 230px; }
  #slot-energy { height: 156px; }
  /* FIX(review): ui.js moves the lesson card here while the Instruments pane is shown */
  #inst > #lesson { position: sticky; top: 0; max-height: 40vh; }

  /* lamps: only what is lit, or the summary lamp when ui.js provides one
     (<li class="lamp lamp-summary" data-level>, expanded state = #lamps.open) */
  #lamps {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 6px;
  }
  #lamps .lamp[data-level="0"] { display: none; }
  #lamps .lamp-summary { display: flex; }
  #lamps:has(.lamp-summary):not(.open) .lamp:not(.lamp-summary) { display: none; }
  #lamps.open .lamp[data-level="0"]:not(.lamp-summary) { display: flex; }
}

@media (min-width: 900px) and (max-width: 1279.98px) {
  #app {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto auto 36px minmax(0, 1fr);
    height: max(100dvh, 600px);
  }
  #hdr, #head, #why { grid-column: 1 / 3; }
  #pane-tabs { grid-column: 2; grid-row: 4; border-left: 1px solid var(--rule); }
  #main {
    grid-column: 1 / 3;
    grid-row: 4 / 6;
    grid-template-columns: minmax(0, 1fr) 360px;
    /* FIX(review): 120 px left the chart 65 px once the transport wrapped to two lines (no scale, no port labels) */
    grid-template-rows: 36px minmax(0, 1fr) 165px;
  }
  #engine { grid-column: 1; grid-row: 1 / 3; }
  #strip  { grid-column: 1; grid-row: 3; }
  #rail, #inst { grid-column: 2; grid-row: 2 / 4; border-left: 1px solid var(--rule); border-right: 0; }

  /* compact header: the mark stays, the word-mark goes below 1100 px */
  #hdr { gap: 5px; padding: 0 var(--sp-2); }
  :where(#hdr) button { padding: 0 6px; letter-spacing: 0.04em; }
  .hdr-field { flex-basis: 130px; }
  #btn-theme { min-width: 0; }

  /* results: 64 px, readouts in one scrolling row, lamps collapsed */
  #head { min-height: 64px; }
  .tile {
    grid-template-rows: 13px 27px 13px;
    min-width: 112px;
    padding: 5px 10px;
  }
  .tile-cap, .tile-unit { line-height: 13px; }
  .tile-val { line-height: 27px; }
  .tile-delta { line-height: 13px; }
  /* FIX(review): the readouts wrap onto compact rows instead of hiding 8 of 11 behind a scrollbar */
  #readouts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 14px;
    padding: 4px var(--sp-3);
    overflow: hidden;
  }
  #readouts > .ro { flex: none; padding-right: 0; }
  #head { position: relative; z-index: 20; }
  #lamps { max-width: 232px; padding: 0 10px; }
  #lamps.open {                 /* the expanded lamp list becomes a small sheet over the top right corner */
    position: absolute;
    top: 6px; right: 6px;
    width: 312px;
    max-width: none;
    padding: var(--sp-2);
    border: 1px solid var(--ink);
    background: var(--panel);
  }
  #lamps.open .lamp { flex: 1 0 auto; }
  #lamps.open .lamp-summary { order: -1; flex-basis: 100%; }

  /* transport on two lines: keys, then the two readouts */
  #transport {
    grid-template-rows: 32px 18px;
    height: auto;
    padding: 2px var(--sp-2) 1px;
  }
  #transport > button, #transport > .seg { grid-row: 1; }
  #slowdown, #angle-readout { grid-row: 2; grid-column: 1 / -1; }
  #slowdown { justify-self: start; max-width: 46%; line-height: 18px; }
  #angle-readout { justify-self: end; max-width: 54%; line-height: 18px; }
}

/* FIX(review): the header stays on one row even with the three baseline buttons (THEME dropped to a second row at
   1024 once a lesson pinned a baseline). Below 1020 px there is not room for it, and the header may wrap. */
@media (min-width: 1020px) and (max-width: 1279.98px) {
  #hdr { flex-wrap: nowrap; }
  #hdr .hdr-field { flex: 1 1 40px; min-width: 104px; gap: 0; font-size: 0; }   /* the word "Engine" goes; it stays the accessible label */
  :where(#hdr) button { flex-shrink: 0; padding: 0 5px; letter-spacing: 0.02em; }
  #hdr .brand { width: 24px; margin-right: 2px; overflow: hidden; gap: 24px; flex-shrink: 0; }   /* mark only, as below 1100 */
}

/* the narrowest two-column widths: the two transport readouts each get a line */
@media (min-width: 900px) and (max-width: 1019.98px) {
  #main { grid-template-rows: 36px minmax(0, 1fr) 175px; }
  #transport { grid-template-rows: 30px 15px 15px; }
  #angle-readout { grid-row: 2; justify-self: start; max-width: 100%; line-height: 15px; }
  #slowdown { grid-row: 3; justify-self: start; max-width: 100%; line-height: 15px; }
}

@media (min-width: 900px) and (max-width: 1099.98px) {
  .brand {
    width: 24px;
    margin-right: 2px;
    overflow: hidden;
    gap: 24px;
  }
}

/* --------------------------------------------------------------------------
   14  Narrow (< 900): one column, the page scrolls, engine block sticks
   -------------------------------------------------------------------------- */

@media (max-width: 899.98px) {
  :root {
    --fs-tile: 20px;
    --key-h: 44px;            /* touch targets */
    --thumb: 22px;
    --well: 8px;
    --row-h: 60px;
    --tiles-h: 88px;
    --tb-h: 44px;
    --stack-h: min(46vh, 100vw);
    --strip-h: 104px;         /* FIX(review): 84 px left a 39 px chart with no scale */
  }
  /* FIX(review): while a lesson or challenge runs the sticky engine block is shorter and the card sticks to the
     bottom of the screen, so the step text and the control it unlocks are visible together */
  #app[data-guided] { --stack-h: min(28vh, 100vw); }
  .row { scroll-margin-top: calc(var(--tiles-h) + var(--tb-h) + var(--stack-h) + var(--strip-h) + 8px); }

  #app {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
  }
  /* the results and main wrappers dissolve so their children can be ordered
     and can stick against the page */
  #head, #main { display: contents; }

  #hdr       { order: 0; }
  #tiles     { order: 1; }
  #engine    { order: 2; }
  #strip     { order: 3; }
  #why       { order: 4; }
  #lamps     { order: 5; }
  #readouts  { order: 6; }
  #pane-tabs { order: 7; }
  #rail, #inst { order: 8; }

  /* header: brand + preset on the first line, keys below (the word "Engine"
     is dropped visually; it stays the select's accessible label) */
  #hdr { padding: var(--sp-2) var(--sp-3); gap: 6px; }
  .brand { flex: 0 0 auto; font-size: 14px; letter-spacing: 0.08em; margin-right: 0; }
  .hdr-field { flex: 1 1 150px; max-width: none; gap: 0; font-size: 0; }
  .hdr-spacer { display: none; }
  #hdr > button, #hdr > .seg { flex: 1 0 auto; }
  #hdr > .seg > button { flex: 1 0 auto; }
  :where(#hdr) button { padding: 0 6px; font-stretch: 75%; letter-spacing: 0.05em; }

  /* tiles 2 x 2 */
  #tiles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    height: var(--tiles-h);
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
  }
  .tile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 13px 24px;
    grid-template-areas:
      "cap cap   unit"
      "val delta delta";
    min-width: 0;
    padding: 3px 10px;
    column-gap: 6px;
  }
  .tile:nth-child(2n) { border-right: 0; }
  .tile:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
  .tile-cap, .tile-unit { line-height: 13px; }
  .tile-val { line-height: 24px; min-width: 0; }
  .tile-delta { align-self: center; justify-self: end; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

  #why { border-top: 1px solid var(--rule); }

  #lamps {
    padding: var(--sp-2) var(--sp-3);
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
  }
  #lamps:not(:has(.lamp-summary)):not(:has(.lamp[data-level="1"])):not(:has(.lamp[data-level="2"])) { display: none; }
  .lamp { height: 44px; }
  .lamp, .lamp > button { padding-left: 10px; padding-right: 10px; }
  .lamp:has(> button) { padding: 0; }

  #readouts {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 6px var(--sp-3);
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--rule);
    background: var(--panel);
  }
  #readouts > .ro { flex: none; padding-right: 0; }

  #pane-tabs { height: 44px; border-top: 1px solid var(--rule); }

  /* engine: toolbar scrolls sideways, legend is dropped, stack min(46vh, 100vw) */
  #engine { border-bottom: 1px solid var(--rule); }
  #eng-toolbar {
    flex-wrap: nowrap;
    gap: 0;
    height: var(--tb-h);
    min-height: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  #eng-toolbar::-webkit-scrollbar { display: none; }
  #eng-toolbar button {
    flex: none;
    height: 100%;
    min-width: 44px;
    padding: 0 10px;
    border-width: 0 1px 0 0;
    border-radius: 0;
    margin: 0;
  }
  #eng-toolbar > .seg { height: 100%; margin: 0; }
  #eng-toolbar > .seg > button:first-child, #eng-toolbar > .seg > button:last-child { border-radius: 0; }
  #eng-toolbar button:focus-visible { outline-offset: -3px; }
  /* SPEC-GAP: 8.2 lists no legend line in the narrow layout; it is hidden there so
     that tiles + engine + timeline + a control still fit on a phone screen. */
  #eng-legend { display: none; }
  #engine-stack {
    flex: none;
    height: var(--stack-h);
    max-height: none;
  }
  #eng-hud { font-size: 11px; gap: 6px; padding: 3px 6px; top: 6px; right: 6px; }

  /* timeline 84 px: play, step and event keys only */
  #strip { height: var(--strip-h); border-top: 0; border-bottom: 1px solid var(--rule); }
  #transport {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 44px;
    padding: 0;
  }
  #transport > button {
    flex: none;
    width: 44px;
    height: 100%;
    min-width: 0;
    padding: 0;
    border-width: 0 1px 0 0;
    border-radius: 0;
  }
  #transport > #btn-play { width: 66px; }
  #btn-turn, #seg-speed, #slowdown { display: none; }
  #angle-readout {
    flex: 1 1 0;
    align-self: center;
    max-width: none;
    padding: 0 var(--sp-2);
    font: 500 var(--fs-axis)/13px var(--font-label);
    letter-spacing: 0.02em;
    text-align: right;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* panes at full width */
  #rail, #inst {
    overflow: visible;
    border: 0;
  }
  #rail { --rail-pad: 14px; }
  .row { padding: 6px 0 5px; }
  .row-head { min-height: 40px; gap: 8px; }
  .row-num { width: 76px; height: 40px; font-size: 16px; }      /* 16 px: no zoom-on-focus on iOS */
  .row-range { height: 30px; }
  .row-info { width: 22px; height: 22px; font-size: 12px; }
  .row-info::after { inset: -11px; }
  .row-reset { height: 40px; padding: 0 8px; }
  .row-seg, .row-tog { margin: 4px 0; }
  :is(.group > button:first-child, .group > :is(h2, h3, h4, header) > button, button.group-head, .group-toggle, .group summary) { min-height: 44px; }
  select { font-size: 16px; }
  .rail-field select { max-width: 60%; }
  #lesson { max-height: none; position: static; }
  @media (min-height: 640px) {
    #rail > #lesson { order: 99; position: sticky; bottom: 0; max-height: 30vh; border-bottom: 0; box-shadow: 0 -2px 0 var(--ink); }
    .row { scroll-margin-bottom: calc(30vh + 8px); }
  }
  :where(#lesson, #notes, #drawer, #popover, .coach) button { min-height: 44px; }
  .panel-head { min-height: 50px; }
  .panel-head button { height: 44px; padding: 0 10px; }

  #slot-a { height: 280px; }
  #slot-pv { height: 280px; }
  #slot-b { height: 240px; }
  #slot-energy { height: 160px; }

  #drawer { width: 100%; border-left: 0; }
  #toast { bottom: 16px; }
}

/* the sticky block needs room below it; on a short (landscape) screen everything just scrolls */
@media (max-width: 899.98px) and (min-height: 640px) {
  #tiles {
    position: sticky;
    top: 0;
    z-index: 12;
  }
  #engine {
    position: sticky;
    top: var(--tiles-h);
    z-index: 11;
  }
  #strip {
    position: sticky;
    top: calc(var(--tiles-h) + var(--tb-h) + var(--stack-h) + 1px);
    z-index: 11;
  }
}

/* --------------------------------------------------------------------------
   15  Motion and contrast preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  :where(button)[aria-pressed="true"] { border: 2px solid Highlight; }
  .lamp[data-level="1"], .lamp[data-level="2"] { border: 2px solid CanvasText; forced-color-adjust: none; }
  .brand::before { background: CanvasText; }
}

/* ==========================================================================
   15  Additions for js/ui.js (appended by the ui.js engineer; additions only,
       no rule above was edited)
   ========================================================================== */

/* lesson card head: title, step counter and close key stay on one line */
#lesson div.lesson-head.lesson-head { flex-wrap: nowrap; }
/* enum and bool rows have no number box to push the reset key to the right edge */
.row-head > .row-info + .row-reset { margin-left: auto; }
/* "1 / 3" counters beside the Previous / Next keys of a note card or coach mark */
.note-count, .coach-count {
  color: var(--text-low);
  font: 500 var(--fs-cap)/1 var(--font-num);
  font-variant-numeric: tabular-nums;
}