magi-cli 0.7.0

/* magi observation deck.
 *
 * Phone-first: every layout decision below is made for a 390x844 screen held
 * one-handed, then widened. The desktop rules are additive and near the bottom.
 *
 * The palette is taken from assets/logo.svg and assets/logo-dark.svg so the UI
 * and the mark cannot drift apart. Both themes are written out in full rather
 * than derived with color-mix(), because a tint that silently falls back to a
 * flat colour on an older phone browser is a contrast bug the operator would
 * only find in sunlight.
 */

/* ---- tokens: light ------------------------------------------------------ */
:root {
  --bg: #f7f5f1;          /* warm paper; pure white is never used */
  --surface: #fffdfa;
  --sunk: #efeae1;
  --ink: #1a1a1a;         /* logo wordmark ink */
  --ink-2: #55504a;
  --ink-3: #6b655c;
  --line: #ddd6c9;
  --line-2: #c9c0af;
  /* Boundary colour for anything interactive. Distinct from --line because a
     divider may be faint, while the edge of a control has to clear 3:1. */
  --edge: #9d8c6d;

  --gold: #c9a227;
  /* #c9a227 is only 2.4:1 on paper, so the gold that carries meaning as a
     line or indicator is darkened; the fill of the gold button keeps the
     logo value, where the ink on top is what needs the ratio. */
  --gold-line: #ac8a21;
  --teal: #0a7e8c;
  --rust: #c5582d;
  --violet: #7d4b9e;
  --blue: #4a72b8;

  /* The mark, exactly as assets/logo.svg draws it. A logotype is exempt from
     the contrast minimum and must not be tampered with to satisfy it. */
  --mark-a: #c5582d;
  --mark-b: #0a7e8c;
  --mark-c: #7d4b9e;
  --mark-gold: #c9a227;

  /* Candidate colours as they appear on data — labels, rails, diagram
     strokes — darkened until each one reads as body text on every surface. */
  --cand-a: #ad4d28;
  --cand-b: #097582;
  --cand-c: #7d4b9e;
  --cand-d: #806719;
  --cand-e: #4369ac;

  /* chip fills and the ink that sits on them */
  --tint-gold: #f6eccd;  --on-gold: #6b5410;
  --tint-teal: #d7edef;  --on-teal: #05616b;
  --tint-blue: #dce6f6;  --on-blue: #2d5391;
  --tint-rust: #f8e1d6;  --on-rust: #8f3a1a;
  --tint-ink:  #e9e5de;  --on-ink:  #494440;

  --focus: #2d5391;
  --shadow: 0 1px 2px rgba(26, 22, 14, .06), 0 4px 14px rgba(26, 22, 14, .05);
  --hatch: rgba(143, 58, 26, .13);
  /* The same hatching in the verdict colour, for the one card whose answer
     cannot be taken back. */
  --hatch-gold: rgba(107, 84, 16, .22);

  --radius: 12px;
  --radius-sm: 8px;

  /* 4px spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* type scale */
  --t1: .75rem; --t2: .8125rem; --t3: .875rem; --t4: .9375rem;
  --t5: 1.0625rem; --t6: 1.3125rem; --t7: 1.625rem;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --tap: 44px;            /* minimum touch target */
  --ease: cubic-bezier(.22, 1, .36, 1);   /* out-expo; never elastic */
}

/* ---- tokens: dark ------------------------------------------------------ *
 * Duplicated for the media query and the explicit override, deliberately:
 * an operator who pins a theme must beat their OS setting, and there is no
 * single-selector way to say that without nesting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #191817;
    --surface: #211f1d;
    --sunk: #131211;
    --ink: #f5f5f5;
    --ink-2: #b8b8b8;
    --ink-3: #9b948a;
    --line: #37342e;
    --line-2: #4c473e;
    --edge: #70695b;

    --gold: #e9c14a;
    --gold-line: #e9c14a;
    --teal: #3aa9b8;
    --rust: #e58050;
    --violet: #b78fe0;
    --blue: #7ea6e8;

    /* assets/logo-dark.svg, verbatim. */
    --mark-a: #e58050;
    --mark-b: #3aa9b8;
    --mark-c: #b78fe0;
    --mark-gold: #e9c14a;

    --cand-a: #e58050;
    --cand-b: #3aa9b8;
    --cand-c: #b78fe0;
    --cand-d: #e9c14a;
    --cand-e: #7ea6e8;

    --tint-gold: #38301a;  --on-gold: #edc85c;
    --tint-teal: #14313a;  --on-teal: #55c3d1;
    --tint-blue: #1c2839;  --on-blue: #93b8f2;
    --tint-rust: #382318;  --on-rust: #f09a72;
    --tint-ink:  #2a2724;  --on-ink:  #c4bdb3;

    --focus: #93b8f2;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
    --hatch: rgba(240, 154, 114, .14);
    --hatch-gold: rgba(237, 200, 92, .2);
  }
}

:root[data-theme="dark"] {
  --bg: #191817;
  --surface: #211f1d;
  --sunk: #131211;
  --ink: #f5f5f5;
  --ink-2: #b8b8b8;
  --ink-3: #9b948a;
  --line: #37342e;
  --line-2: #4c473e;
  --edge: #70695b;

  --gold: #e9c14a;
  --gold-line: #e9c14a;
  --teal: #3aa9b8;
  --rust: #e58050;
  --violet: #b78fe0;
  --blue: #7ea6e8;

  /* assets/logo-dark.svg, verbatim. */
  --mark-a: #e58050;
  --mark-b: #3aa9b8;
  --mark-c: #b78fe0;
  --mark-gold: #e9c14a;

  --cand-a: #e58050;
  --cand-b: #3aa9b8;
  --cand-c: #b78fe0;
  --cand-d: #e9c14a;
  --cand-e: #7ea6e8;

  --tint-gold: #38301a;  --on-gold: #edc85c;
  --tint-teal: #14313a;  --on-teal: #55c3d1;
  --tint-blue: #1c2839;  --on-blue: #93b8f2;
  --tint-rust: #382318;  --on-rust: #f09a72;
  --tint-ink:  #2a2724;  --on-ink:  #c4bdb3;

  --focus: #93b8f2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
  --hatch: rgba(240, 154, 114, .14);
  --hatch-gold: rgba(237, 200, 92, .2);
}

:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

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

/* The client toggles visibility with the `hidden` attribute, and almost every
   element it toggles also carries a `display` rule here, which would otherwise
   win over the user-agent default and leave empty cards and blank alert boxes
   on screen. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t4)/1.55 var(--sans);
  /* The dock is fixed; this keeps the last card clear of it and of the home
     indicator. */
  padding-bottom: calc(var(--tap) + var(--s6) + env(safe-area-inset-bottom));
  overflow-x: hidden;      /* a horizontal scrollbar on a phone is a bug */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: var(--t6); letter-spacing: -.02em; }
h2 { font-size: var(--t4); }
h3 { font-size: var(--t4); }

/* The small-caps treatment belongs to section labels inside a panel, not to
   every h2: a card's title is the operator's own task text and must read as
   the sentence they wrote. */
.panel h2 {
  font-size: var(--t3); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-3);
}
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

.skip {
  position: absolute; left: var(--s3); top: -100px; z-index: 40;
  background: var(--surface); color: var(--ink);
  padding: var(--s3) var(--s4); border: 1px solid var(--edge);
  border-radius: var(--radius-sm); font-weight: 600;
}
.skip:focus { top: var(--s3); }

