/* svc.nz landing — Arcade chassis + Manifesto chrome + Operator dark mode.
   Token-driven: .theme-arcade (default) and .theme-operator switch the same layout. */

:root, .theme-arcade {
  color-scheme: dark;
  --bg: #0B0014;
  --bg-elev: #150028;
  --bg-card: #1A0033;
  --ink: #F2EFE3;
  --ink-soft: #BFBAA8;
  --muted: #827E98;

  --accent: #FF2BD6;        /* magenta — wordmark dot, primary action */
  --accent-2: #36F1FF;      /* cyan */
  --accent-3: #C8FF36;      /* lime */
  --warn: #FFB840;
  --crit: #FF5466;

  --shadow-px: 4px 4px 0 #000;
  --shadow-px-lg: 6px 6px 0 #000;
  --shadow-px-sm: 2px 2px 0 #000;

  --scan-opacity: 0;
  --vignette-opacity: 1;
  --pix-2: var(--accent-2);
  --pix-3: var(--accent-3);

  --rule-h: 6px;

  --pixel: "JetBrains Mono", "IBM Plex Mono", "SF Mono", "Menlo", "Consolas", ui-monospace, monospace;
  --display: "Helvetica Neue", "Helvetica", Arial, "Inter", sans-serif;
  --mono: var(--pixel);

  /* terminal palette — arcade */
  --term-bg: #07000F;
  --term-chrome: #1A0033;
  --term-prompt-user: #C8FF36;
  --term-prompt-host: #36F1FF;
  --term-prompt-path: #FF2BD6;
  --term-text: #E8E4D0;
  --term-muted: #7E7895;
  --term-comment: #827E98;
  --term-cmd: #F2EFE3;
  --term-flag: #FFB840;
  --term-string: #C8FF36;
  --term-number: #36F1FF;
  --term-key: #FFB840;
  --term-punct: #7E7895;
  --term-method-get: #36F1FF;
  --term-method-put: #FF2BD6;
  --term-method-post: #C8FF36;
  --term-status-ok: #C8FF36;
  --term-status-warn: #FFB840;
  --term-status-err: #FF5466;
  --term-cap: #C8FF36;
  --term-url: #36F1FF;
  --term-keyword: #FF2BD6;
  --term-fn: #36F1FF;
  --term-var: #FFB840;
}

.theme-operator {
  color-scheme: dark;
  --bg: #0A0E0B;
  --bg-elev: #0F1411;
  --bg-card: #122017;
  --ink: #DDF5E2;
  --ink-soft: #7FA08C;
  --muted: #6C8377;

  --accent: #00FF87;        /* phosphor — wordmark dot AND every accent */
  --accent-2: #00FF87;
  --accent-3: #1F8054;
  --warn: #FFC857;
  --crit: #FF5466;

  --scan-opacity: 0.55;
  --vignette-opacity: 0.7;
  --pix-2: #1F8054;
  --pix-3: #00FF87;

  /* terminal palette — operator (monochrome phosphor) */
  --term-bg: #060A07;
  --term-chrome: #0F1411;
  --term-prompt-user: #00FF87;
  --term-prompt-host: #1F8054;
  --term-prompt-path: #00FF87;
  --term-text: #DDF5E2;
  --term-muted: #4F6157;
  --term-comment: #6C8377;
  --term-cmd: #DDF5E2;
  --term-flag: #7FA08C;
  --term-string: #00FF87;
  --term-number: #00FF87;
  --term-key: #7FA08C;
  --term-punct: #4F6157;
  --term-method-get: #00FF87;
  --term-method-put: #00FF87;
  --term-method-post: #00FF87;
  --term-status-ok: #00FF87;
  --term-status-warn: #FFC857;
  --term-status-err: #FF5466;
  --term-cap: #00FF87;
  --term-url: #00FF87;
  --term-keyword: #00FF87;
  --term-fn: #00FF87;
  --term-var: #7FA08C;
}

