/* ssa.m8n1ac.com — page-local styling.
   The engine (scrollcraft.css) is the mechanism and is not restyled here.
   Two grounds, hard cut: lit paper for the working day, night for the two acts
   where the fleet is asleep. One hue (~18deg) at two lightnesses, keyed to the
   ground, per the taste floor's exception for pages that cut between light and
   dark. Wherever --sc-ink is redefined, `color` is restated with it. */

:root {
  --sc-canvas:     #E4E2DB;
  --sc-surface:    #F1F0EA;
  --sc-ink:        #14161A;
  --sc-ink-soft:   #5B6167;
  --sc-accent:     #B23A0E;
  --sc-accent-ink: #FBFAF6;

  /* Public Sans: the USWDS face, drawn for public infrastructure interfaces and
     descended from Libre Franklin. It reads as a utility, it holds up at the
     small sizes this page is mostly made of, and it sits under IBM Plex Mono
     without either face arguing. */
  --sc-font-display: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text:    "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* page-local */
  --line:        color-mix(in srgb, var(--sc-ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--sc-ink) 30%, transparent);
  --fill:        color-mix(in srgb, var(--sc-ink) 4%, transparent);
  --fill-2:      color-mix(in srgb, var(--sc-ink) 8%, transparent);
  --bar-h: 46px;
  --rail-w: 0px;      /* the marketing page has no side rail; the token stays so the
                         stage/section padding maths below still reads the same */
  --mono-label: 0.688rem;
  --shadow-panel: 0 1px 0 color-mix(in srgb, var(--sc-ink) 8%, transparent),
                  0 12px 28px -18px color-mix(in srgb, var(--sc-ink) 34%, transparent);
}

.is-night {
  --sc-canvas:     #0B0E10;
  --sc-surface:    #141A1D;
  --sc-ink:        #E9EDEA;
  --sc-ink-soft:   #8B9795;
  --sc-accent:     #FF7A45;
  --sc-accent-ink: #120B07;
  color: var(--sc-ink);
  --line:        color-mix(in srgb, var(--sc-ink) 16%, transparent);
  --line-strong: color-mix(in srgb, var(--sc-ink) 34%, transparent);
  --fill:        color-mix(in srgb, var(--sc-ink) 5%, transparent);
  --fill-2:      color-mix(in srgb, var(--sc-ink) 10%, transparent);
  --shadow-panel: 0 1px 0 color-mix(in srgb, var(--sc-ink) 8%, transparent),
                  0 18px 40px -24px #000;
}

