/* Foreman Deck — design system
   Dark, calm, blue-accented command surface. iPhone-first, desktop command-center at >=900px. */

:root {
  /* color — light (default) */
  --accent: #2C64C6;
  --accent-hover: #2557AE;
  --accent-active: #1E4A96;
  --accent-soft: #2C64C6;
  --accent-wash: rgba(44, 100, 198, .10);
  --accent-wash-strong: rgba(44, 100, 198, .18);

  --bg: #F7F7F8;
  --bg-raised: #FCFCFD;
  --surface: #FFFFFF;
  --surface-hover: #F1F2F4;
  --surface-active: #E8E9EB;
  --overlay-bg: rgba(255, 255, 255, .82);

  --border: #E8E9EB;
  --border-strong: #D7D9DD;
  --border-hairline: rgba(0, 0, 0, .06);

  --text: #18191B;
  --text-secondary: #6E7278;
  --text-tertiary: #8A8F98;

  --good: #1F9D5B;
  --good-wash: rgba(31, 157, 91, .14);
  --warn: #B27C22;
  --warn-wash: rgba(178, 124, 34, .14);
  --bad: #C9403B;
  --bad-wash: rgba(201, 64, 59, .14);

  /* scale */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-raised: 0 10px 40px -8px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --shadow-pop: 0 20px 60px -12px rgba(0, 0, 0, .22);

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur-fast: .12s;
  --dur: .18s;
  --dur-slow: .28s;

  /* legacy aliases referenced by inline styles in index.html's generated markup */
  --dim: var(--text-secondary);
  --line: var(--border);
}

/* dark palette — system preference, or explicit data-theme="dark" toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #4A86DC;
    --accent-hover: #5F97E8;
    --accent-active: #3A72C4;
    --accent-soft: #93B9EE;
    --accent-wash: rgba(74, 134, 220, .14);
    --accent-wash-strong: rgba(74, 134, 220, .24);

    --bg: #0A0B0F;
    --bg-raised: #101218;
    --surface: #15171F;
    --surface-hover: #1A1D27;
    --surface-active: #1F2230;
    --overlay-bg: rgba(8, 9, 13, .82);

    --border: #23262F;
    --border-strong: #2E323D;
    --border-hairline: rgba(255, 255, 255, .06);

    --text: #EDEEF3;
    --text-secondary: #A6ABBB;
    --text-tertiary: #868CA0;

    --good: #35C48D;
    --good-wash: rgba(53, 196, 141, .14);
    --warn: #F0B429;
    --warn-wash: rgba(240, 180, 41, .14);
    --bad: #F1595F;
    --bad-wash: rgba(241, 89, 95, .14);

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-raised: 0 10px 40px -8px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
    --shadow-pop: 0 20px 60px -12px rgba(0, 0, 0, .65);
  }
}
:root[data-theme="dark"] {
  --accent: #4A86DC;
  --accent-hover: #5F97E8;
  --accent-active: #3A72C4;
  --accent-soft: #93B9EE;
  --accent-wash: rgba(74, 134, 220, .14);
  --accent-wash-strong: rgba(74, 134, 220, .24);

  --bg: #0A0B0F;
  --bg-raised: #101218;
  --surface: #15171F;
  --surface-hover: #1A1D27;
  --surface-active: #1F2230;
  --overlay-bg: rgba(8, 9, 13, .82);

  --border: #23262F;
  --border-strong: #2E323D;
  --border-hairline: rgba(255, 255, 255, .06);

  --text: #EDEEF3;
  --text-secondary: #A6ABBB;
  --text-tertiary: #868CA0;

  --good: #35C48D;
  --good-wash: rgba(53, 196, 141, .14);
  --warn: #F0B429;
  --warn-wash: rgba(240, 180, 41, .14);
  --bad: #F1595F;
  --bad-wash: rgba(241, 89, 95, .14);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-raised: 0 10px 40px -8px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --shadow-pop: 0 20px 60px -12px rgba(0, 0, 0, .65);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  max-width: 560px;
  margin-inline: auto;
  overflow-x: hidden;
}

::selection { background: var(--accent-wash-strong); }

a { color: inherit; }

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

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
nav button:focus-visible { outline-offset: -2px; }

/* ---------- header ---------- */
header {
  padding: max(env(safe-area-inset-top), 14px) 16px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky;
  top: 0;
  z-index: 8;
  background: color-mix(in srgb, var(--bg-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--border-hairline);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand .mark {
  width: 21px; height: 21px; color: var(--accent-soft);
  filter: drop-shadow(0 0 10px var(--accent-wash));
  flex: none;
}
header h1 {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.status { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px var(--good-wash);
  flex: none;
}
.dot.down { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-wash); }
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  letter-spacing: .01em;
}

/* ---------- layout shell ---------- */
main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

nav {
  display: flex;
  border-top: 1px solid var(--border-hairline);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: 6px 8px max(env(safe-area-inset-bottom), 8px);
  gap: 2px;
  position: sticky;
  bottom: 0;
  z-index: 8;
}
nav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 2px 6px;
  background: none;
  border: 0;
  border-radius: var(--r-md);
  color: var(--text-tertiary);
  font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  text-transform: uppercase;
  letter-spacing: .05em;
  position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
nav button:active { transform: scale(.94); }
nav button .n { display: flex; width: 22px; height: 22px; }
nav button .n svg { width: 100%; height: 100%; }
nav button.on { color: var(--accent-soft); background: var(--accent-wash); }
nav button.on .n { color: var(--accent-soft); }

.badge {
  position: absolute;
  top: 2px; right: calc(50% - 20px);
  background: var(--bad);
  color: #fff;
  font: 700 10px/14px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  border-radius: var(--r-pill);
  padding: 0 4.5px;
  min-width: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg-raised);
}
.badge.calm { background: var(--accent); }

/* ---------- cards & primitives ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 17px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}
.label {
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}
.row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13.5px; }
.row span:last-child { color: var(--text-secondary); text-align: right; }
.kv { font-variant-numeric: tabular-nums; }
/* rail telemetry (Machine/Spend cards): mono, tabular values — matches the mock's
   .mrow/.wrow value styling and the deck's own goalhead/evidence-chip mono pattern,
   which the newly-added rail cards hadn't picked up */
#rail .row span:last-child { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; font-variant-numeric: tabular-nums; }

.item { border-top: 1px solid var(--border); padding: 12px 0; }
.item:first-of-type { border-top: 0; padding-top: 2px; }
.item h4 { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; letter-spacing: -.005em; line-height: 1.4; }
.item h4[onclick], .steps[onclick] { cursor: pointer; }
/* Idea captures are stored verbatim and rendered in full — clamped to two lines so a
   long capture doesn't dominate the list, and tappable to read the rest in place. */
.ideatext { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ideatext.full { -webkit-line-clamp: unset; overflow: visible; }
.item h4[onclick]:hover, .steps[onclick]:hover { color: var(--accent-soft); }
/* pre-wrap alone cannot break a 96-character run of U+2500 — Claude Code's own TUI
   rules arrive verbatim in an approval's pane_tail and shot out past the card edge.
   overflow-wrap: anywhere lets them break mid-run; .cw-msg already does this. */
.item p { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.6; }

.btns { display: flex; gap: 8px; flex-wrap: wrap; }
button.act {
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font: 600 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
button.act:hover { background: var(--accent-hover); }
button.act:active { background: var(--accent-active); transform: scale(.97); }
button.act.ghost {
  background: var(--surface-hover);
  color: var(--text);
  border-color: var(--border-strong);
}
button.act.ghost:hover { background: var(--surface-active); border-color: var(--border-strong); }
button.act.danger { background: var(--bad-wash); color: #FFB4B7; border-color: rgba(241, 89, 95, .25); }
button.act.danger:hover { background: rgba(241, 89, 95, .22); }
button.act:disabled { opacity: .5; cursor: default; transform: none; }
/* "you decide" (bridge.md: intake questions always carry a legal default) is deliberately
   understated vs. answering a question inline — a dashed outline reads as "meta", not a choice */
button.act.you-decide { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-tertiary); }
button.act.you-decide:hover { background: var(--surface-hover); border-color: var(--accent-soft); color: var(--text); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-hover);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-active); color: var(--text); }
.icon-btn:active { transform: scale(.93); }