/* ---- header ------------------------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  padding-top: calc(var(--s2) + env(safe-area-inset-top));
  padding-left: calc(var(--s4) + env(safe-area-inset-left));
  padding-right: calc(var(--s4) + env(safe-area-inset-right));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap); margin-right: auto; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-size: var(--t5); font-weight: 700; letter-spacing: -.03em; }
.brand-sub { font-size: var(--t1); color: var(--ink-3); font-style: italic; }

.rail { display: none; }

.icon-btn {
  width: var(--tap); height: var(--tap); flex: none;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--ink-2); cursor: pointer; font: inherit;
}
.icon-btn:active { background: var(--sunk); }
.icon-btn svg { width: 20px; height: 20px; }

/* Sun / moon / auto, drawn in CSS so the toggle costs no markup and no fetch. */
.theme-glyph {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
[data-theme="light"] .theme-glyph { background: currentColor; }
[data-theme="dark"] .theme-glyph { background: none; box-shadow: inset -5px 0 0 currentColor; }

/* ---- loop strip -------------------------------------------------------- *
 * A two-column grid rather than a flex row: on a 390px screen the control
 * drops to its own full-width row under the sentence, which is the only way
 * a 44px target and a two-line explanation both fit without the text being
 * squeezed to one word per line. */
.daemon {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s2) var(--s2);
  padding: var(--s2) var(--s4);
  padding-left: calc(var(--s4) + env(safe-area-inset-left));
  padding-right: calc(var(--s4) + env(safe-area-inset-right));
  background: var(--sunk);
  border-bottom: 1px solid var(--line);
  font-size: var(--t2); color: var(--ink-2);
  min-height: 34px;
}
.daemon-dot {
  width: 8px; height: 8px; flex: none; border-radius: 50%;
  background: var(--ink-3);
  /* Aligned to the first line of the sentence rather than centred in a block
     that may be three lines tall: a dot floating beside the explanation reads
     as a bullet for it. */
  align-self: start; margin-top: .55em;
}
.daemon-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.daemon-text { min-width: 0; }
.daemon-text b { color: var(--ink); font-weight: 650; }
.daemon-run { font-family: var(--mono); font-size: var(--t1); }
/* What the control is about to spend, or why there is no control. Small, but
   never the same colour as the dot: it is a sentence to read, not a hint to
   skip. */
.daemon-why { font-size: var(--t1); }
/* The build answering this page. Monospace because it is an exact string an
   operator compares against a release tag, and quiet because it is a fact to
   check rather than something to read on every glance. */
.daemon-version {
  align-self: start;
  font-family: var(--mono);
  font-size: var(--t1);
  color: var(--ink-3);
  white-space: nowrap;
}
.daemon-btn {
  grid-column: 1 / -1;
  width: 100%;
  font-size: var(--t3);
  background: var(--surface); border-color: var(--edge); color: var(--ink);
}
.daemon-btn[data-kind="start"] { background: var(--gold); border-color: var(--gold); color: #241d05; }

.daemon[data-state="working"] { background: var(--tint-blue); color: var(--on-blue); border-bottom-color: var(--tint-blue); }
.daemon[data-state="working"] .daemon-dot { background: var(--on-blue); animation: pulse 1.8s var(--ease) infinite; }
.daemon[data-state="working"] .daemon-text b { color: var(--on-blue); }
.daemon[data-state="idle"] .daemon-dot { background: var(--teal); }
/* Off with an empty queue is a choice, not a fault: neutral, and the control
   beside it is an offer. */
.daemon[data-state="off"] .daemon-dot { background: var(--ink-3); box-shadow: 0 0 0 2px var(--sunk), 0 0 0 3px var(--line-2); }
/* Off with runnable tasks in the queue is the state this strip exists for:
   nothing will happen until the operator taps. Gold, the colour this
   interface uses for "your turn", rather than the rust of a fault — the loop
   being off is not a failure, and colouring it like one taught the operator
   to ignore it. */
.daemon[data-state="waiting"] { background: var(--tint-gold); color: var(--on-gold); border-bottom-color: var(--gold-line); }
.daemon[data-state="waiting"] .daemon-dot { background: var(--on-gold); box-shadow: 0 0 0 2px var(--tint-gold), 0 0 0 3px var(--on-gold); }
.daemon[data-state="waiting"] .daemon-text b { color: var(--on-gold); }
/* Stopping is in flight, not finished, so it keeps the pulsing dot of work in
   progress: a run is still going. */
.daemon[data-state="stopping"] { background: var(--tint-ink); color: var(--on-ink); border-bottom-color: var(--line-2); }
.daemon[data-state="stopping"] .daemon-dot { background: var(--on-ink); animation: pulse 1.8s var(--ease) infinite; }
.daemon[data-state="stopping"] .daemon-text b { color: var(--on-ink); }
/* A loop that died is the one state here that is a fault, so it is the only
   one in rust: the two ordinary "off" states must not be able to borrow this
   colour, or the operator would stop being able to tell a stop from a crash.
   The error text itself is shown beside it. */
.daemon[data-state="failed"] { background: var(--tint-rust); color: var(--on-rust); border-bottom-color: var(--tint-rust); }
.daemon[data-state="failed"] .daemon-dot { background: var(--on-rust); box-shadow: 0 0 0 2px var(--tint-rust), 0 0 0 3px var(--on-rust); }
.daemon[data-state="failed"] .daemon-text b { color: var(--on-rust); }
.daemon[data-state="failed"] .daemon-btn { background: var(--surface); border-color: var(--on-rust); color: var(--ink); }
/* Someone else's loop. The dashed ring is the same vocabulary the cards use
   for "not this page's to settle", and there is no button at all rather than
   one that would answer 409. */
.daemon[data-owned="no"] .daemon-dot {
  background: none;
  border: 2px dashed currentColor;
  width: 12px; height: 12px;
  animation: none;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- ask bar ----------------------------------------------------------- *
 * Sits in the same authoritative band as the daemon strip because it answers
 * the same question the strip does — "is anything going to happen?" — with
 * the one answer the operator can act on. An unanswered question is the only
 * state in this product where the machine is burning nothing and moving
 * nowhere, so it is loud: a gold rule across the top edge, a filled mark and
 * the commit-coloured button. It is also disciplined, because it appears on
 * every view: one clamped line of summary, no animated text, and a fixed
 * min-height so a second question arriving cannot reflow the page under a
 * thumb. */
.ask-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4);
  padding-left: calc(var(--s4) + env(safe-area-inset-left));
  padding-right: calc(var(--s4) + env(safe-area-inset-right));
  background: var(--tint-gold); color: var(--on-gold);
  border-bottom: 1px solid var(--gold-line);
  box-shadow: inset 0 3px 0 var(--gold-line);
  min-height: 58px;
}
.ask-mark {
  position: relative;
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--on-gold); color: var(--tint-gold);
  font: 800 var(--t4)/1 var(--sans);
}
/* A slow expanding ring rather than a flash. It catches the eye on arrival
   and then stops being something you have to read past. Drawn on a
   pseudo-element so the animation is opacity and transform only, which the
   reduced-motion rule at the bottom of this file can flatten to nothing. */
.ask-mark::after {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px solid var(--on-gold);
  animation: ring 2.8s var(--ease) infinite;
}
@keyframes ring {
  0%        { transform: scale(.7); opacity: .65; }
  60%, 100% { transform: scale(1.15); opacity: 0; }
}