html { background: var(--bg); }

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1100px 700px at 30% -10%, rgba(255,43,214,0.16), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(54,241,255,0.13), transparent 55%),
    var(--bg);
  transition: background 320ms ease, color 320ms ease;
}

body.theme-operator {
  background:
    radial-gradient(1100px 700px at 30% -10%, rgba(0,255,135,0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 110%, rgba(0,255,135,0.06), transparent 55%),
    var(--bg);
}

/* fixed overlays — both theme-controlled */
.vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,0.7) 100%);
  opacity: var(--vignette-opacity);
  transition: opacity 320ms ease;
}
.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 95;
  background-image: repeating-linear-gradient(0deg, rgba(0,255,135,0.18) 0 1px, transparent 1px 3px);
  opacity: var(--scan-opacity);
  transition: opacity 320ms ease;
}

.app-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px clamp(20px, 4vw, 56px) 80px;
  position: relative;
  z-index: 1;
}

/* topbar */
.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: end; gap: 18px; }
.brand-copy { display: flex; flex-direction: column; gap: 6px; }
.tagline {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 0;
  transition: color 320ms ease;
  width: var(--tagline-width, auto);
  display: block;
  letter-spacing: var(--tagline-spacing, 0.22em);
  white-space: nowrap;
}
.tagline span.tag-word { display: inline; }
.tagline span.tag-word + span.tag-word::before {
  content: "\2003\2003\2003";
  letter-spacing: 0;
}
.logo-pix { display: flex; align-items: end; gap: 4px; padding-bottom: 14px; }
.pix { width: 12px; height: 12px; display: block; box-shadow: var(--shadow-px-sm); transition: background 320ms ease; }
.pix.p1 { background: var(--accent); }
.pix.p2 { background: var(--pix-2); }
.pix.p3 { background: var(--pix-3); }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(56px, 9vw, 124px);
  line-height: 0.84;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.wordmark .dot {
  color: var(--accent);
  transition: color 320ms ease;
}

.topbar-meta {
  display: flex;
  align-items: end;
  gap: 12px;
  padding-bottom: 14px;
}

.local-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg-elev);
  border: 2px solid var(--ink);
  padding: 5px 10px;
  box-shadow: var(--shadow-px-sm);
}

.theme-toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--ink);
  padding: 6px 12px;
  border-radius: 0;
  box-shadow: var(--shadow-px-sm);
  cursor: pointer;
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background 320ms ease;
}
.theme-toggle:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.theme-toggle:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #000; }

.topbar-rule {
  height: var(--rule-h);
  background: var(--ink);
  margin: 18px 0 10px;
  transition: background 320ms ease;
}
.strap {
  margin: 0 0 56px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* shared section head */
.section-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; margin-bottom: 22px; }
.kicker {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--bg);
  padding: 3px 8px;
  transition: background 320ms ease, color 320ms ease;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-head .rule {
  display: block;
  height: 2px;
  background: var(--ink);
  margin-top: 4px;
  transition: background 320ms ease;
}

