/* ==========================================================================
   Live Terminal (proposal 01): shared stylesheet for every workspace.
   Source of truth: DESIGN.md. Contract for page builders: COMPONENTS.md.
   Order: Variables, Fonts, Reset, Base, Layout, Components, Utilities,
   Animations (power-on, view transitions), Media queries (mobile first),
   then the reduced-motion override (the only rules flagged important).
   ========================================================================== */

/* ----- Variables ---------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Surfaces: cool graphite, darkest to lightest */
  --c-void: #15171A;
  --c-panel: #1C1F23;
  --c-panel-2: #24282D;
  --c-panel-3: #2D3238;
  --c-line: #383D44;
  --c-line-2: #4C525B;
  --c-line-input: #80868F;
  --c-dot: #272A30;
  /* Text: warm bone */
  --c-text: #EEE8DA;
  --c-text-2: #BEB8AB;
  --c-text-3: #A6A094;
  /* Signal: the only accent */
  --c-amber: #FFB547;
  --c-amber-hi: #FFC870;
  --c-amber-ink: #1C1305;
  --c-amber-wash: rgb(255 181 71 / 0.12);
  --c-wash-panel-2: #3E3930; /* the amber wash composited over panel-2 (active panel head) */
  --c-glow: rgb(255 181 71 / 0.5);
  --c-amber-line: rgb(255 181 71 / 0.45); /* key cap border in the active tab */
  --c-ink-line: rgb(28 19 5 / 0.28); /* amber-ink at 28%: the key cap divider on a primary button */
  /* State: LEDs, monitors, and form states only */
  --c-bull: #7FDB96;
  --c-bull-glow: rgb(127 219 150 / 0.55); /* the live LED glow */
  --c-bear: #FF7A66;

  /* Families. One fallback face per mono width keeps line breaks stable when the web font swaps in. */
  --f-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --f-mono-100: "Martian Mono", "Martian Mono Fallback 100", ui-monospace, Menlo, Consolas, monospace;
  --f-mono-112: "Martian Mono", "Martian Mono Fallback 112", ui-monospace, Menlo, Consolas, monospace;
  --f-serif: "Source Serif 4", "Source Serif Fallback", Georgia, "Times New Roman", serif;
  --f-arabic: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, serif;

  /* Type scale (390 to 1440 px) */
  --fs-micro: 0.6875rem;
  --fs-ui: 0.8125rem;
  --fs-input: 1rem; /* 16 px below 768 so phones never zoom into a field */
  --fs-body: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  --fs-lede: clamp(1.1875rem, 1.0714rem + 0.4762vw, 1.5rem);
  --fs-quote: clamp(1.25rem, 1.0643rem + 0.7619vw, 1.75rem);
  --fs-pull: clamp(1.875rem, 1.2714rem + 2.4762vw, 3.5rem);
  --fs-h3: clamp(0.9375rem, 0.8679rem + 0.2857vw, 1.125rem);
  --fs-h2: clamp(1.5rem, 1.1286rem + 1.5238vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.4143rem + 3.4286vw, 4.5rem);
  --fs-stat: clamp(2rem, 1.35rem + 2.6667vw, 3.75rem);
  --fs-code: clamp(2.5rem, 1.2rem + 5.3333vw, 6rem);

  /* Spacing (4 px base) and fluid rhythm */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --pad-panel: clamp(1rem, 0.6286rem + 1.5238vw, 2rem);
  --space-section: clamp(3rem, 1.8857rem + 4.5714vw, 6rem);

  /* Chrome. Breakpoints (em, for reference): 30em 480, 48em 768, 64em 1024, 80em 1280, 105em 1680. */
  --desk-max: 105rem;
  --topbar-h: 3.25rem;
  --tape-h: 0rem; /* the tape is in flow below 1024 and fixed (2rem) from 1024 */
  --head-h: 2rem;
  --hit: 2.75rem;
  --measure: 68ch;
  --measure-lede: 60ch;

  /* Motion */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.1, 1);
  --ease-settle: cubic-bezier(0.12, 0.75, 0.15, 1);
  --ease-wipe: cubic-bezier(0.75, 0, 0.15, 1);
  --ease-blink: steps(1, end);
  --dur-1: 80ms;
  --dur-2: 160ms;
  --dur-3: 240ms;
  --dur-4: 420ms;
  --dur-5: 700ms;

  /* Layers (the menu sheet is a modal dialog, so it lives in the top layer above all of these) */
  --z-tape: 20;
  --z-topbar: 30;
  --z-boot: 60;

  /* Textures */
  --scanlines: repeating-linear-gradient(to bottom, rgb(238 232 218 / 0.035) 0 1px, transparent 1px 3px);
}

