/* Mission Control web UI on the MC2 Workbench look (D-214). Tokens and components come from the design system (tokens.css, components/bundle.css);
   below them the older classes of the other screens are mapped onto the same tokens. One file, no framework. The page may load no web font (CSP),
   so Inter and JetBrains Mono are used when the machine has them and the system fonts otherwise. Phone first: one column, 44 px targets. */

/* MC2 Workbench — generated from tokens.json */
:root, [data-theme="dark"] {
  --bg:#11120d; --surface:#171910; --surface-2:#1e2016; --line:#303225; --line-strong:#6a6c5c;
  --ink:#f4f2e8; --ink-muted:#aaa993; --ink-faint:#77766a; --focus:var(--ink);
  --accent:#eea638; --accent-ink:#eea638; --accent-line:#573c18; --accent-soft:#2a2010; --on-accent:#11120d;
  --live:#d9ff57; --live-ink:#d9ff57; --live-soft:#20280c; --on-live:#11120d;
  --review:#b9a8ff; --review-ink:#b9a8ff; --review-soft:#221e33;
  --ok:#86ccff; --ok-ink:#86ccff; --ok-soft:#142430; --on-ok:#11120d;
  --bad:#ff735c; --bad-ink:#ff8f7c; --bad-soft:#331611; --on-bad:#11120d;
  --shadow-pop:0 12px 32px rgba(0,0,0,0.5);
  color-scheme: dark;
}
[data-theme="light"] {
  --bg:#f4f2e8; --surface:#fbfaf4; --surface-2:#e9e6d6; --line:#d6d2bd; --line-strong:#8c8a74;
  --ink:#11120d; --ink-muted:#57564a; --ink-faint:#85836f; --focus:var(--ink);
  --accent:#eea638; --accent-ink:#8a5200; --accent-line:#c99a4e; --accent-soft:#f6e3bf; --on-accent:#11120d;
  --live:#6f9800; --live-ink:#4a6600; --live-soft:#e5f2b8; --on-live:#11120d;
  --review:#7660e0; --review-ink:#5a43c4; --review-soft:#e6e0fa;
  --ok:#23709f; --ok-ink:#1d6699; --ok-soft:#d9eaf6; --on-ok:#ffffff;
  --bad:#c23b23; --bad-ink:#b13722; --bad-soft:#f7dcd4; --on-bad:#ffffff;
  --shadow-pop:0 12px 32px rgba(17,18,13,0.14);
  color-scheme: light;
}
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --space-12:48px;
  --radius-none:0px; --radius-xs:2px; --radius-round:999px;
  --control-h:36px; --target:44px; --stroke-mark:2px;
  --font-sans:Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* MC2 Workbench components. Square, hairlines, mono labels. Every color, size and space comes from tokens.css; no literal colors here. */

.mc-root { background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.mc-root * { box-sizing: border-box; }
.mc-label { font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-key { font: 500 12px/16px var(--font-mono); letter-spacing: .2px; color: var(--ink-muted); }
.mc-code { font: 400 13px/20px var(--font-mono); }
.mc-data { font: 400 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.mc-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mc-stack { display: flex; flex-direction: column; gap: var(--space-2); }
:where(.mc-root) :focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 2px; }

/* Button */
.mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-h); padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-none); background: transparent; color: var(--ink); font: 700 11px/1 var(--font-mono); letter-spacing: 1.1px; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.mc-btn:hover { background: var(--surface-2); border-color: var(--ink-muted); }
.mc-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.mc-btn--primary:hover { background: var(--accent); border-color: var(--ink); }
.mc-btn--ghost { border-color: transparent; color: var(--ink-muted); }
.mc-btn--ghost:hover { color: var(--ink); background: var(--surface-2); border-color: transparent; }
.mc-btn--danger { border-color: var(--bad); color: var(--bad-ink); }
.mc-btn--danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.mc-btn:disabled, .mc-btn[aria-disabled="true"] { color: var(--ink-muted); border-style: dashed; border-color: var(--line); background: transparent; cursor: not-allowed; }
.mc-btn .mc-glyph { font-size: 10px; }
@media (max-width: 640px) { .mc-btn { min-height: var(--target); } }

/* Nav tabs: Bifteki's outlined tab for the current view */
.mc-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.mc-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: var(--control-h); padding: 0 12px; border: 1px solid transparent; color: var(--ink-muted); text-decoration: none; font: 400 11px/1 var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.mc-nav a:hover { color: var(--ink); }
.mc-nav a[aria-current="page"] { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.mc-nav .mc-count { min-width: 18px; padding: 2px 5px; background: var(--accent); color: var(--on-accent); font-weight: 700; letter-spacing: 0; text-align: center; }

/* Status pill: glyph + word, never color alone */
.mc-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); color: var(--ink-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap; }
.mc-pill .mc-glyph { font-size: 10px; letter-spacing: 0; }
.mc-pill--live { color: var(--live-ink); background: var(--live-soft); border-color: var(--live); }
.mc-pill--you { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.mc-pill--review { color: var(--review-ink); background: var(--review-soft); border-color: var(--review); }
.mc-pill--ok { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); }
.mc-pill--bad { color: var(--bad-ink); background: var(--bad-soft); border-color: var(--bad); }
.mc-pill--quiet { border-style: dashed; }
.mc-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-round); background: currentColor; flex: none; }
.mc-dot--live { background: var(--live); animation: mc-pulse 1.6s ease-in-out infinite; }
@keyframes mc-pulse { 50% { opacity: .3; } }

/* Policy tag: key:value in mono */
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface); color: var(--ink-muted); font: 400 12px/1 var(--font-mono); white-space: nowrap; }
.mc-tag b { color: var(--ink); font-weight: 500; }
.mc-tag--unknown { border-style: dashed; border-color: var(--accent-line); color: var(--accent-ink); }