.ask-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ask-bar-count { font-size: var(--t3); font-weight: 700; }
.ask-bar-summary {
  font-size: var(--t2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ask-bar-go { flex: none; padding: 0 var(--s3); }

/* The count on the nav item itself, so an open question is still visible once
   the operator has scrolled the bar off the top of a 390px screen. */
.badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--on-gold); color: var(--tint-gold);
  font: 700 var(--t1)/1 var(--sans);
}
.rail-link .badge { margin-left: 6px; }
.dock-glyph { position: relative; display: block; }
.dock-glyph .badge { position: absolute; top: -5px; right: -10px; border: 2px solid var(--surface); }

/* ---- alert ------------------------------------------------------------- */
/* Fixed above the dock rather than at the top of the document.
 *
 * It used to sit in the flow, under the header. On a phone scrolled down to a
 * run's action buttons that is off screen, so tapping Resume and being told
 * "the loop is running run b455 right now" looked exactly like a button that
 * did nothing - the answer was there, several screens up. An error about the
 * thing under your thumb has to be visible from where your thumb is.
 *
 * Clear of the dock and the home indicator the same way `.run-actions-fab`
 * is, and above both so the sheet cannot bury it. */
.alert {
  position: fixed; z-index: 25;
  left: calc(var(--s4) + env(safe-area-inset-left));
  /* Leaves the run-actions FAB's column free: it sits at this exact height
     on the right, and an error that covered it would hide the button the
     operator reaches for next. */
  right: calc(var(--s4) + var(--tap) + var(--s3) + env(safe-area-inset-right));
  bottom: calc(var(--tap) + var(--s3) + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  background: var(--tint-rust); color: var(--on-rust);
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgb(0 0 0 / 28%);
  font-size: var(--t3);
}
/* At 720px the dock is hidden, so the offset that clears it would leave the
   alert floating above nothing. Same breakpoint as `.dock { display: none }`
   rather than a second guess at where wide begins. */
@media (min-width: 720px) {
  .alert { bottom: calc(var(--s4) + env(safe-area-inset-bottom)); }
}
.alert-text { flex: 1; min-width: 0; }

/* An older attempt at a task that a later one replaced. Quieter than a
   status note: it is about which of two identical-looking cards is the one
   that matters, not about what went wrong. */
.card-superseded { color: var(--ink-3); font-style: italic; }

/* ---- views ------------------------------------------------------------- */
main {
  padding: var(--s4);
  padding-left: calc(var(--s4) + env(safe-area-inset-left));
  padding-right: calc(var(--s4) + env(safe-area-inset-right));
  max-width: 1200px; margin: 0 auto;
}
.view { display: flex; flex-direction: column; gap: var(--s4); }

.view-head { display: flex; flex-direction: column; gap: var(--s1); }
.view-sub { font-size: var(--t2); color: var(--ink-3); }

.back {
  display: inline-flex; align-items: center; gap: var(--s1);
  align-self: flex-start; min-height: var(--tap); padding-right: var(--s2);
  font-size: var(--t3); color: var(--ink-2); font-weight: 600;
}
.back::before { content: "\2190"; font-size: var(--t5); }

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
  padding: var(--s5) var(--s4);
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  color: var(--ink-2); font-size: var(--t3); max-width: 46ch;
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s4);
  border-radius: var(--radius-sm); border: 1px solid var(--edge);
  background: var(--surface); color: var(--ink);
  font: 600 var(--t3)/1 var(--sans); cursor: pointer;
  transition: transform .18s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }

/* Gold is the verdict colour in the mark, so it is the commit action here and
   nowhere else. */
.btn-gold { background: var(--gold); border-color: var(--gold); color: #241d05; }
:root[data-theme="dark"] .btn-gold { color: #241d05; }
.btn-quiet { background: transparent; border-color: var(--edge); color: var(--ink-2); }

/* ---- status chips ------------------------------------------------------ *
 * Colour is never the only channel. Every status carries a glyph, and the
 * three unhappy endings additionally differ in border and fill treatment, so
 * `stalled` cannot be mistaken for `ready` in greyscale or by a red-green
 * colour-blind operator. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px; border: 1.5px solid currentColor;
  background: var(--tint-ink); color: var(--on-ink);
  font-size: var(--t1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.chip::before { content: attr(data-glyph); font-size: 1.05em; letter-spacing: 0; }

.chip[data-status="merged"]  { background: var(--tint-gold); color: var(--on-gold); }
.chip[data-status="ready"]   { background: var(--tint-teal); color: var(--on-teal); }
.chip[data-status="prep"]    { background: var(--tint-ink);  color: var(--on-ink); }
.chip[data-flight="1"]       { background: var(--tint-blue); color: var(--on-blue); border-style: dashed; }
.chip[data-status="blocked"] { background: var(--tint-rust); color: var(--on-rust); }
.chip[data-status="failed"]  { background: var(--tint-ink);  color: var(--on-ink); }

/* stalled: hatched fill and a double border. The panel collapsed on quota —
   the run holds work but reached no verdict, and it must not read as success. */
.chip[data-status="stalled"] {
  color: var(--on-rust);
  border-style: double; border-width: 3px;
  background-color: var(--tint-rust);
  background-image: repeating-linear-gradient(-45deg,
    var(--hatch) 0 3px, transparent 3px 7px);
}

/* waiting: an agent stopped and asked the owner something. Gold is the
   decision colour in the mark, so a decision that is merely owed is gold in a
   ring — filled gold stays reserved for a decision that was actually made.
   The ring, the `?` glyph and the halted phase rail are three channels saying
   the same thing, because `waiting` must never be skimmed as `implementing`:
   one is progress, the other is a full stop. */
.chip[data-status="waiting"],
.chip[data-status="open"] {
  background: var(--tint-gold); color: var(--on-gold);
  outline: 2px solid var(--on-gold); outline-offset: 2px;
}
.chip[data-status="answered"]  { background: var(--tint-teal); color: var(--on-teal); }
/* The run went away before anyone answered; the question is history, not work. */
.chip[data-status="abandoned"] { background: var(--tint-ink); color: var(--on-ink); border-style: dashed; }

/* ---- cards (runs + queue) ---------------------------------------------- */
.cards { display: flex; flex-direction: column; gap: var(--s3); }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s3) var(--s4);
}
.card[data-tone="gold"]   { border-left-color: var(--gold-line); }
.card[data-tone="teal"]   { border-left-color: var(--teal); }
.card[data-tone="blue"]   { border-left-color: var(--blue); }
.card[data-tone="rust"]   { border-left-color: var(--rust); }
.card[data-tone="ink"]    { border-left-color: var(--line-2); }
/* Parked on a question. Gold like a verdict, dashed like everything else in
   this interface that is pending rather than settled, so it is not the same
   card edge as `merged` at a glance or in greyscale. */
.card[data-tone="wait"] { border-left-color: var(--gold-line); border-left-style: dashed; }
a.card:active { background: var(--sunk); }