/* ----- Fonts (self-hosted latin subsets, SIL OFL 1.1, see fonts/LICENSES.md) ----- */
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-latin-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%; /* the file defaults to wdth 112.5: keep the range or every line renders expanded */
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-17-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-36-400i-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (DESIGN.md 2.2): size-adjust = web font advance / Courier New 0.600 em */
@font-face { font-family: "Martian Mono Fallback"; src: local("Courier New"), local("Liberation Mono"), local("Cousine"); size-adjust: 108.3%; ascent-override: 92.3%; descent-override: 18.5%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Fallback 100"; src: local("Courier New"), local("Liberation Mono"), local("Cousine"); size-adjust: 116.6%; ascent-override: 85.8%; descent-override: 17.2%; line-gap-override: 0%; }
@font-face { font-family: "Martian Mono Fallback 112"; src: local("Courier New"), local("Liberation Mono"), local("Cousine"); size-adjust: 125%; ascent-override: 80%; descent-override: 16%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 104.8%; ascent-override: 98.8%; descent-override: 32%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 89.3%; ascent-override: 116%; descent-override: 37.5%; line-gap-override: 0%; }

/* ----- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, canvas { display: block; max-width: 100%; }
html [hidden] { display: none; } /* stronger than one class, so a component display rule (.btn, a grid) never shows a hidden element */
input, button, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
blockquote, figure { margin: 0; }
a { color: inherit; }

/* ----- Base --------------------------------------------------------------- */
html {
  font-synthesis: none; /* no fake bold serif, no fake italic */
  scrollbar-color: var(--c-line-2) var(--c-void);
}

/* Not scroll-padding on html: focus in the top bar then moves the page */
main, :where(main, .footer) * { scroll-margin-block: calc(var(--topbar-h) + var(--sp-4)) calc(var(--tape-h) + var(--sp-4)); }

body {
  min-height: 100vh;
  background: var(--c-void) radial-gradient(var(--c-dot) 1px, transparent 1.2px) 0 0 / 24px 24px;
  color: var(--c-text);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-ui);
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--c-amber); color: var(--c-amber-ink); }

h1, h2, h3 { font-family: var(--f-mono); font-stretch: 87.5%; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; }
h2 { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: 0; line-height: 1.3; }