/* Live line: the terminal prompt from bifteki.dev, fed by facts */
.mc-live { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; margin: 0; padding: 6px 10px; background: var(--surface-2); font: 400 12px/18px var(--font-mono); color: var(--ink); }
.mc-live .mc-prompt { color: var(--accent-ink); flex: none; }
.mc-live .mc-cmd { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-live .mc-ago { color: var(--ink-muted); flex: none; margin-left: auto; font-variant-numeric: tabular-nums; }
.mc-live .mc-cursor { display: inline-block; width: 7px; height: 13px; background: var(--accent); vertical-align: -2px; animation: mc-blink 1.1s steps(1) infinite; }
.mc-live--quiet { color: var(--ink-muted); }
.mc-live--quiet .mc-cursor { background: var(--ink-faint); animation: none; }
@keyframes mc-blink { 50% { opacity: 0; } }

/* Task card */
.mc-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-none); color: var(--ink); text-decoration: none; }
.mc-card:hover { border-color: var(--line-strong); }
.mc-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.mc-card-t { margin: 0; font: 600 15px/20px var(--font-sans); letter-spacing: -.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.mc-card .mc-live { margin: 0 calc(-1 * var(--space-3)); padding-inline: var(--space-3); }
.mc-card-f { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mc-card--you { border-color: var(--accent-line); background: var(--accent-soft); }
.mc-card--you .mc-live { background: var(--surface); }
.mc-card--done { background: transparent; }
.mc-card--done .mc-card-t { color: var(--ink-muted); }

/* Lane */
.mc-lane { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-3) var(--space-4); border-left: 1px solid var(--line); }
.mc-lane:first-child { border-left: 0; }
.mc-lane-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.mc-lane-h .mc-label { color: var(--ink); }
.mc-lane-h .mc-data { color: var(--ink-muted); }
.mc-lane-h .mc-data.mc-over { color: var(--bad-ink); }
.mc-lane-empty { padding: var(--space-4) 0; color: var(--ink-muted); font-size: 13px; line-height: 20px; }
.mc-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Agent row with activity bars */
.mc-agent { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); }
.mc-avatar { display: grid; place-items: center; width: 40px; height: 40px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink); font: 700 13px/1 var(--font-mono); position: relative; }
.mc-avatar .mc-dot { position: absolute; right: -4px; bottom: -4px; width: 10px; height: 10px; border: 2px solid var(--surface); background: var(--ink-faint); }
.mc-avatar .mc-dot--live { background: var(--live); }
.mc-agent-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-agent-name { font: 600 15px/20px var(--font-sans); }
.mc-agent-meta { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-agent-now { font: 400 12px/18px var(--font-mono); color: var(--live-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-agent-now--quiet { color: var(--ink-muted); }
.mc-bars { display: flex; align-items: flex-end; gap: 3px; height: 32px; }
.mc-bars i { display: block; width: 4px; min-height: 2px; border-radius: var(--radius-xs); background: var(--ink-faint); }
.mc-bars i.on { background: var(--live); }
@media (max-width: 480px) { .mc-agent { grid-template-columns: 40px minmax(0, 1fr); } .mc-bars { grid-column: 2; } }

/* Fact log */
.mc-facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-fact { display: grid; grid-template-columns: 64px 52px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); }
.mc-fact time { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mc-src { color: var(--ink-muted); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.mc-src--hook { color: var(--live-ink); }
.mc-src--git { color: var(--ok-ink); }
.mc-src--mcp { color: var(--review-ink); }
.mc-src--mc { color: var(--accent-ink); }
.mc-fact-text { min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The line with the keyboard focus shows the whole fact (hover has the title): the one line the reader is on may be tall, the list is not. */
.mc-fact:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: -2px; }
.mc-fact:focus .mc-fact-text { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.mc-fact--bad .mc-fact-text { color: var(--bad-ink); }

/* Verdict */
.mc-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); background: var(--surface); }
.mc-verdict-word { grid-row: span 2; font: 700 22px/28px var(--font-mono); letter-spacing: 2px; }
.mc-verdict--pass { border-color: var(--ok); background: var(--ok-soft); }
.mc-verdict--pass .mc-verdict-word { color: var(--ok-ink); }
.mc-verdict--fail { border-color: var(--bad); background: var(--bad-soft); }
.mc-verdict--fail .mc-verdict-word { color: var(--bad-ink); }
.mc-verdict-counts { font: 500 12px/16px var(--font-mono); color: var(--ink); }
.mc-verdict-by { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }

/* Needs you: a decision only a person can make */
.mc-gate { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--accent-line); background: var(--accent-soft); }
.mc-gate .mc-label { color: var(--accent-ink); }
.mc-gate-q { margin: 0; font: 700 22px/28px var(--font-sans); letter-spacing: -.4px; text-wrap: balance; }
.mc-gate-why { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink); max-width: 62ch; }

/* Field */
.mc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-input { min-height: var(--control-h); padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-none); background: var(--surface-2); color: var(--ink); font: 400 15px/1 var(--font-sans); }
.mc-input::placeholder { color: var(--ink-muted); }
.mc-input:focus-visible { outline: var(--stroke-mark) solid var(--focus); outline-offset: 2px; }
.mc-help { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.mc-field--bad .mc-input { border-color: var(--bad); }
.mc-field--bad .mc-help { color: var(--bad-ink); }

@media (prefers-reduced-motion: reduce) { .mc-dot--live, .mc-live .mc-cursor { animation: none; } }

/* ── Board, round 2 and 3 (D-214): worker, progress, subtasks, coordinator, crew, milestones, folding, moves ── */
.mc-who { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 12px/16px var(--font-mono); color: var(--ink); }
.mc-who .mc-av { display: grid; place-items: center; width: 20px; height: 20px; flex: none; background: var(--surface-2); border: 1px solid var(--line-strong); font: 700 9px/1 var(--font-mono); position: relative; }
.mc-who .mc-av i { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: var(--radius-round); border: 1px solid var(--surface); background: var(--ink-faint); }
.mc-who .mc-av i.on { background: var(--live); }
.mc-who .mc-rt { color: var(--ink-muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-who--none { color: var(--ink-muted); font-weight: 400; }
.mc-who--co .mc-av { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.mc-prog { display: flex; align-items: center; gap: var(--space-2); }
.mc-steps { display: flex; gap: 2px; flex: 1; }
.mc-steps i { flex: 1; height: 4px; background: var(--line); transition: background .6s; }
.mc-steps i.on { background: var(--ink-muted); }
.mc-steps--live i.on { background: var(--live); }
.mc-steps--review i.on { background: var(--review); }
.mc-kids { display: flex; gap: 2px; flex: 1; }
.mc-kids i { flex: 1; height: 6px; background: var(--line); }
.mc-kids i.live, .mc-mark.live { background: var(--live); }
.mc-kids i.you, .mc-mark.you { background: var(--accent); }
.mc-kids i.review, .mc-mark.review { background: var(--review); }
.mc-kids i.ok, .mc-mark.ok { background: var(--ok); }
.mc-kids i.quiet { background: var(--ink-faint); }
.mc-mark { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: var(--radius-round); background: var(--ink-faint); }
.mc-mark.quiet { background: transparent; border: 1px solid var(--ink-muted); }
.mc-sub { font: 500 11px/16px var(--font-mono); color: var(--review-ink); letter-spacing: .5px; }
.mc-card--parent { border-style: dashed; background: transparent; }
.mc-card--kid { border-color: var(--review); box-shadow: inset 3px 0 0 var(--review); }
.mc-kid-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mc-kid-row { display: grid; grid-template-columns: 8px 54px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; min-height: 26px; border-bottom: 1px solid var(--line); font: 400 12px/16px var(--font-sans); }
.mc-kid-row > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mc-coord { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line-strong); background: var(--surface); }
.mc-coord-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; background: var(--accent); color: var(--on-accent); font: 700 13px/1 var(--font-mono); }
.mc-seat { display: flex; gap: 2px; flex: 1; }
.mc-seat i { flex: 1; height: 6px; background: var(--line); }
.mc-seat i.on { background: var(--accent); }

.mc-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--line); background: transparent; color: var(--ink-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.mc-chip[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }
.mc-crew { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mc-crew-row { display: grid; grid-template-columns: 24px 76px minmax(0, 1fr) 46px; gap: var(--space-2); align-items: center; min-height: 34px; padding: 0 6px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: 400 12px/16px var(--font-mono); text-align: left; width: 100%; cursor: pointer; }
.mc-crew-row:hover { background: var(--surface-2); }
.mc-crew-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-crew-now { color: var(--ink-muted); }
.mc-crew-now.on { color: var(--live-ink); }
.mc-mini { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.mc-mini i { width: 2px; min-height: 1px; background: var(--ink-faint); }
.mc-mini i.on { background: var(--live); }

.mc-ms { display: flex; flex-direction: column; gap: 6px; min-width: 150px; padding: var(--space-2) 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mc-ms:hover { background: var(--surface-2); }
.mc-ms[aria-pressed="true"] { border-color: var(--ink); background: var(--surface); }
.mc-ms-top { display: flex; align-items: baseline; gap: 6px; }
.mc-ms-name { font: 600 13px/18px var(--font-sans); }
.mc-ms-you { padding: 0 5px; background: var(--accent); color: var(--on-accent); font: 700 11px/16px var(--font-mono); }
.mc-meter { display: block; height: 4px; background: var(--line); }
.mc-meter i { display: block; height: 100%; background: var(--ok); transition: width .6s; }
.mc-seg { display: inline-flex; border: 1px solid var(--line); }
.mc-seg { min-height: var(--control); box-sizing: border-box; }
.mc-seg button { min-height: calc(var(--control) - 2px); padding: 0 12px; border: 0; background: transparent; color: var(--ink-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }
.mc-seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mc-swim-h { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); background: var(--surface); }
.mc-folded { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
.mc-fold-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--line); background: var(--surface); color: var(--ink-muted); font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.mc-fold-chip:hover { background: var(--surface-2); color: var(--ink); }
.mc-fold-chip .mc-data { color: var(--ink); }

.mc-fold { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid transparent; background: transparent; color: var(--ink-muted); font: 500 14px/1 var(--font-mono); cursor: pointer; }
.mc-fold:hover { border-color: var(--line-strong); color: var(--ink); }

/* A card that just changed stage: it flies (script, see README Motion), then glows in ember. */
.mc-card--arrive { animation: mc-arrive 2.2s ease-out; }
@keyframes mc-arrive { 0% { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); } 70% { box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 0 transparent; } }
.mc-card--flying { z-index: 20; box-shadow: var(--shadow-pop); }
@media (prefers-reduced-motion: reduce) { .mc-card--arrive { animation: none; outline: 2px solid var(--accent); } .mc-steps i, .mc-meter i { transition: none; } }

/* The screens that are not rebuilt yet */
:root { --gap: 12px; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
a { color: var(--accent-ink); }
code, pre { font-family: var(--font-mono); font-size: 0.9em; }
h1 { font-size: 1.5rem; margin: 16px 0 8px; }
h2 { font-size: 1.1rem; margin: 0 0 8px; }
h3 { font-size: 1rem; margin: 4px 0; }
p { margin: 6px 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sub { color: var(--ink-muted); font-weight: 400; font-size: 0.8em; }
.loading { padding: 24px 16px; color: var(--ink-muted); }
#root { max-width: 1400px; margin: 0 auto; padding: 0 16px 48px; }
main:focus, main:focus-visible { outline: none; }

/* Frame */
.top { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand who" "nav nav"; align-items: center; gap: 0 16px; padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.brand { grid-area: brand; display: flex; align-items: baseline; gap: 12px; }
.mc-wordmark { font: 700 22px/1 var(--font-sans); letter-spacing: -0.8px; }
.top .who { grid-area: who; justify-self: end; text-align: right; font-family: var(--font-mono); font-size: 12px; }
.nav { grid-area: nav; display: flex; gap: 2px; flex-wrap: wrap; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; color: var(--ink-muted); text-decoration: none; font: 400 11px/1 var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; }
.nav-link:hover { color: var(--ink); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 0 0 var(--radius-none) 0; font-weight: 600; }
.skip:focus { left: 0; }
.nav-link.on { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.badge { background: var(--accent); color: var(--on-accent); padding: 2px 6px; font: 700 11px/1 var(--font-mono); min-width: 1.4em; text-align: center; }
.who { color: var(--ink-muted); font-size: 0.9rem; }
.flash { margin: 12px 0; padding: 10px 14px; border-radius: var(--radius-none); border: 1px solid var(--line); }
.flash-ok { background: var(--ok-soft); color: var(--ok-ink); }
.flash-bad { background: var(--bad-soft); color: var(--bad-ink); }
.login { max-width: 420px; margin: 10vh auto; }
.github-signin { margin-top: 24px; }

/* Panels and cards */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-none); padding: 14px; margin: var(--gap) 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-none); padding: 12px; margin: 10px 0; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card-head h3 { margin: 0; }
.key { font-weight: 700; font-variant-numeric: tabular-nums; }
.question { font-size: 1.05rem; margin: 8px 0; }
.meta, .age, .by, .note, .ref { color: var(--ink-muted); font-size: 0.9rem; }
.empty, .allclear { color: var(--ink-muted); }
.summary { color: var(--ink-muted); }
.statusline, .effort, .actual, .labels, .pr { margin: 4px 0; font-size: 0.92rem; }
.actual { color: var(--ink-muted); }
.fold { margin: 10px 0; }
.fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.fold > summary::before { content: "▸"; margin-right: 8px; }
.fold[open] > summary::before { content: "▾"; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { padding: 8px 0; border-top: 1px solid var(--line); }
.row:first-child { border-top: 0; }
.row.stale > :not(.chip):not(.age) { text-decoration: line-through; }
blockquote { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.media { margin: 6px 0; padding-left: 20px; }
.tally { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tally li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-none); background: var(--surface-2); text-decoration: none; color: var(--ink); }
.tally li.on a { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* Chips: colour is never the only signal, the text says it too. */
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 0.8rem; line-height: 1.5; white-space: nowrap; }
.chip-ok, .chip-on, .chip-status-done, .chip-status-working { background: var(--ok-soft); color: var(--ok-ink); }
.chip-warn, .chip-missing, .chip-proposal, .chip-blocking, .chip-urgent, .chip-status-held, .chip-status-overdue, .chip-severity-warning, .chip-decision { background: var(--accent-soft); color: var(--accent-ink); }
.chip-bad, .chip-stale, .chip-severity-exceeded, .chip-prio-p0 { background: var(--bad-soft); color: var(--bad-ink); }
.chip-estimate { background: var(--accent); color: var(--on-accent); }

/* Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--accent); border-radius: var(--radius-none); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-quiet { background: transparent; color: var(--accent-ink); }
.btn-link { background: transparent; border: 0; color: var(--accent-ink); text-decoration: underline; padding: 0 6px; min-height: 44px; font-weight: 400; }
.btn-danger { background: var(--bad); border-color: var(--bad-ink); color: var(--on-bad); }
.options { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.btn-option { flex: 1 1 140px; }
.field { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; font-size: 0.9rem; color: var(--ink-muted); }
.field input, .field select, .field textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-none); padding: 10px; min-height: 44px; width: 100%; }
.check { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.check input { width: 24px; height: 24px; flex: none; margin: 0; }
.stack { display: grid; gap: 4px; max-width: 640px; }
.inline { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin: 8px 0; }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; align-items: end; }

/* Board: columns scroll sideways, one snap per stage */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 85vw); gap: var(--gap); overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.column { scroll-snap-align: start; background: var(--surface-2); border-radius: var(--radius-none); padding: 8px; min-width: 0; }
.column h2 { display: flex; justify-content: space-between; position: sticky; left: 0; }
.column .count, .count { color: var(--ink-muted); font-weight: 400; }
.column .card { margin: 8px 0; overflow-wrap: anywhere; }
.task.status-held, .task.status-overdue { border-left: 4px solid var(--accent); }
.task.status-working { border-left: 4px solid var(--ok); }
.task.status-done { border-left: 4px solid var(--line); }

/* Task, roadmap, chat */
progress { width: 100%; max-width: 280px; height: 10px; vertical-align: middle; }
.timeline { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.timeline li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timeline .stage { min-width: 7em; font-weight: 600; }
.timeline .time { min-width: 5em; font-variant-numeric: tabular-nums; }
.timeline .current .stage { text-decoration: underline; }
.doc-text { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-none); padding: 10px; max-height: 60vh; overflow: auto; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-none); background: var(--surface-2); color: var(--ink); text-decoration: none; }
.tab.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.thread { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); overflow-wrap: anywhere; }
.bubble p { white-space: pre-wrap; margin: 2px 0; }
.bubble.me { justify-self: end; background: var(--accent); color: var(--on-accent); }
.bubble.me .age, .bubble.me .who { color: inherit; opacity: 0.85; }
.bubble.unread { outline: 2px solid var(--accent); }
.who { font-size: 0.85rem; }
.composer { margin: 12px 0; display: grid; gap: 4px; max-width: 720px; }
.seat { margin: 6px 0; }

@media (min-width: 720px) {
  #root { padding: 0 24px 48px; }
  .top { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav who"; gap: 0 20px; }
  .nav-link { padding: 0 14px; }
  .board { grid-auto-columns: minmax(260px, 1fr); }
}

/* Signals and pipelines (P2.32): the strip of marks is a picture of the latest changes of state; the words are in its label and in the row. */
.spark { display: inline-flex; gap: 2px; vertical-align: middle; }
.spark-mark { display: inline-block; width: 8px; height: 14px; border-radius: 2px; background: var(--ink-muted); }
.spark-passed { background: var(--ok); }
.spark-failed { background: var(--bad); }
.spark-stale { background: var(--accent); }
.spark-running { background: var(--accent); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.chip-row .chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; }
.chip-filter { color: var(--ink); text-decoration: none; }
.key { overflow-wrap: anywhere; }

/* Board on the Workbench look (P2.37-1, D-214) */
.mc-board-page { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-6); }
.mc-board-main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mc-board-page--alone .mc-board-main { flex-basis: 100%; }
.mc-side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-4) 0 0 var(--space-6); border-left: 1px solid var(--line); }
.mc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.mc-head h1 { margin: 0; font: 700 38px/40px var(--font-sans); letter-spacing: -1.7px; }
.mc-h2 { margin: 0; font: 700 22px/28px var(--font-sans); letter-spacing: -0.4px; }
.mc-between { justify-content: space-between; }
.mc-name { font: 600 15px/20px var(--font-sans); }
.mc-note { margin: 0; }
.mc-label--accent { color: var(--accent-ink); }
.mc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mc-tools-gap { margin-left: var(--space-4); }
/* One row that scrolls sideways and is dragged (pan.ts, D-232): the milestone in progress first, All milestones at the start. */
.mc-ms-bar { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.mc-ms-bar .mc-ms { flex: 0 0 auto; scroll-snap-align: start; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-gate--board { gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.mc-gate-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mc-now { display: none; }
/* The name of a stage is a heading for readers of the page; on a phone, where the head row is gone, it is drawn. */
.mc-lane-name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mc-lane { position: relative; }
a.mc-tag { min-height: 28px; text-decoration: none; }
a.mc-btn, a.btn { text-decoration: none; }
.milestone-title { margin: 0; font: 600 15px/20px var(--font-sans); }
progress.mc-meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; max-width: none; height: 4px; border: 0; background: var(--line); color: var(--ok); }
progress.mc-meter::-webkit-progress-bar { background: var(--line); }
progress.mc-meter::-webkit-progress-value { background: var(--ok); transition: width .6s; }
progress.mc-meter::-moz-progress-bar { background: var(--ok); }
progress.mc-meter--row { width: 120px; }

.mc-scroll { overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* The lane headers are the handle of the lanes: pressed with the left button they pan sideways (pan.ts); the cursor says so, and the labels are not text to select. */
.mc-track-head { cursor: grab; user-select: none; }
.mc-track-head button { cursor: pointer; }
.mc-panning, .mc-panning * { cursor: grabbing !important; user-select: none !important; }
.mc-track { display: flex; flex-direction: column; min-width: min-content; position: relative; }
.mc-track-row { display: flex; }
.mc-w-open { flex: 1 0 250px; min-width: 250px; }
.mc-w-empty { flex: 0 0 140px; width: 140px; }
.mc-lane-h { align-items: center; gap: 6px; padding: 10px 12px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mc-track-head .mc-lane-h:first-child { border-left: 0; }
.mc-lane-h .mc-label { margin-right: auto; }
.mc-lane { min-width: 0; }
.mc-card { position: relative; width: 100%; }
.mc-card-t a { color: inherit; text-decoration: none; }
.mc-card-t a:hover { text-decoration: underline; }
.mc-card--sel { border-color: var(--ink); }
.mc-sub-toggle { align-self: flex-start; min-height: 28px; padding: 0 6px; }
.mc-kid-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-kid-row a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.mc-kid-more { padding: 4px 0; }
/* The dot between the items of a row sits in the gap before an item; the row clips what is left of its edge, so a wrapped line never starts with one. */
.mc-card-f, .mc-dots { overflow: hidden; column-gap: 16px; }
.mc-card-f span, .mc-dots span { position: relative; }
.mc-card-f span + span::before, .mc-dots span + span::before { content: "·"; position: absolute; left: -10px; }
.mc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-over { color: var(--bad-ink); }
.mc-flash { animation: mc-flash 1.2s ease-out; }
@keyframes mc-flash { 0% { color: var(--accent-ink); } 100% { color: inherit; } }
@media (prefers-reduced-motion: reduce) { .mc-flash { animation: none; } }

.mc-coord-top { flex-wrap: nowrap; }
.mc-coord-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mc-crew-list { margin: 0; padding: 0; list-style: none; }
.mc-crew-row { text-decoration: none; }
.mc-crew-row .mc-av { display: grid; place-items: center; width: 22px; height: 22px; background: var(--surface-2); border: 1px solid var(--line-strong); font: 700 9px/1 var(--font-mono); position: relative; }
.mc-crew-row .mc-av i { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: var(--radius-round); border: 1px solid var(--bg); background: var(--ink-faint); }
.mc-crew-row .mc-av i.on { background: var(--live); }
.mc-crew-row .mc-av i.quiet { background: var(--bg); border-color: var(--ink-muted); }
.mc-crew-age { text-align: right; }
.mc-crew-counts { display: none; margin: 0; }

@media (max-width: 640px) {
  .mc-board-page { gap: var(--space-4); }
  .mc-side { padding: 0; border-left: 0; }
  .mc-head h1 { font-size: 28px; line-height: 32px; letter-spacing: -1px; }
  .mc-board-main > * { order: 5; }
  .mc-board-main > .mc-gate--board { order: 0; }
  .mc-board-main > .mc-head { order: 1; }
  .mc-board-main > .mc-ms-bar { order: 2; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; }
  .mc-board-main > .mc-ms-bar .mc-ms { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; }
  .mc-board-main > .mc-now { order: 3; display: block; }
  .mc-tools { display: none; }
  .mc-track-head { display: none; }
  .mc-track-row { flex-direction: column; }
  .mc-w-open, .mc-w-empty { flex: none; width: 100%; min-width: 0; }
  .mc-w-empty { display: none; }
  .mc-lane { border-left: 0; border-top: 1px solid var(--line); }
  .mc-lane-name { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; display: flex; justify-content: space-between; padding-top: var(--space-2); }
  .mc-sub-toggle, .mc-fold-chip { min-height: var(--target); }
  .mc-coord, .mc-crew-list, .mc-crew-filters, .mc-note { display: none; }
  .mc-crew-counts { display: block; }
  .mc-swim-h { position: static; flex-wrap: wrap; }
}

/* One height for every control, one corner for every mark (P2.37-1a, D-214). A control is an input, a select or a button: all of them are --control high
   (36 px, 44 px on a phone), and a row of controls sits on the bottom edge of its fields, so the labels above one field never push the others. */
:root { --control: var(--control-h); }
@media (max-width: 640px) { :root { --control: var(--target); } }
.btn, .mc-btn, .btn-link, .tab, .nav-link { min-height: var(--control); }
.btn, .mc-btn { padding-block: 0; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select { height: var(--control); min-height: var(--control); padding: 0 10px; line-height: 1; }
.field input[type="file"] { min-height: var(--control); padding: 6px 10px; }
.field select { padding-right: 28px; }
.filters .field, .inline .field { margin: 0; }
.filters, .inline { align-items: end; }
.filters .btn, .inline .btn { align-self: end; }
.chip-row .chip { min-height: var(--control); }
.tally li a, .tab { min-height: var(--control); }

/* A status or a label is a mc-pill or a mc-tag: mono, upper case, square (the old chip, mapped onto the same marks). */
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink-muted); font: 500 11px/1 var(--font-mono); letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap; }
.chip-ok, .chip-status-done { color: var(--ok-ink); background: var(--ok-soft); border-color: var(--ok); }
.chip-on, .chip-status-working { color: var(--ink); }
.chip-warn, .chip-missing, .chip-proposal, .chip-blocking, .chip-urgent, .chip-status-held, .chip-status-overdue, .chip-severity-warning, .chip-decision { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }
.chip-bad, .chip-stale, .chip-severity-exceeded, .chip-prio-p0 { color: var(--bad-ink); background: var(--bad-soft); border-color: var(--bad); }
.chip-estimate, .chip-kind, .chip-label, .chip-stage { color: var(--ink); background: var(--surface); border-color: var(--line); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; }
.bubble { border-radius: 0; }
progress { appearance: none; -webkit-appearance: none; height: 6px; border: 0; border-radius: 0; background: var(--line); color: var(--ok); }
progress::-webkit-progress-bar { background: var(--line); border-radius: 0; }
progress::-webkit-progress-value { background: var(--ok); border-radius: 0; }
progress::-moz-progress-bar { background: var(--ok); border-radius: 0; }

/* A decision answered in one click: the answer MC recommends is the ember button, the others are secondary. */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-muted); }

/* The time of a stage and its "now" mark sit together; the bar has a width of its own. */
.timeline li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.timeline progress { flex: 0 1 220px; width: 220px; max-width: 100%; }

/* The name of a worker stays on one line; its runtime is cut first. */
.mc-who .mc-wn { flex: 0 1 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-who .mc-rt { flex: 0 10000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bubble.me .chip { color: inherit; border-color: currentColor; background: transparent; }

/* P2.37-1b: the leftovers of the first look at the board. */
.mc-coord-who .mc-coord-line { display: flex; flex-wrap: wrap; height: 16px; line-height: 16px; }
.mc-coord-line span { white-space: nowrap; }
.mc-coord-top .mc-pill { flex: none; }
.filters--board { grid-template-columns: minmax(200px, 2fr) repeat(2, minmax(120px, 1fr)) minmax(120px, 1.4fr) auto; }
.mc-scroll-wrap { position: relative; }
.mc-scroll-wrap::before, .mc-scroll-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 2; }
.mc-scroll-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.mc-scroll-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.mc-scroll-wrap.more-l::before, .mc-scroll-wrap.more-r::after { opacity: 1; }
.card-head .chip-kind { color: var(--ink); background: transparent; border-color: var(--line-strong); font: 500 11px/1 var(--font-mono); letter-spacing: 1.1px; text-transform: uppercase; }
.mc-seg--units button { text-transform: none; letter-spacing: 0; font-size: 12px; }
@media (max-width: 640px) {
  .filters--board { grid-template-columns: 1fr 1fr; }
  .filters--board .field--wide { grid-column: 1 / -1; }
}

/* Task detail on the Workbench look (P2.37-2, D-214) */
.sr-only, .mc-key-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mc-label--ink { color: var(--ink); margin: 0; }
.mc-task { display: flex; flex-direction: column; }
.mc-task-head { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); border-bottom: 1px solid var(--line); }
.mc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-crumbs a { color: var(--ink-muted); text-decoration: none; }
.mc-crumbs a:hover { color: var(--ink); }
.mc-task-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-4) var(--space-8); }
.mc-task-main { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 520px; min-width: 0; }
.mc-task-title { margin: 0; font: 700 38px/42px var(--font-sans); letter-spacing: -1.7px; overflow-wrap: anywhere; }
.mc-task-meta { gap: 6px 12px; }
.mc-task-actions { flex: 0 1 auto; justify-content: flex-end; }
a.mc-sub { text-decoration: none; }
a.mc-sub:hover { text-decoration: underline; }

.mc-tl { display: flex; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); overflow-x: auto; }
.mc-tl-s { flex: 1 0 96px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-left: 1px solid var(--line); }
.mc-tl-s:first-child { border-left: 0; }
.mc-tl-bar { height: 4px; background: var(--line); }
.mc-tl-s.done .mc-tl-bar { background: var(--ok); }
.mc-tl-s.now { background: var(--surface); }
.mc-tl-s.now .mc-tl-bar { background: var(--accent); }
.mc-tl-s.fix .mc-tl-bar { background: var(--bad); }
.mc-tl-s.future .mc-tl-n, .mc-tl-s.future .mc-tl-d { color: var(--ink-muted); }
.mc-tl-n { font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.mc-tl-d { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mc-task-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); grid-template-areas: "main next" "main side"; grid-template-rows: auto 1fr; align-items: start; }
/* The main column and the side column share a grid: the next move heads the side, and on a phone it comes first of all. */
.mc-task-col { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-6) var(--space-6) var(--space-12) 0; }
.mc-task-next { grid-area: next; min-width: 0; padding: var(--space-6) 0 var(--space-6) var(--space-6); border-left: 1px solid var(--line); align-self: stretch; }
.mc-task-side { grid-area: side; min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); padding: 0 0 var(--space-12) var(--space-6); border-left: 1px solid var(--line); align-self: stretch; }
.mc-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mc-sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px var(--space-3); }
.mc-brief { margin: 0; padding: var(--space-4); border: 1px solid var(--line); background: var(--surface); font: 400 14px/22px var(--font-sans); }
.mc-brief-h { margin: 0 0 6px; font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-brief .acceptance { margin: 0 0 10px; padding-left: 18px; }
.mc-brief p { margin: 0 0 10px; }
.mc-plan-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.mc-planbar { display: flex; gap: 2px; height: 6px; margin: 0 0 var(--space-3); }
.mc-planbar i { flex: 1 1 0; min-width: 2px; background: var(--line); }
.mc-planbar i.on { background: var(--ok); }
.mc-plan-steps { margin: 0 0 10px; padding: 0; list-style: none; }
.mc-pstep { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 14px/20px var(--font-sans); }
.mc-pstep:last-child { border-bottom: 0; }
.mc-pstep .g { font: 700 13px/20px var(--font-mono); }
.mc-pstep.ok .g { color: var(--ok-ink); }
.mc-pstep.no .g { color: var(--ink-muted); }
.mc-pstep-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-pstep-t, .mc-pstep-p { overflow-wrap: anywhere; }
.mc-findings { margin: 0; padding: 0; list-style: none; }
.mc-finding { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font: 400 13px/20px var(--font-sans); }
.mc-finding-t { overflow-wrap: anywhere; }

.mc-guard { display: flex; flex-direction: column; border: 1px solid var(--line-strong); background: var(--surface); }
.mc-guard-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.mc-guard-h .mc-data { margin-left: auto; }
.mc-guard-r { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 400 13px/18px var(--font-sans); }
.mc-guard-r:last-child { border-bottom: 0; }
.mc-guard-r .g { font: 700 13px/1 var(--font-mono); }
.mc-guard-r.ok .g { color: var(--ok-ink); }
.mc-guard-r.no .g { color: var(--ink-muted); }
.mc-guard-foot { background: var(--bg); }
.mc-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; margin: 0; font: 400 13px/20px var(--font-sans); }
.mc-kv dt { font: 500 11px/20px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mc-sibs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mc-sib { display: grid; grid-template-columns: 10px 60px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--line); font: 400 13px/18px var(--font-sans); color: var(--ink); text-decoration: none; }
.mc-sib.me { font-weight: 600; }
.mc-sib span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sib:hover { background: var(--surface-2); }