/* hero */
.hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 36px);
  margin-bottom: 72px;
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  box-shadow: var(--shadow-px-lg);
  position: relative;
}
.hero .kicker { align-self: flex-start; }
.hero-pattern {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(48px, 10vw, 132px);
  letter-spacing: -0.045em;
  line-height: 0.85;
  color: var(--ink);
  word-break: break-word;
}
.hero-pattern .dot {
  color: var(--accent);
  transition: color 320ms ease;
}
.hero-lede {
  margin: 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-lede strong { color: var(--ink); font-weight: 700; }

.hero-lede code { font-family: var(--mono); color: var(--accent-2); }
.theme-operator .hero-lede code { color: var(--accent); }

/* Wrapping for the landing page's prose.
   These blocks used to carry a max-width in ch, which stopped each paragraph
   partway across its panel at a position with no relationship to anything else
   on the page: the heading above it and the rule beneath it both ran the full
   column, so the copy looked like it had been cut off at an arbitrary point.
   The blocks now fill their container, and balancing handles what the cap was
   really hiding, which is that ragged text tends to leave a stub of a last
   line. Eight paragraphs on this page ended on a line under a third of the
   measure, one of them on the single word "required.". Balancing evens the
   lines out instead, and a browser without it, or a block longer than the few
   lines it is willing to balance, simply wraps the ordinary way. */
.hero-lede,
.cap-primer-lede,
.cap-primer-points li,
.scenario-intro,
.scenario-outcome,
.rotation-lede,
.rotation-note,
.profiles-lede {
  text-wrap: balance;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* primary / ghost buttons */
.primary-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--bg);
  border: 2px solid var(--ink);
  padding: 13px 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  box-shadow: var(--shadow-px-lg);
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background 320ms ease;
}
.primary-button:hover { transform: translate(2px, 2px); box-shadow: var(--shadow-px); }
.primary-button:active { transform: translate(4px, 4px); box-shadow: var(--shadow-px-sm); }

.ghost-button {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--shadow-px-sm);
  transition: transform 100ms steps(2), box-shadow 100ms steps(2), background 200ms ease, color 200ms ease;
}
.ghost-button:hover { background: var(--accent-2); color: var(--bg); transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.theme-operator .ghost-button:hover { background: var(--accent); color: var(--bg); }

/* =========================================================
   cap primer — short explainer that sits between hero and scenarios
   ========================================================= */

.cap-primer {
  margin-bottom: 72px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 36px);
  border: 2px solid var(--ink);
  background: var(--bg-card);
  box-shadow: var(--shadow-px);
}
.cap-primer .section-head { margin-bottom: 18px; }
.cap-primer-lede {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.cap-primer-lede strong { color: var(--ink); font-weight: 700; }
.cap-primer-lede em { color: var(--accent); font-style: italic; }
.cap-primer-lede code {
  font-family: var(--mono);
  color: var(--accent-2);
  background: var(--bg);
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.theme-operator .cap-primer-lede em { color: var(--accent); }
.theme-operator .cap-primer-lede code { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.cap-primer-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
}
.cap-primer-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.cap-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  padding: 3px 8px;
  white-space: nowrap;
}
.cap-primer-points li:nth-child(2) .cap-tag { background: var(--accent-2); }
.cap-primer-points li:nth-child(3) .cap-tag { background: var(--accent-3); }
.cap-primer-points li:nth-child(4) .cap-tag { background: var(--ink); color: var(--bg); }
.theme-operator .cap-tag { background: var(--accent); color: var(--bg); }
.cap-body {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.cap-body code {
  font-family: var(--mono);
  color: var(--accent-2);
}
.theme-operator .cap-body code { color: var(--accent); }

@media (max-width: 720px) {
  .cap-primer-points { grid-template-columns: 1fr; }
  .cap-primer-points li { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
   TERMINAL — proper terminal sessions with syntax highlighting
   ========================================================= */

.scenario-section { margin-bottom: 72px; }

.scenario-intro {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.scenario-intro strong { color: var(--ink); font-weight: 700; }

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.scenario-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  box-shadow: var(--shadow-px);
  overflow: hidden;
}
.scenario-panel:nth-child(3n + 1) { border-color: var(--accent); }
.scenario-panel:nth-child(3n + 2) { border-color: var(--accent-2); }
.scenario-panel:nth-child(3n) { border-color: var(--accent-3); }
.theme-operator .scenario-panel {
  border-color: var(--accent);
  box-shadow: 4px 4px 0 var(--accent-3);
}

.scenario-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 2px solid var(--ink);
}
.scenario-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.scenario-tag,
.scenario-state {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 8px;
}
.scenario-tag {
  background: var(--ink);
  color: var(--bg);
}
.scenario-state {
  color: var(--accent-3);
  border: 1px dashed currentColor;
}
.theme-operator .scenario-state { color: var(--accent); }
.scenario-panel h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.scenario-outcome {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* terminal frame */
.terminal {
  /* A grid, not a column: every .term-body pane occupies the same cell, so
     the terminal is sized by its tallest pane from the first paint and
     switching language tabs cannot resize the box or shift the page. */
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  min-width: 0;
  background: var(--term-bg);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--term-text);
  flex: 1;
}
.terminal > .term-chrome { grid-row: 1; grid-column: 1; }
.terminal > .term-body { grid-row: 2; grid-column: 1; }

.term-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--term-chrome);
  border-bottom: 1px solid color-mix(in srgb, var(--term-text) 14%, transparent);
}
.term-dots {
  display: flex;
  gap: 6px;
}
.term-dot {
  width: 10px;
  height: 10px;
  background: var(--term-muted);
  display: block;
}
.term-dot.dot-1 { background: var(--term-status-err); }
.term-dot.dot-2 { background: var(--term-status-warn); }
.term-dot.dot-3 { background: var(--term-status-ok); }
.theme-operator .term-dot { background: var(--term-muted); }
.theme-operator .term-dot.dot-3 { background: var(--accent); }

.term-title {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--term-muted);
  overflow-wrap: anywhere;
}
.term-tab {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--term-muted);
}