/* The human voice: Amr's sentences and client quotes are Source Serif 4 */
.copy, .lede, blockquote {
  font-family: var(--f-serif);
  font-stretch: normal;
  letter-spacing: 0;
  text-wrap: pretty;
}
.copy { font-size: var(--fs-body); line-height: 1.6; max-width: var(--measure); }
.lede { font-size: var(--fs-lede); line-height: 1.45; letter-spacing: -0.005em; color: var(--c-text-2); max-width: var(--measure-lede); }
.copy strong, .lede strong, blockquote strong {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Text links inside serif text */
.copy a, .lede a {
  color: var(--c-text);
  text-decoration: underline 1px var(--c-amber);
  text-underline-offset: 0.2em;
  transition: color var(--dur-2) var(--ease-snap);
}
.copy a:hover, .lede a:hover { color: var(--c-amber); }

/* Micro label: panel heads, codes, captions */
.micro, .panel-head, .sh-code, figcaption, .chip, kbd {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.micro, .sh-code, figcaption { color: var(--c-text-3); }

:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px; }
#main:focus-visible { outline-offset: -2px; }

/* ----- Layout ------------------------------------------------------------- */
/* The desk: the top bar, main, tape, and footer share one centered frame */
.topbar, main, .tape, .footer { max-width: var(--desk-max); margin-inline: auto; }

/* A section sits on the void; the dot grid shows between sections */
.ws-section { padding-top: var(--space-section); }
main > .ws-section:last-child { padding-bottom: var(--space-section); }

/* Tiles: the gaps read as hairlines because the grid paints --c-line behind touching panels */
.tiles {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
}
main > .tiles:first-child { border-top: 0; } /* the top bar already draws the line above */

.section-head {
  display: grid;
  gap: var(--sp-3);
  padding: 0 var(--pad-panel) var(--sp-6);
}
.section-head .lede { margin-top: var(--sp-1); }

/* ----- Components: icons -------------------------------------------------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.i-brand { fill: currentColor; stroke: none; }
.i-star { color: var(--c-amber); }
.i-up { color: var(--c-bull); }

/* ----- Components: panels ------------------------------------------------- */
.panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--c-panel);
}
.panel-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--head-h);
  padding-inline: var(--pad-panel);
  background: var(--c-panel-2);
  color: var(--c-text-3);
  transition: background-color var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap);
}
/* The head rule is a pseudo-element so the power-on can draw it */
.panel-head::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--c-line);
}
/* The label pushes the meta and the LED to the right edge */
.ph-label { min-width: 0; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-id { transition: color var(--dur-2) var(--ease-snap); }
.ph-meta { white-space: nowrap; }
.panel-body { flex: 1 1 auto; min-width: 0; padding: var(--pad-panel); }
.panel-body--flush { padding: 0; } /* rows and tables that run edge to edge carry their own padding */
.panel-foot {
  padding: var(--sp-2) var(--pad-panel);
  border-top: 1px solid var(--c-line);
}

/* Active panel: the head lights (amber wash, amber id, text-2 labels) */
.panel:focus-within > .panel-head { background: var(--c-wash-panel-2); color: var(--c-text-2); }
.panel:focus-within > .panel-head .ph-id { color: var(--c-amber); }

/* The code line runs into a hairline to the edge, like a divider in a terminal log */
.sh-code { display: flex; align-items: center; gap: var(--sp-3); }
.sh-code::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }

/* ----- Components: buttons, key caps, chips, LEDs, caret ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--hit);
  padding: 0 1.125rem;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-2) var(--ease-snap), border-color var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap), transform var(--dur-1) var(--ease-snap);
}
.btn:active { transform: translateY(1px); }
.btn .i { transition: transform var(--dur-2) var(--ease-snap); }
.btn-primary { background: var(--c-amber); color: var(--c-amber-ink); }
.btn-primary:hover { background: var(--c-amber-hi); }
.btn-primary:hover .btn-key .i { transform: translateX(2px); }
.btn-ghost { background: transparent; border-color: var(--c-line-input); color: var(--c-text); }
.btn-ghost:hover { border-color: var(--c-amber); color: var(--c-amber); }
/* The key cap hint on the right of a button, after a 1 px divider */
.btn-key {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--c-ink-line);
}
.btn-ghost .btn-key { border-left-color: var(--c-line-2); }
.btn-row { display: flex; flex-direction: column; gap: var(--sp-3); }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0.0625rem 0.3125rem;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--c-text-2);
  letter-spacing: 0;
  line-height: 1.2;
}
kbd .i { width: 0.6875rem; height: 0.6875rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.375rem; list-style: none; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 1.375rem;
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  color: var(--c-text-2);
  white-space: nowrap;
}

.led {
  display: inline-block;
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-line-2);
}
.led--live { background: var(--c-bull); box-shadow: 0 0 6px var(--c-bull-glow); animation: led-pulse 1.6s ease-in-out infinite alternate; }
.led--idle { background: var(--c-line-2); }
.led--warn { background: var(--c-amber); }
.led--error { background: var(--c-bear); }

/* Block caret: 4 blinks, then solid (under 5 s, WCAG 2.2.2) */
.caret {
  display: inline-block;
  width: 0.55em;
  height: 0.8em;
  margin-left: 0.08em;
  background: var(--c-amber);
  box-shadow: 0 0 12px var(--c-glow);
  animation: blink 1060ms var(--ease-blink) 4;
}
.nowrap { white-space: nowrap; }