@media (max-width: 640px) {
  .mc-task-title { font-size: 26px; line-height: 30px; letter-spacing: -1px; }
  .mc-task-body { display: flex; flex-direction: column; }
  .mc-task-next { order: -1; padding: var(--space-4) 0 0; border-left: 0; }
  .mc-task-col { padding-right: 0; }
  .mc-task-side { padding: var(--space-6) 0 var(--space-12); border-left: 0; }
  .mc-task-actions { justify-content: flex-start; }
  .mc-sib { min-height: var(--target); }
}
.mc-crumbs a, a.mc-sub { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 640px) { .mc-crumbs a, a.mc-sub { min-height: 36px; } }

/* P2.37-2 review: a piece of evidence is a short reference in three lines, nothing struck through; the sections of the main column share one style. */
.mc-evs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mc-ev { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.mc-ev:first-child { border-top: 0; padding-top: 0; }
.mc-ev-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mc-ev-t { margin: 0; font: 400 13px/18px var(--font-sans); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.mc-ev-m { overflow-wrap: anywhere; }
.mc-task-col .panel { padding: 0; margin: 0; border: 0; background: transparent; }
.mc-task-col .panel > h2 { margin: 0 0 10px; font: 700 22px/28px var(--font-sans); letter-spacing: -0.4px; }
.mc-crumbs { align-items: center; gap: 0 8px; }
.mc-crumbs > span { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 640px) { .mc-crumbs > span { min-height: 36px; } }
.mc-guard-n { display: block; margin-top: 2px; }

/* Needs you (P2.37-3, D-214, D-221). Two panes on a wide screen: the list, and the decision with what it needs. On a phone the list is alone until a decision is opened,
   which then fills the screen with its answer bar fixed at the bottom. The wider grant is always set apart from the safe answers. */
.mc-needs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mc-needs-head h1 { margin: 0; font: 700 38px/40px var(--font-sans); letter-spacing: -1.7px; }
.mc-needs-keys { margin-left: auto; }
.mc-kbd { display: inline-block; min-width: 18px; padding: 1px 5px; border: 1px solid var(--line-strong); font: 500 11px/16px var(--font-mono); text-align: center; color: var(--ink-muted); }
.mc-needs { display: flex; flex-wrap: wrap; align-items: flex-start; }
.mc-needs-list { flex: 1 1 440px; max-width: 560px; min-width: 0; padding: var(--space-1) var(--space-6) var(--space-8) 0; border-right: 1px solid var(--line); align-self: stretch; }
.mc-needs-main { flex: 999 1 560px; min-width: 0; padding: var(--space-6) 0 var(--space-12) var(--space-8); }
.mc-needs-list .mc-chips { padding: var(--space-3) 0 var(--space-1); }
.mc-needs-grp { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 14px 0 6px; border-bottom: 1px solid var(--line); }
.mc-needs-grp .mc-label { margin: 0; color: var(--ink); font-size: 11px; }
.mc-needs-items { margin: 0; padding: 0; list-style: none; }
.mc-need { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 10px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink); text-decoration: none; }
.mc-need:hover { background: var(--surface-2); }
.mc-need[aria-current="true"] { background: var(--surface); border-left-color: var(--accent); }
.mc-kind { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line-strong); font: 700 12px/1 var(--font-mono); color: var(--ink-muted); }
.mc-kind--gate, .mc-kind--question { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.mc-kind--permission { color: var(--bad-ink); border-color: var(--bad); background: var(--bad-soft); }
.mc-kind--acceptance { color: var(--ok-ink); border-color: var(--ok); background: var(--ok-soft); }
.mc-kind--budget { color: var(--review-ink); border-color: var(--review); background: var(--review-soft); }
.mc-need-body { min-width: 0; display: flex; flex-direction: column; }
.mc-need-q { font: 600 14px/20px var(--font-sans); overflow-wrap: anywhere; }
.mc-need-m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-need-m b { color: var(--bad-ink); font-weight: 500; }
.mc-need-age { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.mc-need-age--old { color: var(--accent-ink); }
.mc-needs-clear { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-12) 0 var(--space-6); }
.mc-needs-clear-h { font: 600 15px/20px var(--font-sans); }
.mc-needs-none { padding: var(--space-3) 0; margin: 0; }
.mc-done { margin: 0; padding: 0; list-style: none; }
.mc-done-row { display: grid; grid-template-columns: 44px 72px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 32px; border-bottom: 1px solid var(--line); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.mc-done-row time { font: 400 12px/16px var(--font-mono); }
.mc-done-q { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-out { font: 500 11px/16px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; }
.mc-out--ok { color: var(--ok-ink); }
.mc-out--back { color: var(--accent-ink); }
.mc-out--no { color: var(--bad-ink); }

.mc-needs-detail { display: flex; flex-direction: column; gap: var(--space-6); }
.mc-needs-back { display: none; align-items: center; min-height: var(--target); margin-left: calc(var(--space-3) * -1); padding: 0 var(--space-3); color: var(--ink); font: 500 12px/1 var(--font-mono); text-decoration: none; }
.mc-needs-form { margin: 0; }
.mc-needs-form .mc-gate-q { font-size: 28px; line-height: 34px; }
.mc-perm { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.mc-perm > div { display: flex; flex-direction: column; gap: 2px; }
.mc-perm dt, .mc-perm dd { margin: 0; }
.mc-perm dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mc-perm .mc-code { overflow-wrap: anywhere; }
.mc-perm-cover { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.mc-needs-note { display: flex; flex-direction: column; gap: 4px; max-width: 62ch; }
.mc-needs-note textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--bg); color: var(--ink); font: 400 14px/20px var(--font-sans); resize: vertical; }
.mc-answers { gap: var(--space-2); }
.mc-snooze { margin-left: auto; }
.mc-wide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px dashed var(--bad); background: var(--bg); }
.mc-wide > div { flex: 1 1 280px; min-width: 0; }
.mc-wide-h { color: var(--bad-ink); }
.mc-wide p { margin: 4px 0 0; font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.mc-then { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-2); }
.mc-then > div { padding: 10px 12px; border: 1px solid var(--line); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.mc-then b { display: block; margin-bottom: 2px; font: 500 11px/16px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.mc-ctx { display: flex; flex-direction: column; gap: var(--space-2); }
.mc-ctx-h { font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-cmds { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-cmds li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); }
.mc-cmds li span:first-child { overflow-wrap: anywhere; }
.mc-needs-open { margin: 0; }

/* The message that follows an answer: it can be taken back until its time is over. */
.mc-toast { position: fixed; left: 50%; bottom: var(--space-6); transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: var(--space-4); max-width: calc(100vw - 32px); padding: 10px 12px 10px var(--space-4); background: var(--ink); color: var(--bg); box-shadow: var(--shadow-pop); font: 400 13px/18px var(--font-mono); }
.mc-toast-undo { min-height: 32px; padding: 0 12px; border: 1px solid currentColor; border-radius: 0; background: transparent; color: inherit; font: 700 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; cursor: pointer; }

@media (max-width: 640px) {
  .mc-needs-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -1px; }
  .mc-needs-keys { display: none; }
  .mc-needs-list { flex-basis: 100%; max-width: none; padding-right: 0; border-right: 0; }
  .mc-need { min-height: 72px; padding: 12px 0; }
  .mc-needs-main { flex-basis: 100%; padding: var(--space-4) 0 calc(var(--mc-bar-h, 144px) + var(--space-4)); }
  .mc-needs .mc-needs-main { display: none; }
  .mc-needs--open .mc-needs-main { display: block; }
  .mc-needs--open .mc-needs-list { display: none; }
  .mc-needs--open .mc-needs-back { display: inline-flex; }
  /* The answer bar stays at the bottom while the decision scrolls. Its place in the page is under the question, so the order for the keyboard is the order of reading. */
  .mc-needs--open .mc-answers { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-strong); background: var(--bg); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
  .mc-needs--open .mc-answers .mc-btn--primary { grid-column: 1 / -1; }
  .mc-needs--open .mc-answers .mc-btn { min-height: 48px; }
  .mc-snooze { margin-left: 0; }
  .mc-then { grid-template-columns: 1fr; }
  .mc-toast { bottom: calc(var(--mc-bar-h, 144px) + var(--space-3)); }
  .mc-done-row { grid-template-columns: 44px 56px minmax(0, 1fr) auto; }
}
.mc-nw { white-space: nowrap; }

/* Agents (P2.37-4, D-214, D-224). A table of seats grouped by state with the summary row above it and the seat that is selected beside it. On a phone the table is a list of
   rows with four counts that filter, and a seat opens full screen; rules, usage by task and the seat details are for a larger screen. No inline style: the page's CSP forbids it,
   so the strip is drawn with height classes and a quantity with <progress>. */
.mc-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mc-ag-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mc-ag-head h1 { margin: 0; font: 700 38px/40px var(--font-sans); letter-spacing: -1.7px; }
.mc-ag-register { margin-left: auto; align-self: center; }
.mc-ag-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-bottom: 1px solid var(--line); }
.mc-ag-sum > div { display: flex; flex-direction: column; gap: 2px; padding: 12px var(--space-6) 14px; border-right: 1px solid var(--line); min-width: 0; }
.mc-ag-sum > div:first-child { padding-left: 0; }
.mc-ag-sum > div:last-child { border-right: 0; }
.mc-ag-sum b { font: 700 26px/30px var(--font-sans); letter-spacing: -.8px; }
.mc-ag-sum .mc-ag-sum--bad, .mc-ag-counts .mc-ag-sum--bad { color: var(--bad-ink); }
.mc-ag-sum .mc-ag-sum--live, .mc-ag-counts .mc-ag-sum--live { color: var(--live-ink); }

.mc-ag { display: flex; flex-wrap: wrap; align-items: flex-start; }
.mc-ag-list { flex: 999 1 760px; min-width: 0; padding: var(--space-1) var(--space-6) var(--space-8) 0; border-right: 1px solid var(--line); align-self: stretch; }
.mc-ag-detail { flex: 1 1 360px; max-width: 420px; min-width: 0; padding: var(--space-6) 0 var(--space-12) 24px; }
.mc-ag-filters { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 12px var(--space-2) 0; }
.mc-ag-frow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.mc-ag-frow > .mc-label { width: 84px; flex: none; }
.mc-ag-counts, .mc-ag-weekline { display: none; }
.mc-ag-th, .mc-ag-row { display: grid; grid-template-columns: 150px 112px minmax(0, 1fr) 112px 76px 48px 64px; gap: 10px; align-items: center; padding: 0 12px; }
.mc-ag-th { min-height: 30px; border-bottom: 1px solid var(--line-strong); font: 500 11px/16px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.mc-ag-r { text-align: right; }
.mc-ag-grp { padding: 14px 12px 6px; border-bottom: 1px solid var(--line); }
.mc-ag-grp h2 { margin: 0; font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-ag-grp--bad h2 { color: var(--bad-ink); }
.mc-ag-rows { margin: 0; padding: 0; list-style: none; }
.mc-ag-row { min-height: 44px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink); text-decoration: none; font: 400 12px/16px var(--font-mono); }
.mc-ag-row:hover { background: var(--surface-2); }
.mc-ag-row[aria-current="true"] { background: var(--surface); border-left-color: var(--accent); }
.mc-ag-names { display: flex; flex-direction: column; min-width: 0; }
.mc-ag-names .mc-wn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-who .mc-av i.mc-ag-dot--working { background: var(--live); }
.mc-who .mc-av i.mc-ag-dot--stuck { background: var(--bad); }
.mc-who .mc-av i.mc-ag-dot--quiet { background: var(--accent); }
.mc-who .mc-av i.mc-ag-dot--waiting { background: var(--review); }
.mc-who .mc-av i.mc-ag-dot--held { background: var(--live); }
.mc-who .mc-av i.mc-ag-dot--silent { background: var(--accent); }
.mc-who .mc-av i.mc-ag-dot--vacant, .mc-who .mc-av i.mc-ag-dot--unread { background: var(--bad); }
.mc-ag-st { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--font-mono); letter-spacing: .5px; text-transform: uppercase; }
.mc-ag-st i { width: 7px; height: 7px; flex: none; border-radius: var(--radius-round); background: var(--ink-faint); }
.mc-ag-st--working i { background: var(--live); }
.mc-ag-st--stuck { color: var(--bad-ink); }
.mc-ag-st--stuck i { background: var(--bad); }
.mc-ag-st--waiting i, .mc-ag-st--held i { background: var(--review); }
.mc-ag-st--held i { background: var(--live); }
.mc-ag-st--silent { color: var(--accent-ink); }
.mc-ag-st--silent i { background: var(--accent); }
.mc-ag-st--vacant, .mc-ag-st--unread { color: var(--bad-ink); }
.mc-ag-st--vacant i, .mc-ag-st--unread i { background: var(--bad); }
.mc-ag-st--quiet { color: var(--accent-ink); }
.mc-ag-st--quiet i { background: var(--accent); }
.mc-ag-st--paused i { background: transparent; border: 1px solid var(--ink-muted); }
.mc-ag-task { display: flex; flex-direction: column; min-width: 0; padding: 6px 0; }
.mc-ag-task > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-ag-tk { color: var(--ink); }
.mc-ag-tt { color: var(--ink-muted); font: 400 12px/16px var(--font-sans); }
.mc-ag-row--seat .mc-ag-task > span { color: var(--ink); }
.mc-ag-seatnote { grid-column: 4 / span 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.mc-ag-spark { display: flex; align-items: flex-end; gap: 1px; height: 20px; }
.mc-ag-spark i { flex: 1; min-width: 2px; height: 2px; background: var(--line-strong); }
.mc-ag-spark i.l1 { height: 4px; } .mc-ag-spark i.l2 { height: 6px; } .mc-ag-spark i.l3 { height: 8px; } .mc-ag-spark i.l4 { height: 10px; }
.mc-ag-spark i.l5 { height: 12px; } .mc-ag-spark i.l6 { height: 14px; } .mc-ag-spark i.l7 { height: 17px; } .mc-ag-spark i.l8 { height: 20px; }
.mc-ag-spark i.on { background: var(--live); }
.mc-ag-spark i.deny { background: var(--bad); }
.mc-ag-num { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-ag-num--old { color: var(--accent-ink); }
.mc-ag-num--hi { color: var(--bad-ink); }
.mc-ag-use { display: flex; flex-direction: column; gap: 3px; }
.mc-ag-lines, .mc-ag-ageline { display: none; }
.mc-ag-none { padding: var(--space-4) 12px; margin: 0; }
.mc-ag-note { display: block; padding: 12px 12px 0 0; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }

.mc-ag-pane { display: flex; flex-direction: column; gap: 22px; }
.mc-ag-back { display: none; align-items: center; min-height: var(--target); margin-left: calc(var(--space-3) * -1); padding: 0 var(--space-3); color: var(--ink); font: 500 12px/1 var(--font-mono); text-decoration: none; }
.mc-ag-dh { display: flex; gap: 12px; align-items: center; }
.mc-ag-bigav { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--line-strong); background: var(--surface-2); font: 700 15px/1 var(--font-mono); }
.mc-ag-dn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-ag-name { margin: 0; font: 700 22px/26px var(--font-sans); letter-spacing: -.5px; overflow-wrap: anywhere; }
.mc-ag-dh .mc-ag-st { margin-left: auto; }
.mc-ag-sec { display: flex; flex-direction: column; gap: 6px; }
.mc-ag-sec h2, .mc-ag-sec h3 { margin: 0; }
.mc-ag-sub { margin-top: 8px !important; }
.mc-live--bad .mc-prompt { color: var(--bad-ink); }
.mc-ag-actions { gap: 6px; }
.mc-ag-actions .mc-btn--ghost { border-color: var(--line-strong); }
.mc-ag-actions .mc-btn--ghost:hover { border-color: var(--line-strong); }
.mc-ag-actions .mc-btn:not(.mc-btn--danger):not(.mc-btn--primary), .mc-ag-form .mc-btn--ghost { color: var(--ink); }
.mc-ag-hint { margin: 0; }
.mc-ag-form { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); background: var(--surface); }
.mc-ag-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--bg); color: var(--ink); font: 400 14px/20px var(--font-sans); resize: vertical; }
.mc-ag-form select.mc-input { max-width: 100%; }
.mc-ag-head + .mc-ag-form, .mc-ag-head + .mc-ag-code { max-width: 520px; margin: var(--space-3) 0; }
.mc-ag-code { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--accent-line); background: var(--accent-soft); margin: var(--space-3) 0; }
.mc-ag-code .mc-label { color: var(--accent-ink); }
.mc-ag-codetext { max-width: 100%; overflow-wrap: anywhere; font-size: 15px; line-height: 22px; user-select: all; }
.mc-ag-holds, .mc-ag-turns { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-ag-holds li { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 13px/20px var(--font-sans); }
.mc-ag-hold-t { min-width: 0; overflow-wrap: anywhere; }
.mc-ag-hold-m { display: flex; flex-wrap: wrap; row-gap: 2px; font-size: 12px; line-height: 18px; }
.mc-ag-holds li form { margin: 4px 0 0; }
.mc-ag-who { margin: 0; font: 500 14px/20px var(--font-sans); }
.mc-ag-ok { color: var(--ok-ink); font: 500 11px/16px var(--font-mono); letter-spacing: .5px; text-transform: uppercase; }
.mc-ag-quiet { color: var(--accent-ink); font: 400 12px/16px var(--font-mono); }
.mc-ag-turns li { display: grid; grid-template-columns: 44px 84px 64px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); }
.mc-ag-turns li > :last-child { min-width: 0; overflow-wrap: anywhere; }
.mc-ag-out--ok { color: var(--ok-ink); }
.mc-ag-out--bad { color: var(--bad-ink); }
.mc-ag-out--mid { color: var(--accent-ink); }
.mc-ag-what { color: var(--ink-muted); overflow-wrap: anywhere; }
.mc-ag-rules { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-ag-rule { padding: 3px 7px; border: 1px solid var(--line-strong); font: 400 12px/16px var(--font-mono); overflow-wrap: anywhere; }
.mc-ag-rule--task { border-style: dotted; }
.mc-ag-rule--deny { border-color: var(--bad); color: var(--bad-ink); border-style: dashed; }
.mc-ag-link { display: flex; align-items: center; width: fit-content; min-height: 24px; font: 400 12px/18px var(--font-sans); }
.mc-ag-bars { display: flex; flex-direction: column; gap: 6px; }
.mc-ag-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font: 400 12px/16px var(--font-mono); }
.mc-ag-bar-k { display: flex; flex-direction: column; min-width: 0; }
.mc-ag-kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 12px; margin: 0; font: 400 12px/18px var(--font-mono); }
.mc-ag-kv dt { color: var(--ink-muted); }
.mc-ag-kv dd { margin: 0; overflow-wrap: anywhere; }
.mc-ag-revoke form { margin: 0; }
.mc-ag-decide { display: none; }
.mc-ag-phone-note { display: none; margin: 0; }