.card-top { display: flex; align-items: center; gap: var(--s2); }
.card-when { margin-left: auto; font-size: var(--t1); color: var(--ink-3); white-space: nowrap; }
.card-title {
  margin-top: var(--s2);
  font-size: var(--t5); font-weight: 600; line-height: 1.32; color: var(--ink);
  /* Two lines is the honest budget at 390px; the full text is on the detail
     view and in the instruction disclosure. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta {
  margin-top: var(--s2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2);
  font-size: var(--t2); color: var(--ink-2);
}
/* The separator trails its own item rather than leading the next one. When a
   meta line wraps, the dot stays at the end of the previous line instead of
   appearing as a stray bullet under the title. `data-sep` is set by the
   client, which is the only thing that knows which item is last once some of
   them are hidden. */
.card-meta > [data-sep]::after,
.cand-nums > [data-sep]::after {
  content: "\00b7"; margin-left: var(--s2); color: var(--line-2);
}
.repo { font-family: var(--mono); font-size: var(--t1); }
.win { font-weight: 700; color: var(--on-gold); }

.card-event {
  margin-top: var(--s2); padding-left: var(--s3);
  border-left: 2px solid var(--line);
  font-size: var(--t2); color: var(--ink-2); font-style: italic;
  overflow-wrap: anywhere;
}
.card-note { margin-top: var(--s2); font-size: var(--t2); color: var(--on-rust); font-weight: 600; }

.err {
  margin-top: var(--s2); padding: var(--s2) var(--s3);
  background: var(--tint-rust); color: var(--on-rust);
  border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t1); line-height: 1.45;
  /* A <pre> defaults to white-space: pre, which let a one-line agent error
     push the whole document sideways on a 390px screen. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* phase rail: where an in-flight run has got to, since the summary carries no
   progress of its own. */
.phases { display: flex; align-items: center; gap: 5px; margin-top: var(--s3); }
.phase { width: 100%; height: 3px; border-radius: 2px; background: var(--line); }
.phase[data-on="1"] { background: var(--blue); }
.phase[data-now="1"] { background: var(--blue); animation: pulse 1.8s var(--ease) infinite; }
/* A run parked on a question keeps its rail, because how far it got still
   matters, but the segment it stopped on is bracketed by the empty track
   showing through on both sides, and it does not pulse. So the rail says
   "stopped here" as a shape and as an absence of motion, not only in gold:
   `waiting` and `implementing` have to stay apart in greyscale. */
.phase[data-parked="1"] {
  background: var(--gold-line);
  border-left: 3px solid var(--line); border-right: 3px solid var(--line);
  animation: none;
}

.card-actions { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.card-actions .btn { flex: 1 1 auto; min-width: 120px; }
.task-priority-box, .task-hold-box, .task-done-box, .task-delete-box { display: contents; }
/* Priority is a step, not a task-sized action - `120px` would make a
   button labelled "+" look like a mistake. */
.card-actions .btn-step { flex: 0 0 auto; min-width: var(--tap); padding: 0 var(--s3); }
/* A card's own confirm/input box (hold's reason field, delete's and done's
   warnings) always takes the whole action row rather than being squeezed
   between the other buttons it replaces. */
.card-actions .stakes-confirm { flex: 1 1 100%; }

/* ---- card tail --------------------------------------------------------- *
 * A run card is one big anchor, which is the affordance the phone layout
 * depends on, and an anchor may contain neither another anchor nor a button.
 * The pull-request link and the Answer action therefore live in a sibling
 * strip drawn as the bottom of the same card: same tone rail, no gap, a
 * dashed rule marking where the card-wide tap target ends. */
.cards > li { display: flex; flex-direction: column; }
li[data-tail="1"] { border-radius: var(--radius); box-shadow: var(--shadow); }
li[data-tail="1"] > .card, li[data-tail="1"] > .card-tail { box-shadow: none; }
li[data-tail="1"] > .card {
  border-bottom: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.card-tail {
  display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap;
  padding: 0 var(--s4) var(--s2);
  background: var(--surface);
  border: 1px solid var(--line); border-top: 1px dashed var(--line);
  border-left: 3px solid var(--line-2);
  border-radius: 0 0 var(--radius) var(--radius);
}
li[data-tone="gold"] > .card-tail { border-left-color: var(--gold-line); }
li[data-tone="teal"] > .card-tail { border-left-color: var(--teal); }
li[data-tone="blue"] > .card-tail { border-left-color: var(--blue); }
li[data-tone="rust"] > .card-tail { border-left-color: var(--rust); }
li[data-tone="wait"] > .card-tail { border-left-color: var(--gold-line); border-left-style: dashed; }
/* The note explains, the button acts, so they stack in that order whether or
   not there is a pull request above them. Explicit `order` rather than DOM
   order because a full-width note between two inline items would otherwise
   split the pull-request row in half. */
.tail-note { order: 1; flex: 1 1 100%; font-size: var(--t2); color: var(--ink-2); }
.tail-go { order: 2; margin-left: auto; }

/* A pull request is a place, so it is a real link with a real target, marked
   as leaving the deck. */
.pr-link {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: var(--tap);
  font-family: var(--mono); font-size: var(--t2); font-weight: 700; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px;
}
.pr-link::after { content: "\2197"; font-family: var(--sans); color: var(--ink-3); }
.pr-round { font-size: var(--t2); color: var(--ink-2); }

/* Check state carries its own glyph and its own sentence. `red` is not a
   verdict on the run — it schedules another fixer round — so it deliberately
   does not borrow the shape of the blocked chip. Pending spins, because it is
   the one check state that resolves on its own without anybody doing
   anything. */
.checks {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t2); font-weight: 650; color: var(--ink-2);
}
.checks::before {
  content: attr(data-glyph);
  width: 17px; height: 17px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  font-size: var(--t1); font-weight: 700;
}
.checks[data-checks="green"]   { color: var(--on-teal); }
.checks[data-checks="red"]     { color: var(--on-rust); }
.checks[data-checks="pending"] { color: var(--on-blue); }
.checks[data-checks="pending"]::before { border-style: dashed; animation: spin 3.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- landing ----------------------------------------------------------- */
.land { display: flex; flex-direction: column; gap: var(--s3); }
.land-top { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.land-note { font-size: var(--t2); color: var(--ink-2); }
.land .phases { margin-top: 0; }
.phase[data-round="1"] { background: var(--gold-line); }

/* ---- questions --------------------------------------------------------- *
 * An open question outranks everything else on screen: it is the only card
 * that has stopped work outright, and the only one whose controls are the
 * point rather than a detail. It gets the answer buttons in place, because a
 * question the operator has to navigate somewhere else to answer is a
 * question that stays unanswered until the morning. */
.asks { display: flex; flex-direction: column; gap: var(--s4); }
.ask {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Settled: the record of a decision, not a demand for one. Sunk, flat, thin
   edge — still fully readable, because this is what was decided and why. */
.ask[data-state="answered"], .ask[data-state="abandoned"] {
  background: var(--sunk);
  border-left: 3px solid var(--line-2);
  box-shadow: none;
}
.panel-ask { border-left: 4px solid var(--gold-line); }
.panel-ask .ask { background: var(--bg); box-shadow: none; }
/* .panel h2 gives every panel heading the small-caps section treatment. A
   question's summary is the operator's decision to make, written by an agent,
   and has to read as the sentence it is. */
.panel-ask .ask-summary {
  font-size: var(--t5); color: var(--ink);
  text-transform: none; letter-spacing: -.015em;
}
.panel-ask .ask[data-state="open"] .ask-summary { font-size: var(--t6); }

.ask-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ask-when { margin-left: auto; font-size: var(--t1); color: var(--ink-3); white-space: nowrap; }
/* align-self keeps the box the width of the text, so the focus ring the ask
   bar leaves on arrival outlines a heading rather than drawing what looks
   like an empty input across the card. */
.ask-summary {
  align-self: flex-start; max-width: 100%;
  font-size: var(--t5); font-weight: 650; line-height: 1.35; color: var(--ink);
  overflow-wrap: anywhere;
}
.ask[data-state="open"] .ask-summary { font-size: var(--t6); letter-spacing: -.015em; }
/* The run link is a real destination on a touch screen, so the metadata row
   is given over to a full tap target rather than leaving a 19px link that
   only a mouse can hit. */
.ask-where { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); min-height: var(--tap); font-size: var(--t2); color: var(--ink-2); }
.ask-where a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ask-seat { font-family: var(--mono); font-size: var(--t1); font-weight: 600; color: var(--ink); }

/* Choices are stacked, left-aligned and full width: they are sentences, not
   labels, and a row of them would truncate at 390px. */
.choices { display: flex; flex-direction: column; gap: var(--s2); }
.choices .btn {
  justify-content: flex-start; text-align: left;
  height: auto; padding: var(--s3) var(--s4);
  line-height: 1.35; font-size: var(--t4);
}
.choices .btn::before {
  content: "\25c7"; margin-right: var(--s2); flex: none;
  color: var(--gold-line); font-size: var(--t5);
}
.ask-free { display: flex; flex-direction: column; gap: var(--s2); }
.ask-free .btn { align-self: flex-start; }

/* The decision, kept as a quotation, because this is the text the run acted
   on and the only durable record of the exchange. */
.answer {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3);
  background: var(--tint-teal); color: var(--on-teal);
  border-radius: var(--radius-sm);
}
.answer-label { font-size: var(--t1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.answer-text { font-size: var(--t4); font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- markdown ------------------------------------------------------------
 * GFM markdown - a question's detail, a chat's agent turn, a run or task
 * instruction, a chat's draft - is parsed into a node tree server-side
 * (`magi::md`) and turned into these elements by `buildMd` in app.js. Never
 * assigned as markup: a fence containing a script tag renders as the
 * characters of a script tag. */
.md { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t3); color: var(--ink-2); }
.md p { overflow-wrap: anywhere; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  margin: var(--s1) 0 0; font-weight: 700; color: var(--ink); overflow-wrap: anywhere;
}
.md h1 { font-size: var(--t6); }
.md h2 { font-size: var(--t5); }
.md h3 { font-size: var(--t4); }
.md h4, .md h5, .md h6 { font-size: var(--t3); }
.md ul, .md ol { display: flex; flex-direction: column; gap: var(--s1); padding-left: var(--s4); }
.md ol { list-style: decimal; }
.md ul { list-style: none; }
.md li { position: relative; overflow-wrap: anywhere; }
.md ul > li::before { content: "\2013"; position: absolute; left: calc(-1 * var(--s4)); color: var(--ink-3); }
.md li.task {
  list-style: none; display: flex; align-items: flex-start; gap: var(--s2);
  margin-left: calc(-1 * var(--s4));
}
.md li.task::before { content: none; }
.md li.task > input[type="checkbox"] { margin-top: 4px; accent-color: var(--teal); flex: none; }
.md blockquote {
  margin: 0; padding: var(--s1) var(--s3);
  border-left: 3px solid var(--line-2);
  color: var(--ink-2); font-style: italic;
}
.md hr { border: 0; border-top: 1px solid var(--line); margin: var(--s1) 0; }
.md strong { color: var(--ink); font-weight: 700; }
.md em { font-style: italic; }
.md s { color: var(--ink-3); text-decoration-color: var(--ink-3); }
.md a {
  color: var(--blue); text-decoration: underline;
  text-decoration-color: var(--line-2); text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.md img { max-width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.md code {
  font-family: var(--mono); font-size: .92em;
  background: var(--sunk); border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; overflow-wrap: anywhere;
}
.md pre {
  position: relative;
  margin: 0; padding: var(--s3);
  background: var(--sunk); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t1); line-height: 1.5; color: var(--ink);
  white-space: pre; overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.md pre code { padding: 0; border: 0; background: none; font-size: inherit; }
/* The fence's info string, carried through as a label only - magi adds no
   syntax highlighting dependency, so this names the language without
   colouring a single token of it. */
.md pre[data-lang]::before {
  content: attr(data-lang);
  position: absolute; top: var(--s2); right: var(--s3);
  font-family: var(--sans); font-size: var(--t1); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3);
}

/* A table can be wider than a 390px screen; it scrolls inside its own frame
   rather than pushing the page wide. */
.md .table-scroll {
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.md table { border-collapse: collapse; width: 100%; min-width: max-content; font-size: var(--t3); }
.md th, .md td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.md tr:last-child > td { border-bottom: 0; }
.md th { background: var(--sunk); color: var(--ink); font-weight: 700; }
.md td { color: var(--ink-2); }
.md th[data-align="center"], .md td[data-align="center"] { text-align: center; }
.md th[data-align="right"], .md td[data-align="right"] { text-align: right; }

/* ---- panels (run detail) ----------------------------------------------- */
.panel {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s4);
}
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.panel-note { font-size: var(--t2); color: var(--ink-3); }
.count { color: var(--ink-3); font-weight: 500; letter-spacing: 0; text-transform: none; }

.run-status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.instruction { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t4); color: var(--ink); }

.facts { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; font-size: var(--t3); }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.facts dd.mono { font-family: var(--mono); font-size: var(--t2); font-weight: 500; }

/* convergence diagram: the mark's three monoliths, drawn from the real
   candidate list. The winner's stroke survives; the others fade. */
.converge { width: 100%; }
.converge svg { width: 100%; height: auto; display: block; }
.converge text { font: 700 13px var(--sans); }

/* ---- candidates -------------------------------------------------------- */
.cands { display: flex; flex-direction: column; gap: var(--s3); }
.cand {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  background: var(--sunk); border-radius: var(--radius-sm);
  border-left: 3px solid var(--cand-tone, var(--line-2));
}
.cand[data-winner="1"] { background: var(--tint-gold); }
.cand-head { display: flex; align-items: center; gap: var(--s2); }
.cand-label {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--cand-tone, var(--ink-3));
  color: var(--cand-tone, var(--ink)); background: var(--surface);
  font-weight: 700; font-size: var(--t3);
}
.cand-agent { font-family: var(--mono); font-size: var(--t2); color: var(--ink-2); }
.crown { margin-left: auto; font-size: var(--t1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--on-gold); }
.crown::before { content: "\25c6"; margin-right: 4px; }
/* A provisional lead is not a verdict: hollow diamond, neutral ink, no gold. */
.crown[data-provisional] { color: var(--ink-3); }
.crown[data-provisional]::before { content: "\25c7"; }
.cand-nums { display: flex; flex-wrap: wrap; gap: 0 var(--s2); font-size: var(--t2); color: var(--ink-2); }
.cand-summary { font-size: var(--t3); color: var(--ink-2); overflow-wrap: anywhere; }

.stat, .report {
  margin: 0;
  font-family: var(--mono); font-size: var(--t1); line-height: 1.5;
  color: var(--ink-2);
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* A diffstat is a handful of short lines, so it wraps rather than clipping a
   word off at the card edge. The run report does not: it is column-aligned
   terminal output and reflowing it would scramble the tables. */
.stat { white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; }

/* ---- review rounds ----------------------------------------------------- */
.rounds { display: flex; flex-direction: column; gap: var(--s3); }
.round { background: var(--sunk); border-radius: var(--radius-sm); padding: var(--s3); }
.round-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.round-n { font-weight: 700; font-size: var(--t4); }
.tag {
  font-size: var(--t1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
}
.tag[data-tone="teal"] { background: var(--tint-teal); color: var(--on-teal); }
.tag[data-tone="rust"] { background: var(--tint-rust); color: var(--on-rust); }
.tag[data-tone="ink"]  { background: var(--tint-ink);  color: var(--on-ink); }
.tag[data-tone="gold"] { background: var(--tint-gold); color: var(--on-gold); }
.round-head .head-sha { margin-left: auto; font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); }

.findings { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s3); }
.finding {
  padding-left: var(--s3);
  border-left: 3px solid var(--line-2);
  font-size: var(--t3);
}
.finding[data-sev="blocker"] { border-left-color: var(--rust); }
.finding[data-sev="major"]   { border-left-color: var(--gold-line); }
.finding-top { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.finding-id { font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); }
.finding-sev { font-size: var(--t1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.finding-title { font-weight: 600; color: var(--ink); }
.finding-where { font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); }
.finding-detail { color: var(--ink-2); margin-top: 2px; overflow-wrap: anywhere; }
.reviewer { margin-top: var(--s3); font-size: var(--t3); }
.reviewer-name { font-family: var(--mono); font-size: var(--t2); color: var(--ink-3); }

.plain { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--t3); color: var(--ink-2); }
.plain li { display: flex; gap: var(--s2); flex-wrap: wrap; }
.plain .seat { font-family: var(--mono); color: var(--ink); font-weight: 600; }

.report {
  max-height: 60vh; overflow-y: auto;
  padding: var(--s3);
  background: var(--sunk); border-radius: var(--radius-sm);
  color: var(--ink);
  white-space: pre;
  tab-size: 4;
}
.report[data-wrap="1"] { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- timeline ---------------------------------------------------------- */
.timeline { display: flex; flex-direction: column; }
.timeline li {
  display: grid; grid-template-columns: 62px 1fr; gap: var(--s3);
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 2px solid var(--line);
  font-size: var(--t3);
  position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-2);
}
.timeline li:last-child::before { background: var(--gold-line); }
.event-at { font-family: var(--mono); font-size: var(--t1); color: var(--ink-3); }
.event-body { min-width: 0; }
.event-node { font-weight: 700; font-size: var(--t2); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.event-msg { color: var(--ink); overflow-wrap: anywhere; }

/* ---- skeletons --------------------------------------------------------- */
.skeleton { pointer-events: none; }
.skeleton .bar { height: 12px; border-radius: 6px; background: var(--sunk); }
.skeleton .bar + .bar { margin-top: var(--s2); }
.skeleton { animation: fade 1.4s var(--ease) infinite; }
@keyframes fade { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- dock -------------------------------------------------------------- */
.dock {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.dock-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tap); padding: var(--s2) var(--s1);
  background: none; border: 0; border-top: 2px solid transparent;
  color: var(--ink-3); font: 600 var(--t1)/1 var(--sans); cursor: pointer;
}
.dock-glyph svg { width: 22px; height: 22px; display: block; }
.dock-item[aria-current="page"] { color: var(--ink); border-top-color: var(--gold-line); }
/* Plan is the only way work gets in from this UI, so the dock's Plan item is
   gold — the colour that everywhere else means "the commit action" — and it
   stays gold even while a different page is active. */
.dock-item.dock-plan { color: var(--on-gold); }
.dock-item.dock-plan .dock-glyph svg { stroke-width: 2.4; }

/* ---- run actions fab ---------------------------------------------------- *
 * The one entry point into Resume / Fold / Delete on a run detail. Fixed so
 * it is reachable without scrolling past the report, and shown at every
 * width — unlike the dock, it has no wide-screen replacement to hand off
 * to. Positioned clear of the dock and the home indicator the same way .say
 * clears the dock: tap height plus a gap plus the safe area. */
.run-actions-fab {
  position: fixed; z-index: 15;
  right: calc(var(--s4) + env(safe-area-inset-right));
  bottom: calc(var(--tap) + var(--s3) + env(safe-area-inset-bottom));
  width: var(--tap); height: var(--tap); flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--gold-line);
  background: var(--gold); color: #241d05;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.run-actions-fab svg { width: 22px; height: 22px; }
.run-actions-fab:active { transform: scale(.97); }

/* Clears the fab so the last panel in run detail is never permanently hidden
   behind it. */
#view-run { padding-bottom: calc(var(--tap) + var(--s6)); }

/* The fab's sheet has no <form> — its content is built and rerendered
   from JS — so it gets its own head/body padding instead of borrowing a
   form's, a shape this document no longer has. */
#run-actions-sheet[open] { display: flex; flex-direction: column; }
#run-actions-sheet .sheet-head { flex: none; padding: var(--s4) var(--s4) 0; }
#run-actions-sheet .sheet-body {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  overflow-y: auto; min-height: 0;
}

/* The task edit sheet has no <form> either - the same reason and the same
   fixed-head, scrolling-body split as run-actions-sheet above. */
#task-edit-sheet[open] { display: flex; flex-direction: column; }
#task-edit-sheet .sheet-head { flex: none; padding: var(--s4) var(--s4) 0; }
#task-edit-sheet .sheet-body {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s4);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
  overflow-y: auto; min-height: 0;
}

/* ---- sheet -------------------------------------------------------------- */
.sheet {
  width: 100%; max-width: 560px; padding: 0; margin: auto auto 0;
  border: 0; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .28);
  max-height: 92dvh;
}
.sheet::backdrop { background: rgba(20, 18, 14, .55); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.sheet-head h2 { font-size: var(--t5); text-transform: none; letter-spacing: -.01em; color: var(--ink); }

.field { display: flex; flex-direction: column; gap: var(--s1); }
.field label { font-size: var(--t3); font-weight: 650; }
.opt { font-weight: 400; color: var(--ink-3); }
.hint { font-size: var(--t2); color: var(--ink-3); }

textarea, input[type="text"], select {
  width: 100%; min-height: var(--tap);
  padding: var(--s2) var(--s3);
  margin-top: var(--s1);
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--edge); border-radius: var(--radius-sm);
  /* 16px minimum: anything smaller makes iOS zoom the viewport on focus, which
     is the horizontal-scroll bug the layout is otherwise free of. */
  font: 400 1rem/1.5 var(--sans);
}
textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--focus); }