/* Decode words and flap values (DESIGN.md S3) */
.dw, .flap-in { display: inline-block; }
.flap-in { transform-origin: 50% 50%; }

/* ----- Components: skip link ---------------------------------------------- */
.skip-link {
  position: fixed; /* the first Tab keeps the scroll position */
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-boot) + 1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-amber);
  color: var(--c-amber-ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--sp-4)));
}
.skip-link:focus-visible { transform: none; outline-color: var(--c-text); }

/* ----- Components: top bar ------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--topbar-h);
  padding-inline: var(--pad-panel);
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-line);
  view-transition-name: topbar;
}

/* line-height = the 44 px target: with ascent 1.0 and descent 0.2 the cap height lands on the exact center */
.wordmark {
  display: inline-block;
  line-height: var(--hit);
  color: var(--c-text);
  font-family: var(--f-mono-112);
  font-stretch: 112.5%;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
}
.wm-slash { color: var(--c-amber); }
.wordmark .caret { margin-left: 0.14em; box-shadow: none; }

.tb-status { display: none; }
.tabs { display: none; }
.cmdline { display: none; }
.tb-cta { display: none; }

.freeze { margin-left: auto; }
/* The real control is the sr-only checkbox; the label draws the key cap */
.freeze-key {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit);
  cursor: pointer;
}
.kc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 2rem;
  height: 2rem;
  padding-inline: var(--sp-2);
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-2);
  border-bottom-width: 2px;
  border-radius: 3px;
  color: var(--c-text-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--dur-2) var(--ease-snap), border-color var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap), transform var(--dur-1) var(--ease-snap);
}
.freeze-key:hover .kc { color: var(--c-text); border-color: var(--c-line-input); }
.freeze-key:active .kc { transform: translateY(1px); }
#freeze { top: 50%; } /* in the bar, so focus does not scroll */
#freeze:checked + .freeze-key .kc { background: var(--c-amber); border-color: var(--c-amber); color: var(--c-amber-ink); }
#freeze:focus-visible + .freeze-key .kc { outline: 2px solid var(--c-amber); outline-offset: 2px; }
/* The word stays in the accessible name; it shows from 1280 */
.freeze-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Top bar controls share the 2 rem key cap height; a pseudo-element keeps the 44 px target */
.menu-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2rem;
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  color: var(--c-text);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color var(--dur-2) var(--ease-snap), color var(--dur-2) var(--ease-snap);
}
.menu-btn:hover { border-color: var(--c-amber); color: var(--c-amber); }
.menu-btn::before { content: ""; position: absolute; inset: -0.375rem 0; }

/* Tabs (1024 up): key cap + name; the active tab carries the amber indicator */
.tabs ul { display: flex; list-style: none; }
.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: calc(var(--topbar-h) - 1px);
  padding-inline: 0.625rem;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-snap), background-color var(--dur-2) var(--ease-snap);
}
.tab:hover { color: var(--c-text); background: var(--c-panel-2); }
.tab:focus-visible { outline-offset: -2px; }
.tab[aria-current="page"] { color: var(--c-amber); }
.tab[aria-current="page"] kbd { color: var(--c-amber); border-color: var(--c-amber-line); }
.tab-ind {
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--c-amber);
  transform-origin: 50% 50%;
}

/* Command line (1024 up, JS only): an amber prompt and an input in the top bar */
.cmdline { position: relative; }
.cmd-rest {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  width: var(--hit);
  height: 2rem;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  cursor: text;
}
.cmd-prompt { color: var(--c-amber); font-weight: 600; }
.cmd-field {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 16rem;
  height: 2rem;
  padding-inline: var(--sp-3) 0.375rem;
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  clip-path: inset(-4px -4px -4px calc(100% + 4px));
  transition: clip-path var(--dur-3) var(--ease-snap), border-color var(--dur-2) var(--ease-snap);
}
.cmd-field:focus-within { clip-path: inset(-4px); border-color: var(--c-line-input); }
.cmd-field:has(:focus-visible) { outline: 2px solid var(--c-amber); outline-offset: 2px; }
.cmd-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  caret-color: var(--c-amber);
  color: var(--c-text);
}
.cmd-input:focus-visible { outline: none; } /* the field draws the ring */
.cmd-input::placeholder { color: var(--c-text-3); opacity: 1; }
.cmd-field:focus-within .cmd-key { display: none; }

