/*
 * GODAI command deck. Every value here was lifted from the approved stills
 * (Main, Light, Phone, Clear). Dark is the primary look, so :root carries the
 * dark values and the light blocks override them. Every colour is a token that
 * both themes define; nothing is coloured only inside a theme block.
 *
 * Red means this needs you. Nothing healthy is ever coloured.
 */

:root {
  color-scheme: dark;

  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --bg: #0A0A0C;
  --surface: #0A0A0C;
  --panel: #0D0D10;
  --ask-bg: #0E0B0C;
  --card-bg: #15100F;
  --callout-bg: #120D0E;
  --input-bg: #0D0D10;

  --ink: #EDEAE4;
  --ink-2: #A9A8B0;
  --muted: #8A8992;
  /* The stills draw labels at #71707A and source captions at #4E4E57, which
     read at 4.0:1 and 2.2:1. This is the lowest grey that clears 4.5:1 on
     every dark surface, the same bar the small red text is held to. */
  --dim: #7E7D87;
  /* A zero count is large text, so 3:1 is the floor for "dim at 0". */
  --zero: #5E5D66;

  --line: #1E1E25;
  --line-soft: #151519;
  --line-strong: #26262E;
  --sep: #1E1E25;
  --edge: #3A3A44;
  --pill-edge: #3A3A44;
  --null: #33333C;
  --mask: #1E1E25;
  --mask-strong: #26262E;
  --track: #1E1E25;
  --bar: #8A8992;

  /* #E52525 fails 4.5:1 for small text on both grounds, so it is kept to
     fills, rules, dots and numerals of 24px and up. */
  --red: #E52525;
  --red-text: #FF5A52;
  --red-num: #E52525;
  /* The stills put #0A0A0C on the red fill, which reads 4.35:1. Pure black
     clears 4.5:1 and looks the same. */
  --on-red: #000000;
  --tag-red-bg: #E52525;
  --tag-red-ink: #000000;
  --tag-bg: #1E1E25;
  --tag-ink: #8A8992;

  --invert-bg: #EDEAE4;
  --invert-ink: #0A0A0C;
  --focus: #EDEAE4;
  --backdrop: rgba(0, 0, 0, 0.62);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F6F5F2;
    --surface: #FFFFFF;
    --panel: #FFFFFF;
    --ask-bg: #FBF1F1;
    --card-bg: #FFFFFF;
    --callout-bg: #FBF1F1;
    --input-bg: #FFFFFF;
    --ink: #16161B;
    --ink-2: #4A4951;
    --muted: #67666E;
    --dim: #6E6D75;
    --zero: #8A8992;
    --line: #DCDAD3;
    --line-soft: #EAE8E2;
    --line-strong: #DCDAD3;
    --sep: #EAE8E2;
    --edge: #BFBDB6;
    --pill-edge: #16161B;
    --null: #BFBDB6;
    --mask: #EAE8E2;
    --mask-strong: #DCDAD3;
    --track: #EAE8E2;
    --bar: #67666E;
    --red: #E52525;
    --red-text: #B01018;
    --red-num: #B01018;
    --on-red: #000000;
    --tag-red-bg: #B01018;
    --tag-red-ink: #FFFFFF;
    --tag-bg: #EAE8E2;
    --tag-ink: #67666E;
    --invert-bg: #16161B;
    --invert-ink: #F6F5F2;
    --focus: #16161B;
    --backdrop: rgba(22, 22, 27, 0.36);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F5F2;
  --surface: #FFFFFF;
  --panel: #FFFFFF;
  --ask-bg: #FBF1F1;
  --card-bg: #FFFFFF;
  --callout-bg: #FBF1F1;
  --input-bg: #FFFFFF;
  --ink: #16161B;
  --ink-2: #4A4951;
  --muted: #67666E;
  --dim: #6E6D75;
  --zero: #8A8992;
  --line: #DCDAD3;
  --line-soft: #EAE8E2;
  --line-strong: #DCDAD3;
  --sep: #EAE8E2;
  --edge: #BFBDB6;
  --pill-edge: #16161B;
  --null: #BFBDB6;
  --mask: #EAE8E2;
  --mask-strong: #DCDAD3;
  --track: #EAE8E2;
  --bar: #67666E;
  --red: #E52525;
  --red-text: #B01018;
  --red-num: #B01018;
  --on-red: #000000;
  --tag-red-bg: #B01018;
  --tag-red-ink: #FFFFFF;
  --tag-bg: #EAE8E2;
  --tag-ink: #67666E;
  --invert-bg: #16161B;
  --invert-ink: #F6F5F2;
  --focus: #16161B;
  --backdrop: rgba(22, 22, 27, 0.36);
}