/* display:flex removes the native marker, so the chevron is drawn back in;
   a disclosure with no affordance reads as dead text. */
.advanced summary {
  min-height: var(--tap); display: flex; align-items: center; gap: var(--s2);
  font-size: var(--t3); font-weight: 650; color: var(--ink-2); cursor: pointer;
}
.advanced summary::marker, .advanced summary::-webkit-details-marker { display: none; content: ""; }
.advanced summary::before {
  content: "";
  width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); margin-left: 2px;
  transition: transform .18s var(--ease);
}
.advanced[open] > summary::before { transform: rotate(45deg); }
.form-error {
  padding: var(--s2) var(--s3);
  background: var(--tint-rust); color: var(--on-rust);
  border-radius: var(--radius-sm); font-size: var(--t3); font-weight: 600;
}

/* ---- agent-authored panels --------------------------------------------- *
 * A question may hand over a whole HTML page — a diff, a table of changed
 * files, an image — because one line of prose is not enough to judge by. It
 * is rendered inside <iframe sandbox> with NO tokens, so nothing in it runs
 * and it can reach neither this document nor its storage, and the endpoint
 * that serves it sends a CSP denying every network request from inside the
 * frame. That sandbox is the entire reason this is allowed, so nothing below
 * may ask for a token back.
 *
 * A tokenless frame is opaque to this page in both directions: its height
 * cannot be measured and there is no channel to ask it. So the inline frame
 * is bounded and the full-screen dialog carries the rest, and the bounded
 * state is drawn as a deliberate window — its own edge, a fade at the sill,
 * and a sentence saying where the rest is — rather than as a clipped card.
 */
