:root {
  color-scheme: light;
  --ink: #171918;
  --muted: #69706c;
  --faint: #979d99;
  --line: #dde1de;
  --line-strong: #c8ceca;
  --canvas: #f3f4f2;
  --paper: #fff;
  --paper-soft: #f8f9f8;
  --gpt: #173c57;
  --gpt-soft: #eaf2f6;
  --claude: #a64b2a;
  --claude-soft: #faeee8;
  --good: #167558;
  --good-soft: #e9f7f1;
  --warn: #a06416;
  --warn-soft: #fff4e2;
  --bad: #b63b38;
  --bad-soft: #fff0ef;
  --purple: #6746a5;
  --purple-soft: #f1edfb;
  --shadow: 0 18px 60px rgba(20, 24, 22, .16);
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); background: var(--canvas); font: 400 14px/1.5 var(--sans); -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(23, 60, 87, .2); outline-offset: 2px; }

.topbar {
  position: sticky; z-index: 20; top: 0; display: grid; min-height: 66px; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; padding: 10px 24px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(14px);
}
.brand, .run-state, .top-actions, .brand > div, .run-state > div { display: flex; align-items: center; }
.brand, .run-state { gap: 10px; }
.brand > div, .run-state > div { align-items: flex-start; flex-direction: column; line-height: 1.2; }
.brand strong, .run-state strong { font-size: 12px; }
.brand small, .run-state small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.brand-mark { display: grid; width: 35px; height: 35px; place-items: center; color: #fff; border-radius: 6px; background: var(--ink); font: 800 10px/1 var(--mono); }
.run-state { justify-self: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-soft); }
.pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.pulse::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--good); border-radius: 50%; animation: pulse 1.8s infinite; }
.pulse[data-state="offline"] { background: var(--bad); }
.pulse[data-state="offline"]::after { border-color: var(--bad); animation: none; }
.pulse[data-state="paused"] { background: var(--warn); }
.pulse[data-state="paused"]::after { border-color: var(--warn); animation: none; }
@keyframes pulse { 0%,100% { opacity: 0; transform: scale(.65); } 45% { opacity: .5; transform: scale(1); } }
.top-actions { justify-content: flex-end; gap: 7px; }
.live-toggle { display: flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 9px; color: var(--muted); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); font-size: 9px; font-weight: 700; cursor: pointer; }
.live-toggle input { width: 13px; height: 13px; margin: 0; accent-color: var(--good); }
.chat-button { display: inline-flex; align-items: center; gap: 6px; color: var(--gpt); border-color: #b9cbd7; background: var(--gpt-soft); }
.request-button { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); border-color: #cfc2e7; background: var(--purple-soft); }
.request-button span, .chat-button span { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 9px; background: rgba(255,255,255,.8); font: 700 7px/1 var(--mono); }
.chat-button span { display: grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; color: #fff; border-radius: 10px; background: var(--bad); font: 750 7px/1 var(--mono); }
.chat-button span[hidden] { display: none; }
.button { min-height: 34px; padding: 0 12px; border: 1px solid transparent; border-radius: 5px; font-size: 10px; font-weight: 750; }
.button.primary { color: #fff; border-color: var(--gpt); background: var(--gpt); }
.button.secondary { color: var(--ink); border-color: var(--line-strong); background: var(--paper); }
.button.danger { color: var(--bad); border-color: #efc9c6; background: var(--bad-soft); }
.button:hover { filter: brightness(.97); }

main { padding: 34px 24px 56px; }
.hero { display: grid; max-width: 1680px; grid-template-columns: minmax(360px, .9fr) minmax(580px, 1.1fr); align-items: end; gap: 50px; margin: 0 auto 24px; }
.eyebrow { margin: 0; color: var(--gpt); font: 750 9px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 720px; margin: 10px 0 0; font-size: clamp(34px, 4.5vw, 62px); line-height: .98; letter-spacing: -.05em; }
.hero-copy { max-width: 720px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.agent-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.agent { min-height: 178px; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.agent.gpt { box-shadow: inset 0 3px 0 var(--gpt); }
.agent.claude { box-shadow: inset 0 3px 0 var(--claude); }
.agent-head { display: flex; align-items: center; gap: 10px; }
.agent-head > span { display: grid; width: 30px; height: 30px; place-items: center; color: #fff; border-radius: 5px; font: 800 9px/1 var(--mono); }
.agent.gpt .agent-head > span { background: var(--gpt); }
.agent.claude .agent-head > span { background: var(--claude); }
.agent-head strong { font-size: 12px; }
.agent p { min-height: 42px; margin: 14px 0 16px; color: var(--muted); font-size: 10.5px; }
.agent dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }
.agent dl div { padding-top: 10px; }
.agent dt { color: var(--faint); font-size: 8px; text-transform: uppercase; }
.agent dd { margin: 2px 0 0; font: 700 15px/1 var(--mono); }

.metrics { display: grid; max-width: 1680px; grid-template-columns: repeat(4, 1fr); margin: 0 auto; border: 1px solid var(--line); border-radius: 7px 7px 0 0; background: var(--paper); }
.metrics article { min-height: 92px; padding: 15px 18px; }
.metrics article + article { border-left: 1px solid var(--line); }
.metrics span, .metrics small, .metrics strong { display: block; }
.metrics span { color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.metrics strong { margin: 6px 0 3px; font: 700 24px/1 var(--mono); }
.metrics small { color: var(--muted); font-size: 9px; }

.live-strip { display: flex; max-width: 1680px; min-height: 43px; align-items: center; gap: 16px; margin: 8px auto; padding: 7px 12px; color: var(--good); border: 1px solid #c8e7da; border-radius: 6px; background: var(--good-soft); }
.live-strip > div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.live-strip strong { font-size: 9px; }
.live-strip p { flex: 1; margin: 0; color: var(--muted); font-size: 8.5px; }
.live-strip dl { display: flex; gap: 18px; margin: 0; }
.live-strip dl div { display: flex; align-items: baseline; gap: 4px; }
.live-strip dt { color: var(--faint); font-size: 7px; text-transform: uppercase; }
.live-strip dd { margin: 0; color: var(--ink); font: 650 8px/1 var(--mono); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(22,117,88,.1); }
.live-strip[data-state="offline"] { color: var(--bad); border-color: #efc9c6; background: var(--bad-soft); }
.live-strip[data-state="offline"] .live-dot { background: var(--bad); box-shadow: 0 0 0 4px rgba(182,59,56,.1); }
.live-strip[data-state="paused"] { color: var(--warn); border-color: #efd6b4; background: var(--warn-soft); }
.live-strip[data-state="paused"] .live-dot { background: var(--warn); box-shadow: 0 0 0 4px rgba(160,100,22,.1); }

.host-strip {
  display: grid; max-width: 1680px; min-height: 48px; grid-template-columns: auto auto minmax(180px, 1fr) auto;
  align-items: center; gap: 20px; margin: 8px auto; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: var(--paper);
}
.host-heading { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.host-heading strong { font-size: 9px; }
.host-heading small { color: var(--faint); font-size: 7px; }
.host-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }
.host-strip dl { display: flex; gap: 16px; margin: 0; }
.host-strip dl div { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.host-strip dt { color: var(--faint); font-size: 7px; text-transform: uppercase; }
.host-strip dd { margin: 0; color: var(--ink); font: 650 8px/1 var(--mono); }
.host-strip p { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); font: 500 8px/1.4 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.host-infra-open { min-height: 28px; padding: 0 9px; font-size: 8px; }
.host-strip[data-guard="warning"] { border-color: #efd6b4; background: var(--warn-soft); }
.host-strip[data-guard="critical"] { border-color: #efc9c6; background: var(--bad-soft); }

.toolbar { display: flex; max-width: 1680px; align-items: end; gap: 10px; margin: 0 auto 14px; padding: 12px 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 7px 7px; background: var(--paper-soft); }
.toolbar label span, .modal-body label > span { display: block; margin-bottom: 5px; color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
.toolbar input, .toolbar select, .modal-body input, .modal-body select, .modal-body textarea { width: 100%; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); }
.toolbar input, .toolbar select, .modal-body input, .modal-body select { height: 34px; padding: 0 9px; }
.toolbar label:first-child { width: min(420px, 38vw); }
.toolbar label:not(:first-child) { width: 165px; }
.legend { display: flex; align-items: center; gap: 14px; margin-left: auto; padding-bottom: 8px; color: var(--muted); font-size: 9px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.owner-dot, .blocked-dot { width: 7px; height: 7px; border-radius: 50%; }
.owner-dot.gpt { background: var(--gpt); }
.owner-dot.claude { background: var(--claude); }
.owner-dot.coordinator { background: var(--purple); }
.owner-dot.other { background: var(--line-strong); }
.blocked-dot { border: 2px solid var(--warn); background: #fff; }

.deck-view-bar { display: none; }
.agent-now {
  max-width: 1680px; margin: 0 auto 12px; padding: 12px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--paper);
}
.agent-now-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.agent-now-head .eyebrow { margin: 0 0 3px; }
.agent-now-head h2 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.agent-now-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.agent-now-card { min-width: 0; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--gpt); border-radius: 6px; background: var(--paper-soft); }
.agent-now-card[data-agent-now="claude"] { border-left-color: var(--claude); }
.agent-now-card > header { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.agent-now-avatar { display: grid; width: 30px; height: 30px; place-items: center; color: #fff; border-radius: 5px; background: var(--gpt); font: 750 8px/1 var(--mono); }
.agent-now-avatar.claude { background: var(--claude); }
.agent-now-card header p, .agent-now-card header h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-now-card header p { color: var(--faint); font-size: 7px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.agent-now-card header h3 { margin-top: 2px; font-size: 10px; }
.agent-now-badge { padding: 4px 6px; color: var(--muted); border-radius: 4px; background: var(--paper); font: 700 7px/1 var(--mono); text-transform: uppercase; }
.agent-now-card[data-state="online"] .agent-now-badge { color: var(--good); background: var(--good-soft); }
.agent-now-card[data-state="limited"] .agent-now-badge { color: var(--warn); background: var(--warn-soft); }
.agent-now-card[data-state="offline"] .agent-now-badge { color: var(--bad); background: var(--bad-soft); }
.agent-now-copy { margin: 8px 0; overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.agent-now-card footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.agent-now-card footer > span { min-width: 0; overflow: hidden; color: var(--faint); font: 500 7.5px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.agent-now-card footer .button { min-height: 26px; padding: 0 8px; font-size: 7.5px; }

.workspace { max-width: 1680px; margin: 0 auto; }
.stack-tabs { display: none; }
.board-wrap { min-width: 0; margin: 0; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 0 18px; scrollbar-gutter: stable both-edges; scroll-snap-type: x proximity; scroll-padding-left: 2px; }
.board { display: grid; min-width: 2074px; grid-template-columns: repeat(7, minmax(270px, 1fr)); gap: 10px; align-items: start; padding: 0 20px 0 2px; }
.column { min-width: 0; min-height: 550px; scroll-margin-top: 78px; scroll-snap-align: start; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.55); }
.column > header { display: flex; height: 48px; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--paper); border-radius: 7px 7px 0 0; }
.column > header div { display: flex; align-items: center; gap: 8px; }
.column > header span { color: var(--faint); font: 600 8px/1 var(--mono); }
.column h2 { margin: 0; font-size: 11px; letter-spacing: -.01em; }
.column > header b { display: grid; min-width: 22px; height: 22px; place-items: center; padding: 0 5px; border-radius: 4px; background: var(--paper-soft); font: 700 9px/1 var(--mono); }
.column > p { margin: 0; padding: 8px 12px; color: var(--faint); border-bottom: 1px solid var(--line); font-size: 8.5px; }
.column[data-status="planned"] { box-shadow: inset 0 3px 0 var(--faint); }
.column[data-status="current"] { box-shadow: inset 0 3px 0 var(--gpt); }
.column[data-status="review"] { box-shadow: inset 0 3px 0 var(--purple); }
.column[data-status="diverted"] { box-shadow: inset 0 3px 0 var(--warn); }
.column[data-status="done"] { box-shadow: inset 0 3px 0 var(--good); }
.dropzone { min-height: 445px; padding: 9px; }
.dropzone:empty { display: grid; place-items: center; }
.dropzone:empty::after { content: "Nothing in this stack"; color: var(--faint); font-size: 9px; }
.dropzone.drag-over { background: rgba(23,60,87,.06); outline: 2px dashed rgba(23,60,87,.25); outline-offset: -5px; }
.stack-pager { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; background: var(--paper); }
.stack-pager[hidden] { display: none; }
.stack-pager button { display: grid; min-width: 28px; height: 28px; place-items: center; padding: 0 8px; color: var(--gpt); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper); font: 700 13px/1 var(--mono); touch-action: manipulation; }
.stack-pager button:disabled { color: var(--faint); border-color: var(--line); background: var(--paper-soft); cursor: default; }
.stack-pager span { min-width: 0; overflow: hidden; color: var(--faint); font: 650 8px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.task-card { min-width: 0; margin-bottom: 8px; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-left: 3px solid var(--gpt); border-radius: 6px; background: var(--paper); box-shadow: 0 1px 0 rgba(20,24,22,.03); cursor: grab; }
.task-card[data-owner="claude"] { border-left-color: var(--claude); }
.task-card.dragging { opacity: .4; }
.task-top, .task-meta, .task-card footer { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.task-id { color: var(--faint); font: 600 8px/1 var(--mono); letter-spacing: .04em; }
.effort-pill { padding: 3px 5px; color: var(--purple); border-radius: 3px; background: var(--purple-soft); font: 700 7.5px/1 var(--mono); text-transform: uppercase; }
/* Status light, top right beside the effort chip: pulsing while the work is running,
   held for the waiting states, a checkmark once it is done. */
.task-top { justify-content: flex-start; }
.task-top .task-id { margin-right: auto; }
.task-light { display: grid; width: 15px; height: 15px; flex: 0 0 15px; place-items: center; color: var(--faint); border: 1px solid transparent; border-radius: 50%; background: var(--paper-soft); font: 800 8px/1 var(--mono); }
.task-card[data-status="planned"] .task-light { color: var(--muted); border-color: var(--line-strong); }
.task-card[data-status="pending"] .task-light { border-color: var(--line); }
.task-card[data-status="next"] .task-light { color: var(--gpt); border-color: #cfe0ea; background: var(--gpt-soft); }
.task-card[data-status="diverted"] .task-light { color: var(--warn); border-color: #efd6b4; background: var(--warn-soft); }
.task-card[data-status="done"] .task-light { color: var(--good); border-color: #c8e7da; background: var(--good-soft); }
.task-card[data-status="review"] .task-light { color: var(--purple); background: var(--purple-soft); animation: light-hold 2.4s ease-in-out infinite; }
.task-card[data-status="current"] .task-light { background: var(--good-soft); }
.task-card[data-status="current"] .task-light::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: light-flash 1.4s ease-in-out infinite; }
@keyframes light-flash { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(22,117,88,.5); } 55% { opacity: .3; box-shadow: 0 0 0 4px rgba(22,117,88,0); } }
@keyframes light-hold { 50% { box-shadow: 0 0 0 4px rgba(103,70,165,.12); } }
.task-card h3 { margin: 10px 0 5px; overflow-wrap: anywhere; font-size: 11px; line-height: 1.25; }
.task-copy { display: -webkit-box; min-height: 32px; margin: 0 0 10px; overflow: hidden; overflow-wrap: anywhere; color: var(--muted); font-size: 9px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-meta { min-width: 0; justify-content: flex-start; }
.task-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; margin-top: 9px; }
.task-progress > span { height: 4px; overflow: hidden; border-radius: 4px; background: var(--paper-soft); }
.task-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gpt); transition: width .55s cubic-bezier(.22,.61,.36,1); }
.task-card[data-owner="claude"] .task-progress i { background: var(--claude); }
.task-progress b { color: var(--faint); font: 650 7px/1 var(--mono); transition: color .2s ease; }
/* A live move is announced for about a second, then the card goes quiet again. */
.task-progress.moved > span { box-shadow: 0 0 0 2px rgba(23,60,87,.1); }
.task-progress.moved b { color: var(--gpt); }
.task-card[data-owner="claude"] .task-progress.moved > span { box-shadow: 0 0 0 2px rgba(166,75,42,.12); }
.task-card[data-owner="claude"] .task-progress.moved b { color: var(--claude); }

/* Mini instruction feed: newest first, three lines, one line each, never wrapping. */
.task-log { display: grid; gap: 3px; margin: 8px 0 0; padding: 6px 7px; list-style: none; border: 1px solid var(--line); border-radius: 5px; background: var(--paper-soft); }
.task-log[hidden] { display: none; }

/* Activity sparkline. Deck view only: the default board already shows the
   activity log in full on the card, and the deck hides that log for space —
   which is exactly where a shape you can read from across the room earns its
   place. */
.task-spark { display: none; margin: 0; }
.task-spark[hidden] { display: none; }
.task-spark svg { display: block; width: 100%; height: 26px; overflow: visible; }
/* Without non-scaling-stroke the line thickens horizontally and thins
   vertically as the card stretches, because preserveAspectRatio is "none". */
/* Line and fill both take the OWNING AGENT's colour, following the same
   [data-owner] convention the border, progress bar and owner chip already use:
   gpt is the default, claude overrides. The area is the flat -soft tint rather
   than an opacity on the line colour, so it sits on the card's paper exactly as
   the owner chip does instead of introducing a second, slightly-off shade. */
.task-spark polyline {
  fill: none; stroke: var(--gpt); stroke-width: 1.5;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.task-spark polygon { fill: var(--gpt-soft); stroke: none; }
.task-card[data-owner="claude"] .task-spark polyline { stroke: var(--claude); }
.task-card[data-owner="claude"] .task-spark polygon { fill: var(--claude-soft); }
/* Cost per turn. Amber and dashed, in neither agent's colour, because it is not
   the agent's series — it is the same global curve on every card. Dashes rather
   than a second solid line so the two are never read as one shape, and thinner
   so the activity line stays the subject. */
.task-spark .spark-cost {
  fill: none; stroke: var(--warn); stroke-width: 1; stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round; opacity: .85;
}
.task-card[data-owner="claude"] .task-spark .spark-cost { stroke: var(--warn); }
.task-spark figcaption { display: flex; justify-content: space-between; gap: 6px; color: var(--faint); font: 650 6.5px/1.4 var(--mono); }
.task-spark .spark-cost-label { color: var(--warn); white-space: nowrap; }
.task-log li { display: grid; min-width: 0; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; gap: 6px; }
.task-log li:nth-child(n+4) { display: none; }
.task-log time { color: var(--faint); font: 650 6.5px/1.5 var(--mono); text-align: right; white-space: nowrap; }
.task-log span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.task-log li:first-child time { color: var(--gpt); }
.task-log li:first-child span { color: var(--ink); }
.task-card[data-owner="claude"] .task-log li:first-child time { color: var(--claude); }
.owner-chip { padding: 3px 6px; color: var(--gpt); border-radius: 3px; background: var(--gpt-soft); font-size: 7.5px; font-weight: 750; text-transform: uppercase; }
.task-card[data-owner="claude"] .owner-chip { color: var(--claude); background: var(--claude-soft); }
.model { min-width: 0; overflow: hidden; color: var(--faint); font: 500 7.5px/1 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.dependency { display: none; margin-top: 8px; padding: 5px 7px; color: var(--warn); border: 1px solid #efd6b4; border-radius: 4px; background: var(--warn-soft); font-size: 8px; }
.dependency.visible { display: block; }
.task-card footer { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.task-card footer .evidence { min-width: 0; overflow: hidden; color: var(--faint); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.task-card footer button { flex: 0 0 auto; padding: 0; color: var(--gpt); border: 0; background: transparent; font-size: 8px; font-weight: 750; }

.chat-backdrop, .request-backdrop { position: fixed; z-index: 49; inset: 0; background: rgba(15,18,17,.36); backdrop-filter: blur(1px); opacity: 1; }
.chat-backdrop[hidden], .request-backdrop[hidden] { display: none; }
.agent-feed { position: fixed; z-index: 50; top: 0; right: 0; display: flex; width: min(410px, calc(100vw - 28px)); height: 100vh; min-height: 0; flex-direction: column; overflow: hidden; border-left: 1px solid var(--line); background: var(--paper); box-shadow: -18px 0 55px rgba(20,24,22,.2); transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.agent-feed[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform .22s ease; }
.request-inbox { position: fixed; z-index: 50; top: 0; left: 0; display: flex; width: min(440px, calc(100vw - 28px)); height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: var(--paper); box-shadow: 18px 0 55px rgba(20,24,22,.2); transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
.request-inbox[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform .22s ease; }
.request-live { display: flex; align-items: center; gap: 5px; color: var(--purple); font: 700 8px/1 var(--mono); text-transform: uppercase; }
.request-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 4px var(--purple-soft); }
.request-summary { padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.request-summary > p { margin: 0 0 9px; color: var(--muted); font-size: 8.5px; }
.request-summary dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; }
.request-summary dl div { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); }
.request-summary dt { color: var(--faint); font-size: 6.5px; text-transform: uppercase; }
.request-summary dd { margin: 0; font: 750 9px/1 var(--mono); }
.request-list { flex: 1; min-height: 0; overflow-y: auto; padding: 10px; background: linear-gradient(180deg, #fafbf9 0%, #f4f6f3 100%); scrollbar-width: thin; }
.request-empty { margin: 24px 12px; color: var(--faint); font-size: 9px; text-align: center; }
.request-card { margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--faint); border-radius: 6px; background: var(--paper); }
.request-card[data-status="reviewed"] { border-left-color: var(--purple); }
.request-card[data-status="picking_up"] { border-left-color: var(--good); }
.request-card[data-priority="p1"] { box-shadow: inset 0 2px 0 rgba(182,59,56,.7); }
.request-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.request-signal { width: 7px; height: 7px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); }
.request-card[data-status="reviewed"] .request-signal { border-color: var(--purple); background: var(--purple-soft); }
.request-card[data-status="picking_up"] .request-signal { border-color: var(--good); background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.request-card > header strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.request-card > header time { color: var(--faint); font: 600 6.5px/1 var(--mono); white-space: nowrap; }
.request-card > p { margin: 8px 0 10px; color: var(--ink); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; }
.request-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.request-controls label { color: var(--faint); font-size: 6.5px; font-weight: 700; text-transform: uppercase; }
.request-controls select { width: 100%; height: 30px; margin-top: 3px; padding: 0 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; background: var(--paper-soft); font-size: 8px; }
.request-card > footer { display: flex; justify-content: flex-end; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.request-card > footer button { min-height: 26px; padding: 0 7px; color: var(--gpt); border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 7px; font-weight: 750; }
.request-card > footer button:last-child { color: #fff; border-color: var(--gpt); background: var(--gpt); }
.request-card > footer button:disabled { color: var(--good); border-color: #c8e7da; background: var(--good-soft); }
.request-composer { padding: 11px 12px calc(11px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--paper); }
.request-composer > label { display: block; margin-bottom: 5px; color: var(--faint); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.request-composer textarea { width: 100%; resize: none; padding: 8px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 5px; font-size: 9px; line-height: 1.4; }
.request-composer footer { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 7px; }
.request-composer footer label { display: flex; flex-direction: column; gap: 3px; color: var(--faint); font-size: 6.5px; font-weight: 700; text-transform: uppercase; }
.request-composer select { height: 29px; padding: 0 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-soft); font-size: 8px; }
.feed-head { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.feed-head h2 { margin: 5px 0 0; font-size: 16px; letter-spacing: -.025em; }
.feed-head-actions { display: flex; align-items: center; gap: 9px; }
.feed-live { display: flex; align-items: center; gap: 5px; color: var(--good); font: 700 8px/1 var(--mono); text-transform: uppercase; }
.feed-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(22,117,88,.1); }
.feed-close { display: grid; width: 30px; height: 30px; place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--paper); font-size: 18px; line-height: 1; }
.feed-presence { display: flex; min-height: 36px; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 14px; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper-soft); font-size: 8px; }
.feed-presence span { display: flex; align-items: center; gap: 4px; }
.feed-presence span b { color: var(--good); font: 650 6.5px/1 var(--mono); text-transform: uppercase; }
.feed-presence span.quiet { color: var(--faint); }
.feed-presence span.quiet i { background: var(--line-strong); }
.feed-presence span.quiet b { color: var(--muted); }
.feed-presence span.delayed b { color: var(--warn); }
.feed-presence span.unavailable { color: var(--faint); }
.feed-presence span.unavailable i { background: var(--line-strong); }
.feed-presence span.unavailable b { color: var(--bad); }
.feed-presence span.takeover b { color: var(--warn); }
.feed-presence strong { margin-left: auto; color: var(--faint); font: 600 7.5px/1 var(--mono); }
/* Agents in action: one row per task actually in flight, so several agents working at
   once read as several rows instead of collapsing into one model name. */
.agent-action { border-bottom: 1px solid var(--line); background: var(--paper); }
.agent-action h3 { margin: 0; font: inherit; }
.agent-action h3 button { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 7px; padding: 0 14px; color: var(--muted); border: 0; background: none; text-align: left; }
.agent-action-live { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--line-strong); }
.agent-action.busy .agent-action-live { background: var(--good); box-shadow: 0 0 0 3px rgba(22,117,88,.14); animation: pulse 1.8s infinite; }
.agent-action h3 strong { font-size: 8.5px; letter-spacing: .01em; white-space: nowrap; }
.agent-action h3 b { min-width: 0; overflow: hidden; padding: 3px 5px; color: var(--gpt); border-radius: 4px; background: var(--gpt-soft); font: 700 6.5px/1 var(--mono); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.agent-action.busy h3 b { color: var(--good); background: var(--good-soft); }
.agent-action h3 i { margin-left: auto; color: var(--faint); font-size: 9px; font-style: normal; transition: transform .18s ease; }
.agent-action[data-open="false"] h3 i { transform: rotate(-90deg); }
.agent-action[data-open="false"] .agent-action-list, .agent-action[data-open="false"] .agent-action-empty { display: none; }
/* Bounded on purpose: the strip reports who is working, the conversation keeps the room. */
.agent-action-list { max-height: min(184px, 20dvh); overflow-y: auto; padding: 0 8px 7px; background: var(--paper-soft); scrollbar-width: thin; }
.agent-action-list:empty { display: none; }
.agent-action-empty { margin: 0; padding: 0 14px 9px; color: var(--faint); background: var(--paper-soft); font-size: 8px; }
.agent-action-empty[hidden] { display: none; }
.agent-action-item { display: grid; width: 100%; grid-template-columns: 14px minmax(0,1fr) auto; align-items: start; gap: 3px 7px; margin-top: 6px; padding: 7px 8px; text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--gpt); border-radius: 5px; background: var(--paper); }
.agent-action-item[data-owner="claude"] { border-left-color: var(--claude); }
.agent-action-item[data-status="review"] { border-left-color: var(--purple); }
.agent-action-item:hover { border-color: var(--line-strong); background: #fff; }
.agent-action-signal { position: relative; width: 14px; height: 14px; margin-top: 1px; border-radius: 50%; background: var(--gpt-soft); }
.agent-action-signal::after { content: ""; position: absolute; inset: 2px; border: 1.5px solid rgba(23,60,87,.18); border-top-color: var(--gpt); border-radius: 50%; animation: task-spin 1s linear infinite; }
.agent-action-item[data-owner="claude"] .agent-action-signal { background: var(--claude-soft); }
.agent-action-item[data-owner="claude"] .agent-action-signal::after { border-color: rgba(166,75,42,.18); border-top-color: var(--claude); }
.agent-action-item[data-status="review"] .agent-action-signal { background: var(--purple-soft); }
.agent-action-item[data-status="review"] .agent-action-signal::after { border-color: rgba(103,70,165,.24); border-top-color: var(--purple); animation: none; }
.agent-action-copy { min-width: 0; }
.agent-action-copy > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-action-copy strong { font-size: 8.5px; }
.agent-action-copy .agent-action-line { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.agent-action-copy small { margin-top: 2px; color: var(--faint); font: 500 6.8px/1 var(--mono); }
.agent-action-item > time { color: var(--gpt); font: 700 6.8px/1.6 var(--mono); white-space: nowrap; }
.agent-action-item[data-owner="claude"] > time { color: var(--claude); }
.agent-action-item[data-status="review"] > time { color: var(--purple); }

.feed-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 10px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.feed-tabs button { position: relative; display: flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; color: var(--faint); border: 0; border-bottom: 2px solid transparent; background: none; font-size: 9px; font-weight: 750; }
.feed-tabs button.active { color: var(--gpt); border-bottom-color: var(--gpt); }
.feed-tabs button span { display: grid; min-width: 18px; height: 16px; place-items: center; padding: 0 4px; border-radius: 9px; background: var(--paper-soft); font: 650 7px/1 var(--mono); }
.feed-tabs button.active span { color: var(--gpt); background: var(--gpt-soft); }
.feed-panel { flex: 1; min-height: 0; }
.feed-panel[hidden] { display: none; }
.chat-panel { display: flex; flex-direction: column; }
.message-scroll { position: relative; display: flex; flex: 1; min-height: 0; }
.message-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 12px; background: linear-gradient(180deg, #fafbf9 0%, #f4f6f3 100%); scrollbar-width: thin; overscroll-behavior: contain; }
/* Offered, never forced: new messages while the reader is scrolled up wait behind this. */
.message-jump { position: absolute; z-index: 4; right: 12px; bottom: 10px; display: flex; min-height: 26px; align-items: center; gap: 5px; padding: 0 10px; color: #fff; border: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 6px 18px rgba(20,24,22,.28); font-size: 7.5px; font-weight: 750; }
.message-jump[hidden] { display: none; }
.message-jump i { font-size: 9px; font-style: normal; line-height: 1; }
.message { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 13px; }
.message.user { flex-direction: row-reverse; }
.message.system { justify-content: center; }
.message-avatar { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; color: #fff; border-radius: 6px; background: var(--gpt); font: 800 7px/1 var(--mono); }
.message.claude .message-avatar { background: var(--claude); }
.message.user .message-avatar { background: var(--good); }
.message.system .message-avatar { display: none; }
.message-content { max-width: calc(100% - 36px); }
.message.system .message-content { max-width: 92%; text-align: center; }
.message-content > header, .message-content > footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.message-content > header { margin: 0 3px 4px; }
.message-content > header strong { font-size: 8px; }
.message-content > header time { color: var(--faint); font: 500 7px/1 var(--mono); }
.message-content > p { margin: 0; padding: 8px 10px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px 10px 10px 10px; background: var(--paper); font-size: 9px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.gpt .message-content > p { border-left: 2px solid var(--gpt); }
.message.claude .message-content > p { border-left: 2px solid var(--claude); background: var(--claude-soft); }
.message.to-user .message-content > p { border-color: #d6b870; box-shadow: 0 0 0 2px rgba(160,100,22,.08); }
.message.to-user .message-status { color: var(--warn); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.message.user .message-content > p { color: #fff; border-color: var(--gpt); border-radius: 10px 4px 10px 10px; background: var(--gpt); }
.message.system .message-content > p { padding: 5px 9px; color: var(--muted); border-style: dashed; border-radius: 20px; background: rgba(255,255,255,.7); font-size: 8px; }
.message-content blockquote { margin: 0 0 4px; padding: 5px 7px; overflow: hidden; color: var(--muted); border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.65); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.message-content > footer { margin: 4px 3px 0; }
.message-status { color: var(--faint); font-size: 7px; }
.message.user .message-status { color: var(--good); font-weight: 700; }
.message-content > footer button { padding: 0; color: var(--gpt); border: 0; background: none; font-size: 7px; font-weight: 700; }
.reply-context { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--gpt-soft); }
.reply-context[hidden] { display: none; }
.reply-context div { min-width: 0; }
.reply-context span, .reply-context strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-context span { color: var(--faint); font-size: 7px; text-transform: uppercase; }
.reply-context strong { margin-top: 2px; color: var(--gpt); font-size: 8px; }
.reply-context button { color: var(--gpt); border: 0; background: none; font-size: 16px; }
.message-composer { padding: 11px 12px; border-top: 1px solid var(--line); background: var(--paper); }
.message-composer > label { display: block; margin-bottom: 5px; color: var(--faint); font-size: 7.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.message-composer textarea { width: 100%; resize: none; padding: 8px 9px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper-soft); font-size: 9px; line-height: 1.4; }
.message-composer footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.message-composer small { color: var(--faint); font-size: 7px; line-height: 1.3; }
.message-send-options { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.chat-track { display: flex; align-items: center; gap: 5px; color: var(--purple); font-size: 7.5px; font-weight: 750; }
.chat-track input { width: 13px; height: 13px; margin: 0; accent-color: var(--purple); }
.message-composer .button { min-height: 29px; flex: 0 0 auto; }
.task-feed-panel { overflow: hidden; background: var(--paper-soft); }
.task-feed-panel > header { display: flex; min-height: 51px; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper); }
.task-feed-panel > header div { min-width: 0; }
.task-feed-panel > header strong, .task-feed-panel > header small { display: block; }
.task-feed-panel > header strong { font-size: 9px; }
.task-feed-panel > header small { margin-top: 2px; color: var(--faint); font-size: 7px; }
.task-feed-panel > header > span { padding: 4px 6px; color: var(--good); border-radius: 4px; background: var(--good-soft); font: 700 7px/1 var(--mono); white-space: nowrap; }
.task-feed-list { height: calc(100% - 51px); overflow-y: auto; padding: 9px; scrollbar-width: thin; }
.task-feed-item { display: grid; width: 100%; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 8px; margin-bottom: 6px; padding: 9px; text-align: left; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: 6px; background: var(--paper); }
.task-feed-item:hover { border-color: var(--line-strong); background: #fff; }
.task-feed-item.status-planned { border-left-color: var(--faint); }
.task-feed-item.status-current { border-left-color: var(--gpt); }
.task-feed-item.status-review { border-left-color: var(--purple); }
.task-feed-item.status-diverted { border-left-color: var(--warn); opacity: .78; }
.task-feed-item.status-done { border-left-color: var(--good); }
.task-signal { display: grid; width: 25px; height: 25px; place-items: center; color: var(--muted); border-radius: 50%; background: var(--paper-soft); font: 800 10px/1 var(--mono); }
.task-signal.planned { color: var(--muted); background: var(--paper-soft); }
.task-signal.current { position: relative; color: var(--gpt); background: var(--gpt-soft); }
.task-signal.current::before, .task-signal.current::after { content: ""; position: absolute; inset: 4px; border: 2px solid rgba(23,60,87,.16); border-top-color: var(--gpt); border-radius: 50%; animation: task-spin 1s linear infinite; }
.task-signal.current::after { inset: 8px; border-width: 1px; border-top-color: transparent; border-right-color: var(--gpt); animation-direction: reverse; animation-duration: .7s; }
.task-signal.current i { width: 3px; height: 3px; border-radius: 50%; background: var(--gpt); }
.task-signal.review { color: var(--purple); background: var(--purple-soft); animation: review-pulse 1.5s ease-in-out infinite; }
.task-signal.done { color: var(--good); background: var(--good-soft); }
.task-signal.diverted { color: var(--warn); background: var(--warn-soft); }
.task-signal.next { color: var(--gpt); background: var(--gpt-soft); }
@keyframes task-spin { to { transform: rotate(360deg); } }
@keyframes review-pulse { 50% { box-shadow: 0 0 0 5px rgba(103,70,165,.08); } }
.task-feed-copy { min-width: 0; }
.task-feed-copy strong, .task-feed-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-feed-copy strong { font-size: 8.5px; }
.task-feed-copy small { margin-top: 3px; color: var(--faint); font: 500 6.8px/1 var(--mono); }
.task-feed-effort { color: var(--purple); font: 700 6.5px/1 var(--mono); text-transform: uppercase; }

dialog { width: min(1060px, calc(100% - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 9px; background: transparent; box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(15,18,17,.58); backdrop-filter: blur(2px); }
.infrastructure-dialog { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; box-shadow: none; }
.infrastructure-dialog::backdrop { background: var(--canvas); }
.infrastructure-shell { display: flex; width: 100%; height: 100dvh; min-height: 0; flex-direction: column; overflow: hidden; background: var(--canvas); }
.infrastructure-head { display: flex; min-height: 76px; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 22px; border-bottom: 1px solid var(--line); background: var(--paper); }
.infrastructure-head h2 { margin: 5px 0 0; font-size: 21px; letter-spacing: -.03em; }
.infrastructure-head p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.infrastructure-head > div:last-child { display: flex; align-items: center; gap: 7px; }
.infra-live { display: inline-flex; min-height: 29px; align-items: center; gap: 6px; padding: 0 8px; color: var(--faint); border-radius: 5px; background: var(--paper-soft); font: 750 8px/1 var(--mono); text-transform: uppercase; }
.infra-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.infra-live[data-state="live"] { color: var(--good); background: var(--good-soft); }
.infra-live[data-state="live"] i { background: var(--good); box-shadow: 0 0 0 4px rgba(22,117,88,.1); }
.infra-live[data-state="delayed"] { color: var(--warn); background: var(--warn-soft); }
.infra-live[data-state="delayed"] i { background: var(--warn); }
.infrastructure-body { min-height: 0; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; padding: 14px 18px 28px; }
.infra-summary { display: grid; max-width: 1720px; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 auto 8px; }
.infra-summary article { min-width: 0; min-height: 92px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.infra-summary span, .infra-summary strong, .infra-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-summary span { color: var(--faint); font-size: 7px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.infra-summary strong { margin: 8px 0 5px; font: 750 19px/1 var(--mono); }
.infra-summary small { color: var(--muted); font-size: 8px; }
.infra-summary article[data-guard="healthy"] { border-color: #c8e7da; background: var(--good-soft); }
.infra-summary article[data-guard="warning"] { border-color: #efd6b4; background: var(--warn-soft); }
.infra-summary article[data-guard="critical"] { border-color: #efc9c6; background: var(--bad-soft); }
.infra-chart-panel, .infra-panel { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.infra-chart-panel { max-width: 1720px; margin: 0 auto 8px; padding: 12px 14px 8px; }
.infra-chart-panel > header, .infra-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.infra-chart-panel h3, .infra-panel h3 { margin: 3px 0 0; font-size: 11px; }
.infra-chart-panel > header > span, .infra-panel > header > span { color: var(--faint); font: 650 7px/1 var(--mono); }
#infra-memory-chart { display: block; width: 100%; height: 105px; margin-top: 6px; overflow: visible; }
#infra-memory-chart line { stroke: var(--line); stroke-width: 1; }
#infra-memory-chart polyline { fill: none; stroke: var(--gpt); stroke-width: 3; vector-effect: non-scaling-stroke; }
.infra-chart-panel > footer { display: flex; justify-content: space-between; color: var(--faint); font: 650 7px/1 var(--mono); }
.infra-layout { display: grid; max-width: 1720px; grid-template-columns: minmax(0, 2.2fr) minmax(280px, .8fr); align-items: start; gap: 8px; margin: 0 auto 8px; }
.infra-panel { padding: 12px; }
.infra-services-panel { min-height: 480px; }
.infra-side { display: grid; min-width: 0; gap: 8px; }
.infra-service-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.infra-service-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
.infra-service-group > header { display: flex; min-height: 34px; align-items: center; justify-content: space-between; padding: 6px 9px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.infra-service-group h4 { margin: 0; font-size: 8px; }
.infra-service-group > header span { color: var(--faint); font: 700 7px/1 var(--mono); }
.infra-service-row { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr) 42px minmax(90px, auto); align-items: center; gap: 7px; min-height: 46px; padding: 6px 8px; }
.infra-service-row + .infra-service-row { border-top: 1px solid var(--line); }
.infra-service-signal { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.infra-service-row[data-state="degraded"] .infra-service-signal { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-soft); }
.infra-service-row[data-state="idle"] .infra-service-signal { background: var(--faint); box-shadow: 0 0 0 3px var(--paper-soft); }
.infra-service-row > div { min-width: 0; }
.infra-service-row strong, .infra-service-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infra-service-row strong { font-size: 8px; }
.infra-service-row small { margin-top: 3px; color: var(--faint); font: 500 6.5px/1 var(--mono); }
.infra-replicas { text-align: center; font: 750 8px/1 var(--mono); }
.infra-resource { color: var(--muted); font: 600 6.8px/1 var(--mono); text-align: right; white-space: nowrap; }
.infra-facts { margin: 9px 0 0; }
.infra-facts div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.infra-facts dt { color: var(--faint); font-size: 7px; text-transform: uppercase; }
.infra-facts dd { min-width: 0; margin: 0; overflow: hidden; font: 600 7.5px/1.3 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.infra-device-list { margin-top: 9px; }
.infra-device { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.infra-device strong { min-width: 0; overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.infra-device span { color: var(--muted); font: 600 7px/1 var(--mono); text-align: right; }
.infra-containers-panel { max-width: 1720px; margin: 0 auto; }
.infra-container-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.infra-container-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--paper-soft); }
.infra-container-row strong { overflow: hidden; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.infra-container-row span { font: 650 7px/1 var(--mono); white-space: nowrap; }
.infra-container-row small { grid-column: 1/-1; color: var(--faint); font: 500 6.5px/1 var(--mono); }
.infra-empty { margin: 12px 0 0; color: var(--faint); font-size: 8px; }
.modal-card { display: flex; max-height: calc(100vh - 28px); flex-direction: column; margin: 0; overflow: hidden; background: var(--paper); }
.modal-head { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.025em; }
.modal-head-actions { display: flex; align-items: center; gap: 9px; }
.modal-health-badge { padding: 6px 8px; color: var(--muted); border-radius: 4px; background: var(--paper-soft); font: 750 7px/1 var(--mono); text-transform: uppercase; }
.modal-health-badge[data-health="on_track"], .modal-health-badge[data-health="complete"] { color: var(--good); background: var(--good-soft); }
.modal-health-badge[data-health="at_risk"] { color: var(--warn); background: var(--warn-soft); }
.modal-health-badge[data-health="blocked"] { color: var(--bad); background: var(--bad-soft); }
.modal-health-badge[data-health="queued"] { color: var(--gpt); background: var(--gpt-soft); }
.icon-button { width: 32px; height: 32px; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; background: var(--paper); font-size: 20px; }
.modal-tabs { display: flex; min-height: 42px; flex: 0 0 42px; align-items: end; gap: 3px; padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.modal-tabs button { position: relative; min-height: 41px; padding: 0 14px; color: var(--faint); border: 0; border-bottom: 2px solid transparent; background: transparent; font-size: 9px; font-weight: 750; }
.modal-tabs button.active { color: var(--gpt); border-bottom-color: var(--gpt); }
.modal-tabs button span { display: inline-grid; min-width: 17px; height: 17px; place-items: center; margin-left: 4px; padding: 0 4px; border-radius: 9px; background: var(--paper); font: 700 7px/1 var(--mono); }
.modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 18px 20px; }
.modal-panel[hidden] { display: none; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.field-grid.wide { grid-template-columns: 1.5fr 1fr; }
.modal-body textarea { resize: vertical; padding: 9px; line-height: 1.45; }
.stacked { display: block; margin-bottom: 12px; }
.activity { margin-top: 18px; border: 1px solid var(--line); border-radius: 6px; }
.activity header { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.activity h3 { margin: 0; font-size: 10px; }
.activity small { color: var(--faint); font-size: 8px; }
.activity ol { max-height: 125px; margin: 0; overflow-y: auto; padding: 8px 12px 8px 34px; color: var(--muted); font-size: 9px; }
.activity li + li { margin-top: 5px; }
.modal-actions { display: grid; grid-template-columns: auto 1fr auto auto; gap: 7px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--paper-soft); }

.task-insights { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.task-insights article { min-width: 0; min-height: 104px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-soft); }
.task-insights article > span, .task-insights article > div > span, .status-rail header span, .quick-update header span, .dependency-insight header span, .tag-editor header span { color: var(--faint); font-size: 7px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.task-insights h3 { margin: 7px 0 4px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.task-insights p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 8px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.task-insights .progress-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; background: var(--gpt-soft); }
.progress-ring { --progress: 0deg; display: grid; width: 68px; height: 68px; flex: 0 0 68px; place-items: center; border-radius: 50%; background: conic-gradient(var(--gpt) var(--progress), rgba(23,60,87,.12) 0); }
.progress-ring::before { content: ""; grid-area: 1/1; width: 52px; height: 52px; border-radius: 50%; background: var(--paper); }
.progress-ring strong { z-index: 1; grid-area: 1/1; font: 800 11px/1 var(--mono); }
.status-rail, .quick-update, .dependency-insight, .tag-editor { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.status-rail > header, .quick-update > header, .dependency-insight > header, .tag-editor > header { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: var(--paper-soft); }
.status-rail header div, .quick-update header div, .dependency-insight header div, .tag-editor header div { min-width: 0; }
.status-rail header strong, .quick-update header strong, .dependency-insight header strong, .tag-editor header strong { display: block; margin-top: 2px; overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.status-rail header small, .quick-update header small, .dependency-insight header small { color: var(--faint); font: 650 7px/1 var(--mono); white-space: nowrap; }
#task-status-rail { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px; }
#task-status-rail button { position: relative; min-width: 0; min-height: 43px; padding: 17px 3px 0; color: var(--faint); border: 0; background: transparent; font-size: 7px; font-weight: 750; }
#task-status-rail button::before { content: ""; position: absolute; top: 7px; right: 50%; left: -50%; height: 1px; background: var(--line); }
#task-status-rail button:first-child::before { display: none; }
#task-status-rail button i { position: absolute; z-index: 1; top: 3px; left: 50%; width: 9px; height: 9px; border: 2px solid var(--line-strong); border-radius: 50%; background: var(--paper); transform: translateX(-50%); }
#task-status-rail button.active { color: var(--gpt); }
#task-status-rail button.active i { border-color: var(--gpt); background: var(--gpt); box-shadow: 0 0 0 4px var(--gpt-soft); }
#task-status-rail button.active::before { background: var(--gpt); }
.quick-update { padding-bottom: 10px; }
.quick-update textarea { width: calc(100% - 20px); margin: 10px 10px 0; resize: vertical; padding: 9px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 5px; background: var(--paper-soft); font-size: 9px; line-height: 1.45; }
.quick-update footer { display: grid; grid-template-columns: 150px minmax(180px, 1fr) auto; align-items: end; gap: 10px; padding: 8px 10px 0; }
.quick-update footer label { color: var(--faint); font-size: 7px; font-weight: 750; text-transform: uppercase; }
.quick-update footer select { display: block; width: 100%; height: 31px; margin-top: 4px; padding: 0 7px; color: var(--ink); border: 1px solid var(--line); border-radius: 4px; background: var(--paper); font-size: 8px; }
.range-control { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: space-between; }
.range-control b { color: var(--gpt); font: 750 8px/1 var(--mono); }
.range-control input { grid-column: 1/-1; width: 100%; height: 20px; margin-top: 3px; accent-color: var(--gpt); }
.overview-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dependency-chips, .tag-chips { display: flex; min-height: 50px; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 10px; }
.dependency-chip { display: grid; min-width: 138px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 6px; padding: 7px 8px; text-align: left; border: 1px solid var(--line); border-radius: 5px; background: var(--paper); }
.dependency-chip i { grid-row: 1/3; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dependency-chip[data-state="resolved"] i { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.dependency-chip[data-state="unknown"] i { background: var(--faint); box-shadow: 0 0 0 3px var(--paper-soft); }
.dependency-chip span { overflow: hidden; font: 750 8px/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.dependency-chip b { overflow: hidden; color: var(--faint); font-size: 7px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dependency-empty, .tag-empty { color: var(--faint); font-size: 8px; }
.tag-chips { min-height: 42px; padding-bottom: 3px; }
.tag-chips button { display: flex; min-height: 27px; align-items: center; gap: 5px; padding: 0 8px; color: var(--purple); border: 1px solid #d8cfeb; border-radius: 14px; background: var(--purple-soft); font-size: 8px; font-weight: 750; }
.tag-chips button i { font-size: 12px; font-style: normal; }
.tag-entry { display: flex; gap: 6px; padding: 5px 10px 10px; }
.tag-entry input { min-width: 0; height: 31px; flex: 1; padding: 0 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 8px; }
.activity-deep { margin-top: 0; }
.activity-deep > header { min-height: 50px; }
.activity-deep > header h3, .activity-deep > header small { display: block; }
.activity-deep > header small { margin-top: 3px; }
.activity-deep > header > strong { color: var(--gpt); font: 750 8px/1 var(--mono); }
.activity-deep ol { max-height: none; padding: 10px; list-style: none; }
.activity-entry { margin: 0 0 8px; padding: 10px; border: 1px solid var(--line); border-left: 3px solid var(--gpt); border-radius: 5px; background: var(--paper); }
.activity-entry[data-kind="blocker"] { border-left-color: var(--bad); }
.activity-entry[data-kind="decision"] { border-left-color: var(--purple); }
.activity-entry[data-kind="evidence"] { border-left-color: var(--good); }
.activity-entry[data-kind="handoff"] { border-left-color: var(--claude); }
.activity-entry > header { display: flex; min-height: 0; justify-content: space-between; padding: 0; border: 0; background: transparent; }
.activity-entry > header strong { color: var(--gpt); font-size: 7px; text-transform: uppercase; }
.activity-entry > header time { color: var(--faint); font: 600 6.5px/1 var(--mono); }
.activity-entry > p { margin: 7px 0; color: var(--ink); font-size: 9px; line-height: 1.45; }
.activity-entry > footer { display: flex; flex-wrap: wrap; gap: 5px; }
.activity-entry > footer span { padding: 3px 5px; color: var(--muted); border-radius: 3px; background: var(--paper-soft); font: 650 6.5px/1 var(--mono); text-transform: capitalize; }
.toast { position: fixed; z-index: 60; right: 18px; bottom: 18px; max-width: 320px; padding: 10px 13px; color: #fff; border-radius: 5px; background: var(--ink); box-shadow: var(--shadow); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .18s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/* Deck-only mode is a bounded control-room surface: the browser page never scrolls.
   Each stack pages internally so all seven stages remain visible at once. */
body.deck-only { width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }
body.deck-only > .topbar { display: none; }
body.deck-only main { display: flex; width: 100%; height: 100dvh; min-height: 0; flex-direction: column; gap: 7px; overflow: hidden; padding: 7px; }
body.deck-only .hero,
body.deck-only .metrics,
body.deck-only .live-strip,
body.deck-only .host-strip,
body.deck-only .toolbar { display: none; }
body.deck-only .deck-view-bar {
  display: grid; min-height: 48px; flex: 0 0 48px; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
}
.deck-view-title { display: flex; align-items: center; gap: 8px; }
.deck-view-title .brand-mark { width: 30px; height: 30px; }
.deck-view-title > div { display: flex; flex-direction: column; line-height: 1.2; }
.deck-view-title strong { font-size: 10px; }
.deck-view-title small { margin-top: 2px; color: var(--faint); font-size: 7px; }
.deck-view-bar dl { display: flex; min-width: 0; align-items: center; justify-content: center; gap: clamp(12px, 4vw, 54px); margin: 0; }
.deck-view-bar dl div { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.deck-view-bar dt { color: var(--faint); font-size: 7px; font-weight: 700; text-transform: uppercase; }
.deck-view-bar dd { margin: 0; font: 750 11px/1 var(--mono); }
.deck-view-actions { display: flex; align-items: center; gap: 5px; }
body.deck-only .agent-now { width: 100%; max-width: none; flex: 0 0 auto; margin: 0; padding: 5px 7px; }
body.deck-only .agent-now-head { float: left; width: 190px; min-height: 42px; margin: 0 8px 0 0; }
body.deck-only .agent-now-head > div { min-width: 0; }
body.deck-only .agent-now-head .eyebrow { margin: 0; font-size: 7px; }
body.deck-only .agent-now-head h2 { overflow: hidden; margin-top: 2px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
body.deck-only #refresh-agents { min-height: 26px; padding: 0 7px; font-size: 7px; }
body.deck-only .agent-now-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
body.deck-only .agent-now-card { min-height: 42px; padding: 5px 7px; }
body.deck-only .agent-now-avatar { width: 24px; height: 24px; }
body.deck-only .agent-now-card header h3 { font-size: 8px; }
body.deck-only .agent-now-copy { display: none; }
body.deck-only .agent-now-card footer { margin-top: 3px; }
body.deck-only .agent-now-card footer .button { min-height: 21px; padding: 0 6px; font-size: 6.5px; }
body.deck-only .workspace { width: 100%; max-width: none; min-height: 0; flex: 1 1 auto; margin: 0; overflow: hidden; }
body.deck-only .board-wrap { width: 100%; height: 100%; min-height: 0; overflow: hidden; padding: 0; scrollbar-gutter: auto; }
body.deck-only .board { width: 100%; height: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: stretch; padding: 0; }
body.deck-only .column { display: flex; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; border-radius: 6px; }
body.deck-only .column > header { height: 36px; flex: 0 0 36px; padding: 0 7px; }
body.deck-only .column > header div { gap: 5px; }
body.deck-only .column h2 { font-size: 9px; }
body.deck-only .column > header b { min-width: 18px; height: 18px; padding: 0 4px; font-size: 7px; }
body.deck-only .column > p { flex: 0 0 auto; padding: 5px 7px; overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
body.deck-only .dropzone {
  display: grid; min-height: 0; flex: 1 1 auto; grid-template-rows: repeat(var(--visible-cards, 1), minmax(0, 1fr));
  gap: 5px; overflow: hidden; padding: 5px;
}
body.deck-only .task-card { display: flex; height: 100%; min-height: 0; flex-direction: column; margin: 0; padding: 7px; border-radius: 5px; }
body.deck-only .task-card h3 { display: -webkit-box; margin: 6px 0 5px; overflow: hidden; font-size: 8.5px; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.deck-only .task-copy, body.deck-only .task-log, body.deck-only .dependency, body.deck-only .task-card footer { display: none; }
/* `margin-top: auto` pins the sparkline to the bottom of the flex card, so the
   lines align across a row of cards with differing title lengths and can be
   compared by eye rather than hunted for. */
body.deck-only .task-spark { display: block; margin-top: auto; padding-top: 5px; }
body.deck-only .task-spark[hidden] { display: none; }
body.deck-only .task-spark svg { height: 22px; }
body.deck-only .task-id, body.deck-only .effort-pill, body.deck-only .model, body.deck-only .owner-chip { font-size: 6.5px; }
body.deck-only .task-light { width: 12px; height: 12px; flex-basis: 12px; font-size: 6px; }
body.deck-only .task-meta { gap: 4px; }
body.deck-only .model { display: none; }
body.deck-only .task-progress { gap: 4px; margin-top: auto; padding-top: 5px; }
body.deck-only .task-progress b { font-size: 6px; }
body.deck-only .stack-pager { min-height: 30px; flex: 0 0 30px; padding: 3px 5px; }
body.deck-only .stack-pager button { min-width: 22px; height: 22px; padding: 0 5px; font-size: 10px; }
body.deck-only .stack-pager span { font-size: 6.5px; }

@media (max-width: 1000px) {
  .topbar { grid-template-columns: 1fr auto; }
  .run-state { display: none; }
  .hero { grid-template-columns: 1fr; gap: 24px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .metrics article:nth-child(4) { border-top: 1px solid var(--line); }
  .toolbar { flex-wrap: wrap; }
  .live-strip { flex-wrap: wrap; }
  .live-strip p { min-width: 55%; }
  .host-strip { grid-template-columns: 1fr; gap: 8px; }
  .host-strip dl { flex-wrap: wrap; }
  .legend { width: 100%; margin-left: 0; }
  .agent-now-grid { grid-template-columns: 1fr; }
  .infra-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .infra-summary article:last-child { grid-column: 1/-1; }
  .infra-layout { grid-template-columns: 1fr; }
  .infra-container-list { grid-template-columns: 1fr 1fr; }
}

@media (hover: none) {
  .task-card { cursor: default; }
  .task-card:active { background: var(--paper-soft); }
}

@media (prefers-reduced-motion: reduce) {
  .task-progress i { transition: none; }
  .pulse::after, .task-signal.current::before, .task-signal.current::after, .task-signal.review,
  .agent-action-signal::after, .agent-action.busy .agent-action-live,
  .task-card[data-status="current"] .task-light::after, .task-card[data-status="review"] .task-light { animation: none; }
  /* Still unmistakably live without the flash. */
  .task-card[data-status="current"] .task-light::after { box-shadow: 0 0 0 3px rgba(22,117,88,.25); }
}

/* Phone: the board becomes a single-stack app view with a status tab bar. */
@media (max-width: 640px) {
  .topbar {
    position: sticky; top: 0; z-index: 30; display: block; min-height: 0; padding: 7px 12px 8px;
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
  }
  .brand { gap: 9px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand small { display: none; }
  .brand strong { font-size: 12px; }
  .top-actions { width: 100%; flex-wrap: nowrap; justify-content: flex-start; gap: 6px; margin-top: 8px; overflow-x: auto; scrollbar-width: none; }
  .top-actions::-webkit-scrollbar { display: none; }
  .top-actions > * { flex: 0 0 auto; }
  .button, .live-toggle { min-height: 44px; padding: 0 14px; font-size: 11px; }
  .chat-button span { min-width: 19px; height: 19px; font-size: 8px; }

  main { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 12px calc(40px + env(safe-area-inset-bottom, 0px)); }
  .hero, .metrics, .live-strip, .host-strip, .toolbar, .workspace { min-width: 0; max-width: 100%; margin-right: 0; margin-left: 0; }
  .toolbar { order: 1; }
  .workspace { order: 2; }
  .metrics { order: 3; }
  .live-strip { order: 4; }
  .host-strip { order: 5; }
  .hero { order: 6; }

  .toolbar { flex-wrap: wrap; gap: 8px; margin-bottom: 10px; padding: 10px; border-top: 1px solid var(--line); border-radius: 7px; }
  .toolbar label span { display: none; }
  .toolbar label, .toolbar label:first-child { width: 100%; }
  .toolbar label:not(:first-child) { width: auto; min-width: 0; flex: 1 1 0; }
  .toolbar input, .toolbar select { height: 44px; font-size: 13px; }
  .legend { width: 100%; margin-left: 0; padding-bottom: 0; font-size: 10px; }

  .stack-tabs {
    position: sticky; z-index: 15; top: var(--topbar-h, 96px); display: flex; gap: 6px;
    margin: 0 -12px 10px; padding: 7px 12px; overflow-x: auto; border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px); scrollbar-width: none;
  }
  .stack-tabs::-webkit-scrollbar { display: none; }
  .stack-tabs button {
    display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 6px; padding: 0 13px;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
    font-size: 12px; font-weight: 750; white-space: nowrap;
  }
  .stack-tabs button b { display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 4px; border-radius: 9px; background: var(--paper-soft); font: 700 9px/1 var(--mono); }
  .stack-tabs button[aria-current="true"] { color: #fff; border-color: var(--ink); background: var(--ink); }
  .stack-tabs button[aria-current="true"] b { color: var(--ink); background: rgba(255,255,255,.86); }

  /* One stack fills the screen; the tab bar and a horizontal swipe move between them. */
  .board-wrap { overflow-x: hidden; padding: 0 0 12px; scrollbar-gutter: auto; }
  .board { min-width: 0; grid-template-columns: minmax(0, 1fr); padding: 0; }
  .board-wrap[data-stack="planned"] .column:not([data-status="planned"]),
  .board-wrap[data-stack="pending"] .column:not([data-status="pending"]),
  .board-wrap[data-stack="current"] .column:not([data-status="current"]),
  .board-wrap[data-stack="next"] .column:not([data-status="next"]),
  .board-wrap[data-stack="review"] .column:not([data-status="review"]),
  .board-wrap[data-stack="diverted"] .column:not([data-status="diverted"]),
  .board-wrap[data-stack="done"] .column:not([data-status="done"]) { display: none; }
  .column { width: auto; min-height: 0; border-radius: 10px; scroll-margin-top: calc(var(--topbar-h, 96px) + var(--tabs-h, 58px) + 6px); }
  .column > header { height: 52px; border-radius: 10px 10px 0 0; }
  .column h2 { font-size: 14px; }
  .column > header span { font-size: 9px; }
  .column > header b { min-width: 26px; height: 26px; font-size: 11px; }
  .column > p { padding: 9px 12px; font-size: 10px; }
  .dropzone { min-height: 130px; padding: 10px; }
  .dropzone:empty::after { font-size: 11px; }

  .task-card { margin-bottom: 10px; padding: 14px; border-radius: 10px; }
  .task-card h3 { margin: 11px 0 6px; font-size: 14px; }
  .task-copy { min-height: 0; margin-bottom: 11px; font-size: 11.5px; }
  .task-id { font-size: 10px; }
  .effort-pill { padding: 4px 6px; font-size: 9px; }
  .task-light { width: 18px; height: 18px; flex: 0 0 18px; font-size: 10px; }
  .task-card[data-status="current"] .task-light::after { width: 8px; height: 8px; }
  .owner-chip { padding: 4px 7px; font-size: 9.5px; }
  .model, .task-card footer .evidence { font-size: 9.5px; }
  .task-progress b { font-size: 9px; }
  .task-log { gap: 4px; padding: 7px 8px; }
  .task-log li { grid-template-columns: 26px minmax(0, 1fr); }
  .task-log time { font-size: 8.5px; }
  .task-log span { font-size: 10px; }
  .dependency { font-size: 9.5px; }
  .task-card footer { margin-top: 6px; }
  .task-card footer button { min-width: 58px; min-height: 44px; font-size: 11px; }

  .stack-pager { min-height: 56px; padding: 6px 10px; border-radius: 0 0 10px 10px; }
  .stack-pager button { min-width: 44px; height: 44px; font-size: 17px; }
  .stack-pager span { font-size: 10px; }

  .live-strip dl { width: 100%; }
  .host-strip dl { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 7px 12px; }
  .host-strip p { white-space: normal; }
  .metrics { grid-template-columns: 1fr 1fr; border-radius: 7px; }
  .agent-summary { grid-template-columns: 1fr; }
  .metrics article { min-height: 78px; padding: 12px 14px; }
  .metrics article + article { border-top: 0; border-left: 1px solid var(--line); }
  .metrics article:nth-child(odd) { border-left: 0; }
  .metrics article:nth-child(n+3) { border-top: 1px solid var(--line); }
  h1 { font-size: 26px; }
  .hero { margin-top: 4px; gap: 18px; }
  .agent { min-height: 0; }

  .infrastructure-head { min-height: 66px; padding: 9px 10px; }
  .infrastructure-head h2 { font-size: 16px; }
  .infrastructure-head p:last-child, .infrastructure-head .eyebrow, .infrastructure-head #infrastructure-refresh { display: none; }
  .infrastructure-body { padding: 8px 8px 20px; }
  .infra-summary { grid-template-columns: 1fr 1fr; gap: 6px; }
  .infra-summary article { min-height: 78px; padding: 10px; }
  .infra-summary strong { font-size: 15px; }
  .infra-service-groups { grid-template-columns: 1fr; }
  .infra-service-row { grid-template-columns: auto minmax(0, 1fr) 36px; }
  .infra-resource { display: none; }
  .infra-container-list { grid-template-columns: 1fr; }
  #infra-memory-chart { height: 82px; }

  .field-grid, .field-grid.wide { grid-template-columns: 1fr; }
  .modal-actions { grid-template-columns: 1fr 1fr; }
  .modal-actions span { display: none; }
  /* Anchored to both edges, not 100vw: a classic scrollbar makes 100vw wider than the
     visible area and pushes the drawer's left column off screen. */
  .agent-feed { left: 0; width: auto; height: 100dvh; }
  dialog { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .modal-body { max-height: calc(92dvh - 152px); padding: 16px; }
  .modal-head { min-height: 60px; padding: 12px 16px; }
  .toast { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; max-width: none; }
}

/* In deck mode, narrower screens show one bounded stack at a time. Status tabs replace
   horizontal columns, so neither axis can escape the viewport. */
@media (max-width: 900px) {
  body.deck-only main { display: flex; padding: 5px; }
  body.deck-only .deck-view-bar { min-height: 44px; flex-basis: 44px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; padding: 4px 5px; }
  body.deck-only .deck-view-title > div { display: none; }
  body.deck-only .deck-view-title .brand-mark { width: 28px; height: 28px; }
  body.deck-only .deck-view-bar dl { justify-content: space-evenly; gap: 5px; }
  body.deck-only .deck-view-bar dl div:nth-child(1), body.deck-only .deck-view-bar dl div:nth-child(3) { display: none; }
  body.deck-only .deck-view-bar dl div { display: grid; justify-items: center; gap: 1px; }
  body.deck-only .deck-view-bar dt { font-size: 6px; }
  body.deck-only .deck-view-bar dd { font-size: 9px; }
  body.deck-only #deck-view-exit { width: 43px; min-height: 30px; padding: 0; overflow: hidden; font-size: 0; }
  body.deck-only #deck-view-exit::after { content: "Exit"; font-size: 8px; }
  body.deck-only #deck-request-toggle { min-height: 30px; padding: 0 6px; font-size: 7px; }
  body.deck-only #deck-request-toggle span { min-width: 14px; height: 14px; font-size: 6px; }
  body.deck-only .agent-now { padding: 4px 5px; }
  body.deck-only .agent-now-head { float: none; width: auto; min-height: 26px; margin: 0 0 4px; }
  body.deck-only .agent-now-head h2 { max-width: 180px; }
  body.deck-only #refresh-agents { min-height: 24px; }
  body.deck-only .agent-now-grid { grid-template-columns: 1fr 1fr; }
  body.deck-only .agent-now-card { min-height: 44px; }
  body.deck-only .agent-now-card > header { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.deck-only .agent-now-card header p { display: none; }
  body.deck-only .agent-now-badge { padding: 3px; font-size: 5.5px; }
  body.deck-only .agent-now-card footer > span { font-size: 6px; }
  body.deck-only .workspace { display: flex; flex-direction: column; }
  body.deck-only .stack-tabs {
    position: static; display: flex; min-height: 36px; flex: 0 0 36px; gap: 4px; margin: 0 0 5px;
    padding: 2px 0; overflow-x: auto; border: 0; background: transparent; backdrop-filter: none;
  }
  body.deck-only .stack-tabs button { min-height: 30px; padding: 0 9px; font-size: 8px; }
  body.deck-only .stack-tabs button b { min-width: 15px; height: 15px; font-size: 7px; }
  body.deck-only .board-wrap { min-height: 0; flex: 1 1 auto; }
  body.deck-only .board { grid-template-columns: minmax(0, 1fr); }
  body.deck-only .board-wrap[data-stack="planned"] .column:not([data-status="planned"]),
  body.deck-only .board-wrap[data-stack="pending"] .column:not([data-status="pending"]),
  body.deck-only .board-wrap[data-stack="current"] .column:not([data-status="current"]),
  body.deck-only .board-wrap[data-stack="next"] .column:not([data-status="next"]),
  body.deck-only .board-wrap[data-stack="review"] .column:not([data-status="review"]),
  body.deck-only .board-wrap[data-stack="diverted"] .column:not([data-status="diverted"]),
  body.deck-only .board-wrap[data-stack="done"] .column:not([data-status="done"]) { display: none; }
  body.deck-only .column { width: auto; height: 100%; border-radius: 6px; }
  body.deck-only .column > header { height: 34px; flex-basis: 34px; border-radius: 6px 6px 0 0; }
  body.deck-only .column h2 { font-size: 10px; }
  body.deck-only .column > p { padding: 4px 7px; font-size: 7px; }
  body.deck-only .dropzone { min-height: 0; padding: 5px; }
  body.deck-only .task-card { margin: 0; padding: 7px; border-radius: 5px; }
  body.deck-only .task-card h3 { margin: 5px 0 4px; font-size: 9px; }
  body.deck-only .task-copy, body.deck-only .task-log, body.deck-only .dependency, body.deck-only .task-card footer { display: none; }
  body.deck-only .task-id, body.deck-only .effort-pill, body.deck-only .owner-chip { font-size: 7px; }
  body.deck-only .task-progress { margin-top: 5px; }
  body.deck-only .stack-pager { min-height: 30px; flex-basis: 30px; padding: 3px 5px; }
  body.deck-only .stack-pager button { min-width: 28px; height: 24px; font-size: 11px; }
  body.deck-only .stack-pager span { font-size: 7px; }
  .request-inbox { width: min(440px, 100vw); }
}

@media (max-width: 720px) {
  dialog { width: 100%; max-width: 100%; max-height: 94dvh; margin: auto 0 0; border-radius: 12px 12px 0 0; }
  .modal-card { max-height: 94dvh; }
  .modal-head { min-height: 62px; padding: 11px 13px; }
  .modal-head h2 { max-width: 68vw; margin-top: 3px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
  .modal-health-badge { display: none; }
  .modal-tabs { min-height: 42px; flex-basis: 42px; padding: 0 10px; }
  .modal-tabs button { min-height: 41px; flex: 1; padding: 0 5px; font-size: 9px; }
  .modal-body { max-height: none; padding: 11px; }
  .task-insights { grid-template-columns: 1fr 1fr; gap: 6px; }
  .task-insights article { min-height: 92px; padding: 9px; }
  .task-insights .progress-insight { grid-column: 1/-1; min-height: 86px; }
  .progress-ring { width: 58px; height: 58px; flex-basis: 58px; }
  .progress-ring::before { width: 44px; height: 44px; }
  #task-status-rail { grid-template-columns: repeat(7, minmax(62px, 1fr)); overflow-x: auto; }
  .status-rail { overflow: hidden; }
  .quick-update footer { grid-template-columns: 1fr 1fr; }
  .quick-update footer .button { grid-column: 1/-1; min-height: 42px; }
  .overview-copy-grid { grid-template-columns: 1fr; gap: 0; }
  .dependency-chip { min-width: calc(50% - 3px); }
  .field-grid, .field-grid.wide { grid-template-columns: 1fr; }
  .activity-entry > header { align-items: flex-start; gap: 8px; }
  .activity-entry > header time { text-align: right; }
  .modal-actions { grid-template-columns: auto 1fr auto; padding: 9px 11px calc(9px + env(safe-area-inset-bottom, 0px)); }
  .modal-actions > span, .modal-actions .secondary { display: none; }
  .modal-actions .button { min-height: 42px; }
}

/* Agents beyond the original two (the local model, and whatever comes next).
   The page used to style exactly .gpt and .claude, so a new agent rendered
   unstyled and looked broken rather than new. */
.agent.other { box-shadow: inset 0 3px 0 var(--muted, #8b8b8b); }
.agent.other .agent-head > span { background: var(--muted, #8b8b8b); }
.agent-now-avatar.other { background: var(--muted, #8b8b8b); }