/* ------------------------------------------------------------------ base */

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

/* Several components set display, which would otherwise beat the attribute. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-modal { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

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

.skip {
  position: absolute; left: 16px; top: -200px; z-index: 60;
  padding: 10px 14px;
  background: var(--invert-bg); color: var(--invert-ink);
  font: 600 11px/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 12px; }

.fig { font-family: var(--f-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.fig-strong { font-weight: 600; }
.fig-net { font: 700 24px/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.dim-text { color: var(--muted); }
.loading { font-size: 11px; color: var(--muted); }

/* What the deck does not know: a short dim rule, never a zero. */
.null { display: inline-block; vertical-align: middle; width: 26px; max-width: 100%; height: 1px; background: var(--null); }
.null-wide { width: 120px; }
.null-stat { width: 30px; height: 2px; }
.null-thin { width: 30px; }
.null-big { width: 30px; height: 2px; align-self: center; }

/* A hidden amount keeps the desk's shape. The payload holds no number behind it. */
.mask { display: inline-block; vertical-align: middle; width: 84px; max-width: 100%; height: 13px; background: var(--mask); }
.mask-strong { background: var(--mask-strong); }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--edge); border-radius: 2px;
  background: transparent; color: var(--ink);
  font: 600 10px/1.2 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; text-align: center;
}
.btn:hover { border-color: var(--ink); }
.btn-sm { min-height: 28px; padding: 0 11px; }
.btn-icon { padding: 0; width: 30px; }
.btn-block { width: 100%; min-height: 44px; letter-spacing: 0.16em; }
.btn-red { background: var(--red); border-color: var(--red); color: var(--on-red); font-weight: 700; }
.btn-red:hover { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--on-red); }
.btn-strong { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-ink); }
.btn-strong:hover { border-color: var(--invert-bg); box-shadow: inset 0 0 0 1px var(--invert-ink); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------- sample */

.sample-banner {
  position: sticky; top: 0; z-index: 40;
  padding: 14px 16px;
  background: var(--invert-bg); color: var(--invert-ink);
  font: 500 14px/1.4 var(--f-mono); letter-spacing: 0.06em; text-align: center;
  border-bottom: 4px solid var(--invert-ink);
  box-shadow: 0 4px 0 var(--invert-bg);
}
.sample-banner strong { font-weight: 600; letter-spacing: 0.16em; }

.deck-alert {
  padding: 8px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2);
  font: 400 11px/1.5 var(--f-mono); letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- header */

.top {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 20px; row-gap: 10px;
  min-height: 64px; padding: 10px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: 20px; min-width: 0; }
.wordmark { font: 700 21px/1 var(--f-display); letter-spacing: -0.02em; }
.top-rule { flex-shrink: 0; width: 1px; height: 20px; background: var(--line-strong); }
.tagline { font: 400 10px/1.2 var(--f-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.tagline:empty { display: none; }
.top-spacer { flex-grow: 1; }
.top-break { display: none; }

.mode { position: relative; display: flex; align-items: center; gap: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 0 11px;
  border: 1px solid var(--pill-edge); border-radius: 2px;
  background: transparent; color: var(--ink);
  font: 600 10px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.pill-dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
.pill-btn:hover { border-color: var(--ink); }
.mode-note { font: 400 10px/1.2 var(--f-mono); letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; }
.mode-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  width: 320px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border: 1px solid var(--edge);
  background: var(--surface);
}
.mode-q { font-size: 13px; line-height: 1.5; }
/* Empty status lines leave the flow but stay in the accessibility tree, so the
   first message is still announced. display:none would drop the live region. */
.form-msg:empty { position: absolute; }

.unit-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 2px; }
.unit-switch button {
  min-height: 28px; padding: 0 12px;
  border: 0; border-radius: 1px;
  background: transparent; color: var(--muted);
  font: 600 10px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
.unit-switch button:hover { color: var(--ink); }
.unit-switch button[aria-pressed="true"] { background: var(--invert-bg); color: var(--invert-ink); }

.clock { font: 400 11px/1.2 var(--f-mono); letter-spacing: 0.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }

.tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------ tape */

.tape {
  display: flex; align-items: stretch;
  height: 34px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.tape-tag {
  flex-shrink: 0; display: flex; align-items: center;
  padding: 0 14px;
  background: var(--tag-bg); color: var(--tag-ink);
  font: 600 9px/1 var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase;
}
/* The tag only turns red while a line on the tape is waiting on him. */
.tape.has-demand .tape-tag { background: var(--tag-red-bg); color: var(--tag-red-ink); }
.tape-view {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  overflow: hidden; white-space: nowrap;
}
.tape-view:focus-visible { outline-offset: -2px; }
.tape-run { display: inline-flex; flex-shrink: 0; animation: tape var(--tape-dur, 72s) linear infinite; }
.tape-half, .tape-group { display: inline-flex; flex-shrink: 0; }
.tape-item { padding: 0 18px; font: 400 11px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.tape-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.tape-time.is-demand { color: var(--red-text); }
.tape-empty { color: var(--muted); }
.tape:hover .tape-run,
.tape:focus-within .tape-run,
.tape.is-paused .tape-run { animation-play-state: paused; }
.tape.is-still .tape-run { animation: none; }
.tape.is-still .tape-copy { display: none; }
.tape.is-still .tape-view { overflow-x: auto; scrollbar-width: thin; }
.tape.is-still .tape-pause { display: none; }
.tape-pause {
  flex-shrink: 0;
  padding: 0 12px;
  border: 0; border-left: 1px solid var(--line);
  background: transparent; color: var(--muted);
  font: 600 9px/1 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.tape-pause:hover { color: var(--ink); }
.tape-pause:focus-visible { outline-offset: -2px; }

@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------- desks */

.desks {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 0.9fr);
  grid-template-areas: "floor money ask";
  min-height: max(560px, calc(100vh - 260px));
}
.desk { min-width: 0; display: flex; flex-direction: column; gap: 15px; padding: 22px 24px; }
.desk:focus { outline: none; }

/* On a desk-width screen the row is one screen tall and each desk scrolls on
   its own. With sixteen asks the column once stretched the row several
   screens down, pushing the tiles and the money desk's unlock button out of
   sight and leaving two long empty columns beside it. */
@media (min-width: 1101px) {
  .desks { height: max(560px, calc(100vh - 290px)); min-height: 0; }
  /* Relative, so the visually hidden labels inside a card scroll with it. Left
     unpositioned they anchored to the page and stretched it past 2,400px. */
  .desk { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.desk-floor { grid-area: floor; border-right: 1px solid var(--line); }
.desk-money { grid-area: money; border-right: 1px solid var(--line); background: var(--surface); }
.desk-ask { grid-area: ask; gap: 13px; background: var(--ask-bg); }
.desk-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 15px; min-width: 0; }
.grow { flex: 1 1 auto; }

.desk-head { display: flex; align-items: baseline; gap: 10px; }
.desk-title { font: 600 15px/1.2 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.desk-sub { flex: 1 1 auto; min-width: 0; font-size: 11px; color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.badge:empty { display: none; }
.badge svg { flex-shrink: 0; }
.badge.is-red, .badge.is-broken { color: var(--red-text); border-color: currentColor; }

.mini-label { font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* Tables for the floor and the money. Grid columns in the stills, real
   table semantics here so a screen reader can walk the rows. */
.dtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dtable th, .dtable td {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; font-weight: 400; line-height: 1.45;
  text-align: left; vertical-align: middle;
  overflow-wrap: anywhere;
}
.dtable th + th, .dtable th + td, .dtable td + td { padding-left: 12px; }
.dtable thead th {
  padding-top: 0; padding-bottom: 7px;
  border-bottom-color: var(--line);
  font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim);
}
.dtable .r { text-align: right; }
.dtable .is-muted th { color: var(--muted); }

.ftable col.c-who { width: 96px; }
.ftable col.c-el { width: 74px; }
.ftable col.c-late { width: 70px; }
.ftable tbody th { font-weight: 500; }
.ftable .task { color: var(--ink-2); }
.ftable .fig { font-size: 12px; }
.ftable .late { font-weight: 700; color: var(--ink); }

/* Auto layout for the money: a figure never wraps (an Indian-grouped net at
   24px outgrows a fixed column), and the label takes what is left. */
.mtable { table-layout: auto; }
.mtable col.c-fig { width: 108px; }
.mtable .r { white-space: nowrap; }
.mtable.is-ledger tbody th, .mtable.is-ledger tbody td { padding: 10px 0; }
.mtable.is-ledger tbody th + td { padding-left: 12px; }
.mtable.is-ledger tbody tr:last-child > * { border-bottom: 0; }
.mtable tr.is-net > * { padding: 12px 0; border-bottom-color: var(--line); vertical-align: baseline; }
.mtable tr.is-net > th { font-weight: 600; }
.mtable tr.is-net > th + td { padding-left: 12px; }

.note {
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  font-size: 11px; line-height: 1.6; color: var(--ink-2);
}
.callout {
  padding: 13px 15px;
  border-left: 2px solid var(--red);
  background: var(--callout-bg);
  font-size: 11px; line-height: 1.6; color: var(--ink);
}

.src-caption { font: 400 9px/1.6 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.src-caption .is-broken { color: var(--red-text); }

/* -------------------------------------------------------------- the floor */

.roles { display: flex; flex-direction: column; gap: 8px; }
.roles-list { list-style: none; display: flex; flex-direction: column; }
.role {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.45;
}
.role:last-child { border-bottom: 0; }
.role-name { font-weight: 500; overflow-wrap: anywhere; }
.role-people { color: var(--ink-2); overflow-wrap: anywhere; }
.role-sops { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 11px; }

.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.counter { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); }
.counter dt { font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.counter dd {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-height: 22px; margin-top: 9px;
  font: 600 20px/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.counter dd .of { font: 500 12px/1 var(--f-body); color: var(--muted); }

/* -------------------------------------------------------------- the money */

.lockbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.lockbar-text { flex: 1 1 auto; font: 400 10px/1.4 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.money-owner { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Cash in by month. Ink bars, the month still running hatched, a month with
   no reading a dim rule on the baseline. Never red: it is a reading. */
.trend { display: flex; flex-direction: column; gap: 10px; }
.trend-svg { display: block; width: 100%; overflow: visible; }
.trend-bar:not(.is-partial) { fill: var(--ink); }
.trend-bar.is-partial { stroke: var(--ink); stroke-width: 1; }
.trend-hatch { stroke: var(--ink); stroke-width: 1.4; }
.trend-null { stroke: var(--null); stroke-width: 2; }
.trend-base { stroke: var(--line-strong); stroke-width: 1; }
.trend-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 3; }
.trend-axis, .trend-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.08em; fill: var(--dim); }
.trend-axis { fill: var(--muted); font-variant-numeric: tabular-nums; }
.trend-table th, .trend-table td { padding: 7px 0; }
.trend-table tbody tr:last-child > * { border-bottom: 0; }

/* ---------------------------------------------------------------- the ask */

.ask-count { flex-shrink: 0; font: 700 26px/1 var(--f-display); color: var(--red-num); font-variant-numeric: tabular-nums; }
.desk-ask .desk-title { font-weight: 700; color: var(--red-text); }
.desk-ask.is-clear { background: var(--bg); }
.desk-ask.is-clear .desk-title { color: var(--muted); }
.desk-ask.is-clear .desk-sub { color: var(--dim); }
.desk-ask.is-clear .ask-count { color: var(--zero); }

.ask-list { display: flex; flex-direction: column; gap: 13px; }
.card { padding: 14px 15px; border-left: 2px solid var(--red); background: var(--card-bg); min-width: 0; }
.card-head { display: flex; align-items: flex-start; gap: 8px; }
.dot { flex-shrink: 0; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--red); }
.card-title { font: 600 13px/1.45 var(--f-body); overflow-wrap: anywhere; }
.card-detail { margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.card-wait { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 400 10px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--dim); }
.card-preview { margin-top: 10px; }
.card-preview summary {
  display: list-item;
  width: fit-content;
  padding: 4px 0;
  font: 600 10px/1.4 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.card-preview pre {
  margin: 8px 0 0;
  max-height: 260px; overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--bg); color: var(--ink-2);
  font: 400 11px/1.55 var(--f-mono);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.card-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.card-confirm-q { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--red-text); }
.card-status { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.card-status.is-red { color: var(--red-text); }
.card-unlock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.card-unlock .card-status { flex: 1 1 160px; margin-top: 0; }

.ask-clear {
  flex: 1 1 auto; min-height: 220px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 28px 34px;
  border: 1px solid var(--line);
}
.ask-list .ask-clear { grid-column: 1 / -1; }
.desk-ask.is-clear .ask-list { flex: 1 1 auto; }
.ask-clear-rule { width: 34px; height: 2px; background: var(--null); }
.ask-clear-title { font: 600 21px/1.3 var(--f-display); letter-spacing: -0.01em; }
.ask-clear-text { font-size: 12px; line-height: 1.7; color: var(--muted); }

.legend { margin-top: auto; padding-top: 8px; font: 400 9px/1.7 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

/* ----------------------------------------------------------------- tiles */

.tiles { border-top: 1px solid var(--line-strong); background: var(--panel); overflow: hidden; }
/* Each tile draws its own right and bottom rule; the grid is 1px wider and
   taller than the band so the outer rules fall outside and are clipped, which
   keeps the separators right at 5, 3, 2 and 1 columns. */
.tiles-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 -1px -1px 0; }
.tile {
  min-width: 0;
  display: flex; flex-direction: column;
  padding: 18px 20px;
  box-shadow: inset -1px 0 0 var(--sep), inset 0 -1px 0 var(--sep);
}
.tile-label { font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.tile-src { margin-top: 4px; font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.tile-src.is-broken { color: var(--red-text); }
.tile-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-height: 32px; margin-top: 11px; }
.tile-num { font: 700 32px/1 var(--f-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-num.is-demand { color: var(--red-num); }
.tile-words { font-size: 11px; color: var(--muted); }
.tile-bar { height: 4px; margin-top: 12px; background: var(--track); }
.tile-bar > span { display: block; height: 4px; background: var(--bar); }
.tile-bar.is-demand > span { background: var(--red); }
.tile-foot { margin-top: 8px; font: 400 10px/1.45 var(--f-mono); color: var(--muted); }
.tile-foot.is-demand { color: var(--red-text); }

/* With the owner's inbox the band carries six readings: 6, 3, 2 and 1 across
   at the same breakpoints, so only the widest step needs its own rule. */
@media (min-width: 1101px) {
  .tiles-grid.is-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.pipe { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 8px 10px; margin-top: 13px; }
.pipe dt { min-width: 62px; font: 400 10px/1.3 var(--f-mono); text-transform: uppercase; color: var(--dim); }
.pipe dd { font: 600 12px/1.3 var(--f-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- footer */

.foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px;
  padding: 14px 28px 20px;
  border-top: 1px solid var(--line);
  font: 400 9px/1.6 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
}
.foot-mode { color: var(--muted); }
.foot-read { margin-left: auto; }
.sources { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.src { display: inline-flex; align-items: center; gap: 6px; }
.src-label { color: var(--muted); }
.src.is-broken, .src.is-broken .src-label { color: var(--red-text); }
.src.is-broken::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
.src-fix {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0; border: 0; background: transparent;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
  text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 3px;
}
.src-fix:hover { text-decoration-color: currentColor; }

/* --------------------------------------------------------- forms, dialogs */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: 600 10px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted);
}
.field-state { font-weight: 400; letter-spacing: 0.1em; color: var(--ink-2); }
/* 16px stops iOS zooming the page when a field takes focus. */
.input {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--edge); border-radius: 2px;
  background: var(--input-bg); color: var(--ink);
  font: 400 16px/1.4 var(--f-body);
}
.input:focus-visible { outline-offset: 1px; }
.hint { font-size: 11px; line-height: 1.55; color: var(--muted); }
.form-msg { font-size: 12px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.form-msg.is-red { color: var(--red-text); }

dialog {
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 1px solid var(--edge);
  background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: var(--backdrop, rgba(0, 0, 0, 0.6)); }

.modal { width: min(420px, calc(100vw - 32px)); }
.modal-inner { display: flex; flex-direction: column; gap: 16px; padding: 24px; }
.modal-title { font: 600 17px/1.3 var(--f-display); letter-spacing: 0.02em; }
.modal-text { font-size: 12px; line-height: 1.6; color: var(--ink-2); }

.sheet {
  position: fixed; top: 0; right: 0; bottom: 0; left: auto;
  margin: 0;
  width: min(520px, 100vw); max-width: 100vw;
  height: 100%; height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid var(--edge);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.sheet-title { flex: 1 1 auto; font: 600 15px/1.2 var(--f-display); letter-spacing: 0.04em; text-transform: uppercase; }
.sheet-note { padding: 8px 20px; border-bottom: 1px solid var(--line); font: 400 10px/1.5 var(--f-mono); letter-spacing: 0.06em; color: var(--muted); }
.sheet-note:empty { position: absolute; padding: 0; border: 0; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 28px; padding: 20px; }
.sheet-lead { font-size: 13px; line-height: 1.6; }
.setup-block { display: flex; flex-direction: column; gap: 12px; }

/* A plain fact, not a demand: on or off, neither is red. */
.team-state { font-size: 12px; line-height: 1.5; color: var(--ink); }

.inline-confirm { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--edge); }
.inline-confirm-q { font-size: 12px; line-height: 1.5; }

.organs { display: flex; flex-direction: column; gap: 14px; }
.organ { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--line); scroll-margin-top: 16px; }
.organ.is-target { border-color: var(--ink); }
.organ-head { display: flex; align-items: baseline; gap: 10px; }
.organ-name { flex: 1 1 auto; font: 600 14px/1.3 var(--f-display); }
.organ-state { font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.organ-gives { font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.organ-form { display: flex; flex-direction: column; gap: 14px; }

.transcript { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 18px 20px; }
.transcript-empty { font-size: 12px; line-height: 1.6; color: var(--muted); }
.msg { display: flex; flex-direction: column; gap: 6px; }
.msg-who { font: 400 9px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.msg-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-you .msg-text { color: var(--ink-2); }
.msg.is-error .msg-text { color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 2px 7px; border: 1px solid var(--edge); font: 400 10px/1.4 var(--f-mono); color: var(--ink-2); }
.chip.is-done { border-color: var(--line-strong); color: var(--muted); }
.composer { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.composer-row { display: flex; align-items: flex-end; gap: 8px; }
.composer-input { flex: 1 1 auto; min-width: 0; max-height: 180px; resize: vertical; }
.composer-row .btn { min-height: 44px; }
.composer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.btn-mic { flex-shrink: 0; width: 44px; padding: 0; }
.btn-mic[aria-pressed="true"], .btn-toggle[aria-pressed="true"] { background: var(--invert-bg); border-color: var(--invert-bg); color: var(--invert-ink); }
.btn-toggle[aria-pressed="true"]::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.organ-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.setup-msg { padding: 12px 14px; border: 1px solid var(--line-strong); }
.setup-msg.is-red { border-color: var(--red); }
.setup-msg:focus-visible { outline-offset: 2px; }
.setup-msg:empty { padding: 0; border: 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1240px) {
  .top { column-gap: 14px; }
  .brand .top-rule, .tagline { display: none; }
  .mode-note { display: none; }
}

@media (max-width: 1100px) {
  .desks {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    grid-template-areas: "ask ask" "money floor";
    min-height: 0;
  }
  .desk-ask { border-bottom: 1px solid var(--line); }
  .desk-floor { border-right: 0; }
  .ask-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 13px; }
  .legend { margin-top: 4px; }
  .tiles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .top { padding: 14px 18px 12px; column-gap: 12px; }
  .brand { order: 0; }
  .top-spacer { order: 1; }
  .mode { order: 2; }
  .clock { order: 3; }
  .top-break { display: block; order: 4; flex-basis: 100%; height: 0; }
  .unit-switch { order: 5; }
  .tools { order: 6; margin-left: auto; gap: 6px; }
  .top-rule-mid { display: none; }
  .mode-pop { left: auto; right: 0; }
  .deck-alert { padding: 8px 18px; }
}

@media (max-width: 720px) {
  .wordmark { font-size: 17px; }
  .pill { gap: 6px; padding: 0 9px; font-size: 9px; letter-spacing: 0.14em; }
  .pill-dot { width: 4px; height: 4px; }
  .clock { font-size: 10px; color: var(--muted); }
  .clock-date { display: none; }
  .top { padding: 16px 16px 12px; }
  .tools .btn-sm { padding: 0 8px; }
  .unit-switch button { padding: 0 10px; }
  /* The pop hung off the mode pill and ran off the left edge below about
     406px, clipping the question and the button that turns spending on. On a
     phone it hangs off the header instead, full width inside the gutters. */
  .top { position: relative; }
  .mode { position: static; }
  .mode-pop { top: calc(100% + 1px); left: 16px; right: 16px; width: auto; max-width: none; }

  .desks { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ask" "money" "floor"; }
  .desk { padding: 20px 16px; }
  .desk-money { border-right: 0; border-bottom: 1px solid var(--line); }
  .ask-list { display: flex; gap: 10px; }
  .ask-count { font-size: 24px; }
  .card { padding: 13px 14px; }
  .card-actions .btn { flex: 1 1 auto; }
  .ask-clear { padding: 24px 20px; }

  .ftable col.c-who { width: 84px; }
  .ftable col.c-el { width: 66px; }
  .ftable col.c-late { width: 56px; }
  .role { grid-template-columns: 84px minmax(0, 1fr); }
  .counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mtable col.c-fig { width: 96px; }

  .tiles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { padding: 16px; }
  .tile-num { font-size: 28px; }

  .foot { padding: 14px 16px 22px; }
  .foot-read { margin-left: 0; }

  .sheet { width: 100vw; border-left: 0; }
  .sheet-head, .sheet-note, .transcript, .composer { padding-left: 16px; padding-right: 16px; }
  .sheet-body { padding: 16px; }
}

@media (max-width: 360px) {
  .tiles-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Touch widths get 44px targets everywhere a finger lands. */
@media (max-width: 720px), (pointer: coarse) {
  .btn, .btn-sm, .pill, .unit-switch button, .src-fix { min-height: 44px; }
  .btn-icon { width: 44px; }
  .btn-sm { min-width: 44px; }
  .tape { height: 44px; }
  .card-preview summary { display: list-item; padding: 12px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 0.18s ease-out; }
  /* A slow ring while the mic is open. Still, with reduced motion: the
     pressed fill says the same thing. */
  .btn-mic.is-on { animation: mic-on 1.6s ease-in-out infinite; }
}
@keyframes mic-on { 50% { box-shadow: 0 0 0 4px var(--line-strong); } }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* No movement at all: the tape becomes a still row he can scroll sideways. */
@media (prefers-reduced-motion: reduce) {
  .tape-run { animation: none; }
  .tape-copy { display: none; }
  .tape-view { overflow-x: auto; scrollbar-width: thin; }
  .tape-pause { display: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}