.term-body {
  padding: 14px 16px 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  flex: 1;
  min-height: 240px;
}

.term-body .term-line {
  display: block;
  min-width: 0;
  min-height: 1.55em;
  padding-left: 1.5ch;
  white-space: break-spaces;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.term-body .term-line::before {
  /* Authored lines carry a gutter marker. Soft-wrapped continuations keep the
     hanging indent without repeating it, so they cannot look like new lines. */
  content: "›";
  display: inline-block;
  width: 1ch;
  margin-left: -1.5ch;
  margin-right: 0.5ch;
  color: var(--term-comment);
  font-weight: 700;
}

/* A divider marks a handover between acting machines/identities mid-pane
   (e.g. alice@worker-a's PUT followed by bob@worker-b's GET in the same
   scrollback). It is an output-class line: terminal.js treats it exactly
   like any other output line, revealing it (removing .term-pending) right
   before the next machine's lines start typing.
   The gutter "›" marker is suppressed here — a divider is a rule, not a
   command or response — and flex centers the label between two rule lines
   that flex to fill remaining space, so the row never wraps or changes
   height at narrow widths. */
.term-body .term-line.term-divider {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding-left: 0;
}
.term-body .term-line.term-divider::before,
.term-body .term-line.term-divider::after {
  content: "";
  display: block;
  flex: 1 1 auto;
  min-width: 1ch;
  width: auto;
  height: 1px;
  margin: 0;
  background: color-mix(in srgb, var(--term-muted) 40%, transparent);
}
.term-divider-label {
  flex: 0 0 auto;
  color: var(--term-muted);
  font-style: italic;
  white-space: nowrap;
}

/* terminal.js progressively removes .term-pending to reveal output lines
   (command lines type per character instead — see .term-ch below).
   Hidden lines keep their layout box (visibility, not display) so the
   terminal — and everything below it — is full height from the first frame:
   text fills into reserved space instead of pushing the page around. */
.term-body .term-line.term-pending { visibility: hidden; }

/* Command lines type character by character: terminal.js wraps each character
   of the line in a .term-ch span and un-hides them one at a time, with a block
   caret sitting on the next character still to come. A clip-path sweep used to
   do this and could not: .term-line is a block spanning the body, so each
   steps() step revealed a slice of the CONTAINER, not a character.

   These are the ONLY rules .term-ch participates in, and they touch nothing
   but visibility and colour — no display, no width, no height, no margin. A
   half-typed line therefore occupies exactly the space the finished line will,
   so panel heights cannot move while a terminal animates. */
.term-ch-pending { visibility: hidden; }
/* :not([hidden]) matters, and is not cosmetic: inactive panes are hidden with
   visibility (they share the active pane's grid cell), and visibility is
   overridable by a descendant — an unscoped `visibility: visible` here would
   paint a stranded caret from a hidden pane on top of the visible one. The
   caret always sits on a character that is still .term-ch-pending, so inside a
   hidden pane it simply stays hidden. */
.term-body:not([hidden]) .term-ch-caret {
  visibility: visible;
  background: var(--term-prompt-user);
  color: transparent;
  animation: termBlink 1s steps(1, end) infinite;
}
.theme-operator .term-body:not([hidden]) .term-ch-caret { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  /* :not([hidden]) matters: visibility is inheritable but a descendant can
     override it back to visible, so an unscoped rule would paint these lines
     inside panes the tab switcher has hidden. */
  .term-body:not([hidden]) .term-line.term-pending { visibility: visible; }
  /* This path never runs the animator, so normally no character is ever
     hidden; both rules below exist for a mid-session preference change,
     which must not leave half-typed glyphs invisible or a blinking block
     behind. Same :not([hidden]) scope as the line rule above. */
  .term-body:not([hidden]) .term-ch-pending { visibility: visible; }
  .term-ch-caret { animation: none !important; opacity: 1; }
}

/* prompt */
.term-prompt { color: var(--term-muted); user-select: none; }
.term-prompt .p-user { color: var(--term-prompt-user); }
.term-prompt .p-at   { color: var(--term-muted); }
.term-prompt .p-host { color: var(--term-prompt-host); }
.term-prompt .p-path { color: var(--term-prompt-path); }
.term-prompt .p-mark { color: var(--term-text); }

.term-cmd { color: var(--term-cmd); }
.term-flag { color: var(--term-flag); }
.term-string { color: var(--term-string); }
.term-number { color: var(--term-number); }
.term-key { color: var(--term-key); }
.term-punct { color: var(--term-punct); }
.term-comment { color: var(--term-comment); font-style: italic; }
.term-keyword { color: var(--term-keyword); font-weight: 700; }
.term-fn { color: var(--term-fn); }
.term-var { color: var(--term-var); }
.term-cap { color: var(--term-cap); }
.term-url { color: var(--term-url); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--term-url) 40%, transparent); text-underline-offset: 2px; }
.term-method.m-get  { color: var(--term-method-get); font-weight: 800; }
.term-method.m-put  { color: var(--term-method-put); font-weight: 800; }
.term-method.m-post { color: var(--term-method-post); font-weight: 800; }
.term-status.s-ok   { color: var(--term-status-ok); font-weight: 700; }
.term-status.s-warn { color: var(--term-status-warn); font-weight: 700; }
.term-status.s-err  { color: var(--term-status-err); font-weight: 700; }
.term-meta { color: var(--term-muted); }
.term-arrow { color: var(--term-muted); }