.ask-panel { display: flex; flex-direction: column; gap: var(--s2); }
.ask-panel-bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ask-panel-label {
  font-size: var(--t1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3);
}
.ask-panel-label::before { content: "\25a4"; margin-right: 6px; font-size: 1.1em; }
.ask-panel-bar .btn { margin-left: auto; }

.frame-wrap {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  /* Paper, in both themes, and not var(--surface): a panel that sets no
     background of its own would otherwise render the agent's default black
     text onto the dark surface and be unreadable exactly when it matters. */
  background: #fffdfa;
  overflow: hidden;
}
.frame-wrap iframe {
  display: block; width: 100%; height: 320px; border: 0;
  /* The frame scrolls itself; momentum must not escape into the page and
     carry the operator away from the choices underneath. */
  overscroll-behavior: contain;
}
/* The sill: the panel visibly continues past the bottom edge. Fixed paper
   tint because the frame backdrop is fixed paper too. Not the only signal —
   the sentence below the frame says it in words. */
.frame-more {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 253, 250, 0) 0%, rgba(255, 253, 250, .96) 82%);
  border-bottom: 1px solid var(--line-2);
}
.frame-note { font-size: var(--t2); color: var(--ink-3); }
/* The panel was promised and did not arrive. Stated, not left as a blank
   hole, and the choices below stay live: the owner still has to answer. */
