/* Plain and readable at 1080p. Large type, high contrast, colour always paired with a word. */
:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1e232b;
  --line: #2c333d;
  --text: #e8ecf1;
  --muted: #9aa5b1;
  --info: #5aa9ff;
  --good: #3ecf8e;
  --warn: #f2b84b;
  --block: #ff6b6b;
  --human: #c792ff;
  --radius: 8px;
  font-size: 17px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.4; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; color: #d6e2ff; overflow-wrap: anywhere; }
a { color: var(--info); }
button { font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--info); }
button.on { background: var(--info); color: #081320; border-color: var(--info); font-weight: 600; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
input, textarea, select { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; }

/* Top bar */
.top { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 800; font-size: 1.3rem; letter-spacing: 0.02em; }
.modes, .controls, .group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.status { flex: 1; min-width: 260px; }
.pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; margin-right: 6px; }
.pill.mock { background: #24405f; }
.pill.replay { background: #4b3666; }
.pill.live.on { background: var(--good); color: #062014; }
.pill.live.off { background: #5a2f2f; }
.controls input[type="range"] { width: 200px; }
.controls .file input { display: none; }
.controls .file { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; background: var(--panel-2); }
.signin { display: flex; gap: 6px; align-items: center; }
.signin .signed-out, .signin .signed-in { display: flex; gap: 6px; align-items: center; }
.signin [hidden] { display: none; }
.signin.dim { opacity: 0.6; }
.toast { position: fixed; right: 16px; bottom: 16px; max-width: 520px; padding: 10px 14px; border-radius: var(--radius); background: #3a1f1f; border: 1px solid var(--block); z-index: 10; }
.toast.info { background: #1d2c3f; border-color: var(--info); }

/* Approvals strip */
#approvals:empty { display: none; }
.approvals { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px; background: #22183a; border-bottom: 2px solid var(--human); }
.approval { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.approval .what { flex: 1; min-width: 320px; }
.approval .answers { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 320px; }
.approval .answers label { display: flex; flex-direction: column; gap: 2px; }
.approval textarea { width: 100%; resize: vertical; }
button.approve { background: var(--human); color: #1a0d2b; font-weight: 800; border-color: var(--human); padding: 8px 18px; font-size: 1.05rem; }
.why { color: var(--warn); margin-left: 10px; }

/* Tabs */
.tabs { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.tabs .follow { margin-left: auto; color: var(--muted); }

/* Layouts */
main { display: grid; gap: 12px; padding: 12px 16px; align-items: start; }
.layout-overview { grid-template-columns: minmax(260px, 22%) 1fr minmax(320px, 30%); }
.layout-negotiations, .layout-plan, .layout-verdicts, .layout-deploys { grid-template-columns: 1fr minmax(300px, 26%); }
.layout-negotiations #col-b, .layout-plan #col-b, .layout-verdicts #col-b, .layout-deploys #col-b { display: none; }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.col:empty { display: none; }
@media (max-width: 1100px) { main { grid-template-columns: 1fr !important; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > header { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.panel > header h2 { margin: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.panel > .body { padding: 10px 12px; }

.chip { display: inline-block; padding: 0 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; border: 1px solid currentColor; white-space: nowrap; margin-right: 4px; }
.chip.info { color: var(--info); }
.chip.good { color: var(--good); }
.chip.warn { color: var(--warn); }
.chip.block { color: var(--block); }
.chip.human { color: var(--human); }
.chip.muted { color: var(--muted); }

/* Agents */
.agents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.agent { background: var(--panel-2); border-radius: var(--radius); padding: 8px 10px; border-left: 4px solid var(--good); }
.agent.idle { border-left-color: var(--warn); }
.agent.landed { border-left-color: var(--info); opacity: 0.85; }
.agent.expired { border-left-color: var(--muted); opacity: 0.6; }
.agent .row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.agent .name { font-size: 1.2rem; }
.agent .vendor { margin-right: auto; font-size: 0.82rem; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.agent .note { margin: 4px 0; }
.agent .meta { color: var(--muted); font-size: 0.9rem; justify-content: flex-start; }
.beat.fresh::before { content: "\25CF "; color: var(--good); }

/* Claims map */
.lane { margin-bottom: 8px; }
.lane .queue { margin-left: 8px; color: var(--warn); }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.9rem; }
.claims td.subject .kind { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; margin-right: 4px; }
.claims tr.block { background: rgba(255, 107, 107, 0.12); box-shadow: inset 4px 0 0 var(--block); }
.claims tr.warn { background: rgba(242, 184, 75, 0.1); box-shadow: inset 4px 0 0 var(--warn); }
.claims tr.good { box-shadow: inset 4px 0 0 var(--good); }

/* Negotiation threads */
.summary-line { margin: 0 0 8px; color: var(--muted); }
.thread { background: var(--panel-2); border-radius: var(--radius); margin-bottom: 10px; border-left: 4px solid var(--warn); }
.thread.open { border-left-color: var(--block); }
.thread.resolved { border-left-color: var(--good); }
.thread.escalated { border-left-color: var(--human); }
.thread.released { border-left-color: var(--muted); opacity: 0.7; }
.thread > summary { cursor: pointer; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; list-style: none; }
.thread > summary::-webkit-details-marker { display: none; }
.thread > summary::before { content: "\25B8"; color: var(--muted); }
.thread[open] > summary::before { content: "\25BE"; }
.sev { font-weight: 800; font-size: 0.8rem; padding: 0 6px; border-radius: 4px; }
.sev.block { background: var(--block); color: #2a0b0b; }
.sev.warn { background: var(--warn); color: #2a1d05; }
.thread .parties { font-weight: 600; }
.thread .outcome { color: var(--good); flex-basis: 100%; padding-left: 18px; }
.entries { list-style: none; margin: 0; padding: 0 10px 8px 10px; }
.entry { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 6px 0; border-top: 1px dashed var(--line); }
.entry .t { color: var(--muted); font-variant-numeric: tabular-nums; }
.entry.msg.side-a > div { border-left: 3px solid var(--info); padding-left: 8px; }
.entry.msg.side-b > div { border-left: 3px solid #f08cd0; padding-left: 8px; }
.entry .terms { margin: 2px 0; }
.entry blockquote { margin: 2px 0 0; color: #cfd6de; font-style: italic; }
.entry.accept .who strong::after { content: " \2713"; color: var(--good); }
.entry.reject .who strong::after { content: " \2717"; color: var(--block); }
.entry.settled { color: var(--good); }
.entry.settled .muted { color: var(--muted); }
.entry.escalated, .entry.settled.human { color: var(--human); }
.positions { margin: 4px 0; padding-left: 18px; color: var(--text); }
.next { padding: 6px 10px 10px 28px; color: var(--warn); }

/* Feed */
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.feed li { padding: 4px 8px; border-left: 3px solid var(--line); }
.feed li .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 6px; }
.feed li.good { border-left-color: var(--good); }
.feed li.warn { border-left-color: var(--warn); }
.feed li.block { border-left-color: var(--block); }
.feed li.human { border-left-color: var(--human); }
.feed li.info { border-left-color: var(--info); }

/* Work plan board */
.plan-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.plan-head h3 { margin: 0; }
.questions { margin: 8px 0; padding-left: 0; list-style: none; }
.questions .answer { color: var(--good); }
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.column { background: var(--panel-2); border-radius: var(--radius); padding: 8px; min-height: 120px; }
.column h4 { margin: 0 0 6px; color: var(--muted); font-size: 0.9rem; text-transform: uppercase; }
.column ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wp-card { background: var(--panel); border-radius: 6px; padding: 6px 8px; border-left: 4px solid var(--info); }
.wp-card.landed { border-left-color: var(--good); }
.wp-card.failed { border-left-color: var(--block); }
.wp-card.verifying { border-left-color: var(--warn); }
.wp-card .row { display: flex; justify-content: space-between; }
.wp-card .meta, .wp-card .deps { color: var(--muted); font-size: 0.9rem; }
.dep-done { color: var(--good); }
.dep-wait { color: var(--warn); }
.notes summary { cursor: pointer; color: var(--muted); margin-top: 8px; }

/* Verdicts */
.verdict { background: var(--panel-2); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px; border-left: 4px solid var(--good); }
.verdict.fail { border-left-color: var(--block); }
.verdict header { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.criteria .mark { font-size: 1.3rem; width: 32px; }
.criteria tr.met .mark { color: var(--good); }
.criteria tr.unmet .mark { color: var(--block); }
.evidence { margin: 2px 0 0; padding-left: 18px; color: var(--muted); }
.evidence .kind { text-transform: uppercase; font-size: 0.75rem; }
.regressions { color: var(--block); }

/* Deploys and stack */
.prod { font-size: 1.1rem; margin-bottom: 8px; }
.urls { margin: 0; padding-left: 16px; }
.stack { margin-top: 16px; }
.stack h3 { font-size: 1rem; }
.secret code { color: var(--warn); }

/* WP-16: replay timeline. Sticky along the bottom like a video player, marks in one lane per kind. */
.timeline { position: sticky; bottom: 0; z-index: 5; background: var(--panel); border-top: 1px solid var(--line); padding: 8px 16px 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35); }
.timeline[hidden] { display: none; }
.tl-track { position: relative; height: 34px; }
.tl-track #tl-marks, .tl-track .tl-marks { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 24px; pointer-events: none; }
.tl-marks .mk { fill: var(--muted); }
.tl-marks .mk.overlap { fill: var(--block); }
.tl-marks .mk.negotiation { fill: var(--warn); }
.tl-marks .mk.verdict { fill: #f08cd0; }
.tl-marks .mk.land { fill: var(--good); }
#scrub { --pos: 0%; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; margin: 0; height: 34px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: none; border: 0; padding: 0; }
#scrub::-webkit-slider-runnable-track { height: 6px; margin-top: 24px; border-radius: 3px; background: linear-gradient(to right, var(--info) var(--pos), var(--line) var(--pos)); }
#scrub::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
#scrub::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--info); }
#scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--text); border: 2px solid var(--info); }
#scrub::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 2px solid var(--info); }
#scrub:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.tl-info { display: flex; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.tl-time { color: var(--muted); flex: none; }
.tl-caption { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.tl-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tl-buttons, .tl-speeds, .tl-extra { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tl-buttons .play { min-width: 96px; font-weight: 700; }
.tl-extra { margin-left: auto; }
.tl-speed-select, .tl-more-toggle { display: none; }
.tl-extra .file input { display: none; }
.tl-extra .file { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; cursor: pointer; background: var(--panel-2); }
.tl-jumps { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.tl-jumps:empty { display: none; }
.tl-jump-label { color: var(--muted); font-size: 0.9rem; }
.jump { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 0 2px; }
.jump button { border: 0; background: transparent; padding: 2px 10px; font-size: 1.1rem; line-height: 1.2; align-self: stretch; }
.jump .what { font-size: 0.9rem; white-space: nowrap; }
.jump .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; background: var(--muted); }
.jump.overlap .dot { background: var(--block); }
.jump.negotiation .dot { background: var(--warn); }
.jump.verdict .dot { background: #f08cd0; }
.jump.land .dot { background: var(--good); }

/* Shared runs: what the run is, and that the link is read-only. Live: the link once shared. */
.runinfo:empty { display: none; }
.runinfo .run { display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--line); background: #1a1630; }
.runinfo .name { font-size: 1.1rem; }
.runinfo .digest { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8rem; }
.approvals.read-only { background: #1c1830; border-bottom-color: #4b3666; }
.sharelink { display: inline-flex; gap: 6px; align-items: center; }
.sharelink input { width: 16em; }

/* Phones: one column, tabs and wide tables scroll sideways, touch-sized controls, nothing wider than the screen. */
body { overflow-x: clip; }
.panel > .body { overflow-x: auto; }
.board { overflow-x: auto; }
@media (max-width: 760px) {
  :root { font-size: 15px; }
  .top { padding: 6px 10px; gap: 8px; }
  .brand { font-size: 1.1rem; }
  .status { min-width: 0; flex-basis: 100%; order: 3; font-size: 0.9rem; }
  .signin input#token { width: 9em; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; padding: 6px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs button, .tabs .follow { flex: none; white-space: nowrap; }
  main { padding: 8px 10px; gap: 8px; }
  .board { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
  .approval .what, .approval .answers { min-width: 0; }
  .entry { grid-template-columns: 60px 1fr; }
  .timeline { padding: 6px 10px calc(8px + env(safe-area-inset-bottom)); gap: 4px; }
  .tl-caption { font-size: 0.85rem; text-align: left; }
  .tl-controls { gap: 6px; flex-wrap: nowrap; }
  .tl-buttons { flex-wrap: nowrap; gap: 4px; }
  .tl-buttons .play { min-width: 84px; }
  .tl-speeds { display: none; }
  .tl-speed-select { display: block; min-height: 40px; padding: 4px 6px; }
  .tl-more-toggle { display: block; margin-left: auto; }
  .tl-extra { display: none; margin-left: 0; flex-basis: 100%; }
  .timeline.show-more .tl-controls { flex-wrap: wrap; }
  .timeline.show-more .tl-extra { display: flex; }
  .tl-extra .cap { font-size: 0.85rem; }
  .tl-jumps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tl-jump-label { display: none; }
  .jump { flex: none; }
  .runinfo .run { padding: 6px 10px; font-size: 0.9rem; gap: 2px 10px; }
  .runinfo .from, .runinfo .digest { display: none; }
  .toast { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}
@media (pointer: coarse) {
  .timeline button, .tabs button { min-height: 40px; min-width: 40px; }
  .jump button { min-height: 36px; }
  .tl-speeds button { padding: 4px 8px; }
  #scrub::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -9px; }
  #scrub::-moz-range-thumb { width: 22px; height: 22px; }
}