/* The list opens in 160 ms and closes in 120 ms (display transitions as a discrete property) */
.cmd-pop {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  width: min(26rem, 100vw - 2rem);
  background: var(--c-panel-2);
  border: 1px solid var(--c-line-2);
  border-radius: 2px;
  transition: opacity 120ms var(--ease-snap), transform 120ms var(--ease-snap), display 120ms allow-discrete;
}
.cmd-pop:not([hidden]) { transition-duration: var(--dur-2); }
.cmd-pop[hidden] { opacity: 0; transform: translateY(-4px); }
@starting-style { .cmd-pop:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.cmd-list { list-style: none; padding-block: var(--sp-1); }
.cmd-opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2.25rem;
  padding-inline: var(--sp-3);
  color: var(--c-text-2);
  cursor: pointer;
}
.cmd-opt.is-active { background: var(--c-amber-wash); box-shadow: inset 2px 0 0 var(--c-amber); color: var(--c-text); }
.co-group { min-width: 4.75rem; color: var(--c-text-3); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.cmd-opt.is-active .co-group { color: var(--c-text-2); }
.co-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-state { color: var(--c-text-3); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.cmd-opt.is-active .co-state { color: var(--c-amber); }
.cmd-empty { padding: var(--sp-3); color: var(--c-text-3); }
.cmd-help {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-3);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
}

/* ----- Components: menu sheet (below 1024; showModal() puts it in the top layer) ----- */
.menu-sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--c-void);
  color: var(--c-text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The page never scrolls behind the open sheet */
html:has(.menu-sheet[open]) { overflow: hidden; }
.menu-sheet[open] { display: flex; flex-direction: column; animation: sheet-in var(--dur-3) var(--ease-wipe); }
.menu-sheet::backdrop { background: var(--c-void); }
.ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: var(--topbar-h);
  padding-inline: var(--pad-panel);
  background: var(--c-panel);
  border-bottom: 1px solid var(--c-line);
}
.ms-list { list-style: none; border-bottom: 1px solid var(--c-line); }
.ms-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  min-height: 3.75rem;
  padding-inline: var(--pad-panel);
  border-top: 1px solid var(--c-line);
  color: var(--c-text);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  animation: rise-in var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(80ms + var(--k, 0) * 40ms);
}
.ms-list li:first-child .ms-row { border-top: 0; }
.ms-row[aria-current="page"] { background: var(--c-amber-wash); box-shadow: inset 2px 0 0 var(--c-amber); color: var(--c-amber); }
.ms-code { color: var(--c-text-3); }
.ms-row[aria-current="page"] .ms-code { color: var(--c-text-2); }
.ms-foot { display: grid; gap: var(--sp-5); padding: var(--sp-6) var(--pad-panel); }
.ms-foot .btn { width: 100%; }
.ms-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; list-style: none; background: var(--c-line); border: 1px solid var(--c-line); }
.ms-profiles a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--hit);
  padding-inline: var(--sp-3);
  background: var(--c-panel);
  color: var(--c-text-2);
  text-decoration: none;
}
.ms-profiles a:hover { color: var(--c-amber); }

/* ----- Components: tape (blotter prints of real reviews) ------------------ */
.tape {
  display: flex;
  height: var(--hit);
  overflow: hidden;
  background: var(--c-panel-2);
  border-top: 1px solid var(--c-line);
}
.tape-viewport { display: flex; flex: 1; min-width: 0; overflow: hidden; }
.tape-track {
  display: flex;
  width: max-content;
  animation: tape var(--tape-dur, 160s) linear infinite;
  animation-delay: calc(var(--tape-progress, 0) * var(--tape-dur, 160s) * -1);
}
.tape:hover .tape-track { animation-play-state: paused; }
/* main.js adds .is-off to a loop that is off screen */
.tape.is-off .tape-track, .led--live.is-off { animation-play-state: paused; }
.tape-set { display: flex; }