.frame-fail {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  background: var(--tint-rust); color: var(--on-rust);
  border: 1px dashed currentColor; border-radius: var(--radius-sm);
  font-size: var(--t3); font-weight: 600;
}
.frame-fail .hint { color: inherit; font-weight: 400; }

/* Full screen: on a phone this is the only place a unified diff is legible.
   The dialog is the viewport, and the iframe fills it. */
.full {
  width: 100%; max-width: none; height: 100dvh; max-height: 100dvh;
  padding: 0; margin: 0; border: 0;
  background: var(--bg); color: var(--ink);
}
.full[open] { display: flex; flex-direction: column; }
.full::backdrop { background: rgba(20, 18, 14, .8); }
.full-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s4);
  padding-top: calc(var(--s2) + env(safe-area-inset-top));
  padding-left: calc(var(--s4) + env(safe-area-inset-left));
  padding-right: calc(var(--s4) + env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
}
.full-head h2 { font-size: var(--t5); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.full-body { flex: 1; min-height: 0; background: #fffdfa; }
.full-body iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---- merge approval ---------------------------------------------------- *
 * The land loop asks before it merges, and that is the one question in this
 * product whose answer cannot be taken back. "Which cache backend?" and
 * "shall I merge this into main?" therefore must not be the same card: this
 * one is bordered on all four sides in the verdict gold, capped with a
 * hatched rule, and titled by a band that names the consequence.
 *
 * The guard against a thumb that was only scrolling is two taps, not a
 * timer: the first arms, and the confirm row it reveals puts Cancel where
 * the arm button just was, so the pixel under the finger is never the
 * irreversible one. Nothing is disabled and nothing counts down, so an
 * operator who means it is two taps away rather than annoyed.
 */
.ask[data-stakes="merge"] {
  border: 1px solid var(--gold-line);
  border-left: 6px double var(--gold-line);
  box-shadow: var(--shadow), 0 0 0 3px var(--tint-gold);
}
/* Once it is decided, the card stops shouting: the record of a merge
   decision keeps the double edge that identifies it and loses the ring and
   the hatching, which were there to slow a thumb down. */
.ask[data-stakes="merge"]:not([data-state="open"]) { box-shadow: none; }
.ask:not([data-state="open"]) .stakes-band { background-image: none; }
.stakes-band {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin: calc(-1 * var(--s4)) calc(-1 * var(--s4)) 0;
  padding: var(--s2) var(--s4);
  background: var(--tint-gold); color: var(--on-gold);
  border-bottom: 1px solid var(--gold-line);
  border-radius: 0 var(--radius) 0 0;
  background-image: repeating-linear-gradient(-45deg,
    var(--hatch-gold) 0 4px, transparent 4px 11px);
  font-size: var(--t2); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.stakes-band::before { content: "\25c6"; letter-spacing: 0; }

.stakes {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s3);
  background: var(--tint-gold);
  border: 1px solid var(--gold-line); border-radius: var(--radius-sm);
}
.stakes-what { font-size: var(--t3); font-weight: 600; color: var(--on-gold); }
.stakes-what .ask-seat { color: var(--on-gold); }
.stakes-arm { align-self: stretch; }
.stakes-confirm { display: flex; flex-direction: column; gap: var(--s3); }
.stakes-warn { font-size: var(--t4); font-weight: 700; color: var(--on-rust); }
.stakes-row { display: flex; gap: var(--s2); }
.stakes-row .btn { flex: 1; }
/* Hold is not a lesser option, it is the safe one, so it keeps a full target
   and a real edge rather than being demoted to a text link. */
.stakes-hold { align-self: stretch; }

/* ---- planning conversation --------------------------------------------- *
 * `magi plan` gives the terminal to an agent CLI. A phone has no terminal, so
 * the same interview runs here one turn at a time. A turn takes tens of
 * seconds because a real model is thinking: everything below is built so that
 * wait reads as work rather than as a hang. */
.turns { display: flex; flex-direction: column; gap: var(--s3); }
.turn {
  max-width: 92%; min-width: 0;
  padding: var(--s3) var(--s4);
  border-radius: var(--radius);
  font-size: var(--t4);
}
.turn-who {
  display: block; margin-bottom: var(--s1);
  font-size: var(--t1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.turn-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.turn[data-who="operator"] {
  align-self: flex-end;
  background: var(--tint-blue); color: var(--on-blue);
  border-bottom-right-radius: var(--radius-sm);
}
.turn[data-who="agent"] {
  align-self: flex-start;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  border-bottom-left-radius: var(--radius-sm);
}
.turn[data-who="agent"] .turn-who { color: var(--ink-3); }
.turn[data-who="agent"] .md { color: var(--ink); font-size: var(--t4); }
/* magi itself speaking: the interviewing agent timed out, failed or ran out
   of quota. It is not the model talking and must not be read as an answer. */
.turn[data-who="system"] {
  align-self: stretch; max-width: none;
  background: var(--tint-rust); color: var(--on-rust);
  border: 1px dashed currentColor;
  font-weight: 600;
}
.turn-at { display: block; margin-top: var(--s1); font-size: var(--t1); opacity: .75; }

/* The honest wait. Three dots breathing at 1.6s is slow enough to read as
   thinking rather than as a stuck spinner, and the elapsed seconds beside it
   are the proof that something is still counting. */
.waiting {
  align-self: flex-start;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px dashed var(--line-2); border-radius: var(--radius);
  font-size: var(--t3); color: var(--ink-2);
}
.waiting-dots { display: inline-flex; gap: 5px; flex: none; }
.waiting-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  animation: breathe 1.6s var(--ease) infinite;
}
.waiting-dots i:nth-child(2) { animation-delay: .2s; }
.waiting-dots i:nth-child(3) { animation-delay: .4s; }
.waiting-text { flex: 1; min-width: 0; }
/* Tabular, so the number does not shuffle the sentence beside it every
   second while the operator is reading it. */
.waiting-secs {
  flex: none; font-family: var(--mono); font-size: var(--t2);
  font-variant-numeric: tabular-nums; color: var(--ink-3);
}
@keyframes breathe {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-2px); }
}

/* The composer sits above the dock and stays there, because a conversation
   grows downwards and hunting for the reply box at the bottom of a long
   transcript is the one thing that would make this unusable on a phone. */
.say {
  position: sticky; z-index: 10;
  /* Parked one dock above the bottom edge. The dock is its 44px tap target
     plus the label row under the glyph, which is what --s3 stands in for
     here; at 44px alone the composer's own edge crossed the dock's top rule. */
  bottom: calc(var(--tap) + var(--s3) + env(safe-area-inset-bottom));
  display: flex; gap: var(--s2); align-items: flex-end;
  padding: var(--s2) 0;
  background: var(--bg);
}
.say textarea { margin-top: 0; flex: 1; min-width: 0; }
.say .btn { flex: none; }

/* Formatted is the default read of the draft; raw is the exact bytes that
   would be filed, one tap away, so the toggle sits above both and only ever
   one of the two is visible. */
.draft-view-toggle { display: flex; justify-content: flex-end; }

/* The task file, as the file it is: monospace, wrapped rather than scrolled
   sideways, and readable at 390px. Shown when the raw view is selected. */
.draft {
  margin: 0; padding: var(--s3);
  background: var(--sunk); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t2); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 52vh; overflow-y: auto;
  tab-size: 2;
}
/* Every problem at once, because the operator wants to fix them in one pass
   and the draft stays on screen above them. */