/* response banner — small label like ← v1, ← 200 OK */
.term-resp-tag {
  display: inline-block;
  padding: 0 6px;
  background: color-mix(in srgb, var(--term-text) 12%, transparent);
  color: var(--term-text);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 8px;
}

/* dim continuation lines */
.term-line.is-output { color: var(--term-text); }
.term-line.is-dim { color: var(--term-muted); }

/* blinking cursor at end of last typed line */
.term-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--term-prompt-user);
  vertical-align: -2px;
  margin-left: 2px;
  animation: termBlink 1s steps(1, end) infinite;
}
.theme-operator .term-cursor { background: var(--accent); }
@keyframes termBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* tabs along the bottom — let user switch language for the same flow */
/* The tabs and the skip/replay controls share one row, but the controls are
   deliberately NOT inside .term-langs: that element is the tablist, and a
   tablist may contain only tabs. The chrome that used to sit on the tablist
   moves to the row so the appearance is unchanged. */
.term-langs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-top: 1px solid color-mix(in srgb, var(--term-text) 14%, transparent);
  background: var(--term-chrome);
}
.term-langs-row .term-ctl {
  margin-left: auto;
  align-items: center;
  padding: 0 8px;
}
.term-langs {
  display: flex;
  flex: 1 1 220px;
  flex-wrap: wrap;
  min-width: 0;
  border-top: 1px solid color-mix(in srgb, var(--term-text) 14%, transparent);
  background: var(--term-chrome);
}
.term-langs-row > .term-langs {
  border-top: 0;
  background: transparent;
}
.term-lang {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--term-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  border-right: 1px solid color-mix(in srgb, var(--term-text) 10%, transparent);
  transition: color 120ms ease, background 120ms ease;
}
.term-lang:hover { color: var(--term-text); }
.term-lang[aria-selected="true"] {
  color: var(--bg);
  background: var(--term-prompt-user);
}
.theme-operator .term-lang[aria-selected="true"] {
  color: var(--bg);
  background: var(--accent);
}