/* Agents round 2 (P2.42-4, D-228): chips of capabilities, the slot line under the state, one block per lease with its own live line, the untagged line, the handed-over lines in a muted
   tone, the leases of the detail with a Release each, and the capacity bars. */
.mc-ag-row { align-items: start; }
.mc-ag-row > * { padding-top: 8px; padding-bottom: 8px; }
.mc-ag-row > .mc-ag-spark { padding-top: 12px; padding-bottom: 12px; }
.mc-ag-caps { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.mc-ag-caps span { padding: 0 5px; border: 1px solid var(--line-strong); font: 400 11px/16px var(--font-mono); color: var(--ink-muted); }
/* The Kit of the seat runs code the service no longer fits (D-236): a mark under the runtime, readable without colour (the words say it). */
.mc-ag-restart { align-self: flex-start; margin-top: 3px; padding: 0 5px; border: 1px solid var(--bad); background: var(--bad-soft); color: var(--bad-ink); font: 600 11px/16px var(--font-mono); text-transform: uppercase; letter-spacing: .3px; }
.mc-ag-stc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-ag-slots { font: 400 11px/16px var(--font-mono); color: var(--ink-muted); }
.mc-ag-slots--full { color: var(--accent-ink); }
.mc-ag-leases { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mc-ag-lease { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mc-ag-lease > span, .mc-ag-leases > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-ag-lt { color: var(--ink-muted); font-family: var(--font-sans); }
.mc-ag-none-lease { color: var(--ink-muted); }
.mc-ag-ll { color: var(--ink-muted); }
.mc-ag-ll b { font-weight: 400; color: var(--live-ink); }
.mc-ag-ll--bad, .mc-ag-ll--bad b { color: var(--bad-ink); }
.mc-ag-unt { color: var(--ink-muted); }
.mc-ag-unt i { font-style: normal; color: var(--accent-ink); }
.mc-ag-hand { color: var(--ink-muted); }
.mc-ag-held, .mc-ag-handed { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-ag-held li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); }
.mc-ag-held .mc-ag-hk { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.mc-ag-held .mc-ag-hs { grid-column: 1; color: var(--ink-muted); }
.mc-ag-held .mc-btn { grid-column: 2; grid-row: 1 / span 2; }
.mc-ag-held .mc-ag-hl { grid-column: 1 / span 2; min-width: 0; overflow-wrap: anywhere; }
.mc-ag-hl b { font-weight: 400; color: var(--live-ink); }
.mc-ag-handed li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
.mc-ag-handed .mc-ag-why { color: var(--ink-muted); }
.mc-ag-capbars { display: flex; flex-direction: column; gap: 6px; }
.mc-ag-capbar { display: grid; grid-template-columns: 84px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font: 400 12px/16px var(--font-mono); }
.mc-ag-cells { display: flex; gap: 2px; height: 8px; }
.mc-ag-cells i { flex: 1; background: var(--line); }
.mc-ag-cells i.on { background: var(--live); }
.mc-ag-cells i.full { background: var(--accent); }

@media (max-width: 640px) {
  .mc-ag-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -1px; }
  .mc-ag-sum, .mc-ag-filters, .mc-ag-th { display: none; }
  .mc-ag-counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .mc-ag-counts button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
  .mc-ag-counts button:first-child { padding-left: 0; }
  .mc-ag-counts button:last-child { border-right: 0; }
  .mc-ag-counts button[aria-pressed="true"] { background: var(--surface); box-shadow: inset 0 -2px 0 var(--accent); }
  .mc-ag-counts b { font: 700 22px/26px var(--font-sans); }
  .mc-ag-weekline { display: block; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .mc-ag-list { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .mc-ag-detail { flex-basis: 100%; max-width: none; padding: var(--space-4) 0 var(--space-8); }
  .mc-ag .mc-ag-detail { display: none; }
  .mc-ag--open .mc-ag-detail { display: block; }
  .mc-ag--open .mc-ag-list { display: none; }
  .mc-ag--open .mc-ag-back { display: inline-flex; }
  .mc-ag-grp { padding: 14px 0 6px; }
  .mc-ag-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who age" "line line"; gap: 4px 10px; min-height: 60px; padding: 8px 0; border-left: 0; }
  .mc-ag-row .mc-who { grid-area: who; }
  .mc-ag-row .mc-ag-ageline { grid-area: age; display: block; text-align: right; color: var(--ink-muted); white-space: nowrap; }
  .mc-ag-row .mc-ag-ageline.mc-ag-num--old { color: var(--accent-ink); }
  .mc-ag-row .mc-ag-lines { grid-area: line; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .mc-ag-row .mc-ag-line { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
  .mc-ag-row .mc-ag-line--bad { color: var(--bad-ink); }
  .mc-ag-row .mc-ag-line--unt i { font-style: normal; color: var(--accent-ink); }
  .mc-ag-row .mc-ag-line--hand { color: var(--ink-muted); }
  .mc-ag-row .mc-ag-line--hand, .mc-ag-row .mc-ag-line--slots { white-space: normal; overflow-wrap: anywhere; }
  .mc-ag-row .mc-ag-line--slots { color: var(--ink); }
  .mc-ag-row .mc-ag-stc, .mc-ag-row .mc-ag-leases, .mc-ag-row .mc-ag-caps, .mc-ag-row .mc-ag-task, .mc-ag-row .mc-ag-spark, .mc-ag-row > .mc-ag-num, .mc-ag-row .mc-ag-use, .mc-ag-row .mc-ag-seatnote { display: none; }
  .mc-ag-row > * { padding-top: 0; padding-bottom: 0; }
  .mc-ag-wide { display: none; }
  .mc-ag-phone-note { display: block; }
  .mc-ag-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-ag-actions .mc-btn { min-height: 48px; }
  .mc-ag-decide { display: inline-flex; }
  .mc-ag-turns li { grid-template-columns: 44px 76px 60px minmax(0, 1fr); }
}

/* Roadmap (P2.37-5, D-225). Three columns of milestones in claim order, and the one that is selected beside its forecast. No inline style (the CSP forbids it): the stack bar has one
   cell per task, the burn-up is drawn from attributes and classes, a quantity is a <progress>. On a phone the columns stack and a milestone opens full screen. */
.mc-rm-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mc-rm-head h1 { margin: 0; font: 700 38px/40px var(--font-sans); letter-spacing: -1.7px; }
.mc-rm-add { margin-left: auto; align-self: center; }
.mc-rm-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--line); background: var(--surface); }
.mc-rm-form .field { margin: 0; }
.mc-rm-form textarea, .mc-rm-accept textarea { width: 100%; resize: vertical; }
.mc-rm-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.mc-rm-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 14px 16px 18px; border-right: 1px solid var(--line); }
.mc-rm-col:first-child { padding-left: 0; }
.mc-rm-col:last-child { padding-right: 0; border-right: 0; }
.mc-rm-colh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: 0 2px 4px; }
.mc-rm-colh b { font: 700 15px/20px var(--font-sans); }
.mc-rm-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.mc-rm-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--surface); }
.mc-rm-card:hover { border-color: var(--line-strong); }
.mc-rm-card--later { background: transparent; border-style: dashed; border-left-style: solid; }
.mc-rm-card--on, .mc-rm-card--on:hover { border-color: var(--accent); border-left-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mc-rm-top { display: flex; align-items: center; gap: var(--space-2); }
.mc-rm-name { display: inline-flex; align-items: center; flex: 1; min-width: 0; min-height: 28px; overflow-wrap: anywhere; color: var(--ink); font: 600 15px/20px var(--font-sans); text-decoration: none; }
.mc-rm-name::after { content: ""; position: absolute; inset: 0; }
.mc-rm-pct { font: 700 15px/20px var(--font-mono); white-space: nowrap; }
.mc-rm-stack { display: flex; gap: 2px; height: 6px; }
.mc-rm-s { display: block; flex: 1; min-width: 2px; height: 100%; background: var(--line-strong); }
.mc-rm-s--done { background: var(--ok); }
.mc-rm-s--rev { background: var(--review); }
.mc-rm-s--work { background: var(--live); }
.mc-rm-s--you { background: var(--accent); }
.mc-rm-s--bad { background: var(--bad); }
.mc-rm-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); }
.mc-rm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-rm-flag--you { color: var(--accent-ink); }
.mc-rm-flag--bad { color: var(--bad-ink); }
.mc-rm-ord { position: relative; z-index: 1; display: flex; gap: 2px; }
.mc-rm-arrow { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink-muted); font: 500 12px/1 var(--font-mono); cursor: pointer; }
.mc-rm-arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-muted); }
.mc-rm-arrow:disabled { color: var(--ink-muted); border-color: var(--line); border-style: dashed; cursor: not-allowed; }
.mc-rm-note { margin: 0; font: 400 12px/18px var(--font-sans); color: var(--ink-muted); }
.mc-rm-claim { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.mc-rm-h { font: 500 11px/16px var(--font-mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-rm-accepted { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.mc-rm-accepted ul { display: contents; margin: 0; padding: 0; list-style: none; }
.mc-rm-accepted li { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font: 400 13px/20px var(--font-sans); }
.mc-rm-accepted a { display: inline-flex; align-items: center; min-height: 24px; }

.mc-rm-pane { display: flex; flex-wrap: wrap; align-items: flex-start; }
.mc-rm-main { flex: 999 1 560px; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-6) var(--space-6) var(--space-12) 0; border-right: 1px solid var(--line); align-self: stretch; }
.mc-rm-side { flex: 1 1 320px; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-6) 0 var(--space-12) var(--space-6); }
.mc-rm-back { display: none; align-items: center; min-height: var(--target); margin-left: calc(var(--space-3) * -1); padding: 0 var(--space-3); color: var(--ink); font: 500 12px/1 var(--font-mono); text-decoration: none; }
.mc-rm-dh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mc-rm-title { margin: 0; font: 700 28px/34px var(--font-sans); letter-spacing: -.8px; overflow-wrap: anywhere; }
.mc-rm-goal { margin: 0; max-width: 720px; font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.mc-rm-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.mc-rm-sech { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.mc-rm-crit { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-rm-crit li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 14px/20px var(--font-sans); }
.mc-rm-g { font: 700 13px/20px var(--font-mono); }
.mc-rm-g--ok { color: var(--ok-ink); }
.mc-rm-g--open { color: var(--ink-muted); }
.mc-rm-g--you { color: var(--accent-ink); }
.mc-rm-by { font: 400 12px/20px var(--font-mono); color: var(--ink-muted); }
.mc-rm-accept { display: flex; flex-direction: column; gap: var(--space-2); max-width: 520px; }
.mc-rm-accept .field { margin: 0; }
.mc-rm-leg { display: flex; gap: var(--space-4); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-rm-leg i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: var(--ink); }
.mc-rm-leg i.mc-rm-leg--scope { height: 0; background: none; border-top: 2px dashed var(--ink-muted); }
.mc-rm-chart { display: grid; grid-template-columns: 32px minmax(0, 1fr); grid-template-rows: 150px auto; gap: 4px 6px; }
.mc-rm-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; line-height: 12px; }
.mc-rm-plot { position: relative; min-width: 0; }
.mc-rm-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mc-rm-grid line { stroke: var(--line-strong); stroke-opacity: .5; stroke-width: 1; }
.mc-rm-line { stroke-width: 2; stroke-linejoin: round; }
.mc-rm-line--pass { stroke: var(--ink); }
.mc-rm-line--scope { stroke: var(--ink-muted); stroke-dasharray: 5 4; }
.mc-rm-dot { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
.mc-rm-hits { position: absolute; inset: 0; display: flex; }
.mc-rm-hit { position: relative; flex: 1; cursor: crosshair; }
.mc-rm-hit::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ink-muted); display: none; }
.mc-rm-hit:hover, .mc-rm-hit:focus-visible { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mc-rm-hit:hover::before, .mc-rm-hit:focus-visible::before { display: block; }
.mc-rm-tip { display: none; position: absolute; top: 4px; left: 50%; z-index: 2; transform: translateX(-50%); padding: 6px 8px; background: var(--ink); color: var(--bg); font: 400 12px/16px var(--font-mono); white-space: nowrap; pointer-events: none; }
.mc-rm-hit:hover .mc-rm-tip, .mc-rm-hit:focus-visible .mc-rm-tip { display: block; }
.mc-rm-hit:nth-child(-n+2) .mc-rm-tip { left: 0; transform: none; }
.mc-rm-hit:nth-last-child(-n+2) .mc-rm-tip { left: auto; right: 0; transform: none; }
.mc-rm-x { grid-column: 2; display: flex; justify-content: space-between; }
.mc-rm-tasks { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-rm-th { display: grid; grid-template-columns: 92px minmax(0, 1fr) 132px 84px; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--line-strong); font: 500 11px/16px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.mc-rm-th + .mc-rm-tasks { border-top: 0; }
.mc-rm-decide form { margin: 0; }
.mc-rm-trow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 132px 84px; gap: 10px; align-items: center; min-height: 36px; padding: 4px 0; border-bottom: 1px solid var(--line); font: 400 13px/18px var(--font-sans); }
.mc-rm-tkey { display: inline-flex; align-items: center; min-height: 24px; color: var(--ink-muted); text-decoration: none; white-space: nowrap; }
.mc-rm-trow--sub .mc-rm-tkey { padding-left: 14px; }
.mc-rm-ttitle { min-width: 0; overflow-wrap: anywhere; }
.mc-rm-trow .mc-pill { justify-self: start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-rm-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.mc-rm-tag { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); font: 400 11px/16px var(--font-mono); color: var(--ink-muted); white-space: nowrap; }
.mc-rm-feat { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font: 400 12px/16px var(--font-mono); }
.mc-rm-feat progress { max-width: none; }
.mc-rm-fc { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--line); background: var(--surface); }
.mc-rm-fc b { font: 700 20px/24px var(--font-sans); letter-spacing: -.4px; }
.mc-rm-kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 4px 12px; margin: 0; font: 400 12px/18px var(--font-mono); }
.mc-rm-kv dt { color: var(--ink-muted); }
.mc-rm-kv dd { margin: 0; overflow-wrap: anywhere; }
.mc-rm-releases { margin: 0; padding: 0; list-style: none; }
.mc-rm-releases li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 4px 0; font: 400 12px/18px var(--font-mono); }

