/* Taskevo user guide (/guide). Self-contained: the app's CSP allows only same-origin styles,
   scripts and fonts, so nothing here comes from a CDN. Brand palette and Geist, as in the app. */

@font-face {
  font-family: "Geist";
  src: url("/guide/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* The code face, used only inside pre/code/kbd/samp below. taste-skill-ignore */
@font-face { font-family: "Geist Mono"; src: url("/guide/fonts/geist-mono-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* taste-skill-ignore */

:root {
  /* palette: the dashboard's own roles */
  --bg: #0c0b0a;
  --surface: #141211;
  --stage: #1b1917;
  --stage-2: #24211f;
  --line: #2b2725;
  --ink: #f1efee;
  --muted: #a39d98;
  --accent: #ff6b1a;
  --action: #cc4b0a;
  --action-hover: #d9550f;
  --action-ink: #ffffff;
  --danger: #f43f5e;

  /* five type steps */
  --step-small: 14px;
  --step-body: 17px;
  --step-lead: clamp(19px, 1rem + 0.7vw, 26px);
  --step-head: clamp(30px, 1.2rem + 2.2vw, 44px);
  --step-display: clamp(40px, 1rem + 4.6vw, 80px);

  --margin: clamp(20px, 3.2vw, 44px);
  --gap: 24px;
  --section: clamp(96px, 11vw, 168px);
  --chapter: clamp(128px, 15vw, 224px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ol, ul, dl, figure, pre, table { margin: 0; }
ol, ul { padding: 0; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #140b05; }
strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* code: the only monospace on the page */
pre, code, kbd, samp { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--step-small); font-variant-ligatures: none; }
p code, li code, td code, dd code, h3 code, figcaption code, label code { background: var(--stage-2); padding: 0.08em 0.36em; border-radius: 3px; overflow-wrap: anywhere; }
kbd { background: var(--stage-2); padding: 0.1em 0.45em; border-radius: 3px; }
pre {
  background: var(--surface);
  padding: 20px 22px;
  overflow-x: auto;
  line-height: 1.65;
  color: #ebe8e6;
  tab-size: 2;
}
pre .c { color: #8f8883; }
pre .k { color: #ff9b52; }
pre .s { color: #f5c79e; }
pre .ok { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.1em; color: #ff8a3d; }
.code { position: relative; }
.copy {
  position: absolute; top: 10px; right: 10px;
  min-height: 32px; padding: 0 12px;
  background: var(--stage-2); color: var(--ink);
  font: 500 var(--step-small) / 1 "Geist", sans-serif;
  border: 0; border-radius: 0; cursor: pointer;
  opacity: 0.85;
  transition: opacity var(--t-hover) ease, transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.copy:hover { opacity: 1; background: #302c29; }
.copy:active { transform: scale(0.96); }

/* ---- page frame ---------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

.bar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.bar .wrap { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; font-size: var(--step-body); }
.wordmark svg { width: 22px; height: 22px; }
.wordmark span { color: var(--muted); font-weight: 500; }
.bar nav { display: flex; gap: 22px; margin-left: auto; font-size: var(--step-small); }
.bar nav a { text-decoration: none; color: var(--muted); padding: 8px 0; transition: color var(--t-hover) ease; }
.bar nav a:hover, .bar nav a[aria-current="true"] { color: var(--ink); }
.bar .contents-link { display: none; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  background: var(--action); color: var(--action-ink);
  font: 600 var(--step-body) / 1 "Geist", sans-serif; letter-spacing: -0.01em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.button:hover { background: var(--action-hover); }
.button:active { transform: scale(0.97); }
.button.small { min-height: 40px; padding: 0 16px; font-size: var(--step-small); }
.button.quiet { background: var(--stage-2); color: var(--ink); }
.button.quiet:hover { background: #302c29; }
.arrow-link { font-weight: 500; text-decoration-color: transparent; display: inline-flex; gap: 8px; align-items: center; }
.arrow-link::after { content: "→"; transition: transform var(--t-hover) var(--ease-out); }
.arrow-link:hover::after { transform: translateX(4px); }

/* ---- hero: headline upper left, the live console takes the rest ------------------------ */
.hero { padding-top: clamp(40px, 7vh, 88px); padding-bottom: var(--section); }
.hero .grid { align-items: start; row-gap: 40px; }
.hero-text { grid-column: 1 / span 5; padding-top: clamp(8px, 4vh, 48px); }
.hero h1 { font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; }
.hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero h1 [data-line] { display: block; }
.hero .lede { margin-top: 28px; font-size: var(--step-lead); line-height: 1.45; max-width: 34ch; }
.hero .actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.hero-console { grid-column: 6 / span 7; }
.hero-note { margin-top: 14px; color: var(--muted); font-size: var(--step-small); }

/* ---- the console (a working piece of the product, marked data-ui) ---------------------- */
[data-ui].console {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  font-size: var(--step-small);
  line-height: 1.5;
}
[data-ui] .c-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
[data-ui] .c-title { font-weight: 600; margin-right: auto; }
[data-ui] .seg { display: inline-flex; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 3px; gap: 2px; }
[data-ui] .seg button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 500 var(--step-small)/1 "Geist", sans-serif; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
[data-ui] .seg button:hover { color: var(--ink); }
[data-ui] .seg button[aria-selected="true"], [data-ui] .seg button[aria-pressed="true"] { background: var(--stage-2); color: var(--ink); }
[data-ui] .c-body { display: grid; grid-template-columns: 1fr 1fr; }
[data-ui] .c-input { padding: 16px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
[data-ui] label { color: var(--muted); }
[data-ui] select, [data-ui] textarea {
  width: 100%; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: 400 var(--step-small)/1.5 "Geist Mono", ui-monospace, monospace; /* the payload is JSON: code. taste-skill-ignore */
  padding: 10px 12px;
}
[data-ui] select { font-family: "Geist", sans-serif; min-height: 44px; appearance: none; background-image: none; cursor: pointer; }
[data-ui] textarea { min-height: 92px; resize: vertical; }
[data-ui] textarea:focus, [data-ui] select:focus { border-color: var(--accent); outline: none; }
[data-ui] .invalid { color: var(--danger); min-height: 1.5em; }
[data-ui] .c-code pre { background: var(--bg); padding: 14px; border-radius: 8px; border: 1px solid var(--line); max-height: 220px; font-size: var(--step-small); }
[data-ui] .c-run { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
[data-ui] .run-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-ui] .run-id { color: var(--muted); }
[data-ui] .status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
[data-ui] .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
[data-ui] .status[data-s="running"] { color: #ff9b52; }
[data-ui] .status[data-s="running"]::before { background: #ff9b52; }
[data-ui] .status[data-s="completed"] { color: var(--accent); }
[data-ui] .status[data-s="completed"]::before { background: var(--accent); }
[data-ui] .meter { height: 6px; background: var(--stage-2); border-radius: 3px; overflow: hidden; }
[data-ui] .meter span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform 500ms var(--ease-out); }
[data-ui] .events { list-style: none; display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
[data-ui] .events li { display: grid; grid-template-columns: 52px 38px 1fr; gap: 8px; align-items: baseline; }
[data-ui] .events time, [data-ui] .events .pct { color: var(--muted); font-variant-numeric: tabular-nums; }
[data-ui] .events .msg { overflow-wrap: anywhere; }
[data-ui] .events li.new { animation: event-in 420ms var(--ease-out) both; }
@keyframes event-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
[data-ui] .out { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
[data-ui] .out pre { padding: 0; background: transparent; max-height: 120px; }
[data-ui] .files { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); }
[data-ui] .files li::before { content: "↓ "; color: var(--accent); }
[data-ui] .play { min-height: 44px; border-radius: 8px; }
[data-ui] .c-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--muted); }

/* ---- intro: a lead line over four columns ------------------------------------------------ */
.intro { padding-bottom: var(--section); }
.intro .lead { grid-column: 1 / -1; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.02em; max-width: 40ch; }
.intro .cols { grid-column: 1 / -1; margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.intro .cols p { color: var(--muted); }
.intro .cols p strong { color: var(--ink); }

/* ---- contents: the whole guide, as a real ordered list ----------------------------------- */
.contents { padding-bottom: var(--chapter); }
.contents h2 { grid-column: 1 / span 4; font-size: var(--step-head); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.contents ol.chapters { grid-column: 5 / -1; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); }
.contents .chapters > li > a { font-size: var(--step-lead); font-weight: 600; text-decoration: none; letter-spacing: -0.015em; }
.contents .chapters ol { list-style: none; margin-top: 10px; display: grid; gap: 4px; color: var(--muted); }
.contents .chapters ol a { text-decoration: none; color: var(--muted); transition: color var(--t-hover) ease; }
.contents .chapters ol a:hover { color: var(--ink); }

/* ---- chapters and sections ---------------------------------------------------------------- */
/* Chapter openings: an archival photograph of the trade each chapter borrows its idea from (a
   switchboard connects, keys open, a press prints, a lever frame routes, an exchange patches you
   through) is the header itself. It sits behind the title, in greyscale and darkened so it reads
   as part of the dark page, with a neutral scrim over its lower part that settles into the
   chapter's field where the title and sentence stand. */
.chapter-field { position: relative; background: var(--surface); margin-top: var(--chapter); }
.chapter-field + .section { padding-top: var(--section); }
.chapter-open { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(420px, 78svh, 760px); display: flex; align-items: flex-end; padding: clamp(120px, 16vw, 220px) 0 clamp(48px, 6vw, 88px); }
.chapter-open .wrap { position: relative; width: 100%; }
.chapter-photo { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; background: var(--surface); }
.chapter-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.6) contrast(1.1); opacity: 0.85; transform: scale(1.16); }
/* the one allowed gradient: a neutral scrim, black at changing alpha, under the text only */
.chapter-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(20 18 17 / 0.1) 0%, rgb(20 18 17 / 0.35) 45%, rgb(20 18 17 / 0.92) 82%, rgb(20 18 17 / 1) 100%); } /* taste-skill-ignore: legibility scrim over a photograph */
.chapter-open .grid { align-items: end; }
.chapter-open h2 { grid-column: 1 / span 7; font-size: var(--step-display); line-height: 0.98; letter-spacing: -0.045em; font-weight: 600; }
.chapter-open p { grid-column: 8 / span 5; font-size: var(--step-lead); line-height: 1.45; }

/* Key messages: one sentence a section must not lose, set as a statement, left in full ink. */
.key { max-width: 30ch; font-size: var(--step-lead); line-height: 1.32; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.key-band { grid-column: 1 / -1; background: var(--stage); padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 56px); margin-top: 64px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; overflow: hidden; }
.key-band .key { font-size: var(--step-lead); max-width: 30ch; }
.key-band p:not(.key) { color: var(--muted); max-width: 44ch; }

.section { padding-top: var(--section); }
.section > .wrap > h2, .section h2.title { font-size: var(--step-head); line-height: 1.06; letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; }
.section h3 { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; margin-top: 56px; max-width: 34ch; }
.section h3:first-child { margin-top: 0; }
.prose > * + * { margin-top: 18px; }
.prose p, .prose li { max-width: 62ch; }
.prose ul, .prose ol.steps { padding-left: 1.2em; display: grid; gap: 8px; }
.prose ol.steps { list-style: decimal; }
.prose ol.steps li::marker { color: var(--accent); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); }

/* split: a statement on one side, the picture on the other (5/7) */
.split { row-gap: 40px; align-items: start; }
.split .text { grid-column: 1 / span 5; }
.split .media { grid-column: 6 / span 7; }
.split.flip .text { grid-column: 8 / span 5; grid-row: 1; }
.split.flip .media { grid-column: 1 / span 7; grid-row: 1; }
.split .media > * + * { margin-top: 24px; }
.sticky-text { position: sticky; top: 104px; }

/* pictures: real screenshots, square, on a flat stage one tone up */
.shot { background: var(--stage); padding: clamp(14px, 2vw, 28px); }
.shot.bleed { padding: 0; background: transparent; }
.shot .frame { overflow: hidden; }
/* screenshots sit in a clipping window, so their picture can move inside it while the frame moves outside */
.shot { overflow: hidden; }
.shot img { width: 100%; cursor: zoom-in; transition: filter 300ms ease; }
.shot:hover img { filter: brightness(1.06); }
.shot figcaption { margin-top: 14px; color: var(--muted); font-size: var(--step-small); max-width: 70ch; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.phone-pair { display: grid; grid-template-columns: minmax(0, 1fr) 30%; gap: var(--gap); align-items: end; }

/* notes: a filled panel one step from the ground, no outline */
.note { background: var(--stage); padding: 20px 24px; max-width: 70ch; }
.note strong:first-child { display: block; margin-bottom: 4px; }
.note.warn { background: #241a12; }

/* tables: real tables keep their lines */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--step-body); }
table th { text-align: left; font-weight: 600; color: var(--muted); padding: 0 20px 10px 0; font-size: var(--step-small); }
table td { padding: 12px 20px 12px 0; vertical-align: top; border-top: 1px solid var(--line); }
table td:first-child { white-space: nowrap; }
table.compact td { padding-top: 9px; padding-bottom: 9px; }

/* call and response: what you type, then what comes back */
.exchange-col { grid-column: 4 / span 6; }
.exchange + .exchange { margin-top: 88px; }
.exchange .say { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.015em; max-width: 36ch; }
.exchange .say + p { margin-top: 10px; max-width: 62ch; }
.exchange .call { margin-top: 18px; }
.exchange .response { margin-top: 18px; margin-left: 56px; }
.exchange .response pre { background: var(--stage); }
.exchange.wide .response { margin-left: 0; margin-right: calc(-1 * (100% / 6 * 3 + var(--gap) * 3)); }

/* pinned stage: three statements change one picture (the signature crossfade) */
.pinned { row-gap: 0; }
.pinned .steps-col { grid-column: 1 / span 5; }
.pinned .step { min-height: 72svh; padding-bottom: 48px; }
.pinned .step:last-child { min-height: auto; }
.pinned .step .say { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.015em; }
.pinned .step p { margin-top: 12px; max-width: 46ch; }
.pinned .step .inline-shot { margin-top: 24px; }
.pinned .stage-col { grid-column: 6 / span 7; }
.pinned .stage { display: none; }
.js .pinned .stage { display: block; position: sticky; top: 104px; background: var(--stage); padding: clamp(14px, 2vw, 28px); }
.js .pinned .stage .frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.js .pinned .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1600ms var(--ease-soft); }
.js .pinned .stage img.is-current { opacity: 1; }
.js .pinned .stage figcaption { margin-top: 14px; color: var(--muted); font-size: var(--step-small); min-height: 1.5em; }
.js .pinned .step .inline-shot { display: none; }

/* the moving picture: a run executing on its run page */
.film { grid-column: 1 / -1; background: var(--stage); padding: clamp(14px, 2vw, 28px); }
.film video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--surface); }
.film figcaption { margin-top: 14px; color: var(--muted); font-size: var(--step-small); }

/* output index, live sheet: the run's files */
.outputs { margin-top: 72px; align-items: start; }
.outputs .names { grid-column: 1 / span 5; list-style: none; display: grid; gap: 6px; }
.outputs .names button {
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left;
  font: 600 var(--step-head) / 1.08 "Geist", sans-serif; letter-spacing: -0.035em; color: #5f5955;
  transition: color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.outputs .names button:hover { color: var(--muted); }
.outputs .names button:active { transform: translateX(2px); }
.outputs .names button[aria-pressed="true"] { color: var(--ink); }
.outputs .names p { margin-top: 24px; max-width: 40ch; }
.outputs .sheet-stage { grid-column: 6 / span 7; background: var(--stage); height: min(78svh, 640px); overflow: hidden; padding: 56px 0 0 48px; position: relative; }
[data-ui].sheet { width: min(560px, 100%); background: #f7f7f6; color: #1b1917; border-radius: 4px; padding: 28px 30px 60px; min-height: 120%; font-size: var(--step-small); line-height: 1.55; transition: opacity 200ms ease, transform 300ms var(--ease-out); }
[data-ui].sheet.swap { opacity: 0; transform: translateY(8px); }
[data-ui].sheet pre { background: transparent; color: #1b1917; padding: 0; overflow: visible; white-space: pre-wrap; }
[data-ui].sheet .sheet-name { font-weight: 600; margin-bottom: 14px; display: flex; justify-content: space-between; gap: 12px; }
[data-ui].sheet .sheet-name span { color: #7a726c; font-weight: 400; }
[data-ui].sheet table { font-size: var(--step-small); }
[data-ui].sheet table td { border-top: 1px solid #e4dfda; padding: 6px 14px 6px 0; }
[data-ui].sheet table th { color: #7a726c; padding-bottom: 6px; }
[data-ui].sheet h4 { font-size: var(--step-lead); margin: 0 0 6px; letter-spacing: -0.01em; }
[data-ui].sheet h5 { font-size: var(--step-small); margin: 16px 0 4px; }
[data-ui].sheet p { margin: 0 0 8px; }

/* tabs (enhanced from plain sections) */
.tabs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tabs-list button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: var(--stage); color: var(--muted); font: 500 var(--step-small)/1 "Geist", sans-serif; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.tabs-list button:hover { color: var(--ink); }
.tabs-list button:active { transform: scale(0.97); }
.tabs-list button[aria-selected="true"] { background: var(--stage-2); color: var(--ink); }
.tab-panel > * + * { margin-top: 16px; }
.tab-panel + .tab-panel { margin-top: 40px; }
.js .tab-panel + .tab-panel { margin-top: 0; }
.js .tab-panel[hidden] { display: none; }
.js .tab-panel .panel-title { display: none; }

/* statement, table pushed right: the CLI commands */
.pushed h2 { grid-column: 1 / -1; font-size: var(--step-head); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; max-width: 30ch; }
.pushed h2 .indent { display: block; }
.pushed h2 .indent { padding-left: 3vw; }
.pushed .naming { grid-column: 4 / span 2; margin-top: 72px; color: var(--muted); font-size: var(--step-small); }
.pushed .side { grid-column: 1 / span 4; margin-top: 72px; align-self: end; }
.pushed .cmds { grid-column: 6 / -1; margin-top: 72px; }
.pushed .cmds table td { border-top: 0; padding-top: 7px; padding-bottom: 7px; }
.pushed .cmds tr.group td { padding-top: 30px; }
.pushed .cmds td:first-child { color: var(--muted); }
.pushed .cmds td:last-child { text-align: right; color: var(--muted); white-space: nowrap; }

/* question index, one answer */
.faq { margin-top: 56px; align-items: start; }
.faq .questions { grid-column: 1 / span 5; list-style: none; display: grid; gap: 4px; }
.faq details { padding: 6px 0; }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: baseline; font-size: var(--step-body); color: var(--muted); padding: 6px 0; transition: color var(--t-hover) ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5f5955; transform: translateY(-1px); transition: background-color var(--t-hover) ease; }
.faq summary:hover, .faq details[open] summary, .faq details.is-current summary { color: var(--ink); }
.faq details[open] summary::before, .faq details.is-current summary::before { background: var(--accent); }
.faq details .answer { margin: 4px 0 10px 26px; max-width: 58ch; }
.faq .pane { display: none; }

/* photo credits: small, before the closing line */
.credits { padding-top: var(--section); }
.credits h2 { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.015em; }
.credits p, .credits ul { margin-top: 12px; max-width: 80ch; color: var(--muted); font-size: var(--step-small); }
.credits ul { list-style: none; display: grid; gap: 6px; padding: 0; }
.credits strong { color: var(--ink); font-weight: 500; }
.credits a { color: var(--ink); }

/* footer: one quiet line */
.close { padding-top: clamp(140px, 30svh, 280px); padding-bottom: 30px; }
.close .wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: baseline; font-size: var(--step-small); color: var(--muted); }
.close .links { display: flex; gap: 24px; }
.close .links a { color: var(--ink); }
.close .end { text-align: right; }

/* image zoom */
dialog.zoom { border: 0; padding: 0; background: var(--surface); color: var(--ink); max-width: min(96vw, 1600px); width: 100%; }
dialog.zoom::backdrop { background: rgb(6 4 3 / 0.88); }
dialog.zoom img { width: 100%; }
dialog.zoom form { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; font-size: var(--step-small); color: var(--muted); }

/* ---- motion: entrances once, content visible without script ----------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero h1 [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .hero [data-rise] { opacity: 0; transform: translateY(18px); animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 420ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 75ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="scale"] { transform: scale(0.985) translateY(16px); }
  .js [data-reveal="scale"].is-in { transform: none; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---- parallax: depth between layers as sections pass ----------------------------------------
   guide.js sets --py / --dy from each element's position on screen (requestAnimationFrame, only
   while visible). The CSS `translate` property carries it, separate from `transform`, so it
   composes with the reveal entrances instead of fighting them. Travel stays within a few percent;
   nothing moves under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-parallax] { translate: 0 var(--py, 0px); }
  .js [data-depth] { translate: 0 var(--dy, 0px); }
  /* Screenshots: the frame tilts back slightly and the picture inside it travels against the
     frame, larger as it comes in and as it goes out, flat and still while it is read in the middle
     of the screen (--sp: -1 entering from below, 0 centred, +1 leaving at the top). */
  .js .shot[data-depth][data-reveal] { transform-origin: 50% 50%; transform: perspective(1400px) rotateX(calc(var(--sp, 0) * -7deg)) scale(calc(1 - var(--sa, 0) * 0.07)); transition: transform 120ms linear, opacity 120ms linear; }
  .js .shot[data-depth][data-reveal] { opacity: calc(1 - var(--sa, 0) * 0.55); }
  .js .shot[data-depth] img { transform: translate3d(0, calc(var(--sp, 0) * -9%), 0) scale(calc(1.14 + var(--sa, 0) * 0.08)); }
  .js .shot[data-depth] figcaption { translate: 0 calc(var(--sp, 0) * 18px); }
}

/* ---- tablet ------------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .hero-text { grid-column: 1 / -1; }
  .hero .lede { max-width: 46ch; }
  .hero-console { grid-column: 1 / -1; }
  .chapter-open h2 { grid-column: 1 / -1; }
  .chapter-open p { grid-column: 1 / span 9; margin-top: 24px; }
  .split .text, .split.flip .text { grid-column: 1 / -1; grid-row: auto; }
  .split .media, .split.flip .media { grid-column: 1 / -1; grid-row: auto; }
  .sticky-text { position: static; }
  .exchange-col { grid-column: 1 / -1; }
  .exchange.wide .response { margin-right: 0; }
  .pinned .steps-col { grid-column: 1 / -1; }
  .pinned .stage-col { display: none; }
  .pinned .step { min-height: 0; padding-bottom: 56px; }
  .js .pinned .step .inline-shot { display: block; }
  .outputs .names, .outputs .sheet-stage { grid-column: 1 / -1; }
  .outputs .sheet-stage { margin-top: 32px; }
  .pushed .naming, .pushed .side { display: none; }
  .pushed .cmds { grid-column: 1 / -1; }
  .contents h2 { grid-column: 1 / -1; margin-bottom: 40px; }
  .contents ol.chapters { grid-column: 1 / -1; }
  .intro .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .faq .questions { grid-column: 1 / -1; }
}

/* ---- desktop only: the FAQ becomes an index with one large answer ------------------------ */
@media (min-width: 1081px) {
  .js .faq .questions { grid-column: 1 / span 5; }
  .js .faq details .answer { display: none; }
  .js .faq .pane { display: block; grid-column: 7 / -1; position: sticky; top: 120px; font-size: var(--step-lead); line-height: 1.4; max-width: 36ch; transition: opacity 150ms ease; }
  .js .faq .pane.swap { opacity: 0; }
  .js .faq .pane .q { color: var(--muted); font-size: var(--step-small); margin-bottom: 14px; }
}

/* ---- phone -------------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --gap: 16px; }
  .bar nav { display: none; }
  .bar .contents-link { display: inline-flex; margin-left: auto; font-size: var(--step-small); color: var(--muted); text-decoration: none; padding: 10px 0; }
  .bar .button { display: none; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(36px, 10.4vw, 48px); }
  .hero .lede { font-size: var(--step-body); margin-top: 18px; }
  .hero .actions { margin-top: 24px; }
  .hero .actions .button { width: 100%; }
  [data-ui] .c-body { grid-template-columns: 1fr; }
  [data-ui] .c-input { border-right: 0; border-bottom: 1px solid var(--line); }
  [data-ui] .c-head .seg { width: 100%; }
  [data-ui] .c-head .seg button { flex: 1; min-height: 40px; }
  .intro .cols { grid-template-columns: 1fr; row-gap: 28px; }
  .contents ol.chapters { grid-template-columns: 1fr; }
  .chapter-open h2 { font-size: clamp(36px, 10vw, 48px); }
  .chapter-open { min-height: 72svh; padding-top: 96px; }
  .key-band { grid-template-columns: 1fr; margin-top: 48px; }
  .key-band .key { font-size: 22px; }
  .pair, .phone-pair { grid-template-columns: 1fr; }
  .exchange .response { margin-left: 0; }
  .outputs .names { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .outputs .names button { font-size: var(--step-lead); }
  .outputs .sheet-stage { height: 70svh; padding: 16px 0 0 16px; }
  table td:first-child { white-space: normal; }
  .pushed .cmds td:last-child { white-space: normal; }
  .close .wrap { grid-template-columns: 1fr; gap: 8px; }
  .close .links { flex-wrap: wrap; gap: 8px 20px; }
  .close .end { text-align: left; }
  .tabs-list button { flex: 1 1 auto; }
  [data-ui] .c-code pre { max-height: 150px; }
  [data-ui] .out pre { max-height: 96px; }
  [data-ui] .events { min-height: 0; }
}