.problems {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3);
  background: var(--tint-rust); color: var(--on-rust);
  border: 1px solid currentColor; border-radius: var(--radius-sm);
  font-size: var(--t3);
}
.problems h3 { font-size: var(--t3); font-weight: 700; }
.problems ul { display: flex; flex-direction: column; gap: var(--s2); }
.problems li { position: relative; padding-left: var(--s4); font-weight: 600; overflow-wrap: anywhere; }
.problems li::before { content: "\2715"; position: absolute; left: 2px; }
/* On the rust tint a sunk grey code chip disappears, so the span is outlined
   in the ink it already sits in. */
.problems code {
  font-family: var(--mono); font-size: .92em;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 3px;
  overflow-wrap: anywhere;
}

.filed-note { font-size: var(--t3); color: var(--ink-2); }
.filed-note .ask-seat { font-size: var(--t2); }
.chat-ready { color: var(--on-gold); font-weight: 700; }

/* ---- wide screens ------------------------------------------------------ *
 * Not a stretched phone: the dock becomes a header rail, the run list becomes
 * a grid, and the report pane sits beside the analysis instead of below it. */
@media (min-width: 720px) {
  body { padding-bottom: var(--s6); }
  .dock { display: none; }
  .rail { display: flex; align-items: center; gap: var(--s1); }
  /* With room, the control returns to the end of the same row: a full-width
     button across a 1280px strip would read as a banner, not a switch. */
  .daemon { grid-template-columns: auto minmax(0, 1fr) auto; }
  .daemon-btn { grid-column: auto; width: auto; }
  .rail-link {
    display: inline-flex; align-items: center;
    min-height: var(--tap); padding: 0 var(--s3);
    border-radius: var(--radius-sm);
    font-size: var(--t3); font-weight: 650; color: var(--ink-3);
  }
  .rail-link[aria-current="page"] { color: var(--ink); background: var(--sunk); }
  /* The rail's Plan entry is the primary action: a filled gold button, not
     another grey link — the same gold as the dock's plan item and every
     start-the-interview button, and the only .btn among the links. */
  .rail-link.btn-gold { color: #241d05; background: var(--gold); border-color: var(--gold); }
  main { padding: var(--s5); }
  h1 { font-size: var(--t7); }
  .view { gap: var(--s5); }
  .sheet {
    margin: auto; border-radius: var(--radius);
    max-height: min(86dvh, 760px);
  }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--s4); }
  .card { display: flex; flex-direction: column; }
  .card-event { margin-top: auto; padding-top: var(--s2); }
  /* The `li` is the grid item now that a card may carry a tail; the card
     itself has to stretch or the tails in a row would not line up. */
  .cards > li > .card { flex: 1; }
  /* A question is read, not scanned: one column, measured, even when there is
     room for two. */
  #view-questions .asks { max-width: 780px; }
  /* With room, the options sit side by side and stay the width of their own
     text; a 780px-wide button labelled "Redis" reads like a mistake. A long
     option still wraps onto its own line. */
  .choices { flex-direction: row; flex-wrap: wrap; }
  .choices .btn { flex: 0 1 auto; }
  /* More room means a taller window before the operator has to go full
     screen, but the bound stays: the choices must remain on the same screen
     as the panel that argues for them. */
  .frame-wrap iframe { height: 460px; }
  /* The stakes row stops stretching to 780px; the irreversible button being
     the width of the card is not emphasis, it is just a big target. */
  .stakes-row { justify-content: flex-start; }
  .stakes-row .btn { flex: 0 1 auto; min-width: 180px; }
  .stakes-arm, .stakes-hold { align-self: flex-start; }
  /* A transcript is read, so it is measured; and with the dock gone the
     composer sticks to the bottom of the viewport instead of above it. */
  #view-chat { max-width: 780px; }
  /* Planning's list used to cap at 780px too, on the same "measure what you
     read" reasoning as #view-chat above and #view-questions .asks below -
     but a list of chats is a list of cards to scan, not a document to read
     start to finish, and the cap left it stuck at two columns at widths
     where Queue, the same `.cards` grid, already ran to three. Dropping the
     override here rather than adding one to Queue keeps the rule for "a
     list of cards" in exactly one place: the shared `.cards` rule above. */
  .say { bottom: 0; padding-bottom: var(--s4); }
  .turn { max-width: 80%; }
}

/* The two run-detail wrappers are inert on a phone: their children flow into
   the section's single column in source order. */
.run-main, .run-side { display: contents; }

@media (min-width: 1080px) {
  #view-run {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    column-gap: var(--s5);
  }
  #view-run > .back, #view-run > .view-head { grid-column: 1 / -1; }
  /* Real columns here, so the report sits level with the verdict instead of
     being pushed to whatever grid row auto-placement gives it. */
  .run-main, .run-side {
    display: flex; flex-direction: column; gap: var(--s5);
    min-width: 0;
  }
  .run-main { grid-column: 1; }
  .run-side { grid-column: 2; position: sticky; top: 96px; }
  .report { max-height: calc(100dvh - 260px); }
  .facts { grid-template-columns: 10rem 1fr; }
}

/* ---- motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---- print ------------------------------------------------------------- */
@media print {
  .top, .daemon, .ask-bar, .dock, .back, .sheet, .full, .say { display: none; }
  .frame-wrap iframe { height: 520px; }
  .draft { max-height: none; }
  .card, .panel { box-shadow: none; break-inside: avoid; }
  .report { max-height: none; white-space: pre-wrap; }
}