html { background: #E4E2DB; }
body { background: var(--sc-canvas); }
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

/* Light text on dark wants a touch more leading and tracking. */
.is-night .rows, .is-night .kv { letter-spacing: 0.006em; }

/* ------------------------------------------------------------- app chrome -- */
/* The nav is the product's own chrome: a status bar carrying the live work
   order, and a tab rail that tracks position and jumps. */
.bar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 8;
  height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sc-4);
  padding-inline: var(--sc-4);
  background: #E4E2DB;
  border-block-end: 1px solid var(--line-strong);
  font-family: var(--sc-font-mono);
  font-size: var(--mono-label);
}
.bar__mark { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #14161A; }
.bar__glyph { width: 20px; height: 20px; flex: none; color: #B23A0E; display: block; border-radius: 4px; }
.chrome-night .bar__glyph { color: #FF7A45; }
.bar__name { font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.bar__org { color: #5B6167; letter-spacing: 0.02em; }
.bar__org b { font-weight: 600; color: #14161A; }
.bar__mid { display: flex; align-items: center; gap: var(--sc-3); color: #5B6167; min-width: 0; }
.bar__right { display: flex; align-items: center; gap: var(--sc-3); }

.wo {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.28rem 0.5rem;
  border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm);
  background: #F1F0EA; color: #14161A;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.wo[hidden] { display: none; }
.wo__id { font-weight: 600; }
.wo__code { color: #B23A0E; font-weight: 600; }
.wo__status { text-transform: uppercase; letter-spacing: 0.08em; color: #5B6167; }
.wo__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #B23A0E; flex: none;
}

.btn {
  font: 600 var(--mono-label)/1 var(--sc-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem 0.7rem; border-radius: var(--sc-r-sm);
  border: 1px solid transparent; cursor: pointer;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  text-decoration: none; display: inline-block;
  transition: background 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:hover { background: color-mix(in srgb, var(--sc-accent) 84%, #000); }
.btn:active { transform: translateY(1px); }
.btn--ghost {
  background: transparent; color: var(--sc-ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--fill-2); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.rail {
  position: fixed; z-index: 7;
  inset-block-start: var(--bar-h); inset-inline-start: 0;
  width: var(--rail-w); height: calc(100% - var(--bar-h));
  border-inline-end: 1px solid var(--line);
  background: #E4E2DB;
  padding: var(--sc-4) 0;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--sc-font-mono); font-size: var(--mono-label);
}
.rail__tab {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  color: #5B6167; text-decoration: none;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-inline-start: 2px solid transparent;
  transition: color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out);
}
.rail__tab:hover { color: #14161A; background: color-mix(in srgb, #14161A 4%, transparent); }
.rail__tab[aria-current="true"] {
  color: #14161A; border-inline-start-color: #B23A0E;
  background: color-mix(in srgb, #B23A0E 7%, transparent);
}
.rail__tab i { font-style: normal; color: #B23A0E; opacity: 0; font-size: 0.6rem; }
.rail__tab[aria-current="true"] i { opacity: 1; }
.rail__foot { margin-top: auto; padding: 0 0.85rem; color: #5B6167; line-height: 1.5; }

/* ------------------------------------------------------------------ stages -- */
main { padding-inline-start: 0; }
.stage {
  display: grid;
  padding: calc(var(--bar-h) + var(--sc-4)) var(--sc-5) var(--sc-5) calc(var(--rail-w) + var(--sc-5));
  background: var(--sc-canvas);
  align-content: center;
}
.stage > * { min-height: 0; }
/* Acts whose content arrives progressively hold a fixed pane instead, so rows
   land inside a frame that is already there rather than growing the layout
   under the reader. */
.stage--fill { align-content: stretch; }
.stage--fill .panel { display: flex; flex-direction: column; }
.stage--fill .panel__b { flex: 1 1 auto; min-height: 0; }
.stage--fill .notes { align-self: start; }
.flowsec { background: var(--sc-canvas); padding: var(--sc-6) var(--sc-5) var(--sc-7) calc(var(--rail-w) + var(--sc-5)); }
.flowsec--tight { padding-block: var(--sc-5); }

.grid2 { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
.grid2--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ------------------------------------------------------------------ panels -- */
.panel {
  border: 1px solid var(--line); border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  min-width: 0;
}
.panel__h {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.55rem 0.8rem;
  border-block-end: 1px solid var(--line);
  background: var(--fill);
  font: 600 var(--mono-label)/1.2 var(--sc-font-mono);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.panel__h b { color: var(--sc-ink); font-weight: 600; }
.panel__h .sp { margin-inline-start: auto; text-transform: none; letter-spacing: 0.02em; }
.panel__b { padding: 0.8rem; }
.panel__b--flush { padding: 0; }

/* dense rows */
.rows { font-family: var(--sc-font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.row {
  display: grid; align-items: center; gap: 0.7rem;
  grid-template-columns: 4.6rem 6.5rem minmax(0, 1fr) auto;
  padding: 0.42rem 0.8rem;
  border-block-end: 1px solid var(--line);
}
.row:last-child { border-block-end: 0; }
.row--head {
  color: var(--sc-ink-soft); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: var(--mono-label); background: var(--fill);
}
.row__t { color: var(--sc-ink-soft); }
.row__raw { font-weight: 600; color: var(--sc-ink); overflow-wrap: anywhere; }
.row__msg { color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row--lit { background: color-mix(in srgb, var(--sc-accent) 9%, transparent); }
.row--lit .row__raw { color: var(--sc-accent); }

.tag {
  font: 600 0.625rem/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.22rem 0.36rem; border-radius: 3px; white-space: nowrap;
  border: 1px solid var(--line-strong); color: var(--sc-ink-soft);
}
/* Severity is encoded by fill and weight, not by four different hues. */
.sev--C { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.sev--H { border-color: var(--sc-accent); color: var(--sc-accent); }
.sev--M { border-color: var(--line-strong); color: var(--sc-ink); }
.sev--L { border-color: var(--line); color: var(--sc-ink-soft); }

/* key/value ledger */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.32rem 0.9rem; font-family: var(--sc-font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.kv dt { color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.kv dd { margin: 0; text-align: end; }
.kv dd b { font-weight: 600; }

/* operator's notes: the page's copy, in the surface's own idiom */
.notes { border: 1px solid var(--line); border-radius: var(--sc-r-md); background: color-mix(in srgb, var(--sc-surface) 60%, transparent); }
.notes__h {
  padding: 0.5rem 0.8rem; border-block-end: 1px solid var(--line);
  font: 600 var(--mono-label)/1 var(--sc-font-mono); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft);
}
.notes__b { padding: 0.85rem 0.9rem; }
.notes p { margin: 0; font-size: 0.9375rem; line-height: 1.58; max-width: 46ch; text-wrap: pretty; }
.notes p + p { margin-top: 0.7rem; }
.notes strong { font-weight: 600; }
.notes .lead { font-size: 1.0625rem; line-height: 1.5; letter-spacing: -0.01em; }
.notes .small { font-size: 0.8125rem; color: var(--sc-ink-soft); line-height: 1.55; }
.notes ul { margin: 0.7rem 0 0; padding: 0; list-style: none; font-size: 0.875rem; line-height: 1.5; }
.notes li { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; padding-block: 0.22rem; }
.notes li::before { content: "·"; color: var(--sc-accent); font-weight: 700; }

.mono { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--sc-ink-soft); }
.acc { color: var(--sc-accent); }
.big { font: 600 clamp(1.5rem, 3.4vw, 2.5rem)/1 var(--sc-font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- the picker -- */
.pick { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: start; }
.pick__controls { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding: 0.6rem 0.8rem; border-block-end: 1px solid var(--line); background: var(--fill); }
.field {
  font: 400 0.8125rem/1 var(--sc-font-mono);
  padding: 0.45rem 0.55rem; border: 1px solid var(--line-strong); border-radius: var(--sc-r-sm);
  background: var(--sc-canvas); color: var(--sc-ink); min-width: 0;
}
.field::placeholder { color: color-mix(in srgb, var(--sc-ink-soft) 80%, transparent); }
.pick__list { max-height: 21rem; overflow-y: auto; scrollbar-width: thin; }
.pick__row {
  display: grid; align-items: center; gap: 0.7rem;
  grid-template-columns: 6.2rem minmax(0, 1fr) auto auto;
  width: 100%; text-align: start;
  padding: 0.5rem 0.8rem; border: 0; border-block-end: 1px solid var(--line);
  background: transparent; color: var(--sc-ink); cursor: pointer;
  font-family: var(--sc-font-mono); font-size: 0.75rem;
}
.pick__row:hover { background: var(--fill-2); }
.pick__row[aria-pressed="true"] { background: color-mix(in srgb, var(--sc-accent) 11%, transparent); }
.pick__row[aria-pressed="true"] .pick__raw { color: var(--sc-accent); }
.pick__prov { color: var(--sc-ink-soft); letter-spacing: 0.04em; }
.pick__raw { font-weight: 600; overflow-wrap: anywhere; }
.pick__msg { color: var(--sc-ink-soft); font-size: 0.6875rem; }
.pick__empty { padding: 1.2rem 0.8rem; color: var(--sc-ink-soft); font-family: var(--sc-font-mono); font-size: 0.75rem; }

/* ----------------------------------------------------------- normalization -- */
.norm { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.85fr); align-items: stretch; }
.payload { font-family: var(--sc-font-mono); font-size: 0.75rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--sc-ink-soft); }
.payload .k { color: var(--sc-ink); }
.payload .s { color: var(--sc-accent); }
.resolved { display: grid; gap: 0.7rem; }
.resolved__code { font: 600 clamp(1.15rem, 2.4vw, 1.6rem)/1.05 var(--sc-font-mono); letter-spacing: -0.02em; color: var(--sc-accent); overflow-wrap: anywhere; }
.resolved__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.stat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--sc-r-sm); overflow: hidden; }
.stat > div { background: var(--sc-surface); padding: 0.6rem; }
.stat dt { font: 600 0.625rem/1.2 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.stat dd { margin: 0.35rem 0 0; font: 600 1.25rem/1 var(--sc-font-mono); font-variant-numeric: tabular-nums; }
.stat dd small { font-size: 0.6875rem; font-weight: 400; color: var(--sc-ink-soft); margin-inline-start: 0.2rem; }

/* ------------------------------------------------------------- the registry -- */
.panstage { display: grid; grid-template-rows: auto 1fr; }
.panhead {
  position: relative; z-index: 2;
  display: flex; gap: 0.6rem var(--sc-5); flex-wrap: wrap; align-items: baseline;
  margin: calc(var(--bar-h) + var(--sc-4)) var(--sc-5) 0 calc(var(--rail-w) + var(--sc-5));
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--line); border-radius: var(--sc-r-md);
  background: var(--sc-surface);
  font: 400 var(--mono-label)/1.4 var(--sc-font-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.panhead b { color: var(--sc-ink); font-weight: 600; }
.panhead .acc { color: var(--sc-accent); }
.panstage .rail-track { padding-block-start: var(--sc-4); height: auto; align-self: center; }
.rail-track { display: flex; gap: var(--sc-4); align-items: center; padding: calc(var(--bar-h) + var(--sc-5)) var(--sc-5) var(--sc-5) calc(var(--rail-w) + var(--sc-5)); height: 100%; }
.card { flex: none; width: clamp(20rem, 30vw, 28rem); display: flex; flex-direction: column; }
.card--lead { width: clamp(18rem, 25vw, 24rem); justify-content: center; }
.card > .panel { display: flex; flex-direction: column; }
.card .panel__b { overflow: hidden; }
.plist { font-family: var(--sc-font-mono); font-size: 0.75rem; }
.plist__r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: baseline; padding-block: 0.3rem; border-block-end: 1px solid var(--line); }
.plist__r:last-child { border-block-end: 0; }
.plist__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist__c { font-weight: 600; }
.bars { display: grid; gap: 0.3rem; font-family: var(--sc-font-mono); font-size: 0.75rem; }
.bars__r { display: grid; grid-template-columns: 2.6rem 1fr 1.6rem; gap: 0.5rem; align-items: center; }
.bars__t { height: 7px; background: var(--fill-2); border-radius: 2px; overflow: hidden; }
.bars__f { height: 100%; background: var(--sc-accent); opacity: 0.8; }
.bars__n { text-align: end; }

/* ------------------------------------------------------------------- night -- */
.night-empty { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.empty {
  border: 1px dashed var(--line-strong); border-radius: var(--sc-r-md);
  padding: clamp(1.4rem, 4vw, 2.6rem); text-align: center;
  font-family: var(--sc-font-mono); color: var(--sc-ink-soft); font-size: 0.8125rem;
  display: grid; gap: 0.5rem; background: color-mix(in srgb, var(--sc-surface) 40%, transparent);
}
.empty b { color: var(--sc-ink); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; }
.you { font-size: clamp(1.15rem, 2.6vw, 1.75rem); line-height: 1.3; letter-spacing: -0.015em; max-width: 26ch; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: 0.4rem; }
.spark i { display: block; flex: 1; background: var(--line-strong); border-radius: 1px 1px 0 0; }

/* -------------------------------------------------------------- the board -- */
.board { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: stretch; }
.steps { display: grid; }
.step {
  display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.9rem;
  padding: 0.5rem 0.8rem; border-block-end: 1px solid var(--line);
  font-family: var(--sc-font-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.step:last-child { border-block-end: 0; }
.step__t { color: var(--sc-ink-soft); }
.step__b { display: block; min-width: 0; }
.step__h { display: block; font-weight: 600; letter-spacing: 0.02em; }
.step__d { display: block; color: var(--sc-ink-soft); margin-top: 0.15rem; line-height: 1.5; }
.step--act { background: color-mix(in srgb, var(--sc-accent) 10%, transparent); }
.step--act .step__h { color: var(--sc-accent); }
.cands { font-family: var(--sc-font-mono); font-size: 0.75rem; }
.cand { display: grid; grid-template-columns: 6.6rem 1fr auto; gap: 0.6rem; align-items: baseline; padding-block: 0.26rem; }
.cand--out { color: var(--sc-ink-soft); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
.cand--win { color: var(--sc-accent); font-weight: 600; text-decoration: none; }
.cand__why { font-size: 0.6875rem; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------ proof -- */
.proof { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; }
.geo { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: var(--sc-r-sm); background: var(--fill); overflow: hidden; }
.geo__ring { position: absolute; inset: 22% 32%; border: 1px dashed var(--sc-accent); border-radius: 50%; opacity: 0.75; }
.geo__pin { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); }
.geo__lbl { position: absolute; font: 600 0.625rem/1 var(--sc-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ---------------------------------------------------------------- invoice -- */
.inv { font-family: var(--sc-font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.inv__r { display: grid; grid-template-columns: minmax(0, 1fr) 4.2rem 5.4rem 6rem; gap: 0.7rem; padding: 0.45rem 0.8rem; border-block-end: 1px solid var(--line); }
.inv__r > :nth-child(n+2) { text-align: end; }
.inv__r--head { font-size: var(--mono-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); background: var(--fill); }
.inv__r--tot { font-weight: 600; border-block-end: 0; background: var(--fill); }
.inv__k { color: var(--sc-ink-soft); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gate { display: grid; gap: 0.4rem; font-family: var(--sc-font-mono); font-size: 0.75rem; }
.gate__r { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.5rem; align-items: baseline; }
.gate__r i { font-style: normal; color: var(--sc-ink-soft); }
.gate__r--hit i { color: var(--sc-accent); }

/* ------------------------------------------------------------------ close -- */
.close > .foot { grid-column: 1 / -1; }
.close { display: grid; gap: var(--sc-4); grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; align-content: center; }
.form { display: grid; gap: 0.6rem; }
.form__row { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
.form label { display: grid; gap: 0.28rem; font: 600 var(--mono-label)/1 var(--sc-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.form .field { font-family: var(--sc-font-text); font-size: 0.9375rem; padding: 0.55rem 0.6rem; }
.form textarea.field { min-height: 4.4rem; resize: vertical; font-size: 0.875rem; line-height: 1.5; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.2rem; }
.form__note { font-family: var(--sc-font-mono); font-size: 0.6875rem; line-height: 1.5; color: var(--sc-ink-soft); max-width: 34ch; }
.form__err { font-family: var(--sc-font-mono); font-size: 0.75rem; color: var(--sc-accent); }
.sent { font-family: var(--sc-font-mono); font-size: 0.8125rem; line-height: 1.6; display: grid; gap: 0.6rem; }
.sent b { font-size: 1rem; }

.foot {
  margin-top: var(--sc-5); padding-top: var(--sc-4);
  border-top: 1px solid var(--line);
  display: flex; gap: var(--sc-4) var(--sc-6); flex-wrap: wrap; align-items: baseline;
  font-family: var(--sc-font-mono); font-size: 0.6875rem; color: var(--sc-ink-soft);
}
.foot a { color: var(--sc-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot__sp { margin-inline-start: auto; }

/* ------------------------------------------------------------- responsive -- */
@media (max-width: 1180px) {
  :root { --rail-w: 0px; }
  .rail {
    inset-block-start: var(--bar-h); inset-inline: 0; width: auto; height: auto;
    flex-direction: row; gap: 0; padding: 0;
    overflow-x: auto; scrollbar-width: none;
    border-inline-end: 0; border-block-end: 1px solid var(--line);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__tab { border-inline-start: 0; border-block-end: 2px solid transparent; padding: 0.55rem 0.7rem; white-space: nowrap; }
  .rail__tab[aria-current="true"] { border-block-end-color: #B23A0E; border-inline-start-color: transparent; }
  .rail__foot { display: none; }
  .stage, .rail-track { padding-block-start: calc(var(--bar-h) + 34px + var(--sc-4)); }
  .panhead { margin-block-start: calc(var(--bar-h) + 34px + var(--sc-4)); margin-inline: var(--sc-5); }
  .panstage .rail-track { padding-block-start: var(--sc-4); }
  .flowsec { padding-inline: var(--sc-5); }
  .norm, .proof { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .norm > :nth-child(3), .proof > :nth-child(3) { grid-column: span 2; }
}

@media (max-width: 860px) {
  .bar { grid-template-columns: auto 1fr; padding-inline: var(--sc-3); gap: 0.5rem; }
  .bar__mid, .bar__org { display: none; }
  .bar__right { justify-self: end; }
  .bar__mark, .bar__name, .wo { white-space: nowrap; }
  .rows .tag, .pick__row .tag { justify-self: end; align-self: center; }
  .grid2, .grid2--wide, .pick, .norm, .board, .proof, .close, .night-empty { grid-template-columns: minmax(0, 1fr); }
  .norm > :nth-child(3), .proof > :nth-child(3) { grid-column: auto; }
  .stage { padding-inline: var(--sc-3); }
  .flowsec { padding-inline: var(--sc-3); }
  .rail-track { padding-inline: var(--sc-3); }
  .panhead { margin-inline: var(--sc-3); font-size: 0.625rem; }
  .card, .card--lead { width: min(84vw, 23rem); }
  .row { grid-template-columns: 4.1rem minmax(0, 1fr) auto; gap: 0.15rem 0.5rem; }
  .row > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .row > :nth-child(2) { grid-column: 2; grid-row: 2; font-size: 0.6875rem; }
  .row > :nth-child(3) { grid-column: 2; grid-row: 1; }
  .row > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .row--head > :nth-child(2) { grid-row: 1; }
  .row--head > :nth-child(3) { grid-row: 2; }
  .row__msg { display: none; }
  .pick__row { grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; padding-block: 0.72rem; }
  .pick__row > :nth-child(1), .pick__row > :nth-child(2), .pick__row > :nth-child(3) { grid-column: 1; }
  .pick__row > :nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
  .pick__prov { font-size: 0.6875rem; }
  .pick__list { max-height: 17rem; }
  .form__row { grid-template-columns: 1fr; }
  .inv__r { grid-template-columns: minmax(0, 1fr) 3.4rem 4.6rem; }
  .inv__r > :nth-child(3) { display: none; }
  .stat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step { grid-template-columns: 4.4rem 1fr; gap: 0.6rem; }
  .btn { padding: 0.6rem 0.65rem; }
}

@media (max-width: 460px) {
  .stat { grid-template-columns: minmax(0, 1fr); }
  .wo__code { display: none; }
  .cand { grid-template-columns: 5.6rem 1fr; }
  .cand__why { grid-column: span 2; }
}

/* Reduced motion: the registry rail becomes a native scroll region (engine), so
   keep its lead card readable rather than snap-centred. */
@media (prefers-reduced-motion: reduce) {
  .rail-track { gap: var(--sc-4); }
  .card { scroll-snap-align: start; }
}

/* ------------------------------------------- progress-driven row reveals -- */
/* The step list and the invoice lines are rebuilt whenever the visitor picks a
   different fault, so they are revealed from the act's own progress in
   console.js rather than from engine cue attributes parsed once at mount. */
.step, .inv__r:not(.inv__r--head), .row:not(.row--head) {
  opacity: 0; transform: translateY(6px);
  transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out);
}
.step.is-in, .inv__r.is-in, .row.is-in { opacity: 1; transform: none; }
.step--now { background: color-mix(in srgb, var(--sc-accent) 6%, transparent); }
.step--act.step--now { background: color-mix(in srgb, var(--sc-accent) 16%, transparent); }

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

@media (prefers-reduced-motion: reduce) {
  .step, .inv__r:not(.inv__r--head), .row:not(.row--head) { transform: none; transition-duration: 200ms; }
}

/* ------------------------------------------- chrome follows the ground -- */
/* The bar and the rail are fixed, so they cross the night acts. They invert
   with them: a lit bone bar floating over a dark board is the tell that the
   chrome was pasted on rather than built in. */
.bar, .rail { transition: background 260ms var(--sc-ease-out), border-color 260ms var(--sc-ease-out), color 260ms var(--sc-ease-out); }
.chrome-night .bar {
  background: #0B0E10;
  border-block-end-color: color-mix(in srgb, #E9EDEA 28%, transparent);
  color: #8B9795;
}
.chrome-night .bar__mark, .chrome-night .bar__org b { color: #E9EDEA; }
.chrome-night .bar__org { color: #8B9795; }
.chrome-night .bar__glyph { color: #FF7A45; border-color: #FF7A45; }
.chrome-night .wo {
  background: #141A1D; color: #E9EDEA;
  border-color: color-mix(in srgb, #E9EDEA 30%, transparent);
}
.chrome-night .wo__code { color: #FF7A45; }
.chrome-night .wo__dot { background: #FF7A45; }
.chrome-night .wo__status { color: #8B9795; }
.chrome-night .btn { background: #FF7A45; color: #120B07; }
.chrome-night .rail {
  background: #0B0E10;
  border-inline-end-color: color-mix(in srgb, #E9EDEA 14%, transparent);
  border-block-end-color: color-mix(in srgb, #E9EDEA 14%, transparent);
}
.chrome-night .rail__tab { color: #8B9795; }
.chrome-night .rail__tab:hover { color: #E9EDEA; background: color-mix(in srgb, #E9EDEA 6%, transparent); }
.chrome-night .rail__tab[aria-current="true"] {
  color: #E9EDEA; border-inline-start-color: #FF7A45; border-block-end-color: #FF7A45;
  background: color-mix(in srgb, #FF7A45 12%, transparent);
}
.chrome-night .rail__tab i { color: #FF7A45; }
.chrome-night .rail__foot { color: #8B9795; }

/* the inbox pane's own base strip */
.panel__f {
  margin-top: auto;
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  padding: 0.5rem 0.8rem; border-block-start: 1px solid var(--line);
  background: var(--fill);
  font: 400 var(--mono-label)/1.5 var(--sc-font-mono); color: var(--sc-ink-soft);
}
.panel__f .tag { font-size: 0.5625rem; }

/* A column of panels inside a centred stage hugs its content instead of
   stretching both panels to the tallest one. */
.col { display: grid; gap: var(--sc-4); align-content: start; }
.rows--mat .row { grid-template-columns: 8.2rem 2.6rem minmax(0, 1fr) auto; }

/* ------------------------------------------------------- the phone shape -- */
/* Every act is an ordinary flow section below the single-column breakpoint
   (see console.js). The stage is then a plain block, so it takes section
   padding instead of a viewport-height frame, and the registry rail becomes a
   swipeable scroll region rather than a scroll-driven pan. */
section[id] { scroll-margin-top: calc(var(--bar-h) + 40px); }
.flowed .stage { padding-block: var(--sc-6); }
.flowed #inbox .stage { padding-block-start: calc(var(--bar-h) + 34px + var(--sc-5)); }
.flowed .panhead { margin-block-start: 0; }
.flowed .panstage { padding-block: var(--sc-6); }
.flowed .panstage .rail-track {
  height: auto; padding: var(--sc-4) var(--sc-3) 0;
  overflow-x: auto; scroll-snap-type: x proximity;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.flowed .panstage .rail-track::-webkit-scrollbar { display: none; }
.flowed .card { scroll-snap-align: start; }
.flowed .pick__list { max-height: 24rem; }

@media (max-width: 700px) {
  .bar__name { display: none; }
  .bar { height: 42px; }
}


/* ============================================================== marketing ==
   The page leads with the claim; the console is the proof section in the
   middle of it, not the page itself. */

.wrap { width: 100%; max-width: 76rem; margin-inline: auto; }
.sec__h {
  font-size: clamp(1.5rem, 3.2vw, 2.25rem); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 var(--sc-3);
  text-wrap: balance; max-width: 22ch;
}
.sec__sub {
  margin: 0 0 var(--sc-5); max-width: 60ch;
  font-size: 1rem; line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty;
}

/* ------------------------------------------------------------------ hero -- */
.hero {
  display: grid; gap: var(--sc-6);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center; width: 100%; max-width: 76rem; margin-inline: auto;
}
.hero__h {
  margin: 0; font-weight: 700;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance;
}
.hero__sub {
  margin: var(--sc-4) 0 0; max-width: 46ch;
  font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.55; text-wrap: pretty;
}
.hero__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: var(--sc-5); }
.hero__cta .btn { padding: 0.72rem 1rem; }
.hero__note {
  margin: var(--sc-4) 0 0; max-width: 44ch;
  font: 400 var(--mono-label)/1.6 var(--sc-font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.hero__card .panel { box-shadow: var(--shadow-panel); }
.steps--static .step { opacity: 1; transform: none; }

/* ------------------------------------------------------------- the cost -- */
.cost { display: grid; gap: var(--sc-5) var(--sc-6); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.cost__item h3 {
  margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
}
.cost__item p { margin: 0; max-width: 52ch; font-size: 0.9375rem; line-height: 1.62; color: var(--sc-ink-soft); text-wrap: pretty; }
.cost__item p + h3 { margin-top: 1.4rem; }

/* ---------------------------------------------------------- coverage row -- */
.cover { display: grid; gap: var(--sc-4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--sc-5); }
  .cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cover > :nth-child(3) { grid-column: span 2; }
}

@media (max-width: 860px) {
  .hero__h { font-size: clamp(2.25rem, 10vw, 3rem); letter-spacing: -0.03em; }
  .hero__sub { font-size: 1rem; }
  .cost, .cover { grid-template-columns: minmax(0, 1fr); }
  .cover > :nth-child(3) { grid-column: auto; }
  .sec__h { font-size: 1.5rem; }
}

/* A flow section that hands off to a pinned or panning act gives back some of
   its trailing air: the stage needs a viewport to arrive in, and the reader
   should not cross two screens of nothing to get there. */
.flowsec + section[data-sc-act="pin"] .stage,
.flowsec + section[data-sc-act="pan"] .panstage { padding-block-start: calc(var(--bar-h) + var(--sc-4)); }
.flowsec:has(+ section[data-sc-act="pin"]),
.flowsec:has(+ section[data-sc-act="pan"]) { padding-block-end: var(--sc-4); }