/* Hidden tab content keeps its layout box (all panes share one grid cell in
   .terminal above) so the tallest pane sets the height for all of them.
   display:block must be restated: the [hidden] attribute's UA display:none
   otherwise still wins and the shared cell would be a no-op. The selector is
   .term-body, not .term-pane, because each terminal's initial shell pane
   carries only .term-body yet is [hidden]-ed on tab switch like the rest.
   visibility keeps inactive panes out of painting, hit-testing and the
   accessibility tree just as display:none did. */
.terminal > .term-body[hidden] {
  display: block;
  visibility: hidden;
}

/* interactive playback */
.term-tail {
  display: block;
  min-height: 1.55em;
}
.term-head {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--term-prompt-user);
  vertical-align: -2px;
  animation: termBlink 1s steps(1, end) infinite;
}
.theme-operator .term-head { background: var(--accent); }
.terminal.term-done .term-head { display: none; }

/* ctl: skip / replay buttons */
.term-ctl {
  margin-left: auto;
  display: flex;
  gap: 4px;
  padding-right: 8px;
}
.term-langs .term-ctl { padding: 0; }
.term-ctl-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--term-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
  border-left: 1px solid color-mix(in srgb, var(--term-text) 10%, transparent);
  transition: color 120ms ease, background 120ms ease;
}
.term-ctl-btn:hover { color: var(--term-text); background: color-mix(in srgb, var(--term-text) 6%, transparent); }
.term-chrome .term-ctl { margin-left: auto; padding: 0; }
.term-chrome .term-ctl-btn { border-left: 1px solid color-mix(in srgb, var(--term-text) 14%, transparent); padding: 4px 10px; }

/* =========================================================
   operations grid
   ========================================================= */

.ops-section { margin-bottom: 72px; }
.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.op-card {
  position: relative;
  background: var(--bg-elev);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-px);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.op-tag {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 3px 8px;
  color: var(--bg);
}
.op-tag-in  { background: var(--accent); }
.op-tag-out { background: var(--accent-2); }
.op-tag-up  { background: var(--accent-3); }
.theme-operator .op-tag-in,
.theme-operator .op-tag-out,
.theme-operator .op-tag-up { background: var(--accent); }

.op-card h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* op-card uses simplified terminal */
.op-card .terminal {
  border: 0;
  flex: 0 0 auto;
}
.op-card .term-body {
  min-height: 0;
  padding: 12px 14px;
  font-size: 11.5px;
}

.op-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.op-note code { color: var(--accent-2); }
.theme-operator .op-note code { color: var(--accent); }

/* properties */
.props-section { margin-bottom: 72px; }
.props-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.prop {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--accent);
  color: var(--bg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-px);
  transition: background 320ms ease, color 320ms ease;
  /* stamp letters use these — bg is the dark page color, fg is the prop's accent */
  --stamp-bg: var(--bg);
  --stamp-fg: var(--accent);
}
.prop.p-2 { background: var(--accent-2); --stamp-fg: var(--accent-2); }
.prop.p-3 { background: var(--accent-3); --stamp-fg: var(--accent-3); }
.prop.p-4 { background: var(--ink); color: var(--bg); --stamp-fg: var(--accent-3); }
.prop.p-5 { background: var(--bg-card); color: var(--ink); border-color: var(--ink); --stamp-bg: var(--ink); --stamp-fg: var(--bg-card); }