@media (max-width: 640px) {
  .mc-rm-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -1px; }
  .mc-rm-cols { grid-template-columns: 1fr; }
  .mc-rm-col, .mc-rm-col:first-child, .mc-rm-col:last-child { padding: var(--space-3) 0 var(--space-4); border-right: 0; border-bottom: 1px solid var(--line); }
  .mc-rm-col:last-child { border-bottom: 0; }
  .mc-rm-arrow { width: var(--target); height: var(--target); }
  .mc-rm-name { min-height: var(--target); }
  .mc-rm-tkey { min-height: var(--target); }
  .mc-rm-accepted a { min-height: var(--target); }
  .mc-rm-page .mc-rm-detail { display: none; }
  .mc-rm-page--open .mc-rm-detail { display: block; }
  .mc-rm-page--open .mc-rm-all { display: none; }
  .mc-rm-page--open .mc-rm-back { display: inline-flex; }
  .mc-rm-main, .mc-rm-side { flex-basis: 100%; max-width: none; padding: var(--space-4) 0; border-right: 0; }
  .mc-rm-title { font-size: 24px; line-height: 30px; }
  .mc-rm-trow { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "key title" ". pill"; row-gap: 4px; }
  .mc-rm-trow .mc-rm-tkey { grid-area: key; }
  .mc-rm-trow .mc-rm-ttitle { grid-area: title; }
  .mc-rm-trow .mc-pill { grid-area: pill; }
  .mc-rm-who { display: none; }
  .mc-rm-th { display: none; }
  .mc-rm-decide .mc-btn { min-height: 48px; }
  .mc-rm-feat { grid-template-columns: 110px minmax(0, 1fr) 36px; }
}