.tape-fill {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-5);
  border-right: 1px solid var(--c-line);
  white-space: nowrap;
}
.tf-id { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--c-text-3); font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; }
.tf-id .i { width: 0.5625rem; height: 0.5625rem; color: var(--c-bull); }
/* white-space restores nowrap: the blockquote's own text-wrap would otherwise wrap the print */
.tape-fill blockquote { font-size: 0.875rem; color: var(--c-text); white-space: nowrap; }

/* ----- Components: review cards (data-review-id + data-quote contract) ---- */
/* Quote marks come from CSS, never from the text */
.fill-line [data-quote]::before, .tape-fill [data-quote]::before, .fill-row [data-quote]::before, .fill-slip [data-quote] p::before { content: "\201C"; }
.fill-line [data-quote]::after, .tape-fill [data-quote]::after, .fill-row [data-quote]::after, .fill-slip [data-quote] p::after { content: "\201D"; }
[data-quote][lang="ar"] { font-family: var(--f-arabic); font-size: 1.125em; }

/* .fill-slip: tier 1 "block trade" with a perforated top edge */
.fill-slip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--pad-panel) var(--pad-panel);
  background: var(--c-panel);
  mask: radial-gradient(circle 4px at 50% 0, transparent 96%, #000) 0 0 / 14px 100% repeat-x;
}
.slip-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--c-line-2);
}
.fill-slip blockquote {
  font-size: var(--fs-quote);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.fill-slip figcaption { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; }
.fill-slip figcaption .i { color: var(--c-bull); }

/* .fill-line: a receipt (tier 2 and 3) */
.fill-line { display: grid; gap: var(--sp-2); }
.fill-line blockquote { font-size: var(--fs-body); line-height: 1.6; max-width: var(--measure); }

/* ----- Components: footer -------------------------------------------------- */
.footer {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-7) var(--pad-panel) var(--sp-6);
  background: var(--c-void);
  border-top: 1px solid var(--c-line);
}
.ft-top { display: grid; gap: var(--sp-2); }
.ft-top .wordmark { line-height: 1.4; }
.ft-line { color: var(--c-text-2); }
.ft-cols { display: grid; gap: var(--sp-6); }
.ft-col ul { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); list-style: none; }
.ft-col a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 2rem;
  color: var(--c-text-2);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-snap);
}
.ft-col a:hover { color: var(--c-amber); }
.ft-col a[aria-current="page"] { color: var(--c-text); }
.ft-col kbd { min-width: 1.25rem; }
.ft-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  color: var(--c-text-3);
}
.ft-bottom a, .keys-sw label { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 2rem; color: var(--c-text-2); text-decoration: none; }
.ft-bottom a:hover, .keys-sw label:hover { color: var(--c-amber); }
/* The switch for the single-key shortcuts (WCAG 2.1.4): an sr-only checkbox and its label */
.keys-sw label { cursor: pointer; transition: color var(--dur-2) var(--ease-snap); }
.keys-sw kbd::after { content: "Off"; }
#keys:checked + label kbd { border-color: var(--c-amber-line); color: var(--c-amber); }
#keys:checked + label kbd::after { content: "On"; }
#keys:focus-visible + label { outline: 2px solid var(--c-amber); outline-offset: 2px; }

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

/* Vertical rhythm for a simple block (a heading, a lede, buttons) */
.stack { display: grid; align-content: start; gap: var(--sp-5); }

/* The inline ticket that closes a page: the question, then the orders (.btn-row) */
.next { display: grid; gap: var(--sp-6); }
.next-copy { display: grid; gap: var(--sp-3); }
.next-copy .lede { margin-top: var(--sp-1); }

/* A line of items split by "·" that never leaves a separator at the end or start of a line.
   Each item carries its separator in a gutter in front of it. The line sits one separator width to the left
   and that gutter is clipped, so the separator before the first item of every line never shows. */