.tag {
  display: inline-flex; align-items: center;
  font: 600 10.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-hover);
  color: var(--text-secondary);
  margin-left: 6px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.tag.run { color: #7EE2A8; background: var(--good-wash); }
.tag.warn { color: var(--warn); background: var(--warn-wash); }
.tag.bad { color: var(--bad); background: var(--bad-wash); }
.tag.yours { color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 14%, transparent); }
.tag.fleet { color: var(--text-secondary); background: var(--surface-hover); }
.tag.unknown { color: var(--text-tertiary); background: var(--surface-hover); font-style: italic; }

.ico { width: 14px; height: 14px; vertical-align: -2.5px; margin-right: 3px; flex: none; }

.empty {
  color: var(--text-tertiary);
  font-size: 13px;
  padding: 10px 0;
  display: flex; align-items: center; gap: 8px;
}
.hline { font-size: 19px; font-weight: 650; letter-spacing: -.018em; padding: 4px 0 12px; line-height: 1.35; }

/* ---------- chat ---------- */
.msgs { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 14px; white-space: pre-wrap; line-height: 1.5; }
.msg.you { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.super { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.msg .ts { display: block; font-size: 10px; opacity: .6; margin-top: 4px; }

.chatbar { display: flex; gap: 8px; padding: 10px 0 4px; position: sticky; bottom: 0; background: var(--bg); }
.chatbar input {
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: 14px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.chatbar input::placeholder { color: var(--text-tertiary); }
.chatbar input:focus { border-color: var(--accent-soft); background: var(--surface-hover); }
.chatbar input:disabled { opacity: .55; }

/* ---------- streams feed ---------- */
.feed { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.fm { max-width: 92%; padding: 9px 13px; border-radius: var(--r-md); font-size: 13.5px; white-space: pre-wrap; line-height: 1.5; }
.fm.owner { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.fm.foreman { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.fm.system { align-self: center; background: none; color: var(--text-tertiary); font-size: 11.5px; padding: 3px; }
.fm .ts { display: block; font-size: 10px; opacity: .6; margin-top: 3px; }

.crit {
  display: inline-flex; align-items: center;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  margin: 2px 5px 2px 0;
}
.crit.met { border-color: rgba(53, 196, 141, .4); color: #7EE2A8; background: var(--good-wash); }

/* ---------- live peek ---------- */
pre.peek {
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  font: 11px/1.5 ui-monospace, "SF Mono", Menlo, monospace;
  color: #C9D1D9;
  max-height: 46vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.ansi-r { color: #F1A5A9; } .ansi-g { color: #7EE2A8; } .ansi-y { color: #E8D284; }
.ansi-b { color: #8AB4F8; } .ansi-m { color: #D0A9F5; } .ansi-c { color: #84DBE8; }
.ansi-bold { font-weight: 700; }

/* ---------- co-work chat view (task-70): ANSI stripped into readable blocks ---------- */
.cwbox { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; }

/* ---------- terminal workspace (task-87): iTerm/Arc-style rail + resizable panes,
   xterm.js over a WS pty. See docs/design/terminal-workspace.md. ---------- */
.term-view { display: flex; height: 100%; min-height: 0; }
.term-rail { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; border-right: 1px solid var(--border-hairline); min-height: 0; }
.term-rail-top { display: flex; gap: 6px; padding: 10px 10px 8px; }
.term-rail-top input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: 12.5px/1.4 inherit; background: transparent; color: var(--text); }
.term-rail-body { flex: 1; overflow-y: auto; padding: 0 6px 8px; }
.term-rail-foot { padding: 8px 10px; border-top: 1px solid var(--border-hairline); }
.term-rail-foot .act { width: 100%; }

.term-grp { margin-left: calc(var(--depth, 0) * 12px); }
.term-grp-head { display: flex; align-items: center; gap: 6px; padding: 6px 6px; border-radius: 7px; cursor: pointer; font-size: 12.5px; color: var(--text-secondary); }
.term-grp-head:hover { background: var(--surface-hover); }
.term-disclosure { display: inline-block; width: 10px; font-size: 9px; transition: transform var(--dur) var(--ease); color: var(--text-tertiary); }
.term-disclosure.closed { transform: rotate(-90deg); }
.term-grp-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-grp-actions { display: none; gap: 2px; }
.term-grp-head:hover .term-grp-actions { display: flex; }
.term-grp-actions .icon-btn { width: 20px; height: 20px; font-size: 12px; }
.term-grp-body { margin-left: 8px; }

.term-tab { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 20px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.term-tab:hover { background: var(--surface-hover); }
.term-tab.active { background: var(--accent-wash); }
.term-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; }
.term-tab.open .term-tab-dot { background: #4ade80; }
/* task-94: a tab whose session died (task-92's reaper, a manual stop, a boot sweep) stays
   in the rail — same name, same position — but must never look indistinguishable from a
   merely-closed one. */
.term-tab.ended .term-tab-dot { background: var(--warn); }
.term-tab.ended .term-tab-purpose { color: var(--warn); }
.term-tab-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.term-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-tab-purpose { font-size: 10.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-tab-actions { display: none; gap: 2px; flex: 0 0 auto; }
.term-tab:hover .term-tab-actions { display: flex; }
.term-tab-actions .icon-btn { width: 20px; height: 20px; font-size: 12px; }

/* :hover does not exist on a touch screen, and the Deck is a PWA the owner opens on a
   phone. Hover-gated controls are therefore not "subtle" there — they are unreachable:
   park, split, purpose, minimize and delete had no touch affordance at all. Reveal them
   persistently only where the pointer cannot hover, so desktop stays uncluttered. */
@media (hover: none) {
  .term-grp-actions,
  .term-tab-actions { display: flex; }
  /* touch targets: 20px is below the 44px Apple HIG minimum, so give them room */
  .term-grp-actions .icon-btn,
  .term-tab-actions .icon-btn { width: 32px; height: 32px; font-size: 15px; }
}

/* ---------- task-95: drag and drop in the rail — reorder a tab, move it into/out of a
   subgroup, re-parent a whole subgroup, or drag a tab onto the main left sidebar to park
   it. Pointer events (see termDragStart in deck/index.html), not HTML5 DnD, so this works
   identically with mouse and touch. ---------- */
.term-drag-handle {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 16px; height: 20px; color: var(--text-tertiary); cursor: grab;
  touch-action: none; /* only a deliberate grab on THIS element suppresses scroll */
  opacity: .35;
}
.term-drag-handle:active { cursor: grabbing; }
.term-drag-handle .ico { width: 13px; height: 13px; }
.term-tab:hover .term-drag-handle,
.term-grp-head:hover .term-drag-handle,
.term-parked:hover .term-drag-handle { opacity: .8; }
/* on touch there is no hover to reveal the handle by — same reasoning as the action
   buttons above, and the same 44px-ish touch target bump. */
@media (hover: none) {
  .term-drag-handle { opacity: .55; width: 26px; height: 32px; }
  .term-drag-handle .ico { width: 16px; height: 16px; }
}

/* the floating clone that follows the pointer while dragging — a real visual object, not
   just a changed cursor, per the "show a real drop indicator" requirement. */
.term-drag-ghost {
  position: fixed; z-index: 500; pointer-events: none; opacity: .95;
  background: var(--surface); border: 1px solid var(--border-hairline);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.term-drag-ghost .term-drag-handle,
.term-drag-ghost .term-tab-actions,
.term-drag-ghost .term-grp-actions { display: none; }
/* the row being dragged stays in place (so a same-group reorder doesn't blank out the
   list) but visibly dims, so it's obvious a copy is following the pointer instead. */
.term-drag-source { opacity: .35; }

/* insertion line: reorder within a group, or move next to a sibling in a different one */
.term-tab.term-drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.term-tab.term-drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
/* a group that would receive the dragged item */
.term-grp.term-drop-into > .term-grp-head { background: var(--accent-wash); outline: 2px dashed var(--accent); outline-offset: -2px; }
/* dropping a group into itself or its own descendant — shown as refused, not just silently ignored */
.term-grp.term-drop-forbidden > .term-grp-head { outline: 2px dashed var(--warn); outline-offset: -2px; }
/* the rail's own empty background: drop a subgroup here to move it back to the top level */
.term-rail-body.term-drop-root { outline: 2px dashed var(--border-hairline); outline-offset: -4px; border-radius: 8px; }
/* the MAIN left sidebar — drag a tab here to park it, same end state as the 📌 button */
#side.term-drop-park { background: var(--accent-wash); outline: 2px dashed var(--accent); outline-offset: -4px; border-radius: 10px; }
.icon-btn.active { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-wash); }

/* ---------- parked terminals in the MAIN left sidebar (task-87 amendment): a terminal
   pinned from the rail above shows up here too, inside the app's actual nav — reachable
   from any tab, not just while Terminals is open. Reuses .snav/.chsec (the same classes
   the nav links and channel tree use) so it reads as part of that list, not a bolted-on
   extra. ---------- */
.term-parked-section { margin-top: 2px; }
.term-parked-grp { margin-left: calc(var(--depth, 0) * 10px); }
.term-parked-grp-name { font-size: 11px; color: var(--text-tertiary); padding: 4px 10px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-parked { padding-left: calc(10px + var(--depth, 0) * 10px); }
.term-parked-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.term-workspace-wrap { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* THE FOREMAN PANE (orchestrator.md §4.2): the project's own conversation, beside its
   terminals. Collapsible because on a narrow screen the terminal is the point; the
   collapsed state persists so it does not reopen on every tab switch. */
/* An agent tab is visually distinct from a shell: something other than the owner types
   into it, and a rail where those look identical is where you lose track of that. */
/* A live session with no tab in THIS browser — running, attachable, but not open here. */
.term-tab.loose { opacity: .72; border-style: dashed; }
.term-tab.loose:hover { opacity: 1; }
.term-tab.agent .term-tab-name { color: var(--accent-soft); }
.term-agent-badge { margin-right: 4px; opacity: .9; }
.steps.dim { opacity: .45; cursor: default; }

.term-foreman { width: 340px; flex: 0 0 340px; display: flex; flex-direction: column;
  border-left: 1px solid var(--border-hairline); min-height: 0; }
/* Desktop only: the owner folds the pane away to give the terminal the full width. On a
   narrow screen `collapsed` means nothing — the mobile rules below own visibility there,
   so a stale collapsed flag from a desktop session cannot hide the pane on a phone. */
@media (min-width: 900px) { .term-foreman.collapsed { display: none; } }
.term-foreman .fm-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--border-hairline); }
.term-foreman .fm-head select { flex: 1; min-width: 0; background: transparent; color: var(--text);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 12.5px/1.4 inherit; }
.term-foreman .fm-dial { padding: 8px 10px; border-bottom: 1px solid var(--border-hairline); }
.term-foreman .fm-dial .btns { gap: 6px; }
.term-foreman .fm-dial .act { min-width: 38px; }
.term-foreman .feed { flex: 1; overflow-y: auto; padding: 8px 10px; }
.term-foreman .chatbar { padding: 8px 10px; border-top: 1px solid var(--border-hairline); }
.term-toolbar { display: flex; justify-content: flex-end; padding: 8px 10px; gap: 8px; }
.term-workspace { flex: 1; min-height: 0; padding: 0 10px 10px; }
.term-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--dim); }
.term-pane, .term-split { height: 100%; min-height: 0; }
.term-pane { display: flex; flex-direction: column; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-hairline); }
.term-pane-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg-raised); font-size: 12.5px; }
.term-mobile-back { display: none; }
.term-pane-title { font-weight: 650; }
.term-pane-purpose { color: var(--text-tertiary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-pane-actions .icon-btn { width: 22px; height: 22px; }
.term-pane-body { flex: 1; min-height: 0; background: #111318; padding: 6px; }
.term-pane-body .xterm, .term-pane-body .xterm-viewport, .term-pane-body .xterm-screen { height: 100%; }

.term-split { display: flex; }
.term-split[data-orientation="column"] { flex-direction: column; }
.term-split-child { min-width: 0; min-height: 0; overflow: hidden; }
.term-split-child:first-child { flex: var(--term-ratio, .5) 1 0; }
.term-split-child:last-child { flex: calc(1 - var(--term-ratio, .5)) 1 0; }
.term-divider { flex: 0 0 6px; cursor: col-resize; position: relative; }
.term-split[data-orientation="column"] .term-divider { cursor: row-resize; }
.term-divider::after { content: ''; position: absolute; inset: 0; margin: auto; width: 2px; height: 100%; background: var(--border-hairline); border-radius: 1px; }
.term-split[data-orientation="column"] .term-divider::after { width: 100%; height: 2px; }
.term-divider:hover::after, .term-divider:active::after { background: var(--accent-soft); }

.newterm-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.newterm-card p { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 0; }
.cw-msg { font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; padding: 6px 0; border-top: 1px solid var(--border-hairline); }
.cw-msg:first-child { border-top: 0; }
.cw-tool { font: 11px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-tertiary); padding: 2px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  padding: max(env(safe-area-inset-top), 14px) 0 0;
  max-width: 560px;
  margin-inline: auto;
  animation: overlay-in var(--dur-slow) var(--ease);
}
@keyframes overlay-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.overlay .bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--border-hairline);
  margin-bottom: 2px;
}
.overlay .bar h3 { font-size: 15.5px; font-weight: 650; flex: 1; letter-spacing: -.01em; }
.overlay .body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px calc(env(safe-area-inset-bottom) + 14px); }

pre.diff {
  background: #0A0C10;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
  font: 11px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text-tertiary);
}
pre.diff .add { color: #7EE2A8; } pre.diff .del { color: #F1A5A9; }
pre.diff .hunk { color: var(--accent-soft); } pre.diff .file { color: var(--text); font-weight: 700; }
pre.diff .dl { display: block; cursor: pointer; border-left: 2px solid transparent; padding-left: 5px; margin-left: -5px; border-radius: 2px; }
pre.diff .dl:hover { background: var(--surface-hover); }
pre.diff .dl.sel { background: var(--accent-wash); border-left-color: var(--accent-soft); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 84px;
  transform: translateX(-50%) translateY(6px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 550;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  pointer-events: none;
  z-index: 30;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- desktop control room: sidebar · conversation · rail ---------- */
@media (min-width: 900px) {
  body { max-width: none; min-height: 100vh; }
  header { padding: 14px 24px 12px; border-radius: 0; }
  .shell {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr) 300px;
    gap: 0;
    /* body is a flex column, and an AUTO cross-axis margin cancels flex stretch — so
       `margin: 0 auto` alone left .shell shrink-to-fit (753px inside a 1560px window)
       and every tab quietly used half the screen. The terminals tab collapsed worst,
       because hiding the 300px rail removed the padding that had been masking it: the
       pane fell to 229px. width:100% restores the fill; the auto margin still centers
       once the viewport is wider than max-width. */
    width: 100%;
    max-width: 1560px;
    margin: 0 auto;
    align-items: start;
  }
  #side {
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-hairline);
    padding: 12px 12px 16px;
    position: sticky; top: 61px;
    height: calc(100vh - 61px);
    overflow-y: auto;
  }
  #rail {
    display: block;
    border-left: 1px solid var(--border-hairline);
    padding: 18px 16px;
    position: sticky; top: 61px;
    height: calc(100vh - 61px);
    overflow-y: auto;
  }
  main { padding: 20px 32px 40px; overflow-y: visible; }
  nav { display: none; }               /* the sidebar IS the nav on desktop */
  .homecap { display: none; }          /* capacity lives in the sidebar footer */
  .backbtn { display: none; }
  .cols { display: grid; grid-template-columns: 1.35fr .78fr; gap: 18px; align-items: start; }
  .card { padding: 18px 20px; }
  .overlay { max-width: 780px; padding-top: 26px; }
  .overlay .bar { padding: 0 4px 14px; }
  .overlay .body { padding: 14px 4px 30px; }

  /* the terminal workspace wants the full width and a fixed-height canvas, not the
     scrolling-document layout every other tab uses — drop the right-hand spend rail and
     let main fill the viewport exactly, so the pane split can size itself off 100%. */
  body.tab-terminals .shell { grid-template-columns: 264px minmax(0, 1fr); }
  body.tab-terminals #rail { display: none; }
  body.tab-terminals main { padding: 0; overflow: hidden; height: calc(100vh - 61px); }
}

@media (min-width: 1200px) {
  main { padding: 22px 40px 44px; }
}

/* demo-backed questions: the screenshot the question is about, tap to open full */
.item img.demo { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid var(--line); margin: 6px 0 2px; cursor: zoom-in; display: block; }

/* spend sparkline: 14 days of worker activity */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin: 4px 0 10px; }
.spark i { flex: 1; background: var(--accent); opacity: .45; border-radius: 2px; min-height: 2px; }
.spark i:last-child { opacity: .9; }

/* ---- triage mode: one decision at a time, judgments per minute ---- */
.triage-cta { width: 100%; max-width: 600px; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 14px; padding: 13px 16px; font-size: 14.5px; }
.tri-head { display: flex; align-items: center; gap: 12px; max-width: 600px; margin: 4px auto 14px; }
.tri-prog { flex: 1; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.tri-prog i { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width .25s ease; }
.tri-count { font-size: 12px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tri-card { max-width: 600px; margin: 0 auto; }
.tri-kind { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; font-weight: 600; }
.tri-card h2 { font-size: 19px; line-height: 1.35; margin: 0 0 10px; text-wrap: balance; }
.tri-card .why { color: var(--dim); font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; white-space: pre-wrap; }
.tri-detail { font-size: 12px; color: var(--dim); background: var(--bg, transparent); border: 1px solid var(--line); border-radius: 8px; padding: 10px; overflow-x: auto; margin-bottom: 12px; white-space: pre-wrap; }
.tri-opts { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; }
.tri-opts .act { width: 100%; text-align: left; padding: 12px 14px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; }
.tri-foot { display: flex; gap: 8px; justify-content: center; border-top: 1px solid var(--line); padding-top: 12px; }
.tri-hint { text-align: center; font-size: 12px; color: var(--dim); margin-top: 12px; }
.kbd { display: none; font: 11px/1 ui-monospace, monospace; border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; color: var(--dim); flex: 0 0 auto; }
@media (hover: hover) and (min-width: 700px) { .kbd { display: inline-block; } }
.tri-zero { text-align: center; max-width: 480px; margin: 10vh auto 0; padding: 24px; }
.tri-zero-mark { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.tri-zero-mark .ico { width: 28px; height: 28px; }
.tri-zero h2 { font-size: 21px; margin-bottom: 8px; }
.tri-zero p { color: var(--dim); font-size: 14px; line-height: 1.55; margin-bottom: 18px; }

/* plan-gate overlay: the drafted plan, readable as a document */
.planmd { font: 12.5px/1.6 ui-monospace, SFMono-Regular, monospace; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 14px; white-space: pre-wrap; overflow-x: auto; }

/* scoreboard trend marks: green = moving the right way for that metric */
.trend-good { color: #4ade80; font-size: 11px; }
.trend-bad { color: #f87171; font-size: 11px; }

/* ---------- the Slack IA: channels, conversation, capacity ---------- */
/* mobile hides the panes; scoped so it can't out-cascade the desktop grid above */
@media (max-width: 899.98px) {
  #side, #rail { display: none; }
  .shell { display: block; }
}

/* mobile terminal fallback: rail and workspace stack instead of sitting side by side; a
   tab tap hides the rail and shows the pane full-screen (.term-mobile-pane on <body>) with
   a back button — no split-pane rendering and no drag-resize divider on touch (task-87
   docs/design/terminal-workspace.md §5 scopes N-way/full drag-resize to desktop for v1). */
@media (max-width: 899.98px) {
  /* Height comes from a MEASUREMENT, not two literals — see syncChromeVars. It stays in
     normal flow on purpose: taking it out (position:fixed) collapses #main to nothing,
     and the sticky bottom nav then rides up to the middle of the screen. */
  .term-view { flex-direction: column; height: var(--term-h, calc(100dvh - 124px)); }
  .term-rail { width: 100%; flex: 1 1 auto; border-right: 0; }
  .term-workspace-wrap { display: none; flex: 1 1 auto; min-height: 0; }
  body.term-mobile-pane .term-rail { display: none; }
  body.term-mobile-pane .term-workspace-wrap { display: flex; }
  .term-mobile-back { display: inline-flex; }
  .term-toolbar { display: none; } /* orientation toggle is a desktop-only affordance here */
  .term-split { flex-direction: column !important; }
  .term-divider { pointer-events: none; opacity: 0; height: 0; flex-basis: 0; }
  .term-split-child:last-child { display: none; } /* only the primary pane renders on mobile */

  /* THE FOREMAN PANE ON A PHONE. It used to be `display: none` under 900px, which put the
     project conversation — the most-used surface in this design — out of reach on the one
     device the push/passkey/relay stack was built for. Same full-screen idiom as the
     terminal pane above: rail, pane and foreman are three mutually-exclusive views. */
  .term-foreman { display: none; width: 100%; flex: 1 1 auto; border-left: 0; }
  body.term-mobile-foreman .term-rail { display: none; }
  body.term-mobile-foreman .term-workspace-wrap { display: none; }
  body.term-mobile-foreman .term-foreman { display: flex; }
}

/* The pointer that replaced the channel's composer: a goal thread says where the work
   stands; the conversation about it happens once, with the project's foreman. */
.chpoint { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 12px 14px;
  border: 1px dashed var(--line); border-radius: var(--r-md); cursor: pointer; }
.chpoint:hover { border-color: var(--accent-soft); background: var(--surface-hover); }
.chpoint b { font-size: 13.5px; color: var(--accent-soft); }
.chpoint span { font-size: 12.5px; color: var(--dim); line-height: 1.5; }

/* sidebar nav + tree */
.snav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--dim); cursor: pointer; }
/* the sidebar row is already flex/space-between, so its count pill rides as a normal
   flex child on the right edge. .badge is absolute for the bottom nav buttons, where
   that IS correct; without this reset it escaped .snav and floated over the page. */
.snav .badge { position: static; box-shadow: none; }
.snav:hover { background: var(--accent-wash); color: var(--text); }
.snav.cur { background: var(--accent-wash); color: var(--text); font-weight: 600; }
.chtree { flex: 1; overflow-y: auto; margin: 10px 0; border-top: 1px solid var(--line); padding-top: 8px; }

/* channel rows (home + sidebar tree) */
.chsec { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 12px 10px 4px; font-weight: 600; }
.chrow { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "name meta" "prev meta"; gap: 1px 8px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
.chrow:hover, .chrow.cur { background: var(--accent-wash); }
.chrow.needs { background: var(--accent-wash-strong); }
.chname { grid-area: name; font-size: 14.5px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chname .hash { color: var(--dim); font-weight: 400; }
.chprev { grid-area: prev; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chmeta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums; }
.chrow.unread .chname, .chrow.unread .chprev { color: var(--text); }
.chrow.unread .chprev { font-weight: 500; }
.chbadge { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.livedot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; flex: 0 0 auto; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; } }
/* liveness: a row patched into place (new channel, or one reappearing after a
   reorder) fades + slides in instead of the list silently jumping */
.arrive { animation: rowArrive .32s var(--ease) both; }
@keyframes rowArrive { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .arrive { animation: none; } }
/* sidebar tree: tighter rows, no preview */
.chtree .chrow { padding: 6px 10px; grid-template-areas: "name meta"; }
.chtree .chsec { padding: 10px 10px 3px; }

/* capacity meters: the three AI plans, always visible */
.capstrip { border-top: 1px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.homecap .capstrip { border-top: 0; padding: 4px 12px 12px; }
.capm .capl { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--dim); margin-bottom: 3px; }
.capm .capl span:first-child { color: var(--text); font-weight: 600; }
.capm.warn .capl span:first-child { color: #f87171; }
.capbar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.capbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.capbar i.hot { background: #f87171; }
.capbar i.idle { background: var(--line); }

/* channel view: header, criteria, conversation */
.chhead { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0 10px; }
.chtitle b { font-size: 16px; }
.chgoal { font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.chcrits { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; }
.feed#chfeed { max-height: none; }
.fm.ask { background: var(--accent-wash); border: 1px solid var(--accent-wash-strong); border-radius: 12px; padding: 10px 12px; }
.fm.ask .btns { margin-top: 8px; }
.capm .capl { gap: 8px; }
.capm .capl span:first-child { white-space: nowrap; flex: 0 0 auto; }
.capm .capl span:last-child { text-align: right; }

/* goal-thread: progress card, happening-now / planned rows, day-grouped history */
.goalhead { margin: 12px 0; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 12px 14px; }
.goalhead .gh-k { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 8px; }
.goalhead .gh-prog { display: flex; align-items: center; gap: 10px; }
.goalhead .gh-prog .capbar { flex: 1; }
.goalhead .gh-prog .pn { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--dim); flex: none; font-variant-numeric: tabular-nums; }

.trow { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.trow .td { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px; }
.trow .td.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-wash); animation: pulse 2.2s infinite; }
.trow .td.dn { background: var(--good); }
.trow .tb { flex: 1; min-width: 0; }
.trow .tt { font-size: 14px; font-weight: 600; }
.trow .ts { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.trow .num { flex: none; width: 16px; text-align: center; font-size: 12px; font-weight: 600; color: var(--dim); margin-top: 3px; }
.trow.donerow .tt { font-weight: 400; color: var(--dim); }
.trow:last-child { border-bottom: 0; }

.stepwrap { display: block; margin-top: 6px; border-left: 2px solid var(--border); padding-left: 10px; }
.step { display: flex; gap: 7px; align-items: baseline; font-size: 12.3px; padding: 1.5px 0; color: var(--dim); }
.step.done { color: var(--good); }
.step.now { color: var(--text); font-weight: 600; }
.step .sck { width: 13px; flex: none; }

.hday { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 10px 0 2px; }
.ev { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.evc { display: inline-flex; align-items: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; background: var(--surface-hover); border: 1px solid var(--border); border-radius: 4px; padding: 1px 7px; color: var(--dim); text-decoration: none; }
.evc.ok { color: var(--good); }
.quote { font-size: 12.5px; color: var(--text-secondary); font-style: italic; margin: 6px 0 0; line-height: 1.45; }
.quote b { color: var(--text); font-style: normal; font-weight: 600; }

/* ================================================================
   THE SLEEK PASS — Orca/Lightfield-grade: ambient depth, one
   signature gradient, glass surfaces, mono telemetry, AI presence.
   ================================================================ */
:root {
  --grad: linear-gradient(135deg, #6E7BFF 0%, #9A6BFF 55%, #46C8FF 120%);
  --grad-soft: linear-gradient(135deg, rgba(110,123,255,.9), rgba(154,107,255,.9));
  --glow: 0 0 14px rgba(122, 108, 255, .45);
  --glow-soft: 0 0 10px rgba(122, 108, 255, .25);
}

/* ambient depth: a faint indigo aurora behind everything */
body {
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(110, 123, 255, .09), transparent 62%),
    radial-gradient(800px 460px at 88% -4%, rgba(70, 200, 255, .05), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}
header { border-bottom: 0; }
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(122,108,255,.35) 30%, rgba(70,200,255,.25) 70%, transparent);
}
header { position: sticky; }
.brand .mark { filter: drop-shadow(0 0 8px rgba(122,108,255,.65)); }

/* glass surfaces: translucent cards let the aurora breathe through */
.card {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .07);
}

/* mono telemetry: metadata reads like instrumentation */
.label, .chsec, .tag, .ts, .chmeta, .tri-kind, .tri-count, .kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.label, .chsec { font-size: 10px; letter-spacing: .12em; }
.tag { letter-spacing: .04em; }

/* the signature gradient, spent with discipline */
.hline {
  background: linear-gradient(100deg, var(--text) 30%, #9A9FFF 75%, #6FD4FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
button.act:not(.ghost):not(.danger) {
  background: var(--grad-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 8px rgba(110,123,255,.22);
}
button.act:not(.ghost):not(.danger):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--glow); background: var(--grad-soft); }
button.act.ghost {
  background: color-mix(in srgb, var(--surface-hover) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.09);
}
.triage-cta { background: var(--grad-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 16px rgba(110,123,255,.28); }
nav button.on { background: transparent; }
nav button.on .n { filter: drop-shadow(0 0 7px rgba(122,108,255,.7)); }
.snav.cur { box-shadow: inset 2px 0 0 0 #8B7BFF; background: rgba(122,108,255,.08); }

/* meters, bars, progress: gradient fills with a hot tip */
.capbar i:not(.idle):not(.hot) { background: var(--grad); box-shadow: 0 0 8px rgba(110,123,255,.5); }
.capbar i.hot { box-shadow: 0 0 8px rgba(241,89,95,.6); }
.tri-prog i, .spark i { background: var(--grad); }
.spark i { opacity: .55; box-shadow: none; }

/* AI presence: live things glow; agent messages carry an identity orb */
.livedot { box-shadow: 0 0 8px rgba(74,222,128,.8); }
.dot { box-shadow: 0 0 0 3px var(--good-wash), 0 0 10px rgba(53,196,141,.6); }
.chbadge { background: var(--grad); box-shadow: var(--glow-soft); }
.fm.foreman { position: relative; }
.fm.foreman::before {
  content: ""; position: absolute; left: -5px; top: -5px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 8px rgba(122,108,255,.55);
  border: 2px solid var(--bg);
}
.fm.ask { border: 1px solid rgba(122,108,255,.35); box-shadow: inset 0 0 24px rgba(110,123,255,.06), 0 0 14px rgba(110,123,255,.10); }
.fm.system { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: .02em; }

/* working shimmer: anything actively running breathes */
.tag.run {
  background: linear-gradient(90deg, rgba(110,123,255,.25), rgba(70,200,255,.35), rgba(110,123,255,.25));
  background-size: 200% 100%;
  animation: breathe 2.6s ease-in-out infinite;
  border-color: rgba(122,108,255,.4);
}
@keyframes breathe { 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .tag.run { animation: none; } }

/* zero-state polish */
.tri-zero-mark { background: var(--grad); color: #fff; box-shadow: var(--glow); }

/* ---------- kind badges: needs-you cards (Board) + decision cards (Catch up) ----------
   named .kbadge (not .badge) — .badge is already load-bearing for the nav unread-count pill */
.kbadge {
  display: inline-flex; align-items: center;
  font: 650 10.5px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: .01em;
  white-space: nowrap;
}
.kbadge.question { background: var(--accent-wash); color: var(--accent-soft); }
.kbadge.approval { background: var(--accent-wash-strong); color: var(--accent-soft); }
.kbadge.signoff { background: var(--good-wash); color: var(--good); }
.kbadge.stuck { background: var(--bad-wash); color: var(--bad); }
.kbadge.proposal { background: var(--surface-hover); color: var(--text-secondary); }
.kbadge.plan { background: var(--warn-wash); color: var(--warn); }
.kbadge.vision { background: var(--surface-hover); color: var(--accent-soft); }
.kbadge.review { background: var(--good-wash); color: var(--good); }
.kbadge.intake { background: var(--warn-wash); color: var(--warn); }
.kbadge.flip { background: var(--surface-hover); color: var(--text-secondary); }
.kcard-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.kcard-src { margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* ---------- workstream rows (Streams tab): status-accented border, progress, state chip ---------- */
.stream {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 13px;
  margin-bottom: 8px;
  background: var(--surface);
}
.stream.needs { border-left-color: var(--accent-soft); }
.stream.live { border-left-color: var(--good); }
.stream.planned, .stream.plan { border-left-color: var(--text-tertiary); }
.stream.blocked { border-left-color: var(--bad); }
.stream .shead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.stream .snow { font-size: 12.8px; color: var(--text); margin: 2px 0 4px; }
.stream .snow b { font-weight: 650; }
.sbar { height: 4px; background: var(--surface-active); border-radius: 2px; overflow: hidden; margin: 8px 0 6px; }
.sbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.schip {
  flex: none;
  font: 650 10px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  letter-spacing: .02em;
  border-radius: 5px;
  padding: 3px 7px;
}
.schip.live { background: var(--good-wash); color: var(--good); }
.schip.needs { background: var(--accent-wash-strong); color: var(--accent-soft); }
.schip.planned, .schip.plan { background: var(--surface-active); color: var(--text-secondary); }
.schip.blocked { background: var(--bad-wash); color: var(--bad); }
.schip.sched { background: var(--accent-wash); color: var(--accent-soft); }

/* ================= THE BRIDGE REBUILD (one app: Bridge · Channels · Company · Engine) ============= */
/* heartbeat strip lives inside <header>: always-on vitals, click → Engine */
.hb { display: flex; align-items: center; gap: 10px; margin-left: auto; cursor: pointer; border: 0; background: transparent;
  font: 500 11px/1 ui-monospace, Menlo, monospace; color: var(--text-tertiary); letter-spacing: .02em; padding: 6px 8px; border-radius: 8px; }
.hb:hover { background: color-mix(in srgb, var(--text) 5%, transparent); color: var(--text-secondary); }
.hb .hbm { display: flex; align-items: center; gap: 4px; }
.hb .hbbar { width: 34px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 12%, transparent); overflow: hidden; }
.hb .hbbar i { display: block; height: 100%; background: var(--accent-soft); }
.hb .hbdot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.hb .hbdot.down { background: #D1494F; }
@media (max-width: 640px) { .hb .hbm.wide { display: none; } }

/* the Bridge: one prioritized stream of decision cards */
.bcard { border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px 12px; margin-bottom: 8px;
  background: var(--bg-raised, transparent); scroll-margin-top: 90px; }
.bcard .kcard-head { margin-bottom: 7px; }
.bcard .btns { margin-top: 11px; }
.bcard .btns + .silence, .bcard .silence { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border-hairline); }
/* the second row of buttons ('Details, proof & questions') is secondary — let it read that way */
.bcard .btns:nth-of-type(2) .act { font-size: 12.5px; padding: 7px 11px; }
.bcard.focus { outline: 2px solid var(--accent-soft); outline-offset: -1px; }
.bcard h4 { font-size: 14.5px; line-height: 1.45; letter-spacing: -.005em; margin: 4px 0 3px; }
.bcard p { color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.bcard .btns { margin-top: 10px; }
.bzero { text-align: center; padding: 56px 20px; color: var(--text-tertiary); }
.bzero b { display: block; font-size: 18px; color: var(--text); margin-bottom: 6px; }
.keyhint { display: none; font: 11px/1 ui-monospace, Menlo, monospace; color: var(--text-tertiary); padding: 8px 2px 14px; }
@media (min-width: 900px) { .keyhint { display: block; } }
kbd.k { border: 1px solid var(--line); border-radius: 4px; padding: 1.5px 5px; font: inherit; }

/* inline review expansion inside a Bridge card */
.rvx { margin-top: 12px; border-top: 1px solid var(--border-hairline); padding-top: 10px; }
.rvx .arms { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
@media (min-width: 900px) { .rvx .arms { grid-template-columns: 1fr 1fr; } }
.rvx .arm { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.rvx .arm .ah { display: flex; justify-content: space-between; margin-bottom: 4px; }
.rvx .arm .ah b { font: 600 10px/1.6 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); }
.rvx .arm ul { padding-left: 15px; color: var(--text-secondary); }
.rvx .arm p { font-size: 12px; }
.scorechip { font: 700 10px/1 ui-monospace, Menlo, monospace; padding: 3px 6px; border-radius: 6px; }
.scorechip.good { color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); }
.scorechip.warn { color: #C9822A; border: 1px solid rgba(201,130,42,.4); }
.rvx .patch { font: 11.5px/1.6 ui-monospace, Menlo, monospace; overflow: auto; max-height: 46vh;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 0; }
.rvx .patch div { padding: 0 12px; white-space: pre; }
.rvx .patch .add { background: color-mix(in srgb, var(--good) 12%, transparent); }
.rvx .patch .del { background: color-mix(in srgb, #D1494F 12%, transparent); }
.rvx .patch .hunk { color: var(--accent-soft); background: color-mix(in srgb, var(--accent-soft) 8%, transparent); }
.rvx .patch .file { font-weight: 700; padding-top: 8px; }
.rvx .stat { font: 11.5px/1.6 ui-monospace, Menlo, monospace; color: var(--text-secondary); white-space: pre-wrap; margin-bottom: 8px; }

/* Company: KPI band + department cards */
.kband { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi2 { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.kpi2 b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi2 span { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; }
.kpi2 .d { font-size: 11px; margin-top: 2px; font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.kpi2 .d.up { color: var(--good); } .kpi2 .d.down { color: #C9822A; }
.deptgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.dial { margin-left: auto; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.dial button { font: 600 10px/1 ui-monospace, Menlo, monospace; padding: 5px 8px; border: 0; background: transparent; color: var(--text-tertiary); cursor: pointer; }
.dial button.on { background: color-mix(in srgb, var(--accent-soft) 18%, transparent); color: var(--text); }
.trustline { font-size: 11.5px; color: var(--text-tertiary); margin: 3px 0 8px; }
.wsrow { padding: 7px 0; border-top: 1px solid var(--border-hairline); font-size: 12.5px; }
.wsrow .wsh { display: flex; justify-content: space-between; gap: 10px; }
.wsrow .frac { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.pbar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); margin-top: 6px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent-soft); }
.waitline { margin-top: 7px; font-size: 12px; color: #C9822A; }

/* Engine: fleet rows + live event log */
.wkrow { padding: 8px 0; border-top: 1px solid var(--border-hairline); font-size: 13px; }
.wkrow:first-of-type { border-top: 0; }
.wkrow .wt { display: flex; align-items: center; gap: 8px; }
.wkrow .wtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.wkrow .wstep { margin: 3px 0 0 15px; font-size: 12px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engtag { font: 600 10px/1 ui-monospace, Menlo, monospace; padding: 3px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-soft) 35%, transparent); color: var(--accent-soft); flex: none; }
.evlog { font: 11.5px/1.75 ui-monospace, Menlo, monospace; color: var(--text-secondary); max-height: 300px; overflow-y: auto;
  white-space: pre-wrap; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  background: color-mix(in srgb, var(--text) 5%, transparent); }
.evlog .et { color: var(--accent-soft); }

/* ============ THE DECISION ROOM: click into any card — story · proof · thread · glass floor ==== */
.room { max-width: 720px; }
.room .rk { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.room .story { border-left: 2px solid color-mix(in srgb, var(--accent-soft) 50%, transparent); padding: 2px 0 2px 12px; margin: 10px 0; }
.room .story p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; }
.room .story .vb { font-style: italic; color: var(--text); }
.silence { font-size: 11.5px; color: var(--text-tertiary); margin-top: 6px; }
.rthread { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.rthread .rmsg { font-size: 12.5px; line-height: 1.55; padding: 6px 0; border-top: 1px solid var(--border-hairline); }
.rthread .rmsg:first-of-type { border-top: 0; }
.rthread .rmsg b { font: 600 10px/1.8 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); display: block; }
.rthread .rin { display: flex; gap: 8px; margin-top: 8px; }
.rthread .rin input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 13px/1.4 inherit; background: transparent; color: var(--text); }
.roomterm { font: 11px/1.5 ui-monospace, Menlo, monospace; background: #0B0C10; color: #C8CCD8; border-radius: 10px;
  padding: 10px 12px; max-height: 40vh; overflow: auto; white-space: pre-wrap; word-break: break-all; margin-top: 10px; }

/* THE LINE: the CEO's one-sentence input, pinned on the Bridge */
.theline { display: flex; gap: 8px; margin: 2px 0 12px; }
.theline input { flex: 1; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  font: 14px/1.4 inherit; background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); }
.theline input:focus { outline: 2px solid var(--accent-soft); outline-offset: -1px; }

/* Bounced-review findings on a Bridge card. The owner's note on the first pass:
   "there is no suggested action... the context it provides is not super consumable."
   So: the findings are readable at a glance, the location stays visible because it is
   the most actionable part, and the recommendation is visually the thing you land on. */
.bcard ul.findings { margin: 8px 0 10px; padding-left: 18px; list-style: none; }
.bcard ul.findings li {
  position: relative; margin: 5px 0; line-height: 1.45;
  color: var(--text-secondary, #6b7280); font-size: 13.5px;
}
.bcard ul.findings li::before {
  content: '·'; position: absolute; left: -14px; color: var(--text-tertiary, #9ca3af); font-weight: 700;
}
.bcard ul.findings li code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--chip, rgba(127,127,127,.12)); border-radius: 4px; padding: 1px 5px;
  color: var(--text, inherit); white-space: nowrap;
}
.bcard ul.findings li.more { color: var(--text-tertiary, #9ca3af); font-style: italic; }
.bcard p.rec { margin: 2px 0 10px; font-size: 13.5px; }

/* The weekly window sits directly under its plan's 5h row and is visually subordinate
   to it — same account, longer horizon. Owner: "it should show the weekly and
   session/window-based usage". A plan at 91% of its week previously rendered as a raw
   token count, which is the one number that cannot warn anybody. */
.capstrip .capm.wk { margin-top: -4px; padding-left: 10px; opacity: .85; }
.capstrip .capm.wk .capl { font-size: 11px; }
.capstrip .capm.wk.warn .capl span:last-child { color: var(--danger, #dc2626); font-weight: 600; }

/* The trust dial's meaning, in words rather than a tooltip. title= does not exist on a
   phone, so the L1/L2/L3 buttons rendered with no indication of what they do — and one
   tap used to apply immediately. */
.trustnow { color: var(--text-tertiary, #9ca3af); font-size: 12px; padding-top: 2px; }
.trustconfirm { color: var(--text, inherit); font-size: 12.5px; padding-top: 4px; gap: 8px; }
.trustconfirm b { font-weight: 650; }

/* Passkey enrollment on the Bridge. It had no reachable home before — the only button
   lived in an orphaned today() view nothing could navigate to, so the lock screen's
   "add one from Today" pointed at nothing. Shown until this device has one. */
.pkcard { border-color: var(--accent, #2C64C6); }
.pkcard .label { color: var(--accent, #2C64C6); }

/* W3: the rail's group actions carried their meaning only in `title`, which no touch
   device shows. Labelled buttons need to read as compact chips rather than the icon
   squares they replaced, and must stay legible at 390px. */
.term-grp-actions .term-act { width: auto; padding: 0 8px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* A live-terminal count, so one working project is findable among thirty dormant ones
   without opening each. */
.term-live-n { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent, #2C64C6); color: #fff; font: 700 11px/18px ui-monospace, Menlo, monospace;
  text-align: center; display: inline-block; }
/* the disclosure that keeps 20+ empty projects from burying the one being worked in */
.term-more { padding: 10px 12px; margin-top: 4px; cursor: pointer; color: var(--text-secondary, #6b7280);
  font: 600 12.5px/1.4 inherit; border-top: 1px solid var(--border-hairline, #e5e7eb); }

/* NARROW SCREENS GET THE PRIMARY ACTION, NOT EVERY ACTION.
   Labelling the group buttons (a fix — `+` and `＋⌄` were indistinguishable without the
   tooltips a phone never shows) cost width, and project names began truncating:
   "peak-front-d…", "tenet-cli-mirr…". Knowing WHICH project matters more than being able
   to make a subfolder from this row, and "+ New group" at the foot of the rail already
   creates one. Same reasoning for the per-terminal icons: split (⊞) is meaningless where
   only one pane fits, and purpose (✎) is rare — both stay on desktop, where there is room
   and a pointer to hover them with. */
@media (max-width: 900px) {
  .term-grp-actions .term-act + .term-act { display: none; }
  .term-tab-actions .icon-btn[title^="Split"],
  .term-tab-actions .icon-btn[title^="Purpose"] { display: none; }
  .term-grp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* WHAT THE BUTTONS ACTUALLY DO, ON THE CARD.
   The owner's report: "It's unclear exactly what it wants from me or what the yes or no
   actually does." The critical fact was nowhere on the card — this work is ALREADY
   SHIPPED, so "Yes" is not a decision to ship, it closes the loop. One card variant
   (the Today list) already said so; the two the owner actually sees did not. */
.whatnext { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2, rgba(127,127,127,.08));
  color: var(--text-secondary, #6b7280); font-size: 12.5px; line-height: 1.45; }

/* The decision, before the evidence. The plain summary was always stored — it just sat
   below Before/After, Cost and Risk, so what filled the screen first was
   reviewer-to-reviewer engineering prose. */
.leadsum { border-left: 3px solid var(--accent, #2C64C6); }
.leadsum p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
.riskmore > summary { cursor: pointer; font-size: 12.5px; color: var(--text-secondary, #6b7280); padding: 4px 0; }
/* the judge's verdict as one line, not the paragraph it used to be */
.jline { margin: 4px 0 8px; font-size: 12.5px; color: var(--text-secondary, #6b7280); }

/* Two lines, then "more" — and only when there is actually more. */
h4.hclamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
h4.hclamp.open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.moreline { display: inline-block; margin: 2px 0 6px; padding: 0; border: 0; background: none;
  color: var(--accent, #2C64C6); font: 600 12.5px/1.4 inherit; cursor: pointer; }

/* A tmux session name is long enough to push the row past the viewport — measured at
   419px inside a 390px screen, which reads as the page being broken. Clip it instead. */
.engtag { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* TOUCH TARGETS. The audit counted 27 controls under 36px in the Terminals rail alone,
   and 15 more on Company — the icon buttons, the rail's + and ✦, and the L1/L2/L3 trust
   dial. Apple's guidance is 44px; under ~36 a thumb hits the wrong one, which on a rail
   whose buttons are "pin", "minimise" and "DELETE this terminal" is not a cosmetic
   problem. Desktop keeps the compact sizing — a pointer is precise and the density is
   useful there. */
@media (max-width: 900px) {
  .icon-btn, .dial button, .term-tab-actions .icon-btn, .term-grp-actions .icon-btn {
    min-height: 40px; min-width: 40px;
  }
  .dial button { padding: 0 12px; }
  /* the row has to grow with them, or the taller buttons just overlap their neighbours */
  .term-tab, .term-grp-head { min-height: 44px; }
}
/* The Bridge's answer options ("Work the sign-off queue", "Resume the 9 interrupted
   tasks") were under 36px — the primary decision controls on the primary screen, and the
   ones the whole shop is waiting on. */
@media (max-width: 900px) {
  .act, .btns button { min-height: 42px; }
  .term-grp-name { min-height: 40px; display: inline-flex; align-items: center; }
}

/* GROUPED BY PROJECT. The project was already on every card, as a small grey tag inside
   it — so you had to read every card to learn how many fronts you were being asked
   about. A heading per project answers that before any card is read. */
.pgroup { margin: 0 0 18px; }
.pghead { display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font: 700 13px/1.4 inherit; letter-spacing: .01em; }
.pghead b { font-weight: 700; }
.pgn { min-width: 20px; padding: 1px 7px; border-radius: 10px;
  background: var(--accent, #2C64C6); color: #fff;
  font: 700 11px/17px ui-monospace, Menlo, monospace; text-align: center; }

/* One labelled menu instead of three unlabelled glyphs, on the device that cannot hover.
   Desktop keeps the icon row: a pointer can reveal the tooltip, and the density earns
   its space there. */
.term-more-btn { display: none; }
@media (max-width: 900px) {
  .term-tab-actions .icon-btn { display: none; }
  .term-tab-actions .term-more-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
}
.sheet { display: flex; flex-direction: column; gap: 2px; }
.sheet .act { width: 100%; text-align: left; }
.sheetnote { margin: 0 0 10px; font-size: 12px; color: var(--text-secondary, #6b7280); }
/* The last three undersized targets the audit could still reach: two nav links on Company
   and the register-a-folder row on Engine. Same 42px floor as every other control. */
@media (max-width: 900px) {
  .steps[role="button"], .steps[tabindex] { min-height: 42px; display: flex; align-items: center; }
}

/* What a decision costs, in the one place the eye already is: under the verdict, above the
   detail. Tabular figures so the numbers line up when several cards stack. */
.dstat {
  margin: .25rem 0 .4rem; font-size: .82rem; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* LIVE — the shop while it is working. Each card is a window on one worker: what it is,
   how long it has been at it, what it is doing, and its actual output, moving. */
.livecard { padding-bottom: .55rem; }
.livehead { display: flex; align-items: center; gap: .4rem; font-size: .95rem; }
.livetitle { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livemeta {
  font-size: .76rem; color: var(--text-secondary); margin: .2rem 0 .45rem;
  font-variant-numeric: tabular-nums;
}
.livecard .peek { max-height: 190px; margin: 0 0 .5rem; }

/* A worker waiting for a human is the most useful thing this page can say, so it is the
   one thing here that is allowed to shout. Working is quiet; idle is grey; parked is not. */
.livemeta { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lstate { font-weight: 600; }
.lstate.working { color: var(--ok, #2E7D4F); }
.lstate.idle    { color: var(--text-secondary); }
.lstate.parked  { color: #A33526; }
.livedot.idle   { background: #9aa6a4; }
.livedot.parked { background: #A33526; animation: none; }

/* Watching the work and directing it are one loop; the link between them should not be a
   trip back through the nav. */
.livelink { font-size: .78rem; color: var(--accent); margin: -.15rem 0 .45rem; cursor: pointer; }
.askcard h4 { margin: .2rem 0 .3rem; }

/* The foreman writes reports, not messages. A check-in that fills the screen stops the
   thread reading as a conversation; tapping opens it. */
.msg.clip {
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;
  overflow: hidden; cursor: pointer;
}
.msg.clip::after { content: ' …tap to read'; opacity: .55; font-size: 11px; }

/* Two reviewers, two answers, shown side by side — the shape of the decision IS the
   disagreement, so the card leads with it rather than burying it in prose. */
.split { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .6rem; font-size: .84rem; }
.split .sfwd { color: var(--ok, #2E7D4F); font-weight: 600; }
.split .sbwd { color: #A33526; font-weight: 600; }
.split .svs { color: var(--text-tertiary); font-size: .74rem; }

/* The work, then the terminal. A Claude pane is mostly menus and spinners; what the owner
   needs at a glance is how far through, how much changed, and where. */
.worksum {
  font-size: .82rem; color: var(--text); font-variant-numeric: tabular-nums;
  margin: .1rem 0 .25rem; font-weight: 500;
}
.workstep { font-size: .78rem; color: var(--text-secondary); margin: 0 0 .45rem; }
.termwrap .peek { display: none; }
.termwrap.open .peek { display: block; }
.termtoggle {
  font-size: .74rem; color: var(--text-tertiary); cursor: pointer; padding: .2rem 0;
  text-transform: uppercase; letter-spacing: .08em;
}
.termtoggle::before { content: '▸ '; }
.termwrap.open .termtoggle::before { content: '▾ '; }

/* THE LIST IS THE PRODUCT. One line per item: what it is, whose it is, what it wants.
   Everything else lives one tap down, which is where it always belonged. */
.bsec { margin: .5rem 0 .9rem; }
.bsech {
  display: flex; align-items: baseline; gap: .4rem; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-tertiary);
  padding: 0 .1rem .3rem;
}
.bsecn { font-variant-numeric: tabular-nums; opacity: .7; }
.brow {
  display: flex; align-items: flex-start; gap: .55rem; padding: .62rem .7rem;
  border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface);
}
.brow:first-of-type { border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); }
.brow:last-of-type { border-bottom: 0; border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg); }
.brow:hover, .brow:focus-visible { background: var(--surface-hover); }
.bdot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex: none; margin-top: .42rem; }
.brow.review .bdot, .brow.signoff .bdot, .brow.signoff_digest .bdot { background: #2E7D4F; }
.brow.review_bounced .bdot, .brow.stuck .bdot, .brow.arms_split .bdot { background: #A33526; }
.brow.question .bdot, .brow.approval .bdot, .brow.intake .bdot { background: var(--accent); }
.brow.integrity .bdot { background: #A8730C; }
/* The shop cannot start. Not a warning colour — the same red as a refusal, because this is
   the one card on the Bridge that makes every other card on it moot. */
.brow.blocked_shop .bdot { background: #A33526; }
.brow.blocked_shop b { font-weight: 600; }
.brow.building .bdot { background: #2E7D4F; animation: pulse 2s ease-in-out infinite; }
.btxt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Two lines, not one clipped one. At 390px a single nowrap line fits about thirty
   characters, which turned every row into a prefix — "Reconcile the two parallel 'pend…"
   tells you nothing you can act on. */
.btxt b { font-weight: 500; font-size: .93rem; line-height: 1.32; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bmeta { font-size: .72rem; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bwant {
  flex: none; margin-top: .12rem; font-size: .7rem; color: var(--text-secondary); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 600;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ONE FIRST MOVE. A list without one is a pile, and the honest thing to say is not "here are
   sixteen things" but "start with this, and here is why it is first". */
.starthere {
  background: var(--surface); border: 1px solid var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); padding: .7rem .85rem; margin: .1rem 0 1rem; cursor: pointer;
}
.starthere:hover, .starthere:focus-visible { background: var(--surface-hover); }
.shlabel {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700;
  color: var(--accent); margin-bottom: .3rem;
}
.shtitle { font-size: 1.02rem; font-weight: 600; line-height: 1.3; margin-bottom: .2rem; }
.shwhy { font-size: .8rem; color: var(--text-secondary); line-height: 1.4; }