/* Facts on the board (P2.37-6, D-226): the live line of a card is a button that narrows the facts beside the board to its task. */
.mc-live--btn { width: calc(100% + 2 * var(--space-3)); max-width: calc(100% + 2 * var(--space-3)); min-width: 0; contain: inline-size; overflow: hidden; border: 0; text-align: left; cursor: pointer; border-radius: 0; min-height: 28px; }
.mc-live--btn:hover { background: var(--surface-3, var(--line)); }
.mc-live--btn[aria-pressed="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.mc-live--btn .mc-cmd { flex: 1 1 auto; text-align: left; }
.mc-facts-panel { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.mc-h2-scope { color: var(--ink-muted); font-weight: 500; }
.mc-facts--panel .mc-fact { grid-template-columns: 64px 44px minmax(0, 1fr); gap: var(--space-2); }
.mc-legend { margin: 0; }
.mc-mini { justify-self: end; }
/* The height of a bar of a seat strip is a class: the page may not carry an inline style (CSP). */
.mc-mini .mh1 { height: 1px; }
.mc-mini .mh2 { height: 2px; }
.mc-mini .mh3 { height: 3px; }
.mc-mini .mh4 { height: 4px; }
.mc-mini .mh5 { height: 5px; }
.mc-mini .mh6 { height: 6px; }
.mc-mini .mh7 { height: 7px; }
.mc-mini .mh8 { height: 8px; }
.mc-mini .mh9 { height: 9px; }
.mc-mini .mh10 { height: 10px; }
.mc-mini .mh11 { height: 11px; }
.mc-mini .mh12 { height: 12px; }
.mc-mini .mh13 { height: 13px; }
.mc-mini .mh14 { height: 14px; }

/* Open questions of a brief on Needs you (P2.37-7, D-227): each question with its options as buttons that stay pressed, the recommended one marked. */
.mc-qs { gap: var(--space-3); }
.mc-qa { display: flex; flex-direction: column; gap: var(--space-2); padding: 12px; border: 1px solid var(--line); background: var(--surface); }
.mc-qa-q { font: 500 14px/20px var(--font-sans); }
.mc-qa-opts { display: flex; flex-wrap: wrap; gap: 6px; }
/* The label and the tag of the recommendation share one text baseline; the height comes from the padding, so the pair stays centred in the button. */
.mc-opt { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font: 400 13px/1 var(--font-sans); cursor: pointer; text-align: left; }
.mc-opt:hover { background: var(--surface-2); }
.mc-opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.mc-opt .mc-rec { font: 500 10px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); }
.mc-opt[aria-pressed="true"] .mc-rec { color: var(--accent-ink); }
.mc-qa-hint { margin: 0; font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
@media (max-width: 640px) {
  .mc-qa-opts { flex-direction: column; }
  .mc-opt { justify-content: space-between; min-height: 44px; padding: 13px 12px; font-size: 14px; line-height: 1.2; }
}

/* Runs (P2.42-4, D-229, D-230). Runs grouped by task and head with the CI line, the run that is selected with its block box and its changes of state, and the machines with their locks
   and queues. A blocked run has the accent colour; running is the live colour; a quantity is a <progress> (no inline style: the CSP forbids it). On a phone the columns stack. */
.mc-ag-sum .mc-ag-sum--mid { color: var(--accent-ink); }
.mc-rn-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.mc-rn-top h1 { margin: 0; font: 700 38px/40px var(--font-sans); letter-spacing: -1.7px; }
.mc-rn { display: flex; flex-wrap: wrap; align-items: flex-start; }
.mc-rn-list { flex: 999 1 760px; min-width: 0; padding: var(--space-1) var(--space-6) var(--space-8) 0; border-right: 1px solid var(--line); align-self: stretch; }
.mc-rn-detail { flex: 1 1 380px; max-width: 540px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: var(--space-6) 0 var(--space-12) 28px; }
.mc-rn-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); padding: var(--space-3) 12px var(--space-2) 0; }
.mc-rn-gap { width: 12px; }
.mc-rn-th, .mc-rn-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 92px 130px minmax(0, 1fr) 80px 64px 48px; gap: 12px; align-items: center; padding: 0 12px; }
.mc-rn-th { min-height: 30px; border-bottom: 1px solid var(--line-strong); font: 500 11px/16px var(--font-mono); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.mc-rn-grp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 12px 8px; border-bottom: 1px solid var(--line); }
.mc-rn-k { font: 700 13px/18px var(--font-mono); }
.mc-rn-t { font: 500 13px/18px var(--font-sans); }
.mc-rn-h { font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
.mc-rn-ci { margin-left: auto; font: 500 11px/16px var(--font-mono); letter-spacing: .5px; text-transform: uppercase; color: var(--ink-muted); }
.mc-rn-ci--passed { color: var(--ok-ink); }
.mc-rn-ci--failed { color: var(--bad-ink); }
.mc-rn-ci--pending { color: var(--accent-ink); }
.mc-rn-ciline { padding: 0 12px 8px; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); color: var(--ink-muted); }
.mc-rn-rows { margin: 0; padding: 0; list-style: none; }
.mc-rn-row { min-height: 40px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; color: var(--ink); text-decoration: none; font: 400 12px/16px var(--font-mono); }
.mc-rn-row:hover { background: var(--surface-2); }
.mc-rn-row[aria-current="true"] { background: var(--surface); border-left-color: var(--accent); }
.mc-rn-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-rn-gate { font: 400 11px/16px var(--font-mono); color: var(--ink-muted); }
.mc-rn-gate--on { color: var(--ink); }
.mc-rn-st { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/16px var(--font-mono); letter-spacing: .5px; text-transform: uppercase; }
.mc-rn-st i { width: 7px; height: 7px; flex: none; border-radius: var(--radius-round); background: var(--ink-faint); }
.mc-rn-st--running i { background: var(--live); }
.mc-rn-st--passed { color: var(--ok-ink); }
.mc-rn-st--passed i { background: var(--ok-ink); }
.mc-rn-st--failed { color: var(--bad-ink); }
.mc-rn-st--failed i { background: var(--bad); }
.mc-rn-st--waiting { color: var(--accent-ink); }
.mc-rn-st--waiting i { background: transparent; border: 1px solid var(--accent); }
.mc-rn-st--stale { color: var(--accent-ink); }
.mc-rn-st--stale i { background: var(--accent); }
.mc-rn-prog { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mc-rn-prog > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.mc-rn-prog .mc-rn-wait { color: var(--accent-ink); }
progress.mc-rn-meter { height: 4px; color: var(--live); }
progress.mc-rn-meter::-webkit-progress-value { background: var(--live); }
progress.mc-rn-meter::-moz-progress-bar { background: var(--live); }
progress.mc-rn-meter--passed::-webkit-progress-value { background: var(--ok-ink); }
progress.mc-rn-meter--passed::-moz-progress-bar { background: var(--ok-ink); }
progress.mc-rn-meter--failed::-webkit-progress-value { background: var(--bad); }
progress.mc-rn-meter--failed::-moz-progress-bar { background: var(--bad); }
.mc-rn-runner, .mc-rn-src { color: var(--ink-muted); }
.mc-rn-sec { display: flex; flex-direction: column; gap: 6px; }
.mc-rn-sec h2 { margin: 0; }
.mc-rn-dh { display: flex; align-items: baseline; gap: 12px; }
.mc-rn-title { min-width: 0; overflow-wrap: anywhere; font: 700 22px/26px var(--font-mono); letter-spacing: -.5px; }
.mc-rn-dh .mc-rn-st { margin-left: auto; }
.mc-rn-block { padding: 10px 12px; border: 1px solid var(--accent); font: 400 12px/18px var(--font-mono); color: var(--accent-ink); }
.mc-rn-kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 12px; margin: 0; font: 400 12px/18px var(--font-mono); }
.mc-rn-kv dt { color: var(--ink-muted); }
.mc-rn-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mc-rn-hist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.mc-rn-hist li { display: grid; grid-template-columns: 48px 76px minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 400 12px/18px var(--font-mono); }
.mc-rn-hist li > span { white-space: nowrap; }
.mc-rn-hist .mc-rn-hw { grid-column: 1 / -1; min-width: 0; white-space: normal; overflow-wrap: anywhere; color: var(--ink-muted); }
.mc-rn-hist .mc-rn-n { text-align: right; color: var(--ink-muted); }
.mc-rn-hs--passed { color: var(--ok-ink); }
.mc-rn-hs--failed { color: var(--bad-ink); }
.mc-rn-hs--running { color: var(--live-ink); }
.mc-rn-hs--waiting, .mc-rn-hs--stale { color: var(--accent-ink); }
.mc-rn-machs { display: flex; flex-direction: column; gap: 8px; }
.mc-rn-mach { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border: 1px solid var(--line); border-left: 3px solid transparent; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 400 12px/18px var(--font-mono); }
.mc-rn-mach:hover { background: var(--surface-2); }
.mc-rn-mach[aria-pressed="true"] { background: var(--surface); border-left-color: var(--accent); }
.mc-rn-mtop { display: flex; align-items: baseline; gap: 10px; }
.mc-rn-mname { font: 700 13px/18px var(--font-mono); }
.mc-rn-mage { margin-left: auto; color: var(--ink-muted); }
.mc-rn-mage--old { color: var(--accent-ink); }
.mc-rn-mline { min-width: 0; overflow-wrap: anywhere; color: var(--ink-muted); }
.mc-rn-mline b { font-weight: 400; color: var(--live-ink); }
.mc-rn-mline b.mc-rn-off { color: var(--accent-ink); }
.mc-rn-lock { display: grid; grid-template-columns: 52px 60px minmax(0, 1fr); gap: 8px; align-items: center; }
.mc-rn-lock > span:last-child { min-width: 0; overflow-wrap: anywhere; color: var(--ink-muted); }
.mc-rn-queue { padding-left: 120px; min-width: 0; overflow-wrap: anywhere; color: var(--ink-muted); }
.mc-rn-lock .mc-ag-cells i.on { background: var(--accent); }
.mc-rn-back { display: none; }

