/* Pulse SDLC Board — a sticky status bar, three views, cards and panels in pulse-clmm's brand
   (tokens.css); state colours (green, amber, red, blue) stay separate from the accent. */
/* D-827 step 08: the board wears pulse-clmm's brand — every colour, the radius, the shadow and
   the font come from tokens.css (vendored from pulse-clmm, pinned by commit); the names below are
   the board's aliases so the rules under them read as before. State colours stay distinct from
   the accent, as in the product. */
:root {
  --bg: var(--ds-bg); --surface: var(--ds-bg-elevated); --surface-2: var(--ds-bg-muted);
  --line: var(--ds-border); --line-strong: var(--ds-border-strong);
  --fg: var(--ds-fg); --muted: var(--ds-fg-muted); --faint: var(--ds-fg-subtle);
  --accent: var(--ds-accent); --accent-soft: var(--ds-accent-soft); --accent-ink: var(--ds-accent-hover);
  --ok: var(--ds-success); --ok-soft: var(--ds-success-soft);
  --warn: var(--ds-warning); --warn-soft: color-mix(in srgb, var(--ds-warning) 14%, transparent);
  --bad: var(--ds-destructive); --bad-soft: var(--ds-destructive-soft);
  --info: #2f67a8; --info-soft: #dde8f6;
  --shadow: var(--ds-shadow);
  --font-ui: var(--ds-font-ui);
  --font-mono: var(--ds-font-mono);
  --r: var(--ds-radius);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --info: #6ea7ea; --info-soft: #1b2c42;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --info: #6ea7ea; --info-soft: #1b2c42;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font-ui); -webkit-font-smoothing: antialiased; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mono.ok { color: var(--ok); } .mono.bad { color: var(--bad); } .mono.warn { color: var(--warn); } .mono.muted { color: var(--muted); }
.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* status bar */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar .row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; }
.brand .mark { width: 26px; height: 26px; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 600 11px var(--font-mono); letter-spacing: .04em; }
.brand h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.brand small { color: var(--muted); font-weight: 400; margin-left: 6px; }
.status { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font-size: 12px; color: var(--fg); white-space: nowrap; text-decoration: none; }
.chip a { text-decoration: none; }
/* D-820: the merge-queue chip names the pull requests — it wraps at phone width instead of scrolling the page */
.chip.wrap { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.chip.ok .dot { background: var(--ok); } .chip.warn .dot { background: var(--warn); } .chip.bad .dot { background: var(--bad); } .chip.info .dot { background: var(--info); } .chip.acc .dot { background: var(--accent); }
.chip b { font-weight: 500; }
.chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.tabs { display: flex; gap: 2px; border-top: 1px solid var(--line); overflow-x: auto; align-items: stretch; }
.tab { appearance: none; border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; display: inline-block; }
.tab[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 500; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.tab-form { margin-left: auto; display: flex; }
.tab-btn { font-size: 12.5px; }

main { padding-block: 18px 40px; }
.banner { border-radius: var(--r); padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; }
.banner.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.banner.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.banner.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.viewhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin-bottom: 14px; }
.viewhead h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; }
.viewhead p { margin: 0; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }

/* board */
.boardwrap { overflow-x: auto; padding-bottom: 6px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 270px); gap: 12px; align-items: start; }
.board.single { grid-auto-flow: row; grid-template-columns: 1fr; }
.board.single .cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.col > header { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); }
.col > header .stripe { width: 4px; height: 16px; border-radius: 2px; background: var(--faint); }
.col > header h3 { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.col > header .n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.col > header .n small { font-family: var(--font-ui); font-size: 11px; }
.col.s-draft .stripe { background: var(--faint); } .col.s-accepted .stripe { background: var(--info); } .col.s-hand .stripe { background: var(--accent); }
.col.s-queued .stripe, .col.s-running .stripe { background: var(--warn); } .col.s-blocked .stripe { background: var(--bad); }
.col.s-pr .stripe { background: var(--info); } .col.s-ready .stripe { background: var(--ok); } .col.s-closed .stripe { background: var(--ok); }
.cards { display: grid; gap: 8px; padding: 8px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 11px 9px; box-shadow: var(--shadow); display: grid; gap: 7px; min-width: 0; }
.card:hover { border-color: var(--line-strong); }
.card .top { display: flex; align-items: center; gap: 8px; }
.card .id { font: 500 12px var(--font-mono); color: var(--accent-ink); text-decoration: none; }
.card .risk { margin-left: auto; font-size: 11px; color: var(--muted); }
.card .risk::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: var(--faint); vertical-align: 1px; }
.card .risk.m::before { background: var(--warn); } .card .risk.h::before { background: var(--bad); }
.card .title { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-decoration: none; }
.card .title:hover { text-decoration: underline; }
.card .meta { display: flex; flex-wrap: wrap; gap: 5px; }
.card .meta:empty { display: none; }
.tag { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); text-decoration: none; white-space: nowrap; }
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; } .tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; } .tag.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.tag.acc { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; } .tag.muted { color: var(--muted); }
.card .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 7px; }
.card .foot .mono { color: var(--fg); } .card .foot .mono.ok { color: var(--ok); } .card .foot .mono.bad { color: var(--bad); } .card .foot .mono.warn { color: var(--warn); }
.card .foot a { color: var(--muted); }
.card .foot a.btn.primary { color: #fff; } /* the primary button is not a muted link (D-819) */
.card .foot .act { margin-left: auto; }
/* D-819: the waiting line is a long pill — it wraps inside the card instead of pushing the card past its column */
.card .foot .tag { white-space: normal; overflow-wrap: anywhere; max-width: 100%; min-width: 0; line-height: 1.45; text-align: left; }
/* the waiting line is a full-width note, not a pill: a soft box with small corners, so a wrapped text reads evenly */
.card .foot .tag.wait { display: block; flex: 1 1 100%; width: 100%; box-sizing: border-box; border-radius: 7px; padding: 4px 8px; margin-top: 2px; }
.more { padding: 6px 11px 10px; font-size: 12px; color: var(--muted); }
.more a { color: var(--accent-ink); text-decoration: none; }
.empty { padding: 14px 11px 16px; font-size: 12.5px; color: var(--faint); line-height: 1.4; }
.btn { appearance: none; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; padding: 0 12px; min-height: 30px; line-height: 1.2; font-size: 12.5px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--fg); white-space: nowrap; transition: border-color .12s, background .12s, box-shadow .12s; }
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface); }
.btn.primary { background: var(--ds-btn-primary); border: 1px solid transparent; color: #fff; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.btn.primary:hover { background: var(--ds-btn-primary-hover); color: #fff; filter: brightness(1.08); box-shadow: 0 6px 16px color-mix(in srgb, var(--ds-ai-accent) 30%, transparent); }
.btn.sm { padding: 0 12px; min-height: 30px; font-size: 12.5px; }  /* D-827 step 09: one button size everywhere — cards, tables, pages and the sheet */
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn .ico { width: 10px; height: 10px; border-radius: 2px; background: currentColor; opacity: .85; clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }

/* demand detail */
.detail { display: grid; gap: 14px; }
.dhead { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; display: grid; gap: 12px; box-shadow: var(--shadow); }
.dhead .line1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dhead .id { font: 500 14px var(--font-mono); color: var(--accent-ink); }
.dhead h2 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; }
.fact { display: grid; gap: 2px; min-width: 0; }
.fact .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.fact .v { font-size: 13px; overflow-wrap: anywhere; }
.fact .v a { color: var(--info); text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--line); }
.actions .why { font-size: 12px; color: var(--muted); flex-basis: 100%; }
.stage { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 500; font-size: 12.5px; }
.stage .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stage.info { background: var(--info-soft); color: var(--info); } .stage.ok { background: var(--ok-soft); color: var(--ok); }
.stage.warn { background: var(--warn-soft); color: var(--warn); } .stage.bad { background: var(--bad-soft); color: var(--bad); }
.stage.accent { background: var(--accent-soft); color: var(--accent-ink); }
.grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.stack { display: grid; gap: 14px; min-width: 0; align-content: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.panel > header { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel > header h3 { margin: 0; font-size: 13px; font-weight: 600; }
.panel > header .sub { color: var(--muted); font-size: 12px; margin-left: auto; }
.panel .body { padding: 12px 14px; }
.panel.note-triage { border-color: var(--accent); }
.panel.note-triage > header { background: var(--accent-soft); }
.panel.note-question { border-color: var(--bad); }
.panel.note-question > header { background: var(--bad-soft); }
.runs { list-style: none; margin: 0; padding: 0; }
.runs li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.runs li:last-child { border-bottom: 0; }
.runs .rail { position: relative; }
.runs .rail::before { content: ""; position: absolute; left: 8px; top: 16px; bottom: -10px; width: 1px; background: var(--line); }
.runs li:last-child .rail::before { display: none; }
.runs .pip { width: 10px; height: 10px; border-radius: 50%; margin: 5px 0 0 3px; background: var(--faint); box-shadow: 0 0 0 3px var(--surface); }
.runs .pip.ok { background: var(--ok); } .runs .pip.bad { background: var(--bad); } .runs .pip.warn { background: var(--warn); } .runs .pip.muted { background: var(--faint); }
.runs .r1 { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.runs .r1 .agent { font-weight: 500; }
.runs .r1 .t { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.runs .r1 .dur { font-family: var(--font-mono); font-size: 12px; margin-left: auto; }
.runs .r1 a { text-decoration: none; color: var(--accent-ink); font-size: 12px; }
.runs .r2 { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.runs .r2 a { color: var(--info); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
.runs .r3 { font-family: var(--font-mono); font-size: 12px; color: var(--fg); margin-top: 2px; overflow-wrap: anywhere; } /* D-806: the session's model line */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13px; }
.kv .k { color: var(--muted); }
.kv a { color: var(--info); text-decoration: none; }
.checks { display: flex; flex-wrap: wrap; gap: 6px; }
.note { font-size: 12.5px; color: var(--muted); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.steps li { display: flex; gap: 10px; align-items: baseline; }
.steps .st { width: 86px; flex: none; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.steps .st.done { color: var(--ok); } .steps .st.in_progress { color: var(--warn); } .steps .st.blocked { color: var(--bad); }

/* agents */
.agents { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.agent { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; display: grid; gap: 9px; box-shadow: var(--shadow); min-width: 0; align-content: start; }
.agent .l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agent h3 { margin: 0; font-size: 14px; font-weight: 600; }
.agent .wired { margin-left: auto; }
.agent .trig { font-size: 12.5px; color: var(--muted); }
.agent .trig code { font: 12px var(--font-mono); background: var(--surface-2); padding: 0 5px; border-radius: 4px; }
.agent .last { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.agent .last .mono { font-size: 12px; }
.agent .last a { color: var(--accent-ink); text-decoration: none; }
.forge { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; display: grid; gap: 4px; min-width: 0; }
.tile .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); display: flex; gap: 6px; align-items: center; }
.tile .v { font-size: 17px; font-weight: 600; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tile .v small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tile .v .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); align-self: center; }
.tile .v .dot.bad { background: var(--bad); }

.legend { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.legend h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.legend ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; max-width: 90ch; }
.legend .mono { font-size: 12px; }

/* sign-in */
.login-body { display: grid; place-items: start center; }
.login { max-width: 460px; width: 100%; padding-block: 48px; display: grid; gap: 16px; }
.login p { color: var(--muted); margin: 0; line-height: 1.5; }

/* confirmation sheet */
.sheet { position: fixed; inset: 0; background: rgba(10, 14, 20, .45); display: grid; place-items: center; padding: 16px; z-index: 20; }
.sheet .box { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 18px 18px 16px; max-width: 440px; width: 100%; display: grid; gap: 12px; box-shadow: var(--shadow); }
.sheet h3 { margin: 0; font-size: 15px; }
.sheet p { margin: 0; color: var(--muted); font-size: 13px; }
.sheet .row { display: flex; gap: 8px; justify-content: flex-end; }
.sheet .check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fg); line-height: 1.4; }
/* D-819: the acceptance form — one criterion per row, the box aligned with the first line */
.accept-form { display: grid; gap: 6px; margin-top: 8px; }
.accept-form .check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--fg); }
.accept-form .check input { margin-top: 3px; flex: none; }
.accept-form .row { margin-top: 4px; }
.sheet .check input { margin-top: 3px; }
@media (max-width: 720px) {
  .board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; }
  .boardwrap { overflow: visible; }
  .runs .r1 .dur { margin-left: 0; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv .k { margin-top: 6px; }
}
@media (prefers-reduced-motion: no-preference) { .card, .btn { transition: border-color .12s ease, background .12s ease; } }

/* D-803: rendered markdown of the demand files */
.prose { font-size: 13px; line-height: 1.55; color: var(--fg); overflow-wrap: anywhere; min-width: 0; }
.prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; }
.prose h1 { font-size: 16px; margin: 14px 0 6px; } .prose h2 { font-size: 14px; margin: 14px 0 6px; }
.prose h3, .prose h4 { font-size: 13px; margin: 12px 0 4px; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose table, .prose pre { margin: 6px 0; }
.prose ul, .prose ol { padding-left: 22px; } .prose li + li { margin-top: 2px; }
.prose ul.contains-task-list { list-style: none; padding-left: 4px; }
.prose .task-list-item-checkbox { margin: 0 6px 0 0; vertical-align: -1px; }
.prose code { font: 12px var(--font-mono); background: var(--surface-2); padding: 0 4px; border-radius: 4px; }
.prose pre { font: 12px/1.45 var(--font-mono); background: var(--surface-2); padding: 8px 10px; border-radius: 6px; overflow: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; font-size: 12.5px; display: block; overflow: auto; max-width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.prose th { background: var(--surface-2); }
.prose blockquote { border-left: 3px solid var(--line); margin-left: 0; padding-left: 10px; color: var(--muted); }
.prose a { color: var(--info); text-decoration: none; } .prose a:hover { text-decoration: underline; }
.prose a.dlink { font-family: var(--font-mono); font-size: 12px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.prose img { max-width: 100%; }
details.step { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; }
details.step summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-size: 13px; list-style: none; }
details.step summary::-webkit-details-marker { display: none; }
details.step summary::before { content: "▸"; color: var(--faint); flex: none; width: 10px; }
details.step[open] summary::before { content: "▾"; }
details.step .st { width: 86px; flex: none; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
details.step .st.done { color: var(--ok); } details.step .st.in_progress { color: var(--warn); } details.step .st.blocked { color: var(--bad); }
details.step .prose { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* D-817: the questions form */
.questions fieldset.q { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; margin: 0 0 12px; }
.questions fieldset.q.blocking { border-color: var(--bad); }
.questions fieldset.q.answered { background: var(--surface-2); }
.questions legend { font-weight: 600; font-size: 13.5px; line-height: 1.35; padding: 0 6px; max-width: 100%; overflow-wrap: anywhere; }
.questions legend .q-id { font-weight: 400; font-size: 11px; color: var(--muted); margin-right: 8px; }
/* D-827 step 07: one option per row — the text, then the recommended chip, then its why on a
   second muted line; nothing shares a line with anything else, so long answers stay readable */
.questions .q-opt { display: grid; grid-template-columns: 16px 1fr; column-gap: 10px; row-gap: 2px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.questions .q-opt:first-of-type { border-top: none; }
.questions .q-opt input[type=radio] { margin: 4px 0 0; }
.questions .q-opt .q-text { overflow-wrap: anywhere; }
.questions .q-opt.rec .q-text { font-weight: 500; }
.questions .q-opt .q-why { grid-column: 2; font-weight: 400; font-size: 12px; color: var(--muted); line-height: 1.45; }
.questions .q-opt input[type=text] { font: inherit; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 6px; width: min(420px, 100%); margin-left: 4px; }
.questions .q-answer { font-size: 13px; }
.questions .actions { margin-top: 6px; }

/* D-818: the running agent's progress */
.progress.live header h3::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-left: 8px; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.phases { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.phases li { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.phases li.current .name { font-weight: 600; }
.phases .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); align-self: center; }
.phases .pip.ok { background: var(--ok); } .phases .pip.bad { background: var(--bad); } .phases .pip.warn { background: var(--warn); }
.phases .dur { font-size: 12px; } .phases .t { font-size: 11px; color: var(--muted); }
.progress .elapsed { font-size: 12.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.progress .bar { display: inline-block; width: 140px; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.progress .bar span { display: block; height: 100%; background: var(--accent); }
.progress .now { font-size: 13px; margin: 4px 0; }
.progress .k { color: var(--muted); font-size: 12px; margin-top: 6px; }
.progress ul.actions, .progress ul.files { margin: 2px 0 0; padding-left: 18px; font-size: 12px; }

/* D-823: the Now strip — what runs or waits right now, on every page, polled every 10 s */
.nowbar { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.nowbar .row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-block: 6px; font-size: 12.5px; min-height: 30px; }
.now-k { font: 600 11px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.now-item { display: inline-flex; align-items: center; gap: 6px; color: var(--fg); min-width: 0; overflow-wrap: anywhere; }
.now-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.now-item.warn .dot { background: var(--warn); animation: now-pulse 1.6s ease-in-out infinite; }
.now-item.muted { color: var(--muted); }
.now-item a { color: inherit; }
.now-at { margin-left: auto; color: var(--muted); font-size: 11.5px; }
@keyframes now-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- D-827 step 09: the control room — stacked panels, tables that scroll inside, never the page */
.cr { display: grid; gap: 14px; min-width: 0; }
.cr > * { min-width: 0; } /* a grid item defaults to min-width:auto and would widen the page to its table */
.cr .panel .body { min-width: 0; }
.cr .stats { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.cr .stats .chip { white-space: normal; max-width: 100%; overflow-wrap: anywhere; } /* a long merge-queue line wraps, never widens the page */
.tbl-wrap { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl thead th { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl td.line { font-family: var(--font-mono); font-size: 12px; overflow-wrap: anywhere; }
.tbl .muted { color: var(--muted); } .tbl .faint { color: var(--faint); }
.matrix td a { display: inline-block; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.matrix tr.totals th, .matrix tr.totals td { border-top: 1px solid var(--line-strong); }
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.needs li { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.needs li:last-child { border-bottom: none; }
.needs .l1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.needs .l1 .title { color: var(--fg); text-decoration: none; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.needs .l2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.needs .why { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.backlog td .title { color: var(--fg); text-decoration: none; }
details.legend summary { cursor: pointer; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* D-827 step 07: the sheet's text box and step field for the verbs */
.sheet .field { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); margin: 8px 0; }
.sheet .field textarea, .sheet .field input[type="text"] { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; }