.theme-operator .prop,
.theme-operator .prop.p-2,
.theme-operator .prop.p-3 { background: var(--bg); color: var(--accent); border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent-3); --stamp-bg: var(--accent); --stamp-fg: var(--bg); }
.theme-operator .prop.p-4 { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: var(--shadow-px); --stamp-bg: var(--bg); --stamp-fg: var(--accent); }
.theme-operator .prop.p-5 { background: var(--bg); color: var(--ink-soft); border-color: var(--accent-3); --stamp-bg: var(--accent); --stamp-fg: var(--bg); }

.prop-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.prop h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.prop-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px;
  line-height: 0.9;
  letter-spacing: 0;
  font-size: clamp(26px, 2.6vw, 36px);
}
.prop-title .ch {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.9;
}
.prop-title .ch-lg {
  font-size: 1.55em;
  margin-right: 0.02em;
  transform: translateY(0.06em);
}
.prop-title .ch-stack {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.62em;
  background: var(--stamp-bg);
  color: var(--stamp-fg);
  padding: 0 4px;
  margin: 0 1px;
  transform: translateY(-0.18em);
  letter-spacing: 0;
}
.prop-title .ch-rot {
  display: inline-block;
  transform: rotate(-9deg) translateY(-0.04em);
  transform-origin: 50% 70%;
}
.prop-title .ch-dash {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6em;
  margin: 0 2px;
  transform: translateY(-0.22em);
  opacity: 0.6;
}
@media (max-width: 1100px) {
  .prop-title { font-size: clamp(28px, 4vw, 40px); }
}
.prop p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
}
.prop em { color: inherit; opacity: 0.8; font-style: italic; }

/* rotation */
.rotation-section { margin-bottom: 72px; }
.rotation-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 26px;
  align-items: stretch;
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  box-shadow: var(--shadow-px-lg);
  padding: 24px;
}
.rotation-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
}
.rotation-lede, .rotation-note {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.rotation-lede strong, .rotation-note strong { color: var(--ink); font-weight: 700; }
.rotation-lede code, .rotation-note code {
  font-family: var(--mono);
  color: var(--accent-2);
}
.theme-operator .rotation-lede code,
.theme-operator .rotation-note code { color: var(--accent); }
.rotation-card .terminal { align-self: start; }
.rotation-card .term-body {
  min-height: 0;
  padding: 12px 14px 14px;
  font-size: 11.5px;
}

/* auth profiles */
.profiles-section { margin-bottom: 72px; }
.profiles-lede {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.profiles-lede code {
  font-family: var(--mono);
  color: var(--accent-2);
  background: var(--bg-elev);
  padding: 1px 6px;
}
.theme-operator .profiles-lede code { color: var(--accent); }

.profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.profile {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  color: var(--ink);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--shadow-px);
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease;
}
.profile.pr-1 { border-color: var(--accent-2); }
.profile.pr-2 { border-color: var(--accent); }
.profile.pr-3 { border-color: var(--accent-3); }
.profile.pr-4 { border-color: var(--ink); }
.theme-operator .profile,
.theme-operator .profile.pr-1,
.theme-operator .profile.pr-2,
.theme-operator .profile.pr-3,
.theme-operator .profile.pr-4 { border-color: var(--accent); box-shadow: 4px 4px 0 var(--accent-3); }

.profile h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}
.profile p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* address anatomy */
.address-section { margin-bottom: 64px; }
.address-card {
  border: 2px solid var(--ink);
  background: var(--bg-elev);
  box-shadow: var(--shadow-px-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.address-line {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: clamp(13px, 2vw, 18px);
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  box-shadow: var(--shadow-px-sm);
  color: var(--ink);
}
.a-host  { color: var(--accent-2); }
.a-slash { color: var(--ink-soft); }
.a-box   { color: var(--accent); font-weight: 700; }
.a-name  { color: var(--ink); }
.a-token { color: var(--accent-3); }
.theme-operator .a-host,
.theme-operator .a-box,
.theme-operator .a-token { color: var(--accent); }
.theme-operator .a-name { color: var(--ink); }

.address-key {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
}
.address-key > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--ink-soft);
}
.address-key dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.theme-operator .address-key dt { color: var(--accent); }
.address-key dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.address-key code { color: var(--accent-2); font-family: var(--mono); }
.theme-operator .address-key code { color: var(--accent); }