@media (max-width: 700px) {
  .mc-rn-top h1 { font-size: 26px; line-height: 30px; letter-spacing: -1px; }
  .mc-rn-th { display: none; }
  .mc-rn-list { flex-basis: 100%; padding-right: 0; border-right: 0; }
  .mc-rn-detail { flex-basis: 100%; max-width: none; padding: var(--space-4) 0 var(--space-8); }
  .mc-rn-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; min-height: 44px; border-left: 0; }
  .mc-rn-row > .mc-rn-src, .mc-rn-row > .mc-ag-num:last-child { display: none; }
  .mc-rn-row > .mc-rn-none { display: none; }
  .mc-rn-row > .mc-rn-prog { grid-column: 1 / 3; }
  .mc-rn-row > .mc-rn-runner { grid-column: 1; }
  .mc-rn-row > .mc-ag-num { grid-column: 2; text-align: right; }
  .mc-rn-grp { padding: 14px 0 8px; }
  .mc-rn-ciline { padding: 0 0 8px; }
  .mc-rn--open .mc-rn-list { display: none; }
  .mc-rn--open .mc-rn-back { display: inline-flex; }
  .mc-rn-queue { padding-left: 0; }
  .mc-rn-kv { grid-template-columns: 96px minmax(0, 1fr); }
}