.seps {
  --sep-w: 3ch;
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--sep-w) * -1);
  clip-path: inset(0 0 0 var(--sep-w));
}
.seps > * { position: relative; padding-left: var(--sep-w); }
.seps > *::before {
  content: "\00B7";
  content: "\00B7" / ""; /* decorative: screen readers skip it (the line above is the fallback) */
  position: absolute;
  left: 0;
  width: var(--sep-w);
  text-align: center;
}
/* Below 360 px the longest item may wrap inside its padding, so it cannot push the page wide */
@media (min-width: 22.5em) {
  .seps > * { white-space: nowrap; }
}

/* Scroll reveal (Term.reveal): hidden only when JS runs, with a 2.5 s failsafe */
.reveal {
  transition: opacity var(--dur-4) var(--ease-settle), transform var(--dur-4) var(--ease-settle);
  transition-delay: var(--rd, 0ms);
}
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(8px); }
.js .reveal.reveal--rise:not(.is-in) { transform: translateY(16px); }
.js:not(.motion-ready) .reveal { animation: show 0s 2.5s forwards; }
.no-motion .reveal:not(.is-in), .is-frozen .reveal:not(.is-in) { opacity: 1; transform: none; }

/* Decode: the first paint of a decoding word is blank, never readable text that turns into noise.
   The caret waits with its words. Failsafe: 1 s without main.js shows the heading plain. */
.ws-on .decode:not(.is-decoded) :is(.dw, .caret), .is-booting .decode:not(.is-decoded) :is(.dw, .caret) { opacity: 0; }
.js:not(.motion-ready) .decode :is(.dw, .caret) { animation: show 0s 1s forwards; }
.no-motion .decode :is(.dw, .caret) { opacity: 1; }

/* ----- Animations: flap-in values (CSS only, under html.ws-on) ------------ */
/* 160 ms + 60 ms steps: five values settle inside the 750 ms switch budget (DESIGN.md 12) */
.ws-on .flap-in {
  animation: flap-in var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(var(--ws-delay, 0ms) + 160ms + var(--k, 0) * 60ms);
}

/* ----- Animations: workspace power-on (S1 and S4), CSS only, once per page ----- */
[data-on] > .panel-head::after { transform-origin: 0 50%; }
.ws-on [data-on] > .panel-head::after {
  animation: rule-draw 200ms var(--ease-settle) both;
  animation-delay: calc(var(--ws-delay, 0ms) + var(--i, 0) * 50ms);
}
.ws-on [data-on] > .panel-body {
  animation: body-open var(--dur-3) var(--ease-settle) both;
  animation-delay: calc(var(--ws-delay, 0ms) + var(--i, 0) * 50ms + 80ms);
}
.ws-on .tab[aria-current="page"] .tab-ind { animation: rule-draw var(--dur-3) var(--ease-settle) var(--ws-delay, 0ms) both; }
/* While the boot screen is up, the desk waits dark. These holds expire on their own after 2.5 s. */
.is-booting [data-on] > .panel-body { animation: hold-closed 2.5s; }
.is-booting [data-on] > .panel-head::after, .is-booting .tab[aria-current="page"] .tab-ind { animation: hold-rule 2.5s; }

/* ----- Animations: workspace switch (native cross-document view transitions) ----- */
@view-transition { navigation: auto; }
::view-transition-group(topbar), ::view-transition-group(tape),
::view-transition-new(topbar), ::view-transition-new(tape) { animation: none; }
::view-transition-old(topbar), ::view-transition-old(tape) { display: none; }
/* The fold line sits on the root group, behind both snapshots */
::view-transition-group(root) {
  background: linear-gradient(var(--c-amber) 0 0) 50% 50% / 100% 1px no-repeat, var(--c-void);
}
/* Never let the UA plus-lighter blend add the two snapshots together */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: ws-fold 180ms var(--ease-wipe) both; }
::view-transition-new(root) { animation: ws-show 120ms linear 180ms both; }