/* brand-aside */
.brand-aside {
  /* The bottom margin used to come from the section that followed this one.
     With that section gone this aside is the last thing in <main>, so it
     carries the gap to the footer itself. */
  margin: 56px auto 72px;
  max-width: 620px;
  padding: 20px 0 0;
  border-top: 1px dashed var(--muted);
  text-align: center;
}
.brand-aside p {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.brand-aside em {
  font-style: italic;
  color: var(--ink);
}

/* footer */
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  padding-top: 24px;
  margin-top: 16px;
  border-top: 1px dashed var(--ink-soft);
}
.footer-mark { display: flex; flex-direction: column; gap: 4px; }
.footer-wm {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.footer-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The attribution is a full sentence, so it keeps the footer's muted tone
   without the uppercase, wide-tracked treatment the short tags use. */
.footer-attribution {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.footer-attribution a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-nav a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 320ms ease;
}
.footer-nav a:hover { color: var(--accent-3); }
.theme-operator .footer-nav a:hover { color: var(--ink); }

/* notice */
.notice {
  position: fixed;
  bottom: 22px; right: 22px;
  background: var(--accent-3);
  color: var(--bg);
  border: 2px solid var(--ink);
  padding: 10px 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: var(--shadow-px-lg);
  z-index: 50;
  transition: background 320ms ease, color 320ms ease, border-color 320ms ease;
}
.theme-operator .notice { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 6px 6px 0 var(--accent-3); }
.notice-error { background: var(--crit); }

/* responsive */
@media (max-width: 1100px) {
  .ops-grid { grid-template-columns: 1fr 1fr; }
  .ops-grid .op-card:last-child { grid-column: 1 / -1; }
  .props-grid { grid-template-columns: repeat(2, 1fr); }
  .props-grid .prop:nth-child(5) { grid-column: 1 / -1; }
  .profiles-grid { grid-template-columns: repeat(2, 1fr); }
  .rotation-card { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .scenario-grid, .ops-grid, .props-grid, .profiles-grid { grid-template-columns: 1fr; }
  .ops-grid .op-card:last-child, .props-grid .prop:nth-child(5) { grid-column: auto; }
  .topbar { flex-direction: column; align-items: flex-start; gap: 14px; }
  .topbar-meta { width: 100%; justify-content: space-between; padding-bottom: 0; }
  .address-key { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; align-items: flex-start; }
  .footer-nav { align-items: flex-start; }
  .scenario-topline { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .scanlines, .vignette,
  .pix, .wordmark .dot, .kicker, .topbar-rule, .section-head .rule,
  .primary-button, .ghost-button, .theme-toggle,
  .op-card, .op-tag, .op-note code,
  .scenario-panel, .scenario-tag, .scenario-state,
  .prop, .a-host, .a-box, .a-token, .a-name, .address-key dt, .address-key code,
  .footer-nav a, .notice, .hero-pattern .dot, .hero-lede code, body {
    transition: none !important;
  }
  .term-cursor { animation: none !important; opacity: 1; }
  .theme-toggle, .primary-button, .ghost-button,
  .theme-toggle:hover, .theme-toggle:active,
  .primary-button:hover, .primary-button:active,
  .ghost-button:hover { transform: none !important; }
}