/* ----- Animations: keyframes ---------------------------------------------- */
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes body-open { from { clip-path: inset(50% 0 50% 0); } }
@keyframes hold-closed { from, to { clip-path: inset(50% 0 50% 0); } }
@keyframes hold-rule { from, to { transform: scaleX(0); } }
@keyframes flap-in { from { transform: scaleY(0); } }
@keyframes ws-fold { to { clip-path: inset(50% 0 50% 0); } }
@keyframes ws-show { from { opacity: 0; } }
@keyframes show { to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes led-pulse { to { opacity: 0.45; } }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes sheet-in { from { clip-path: inset(0 0 100% 0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }

/* Single-key shortcuts off: hide the key hints that no longer work */
.keys-off :is(.tab kbd, .btn-key:has(kbd), .cmd-rest kbd, .cmd-key, .cmd-opt kbd, .ft-col kbd) { display: none; }

/* FREEZE (and its no-JS twin, the checked switch) pauses every CSS loop */
.is-frozen :is(.tape-track, .led--live, .caret),
:root:has(#freeze:checked) :is(.tape-track, .led--live, .caret) { animation-play-state: paused; }
.is-frozen .caret, :root:has(#freeze:checked) .caret { animation: none; }

/* ----- Media queries (mobile first) ---------------------------------------- */
@media (hover: hover) {
  .panel:hover > .panel-head { background: var(--c-wash-panel-2); color: var(--c-text-2); }
  .panel:hover > .panel-head .ph-id { color: var(--c-amber); }
}

@media (pointer: coarse) {
  .ft-col a, .ft-bottom a, .keys-sw label { min-height: var(--hit); } /* 44 px rows for fingers */
}

/* Forced colors remove backgrounds: a pressed key keeps an outline */
@media (forced-colors: active) {
  #freeze:checked + .freeze-key .kc, #keys:checked + label kbd { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* A touch screen without a keyboard: shortcut key caps would promise keys that do not exist */
@media (hover: none) and (pointer: coarse) {
  .btn-key:has(kbd), .ft-col kbd { display: none; }
}

@media (min-width: 30em) {
  .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48em) {
  :root { --fs-input: var(--fs-ui); }
  h1, h2 { font-family: var(--f-mono-100); font-stretch: 100%; }
  .fill-slip blockquote p::before { margin-left: -0.42em; } /* hanging opening quote */
}

@media (min-width: 64em) {
  :root { --topbar-h: 2.75rem; --tape-h: 2rem; }
  body { padding-bottom: var(--tape-h); }

  .topbar { gap: var(--sp-3); }
  .tb-status { display: inline-flex; justify-content: center; width: 1.25rem; }
  .tabs { display: block; margin-right: auto; }
  .cmdline:not([hidden]) { display: block; width: var(--hit); height: 2rem; }
  .tb-cta { display: inline-flex; position: relative; min-height: 2rem; }
  .tb-cta::before { content: ""; position: absolute; inset: -0.375rem 0; } /* 44 px target */
  .menu-btn { display: none; }
  .freeze { margin-left: 0; }

  .tape {
    position: fixed;
    inset: auto 0 0;
    z-index: var(--z-tape);
    height: var(--tape-h);
    view-transition-name: tape;
  }

  .footer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .ft-top { grid-column: 1 / span 6; align-content: start; }
  .ft-cols { grid-column: 7 / span 6; }
  .ft-bottom { grid-column: 1 / -1; }

  .next { padding-block: var(--sp-7); }
}

@media (min-width: 80em) {
  .cmdline:not([hidden]) { width: 16rem; }
  .cmd-rest { display: none; }
  .cmd-field { position: relative; width: 100%; clip-path: none; }
  .freeze-word { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  /* The ticket: the question on the left, the orders in one row on the right */
  .next { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--sp-8); }
  .next .btn-row { flex-wrap: nowrap; }
}

/* Above 1680 px the desk stops growing and gets side borders: a framed screen on the dotted void */
@media (min-width: 105em) {
  .topbar, main, .tape, .footer { border-inline: 1px solid var(--c-line); }
}

/* ----- Reduced motion: no boot, fold, power-on, decode, flap, or loops ----- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal:not(.is-in) { opacity: 1; transform: none; }
  .tape-viewport { overflow-x: auto; scrollbar-width: thin; }
  .tape-set[aria-hidden="true"] { display: none; }
  ::view-transition-group(root) { background: var(--c-void); }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: ws-show 120ms linear both; }
}