/* The component system. One card model, one table model, one panel model,
   applied everywhere — which is the thing the old prototype never had.

   Structure follows the six references; colour stays Organic. Where a reference
   is named in a comment, that is where the pattern came from. */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
[hidden] { display: none !important; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   1 · THE WINDOW
   The design does not float the app in a card — it fills the window, edge to
   edge. What floats is a pane with real elevation: the split view, the
   composer, the one card you must look at, and the glass dock on the left.
   ========================================================================== */
.app { height: 100%; padding: 0; }
.shell {
  height: 100%;
  display: grid;
  grid-template-columns: var(--dock-shut) minmax(0, 1fr);
  background: var(--ground);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.shell--nonav { grid-template-columns: minmax(0, 1fr); }

/* ==========================================================================
   2 · THE DOCK, AND 3 · THE NAV
   Both are gone. The 68px icon rail and the 246px nav became one pane of
   glass, the dock, which js/dock.js owns and css/dock.css draws. The shell
   keeps an empty first column for it.

   The wordmark outlived the nav head it sat in: the first run's landing page
   still sets "AutOn" with its "AI CMO" pill.
   ========================================================================== */
.wordmark { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--tr-tight); }
.wordmark-tag {
  font-size: var(--t-micro); font-weight: 600; color: var(--muted);
  background: var(--hover); border-radius: var(--r-pill);
  padding: 3px 7px; letter-spacing: .04em;
}

/* ==========================================================================
   4 · THE TOP BAR, THE LOOP CARD, AND THE PAGE
   ========================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ground); }

.topbar {
  height: var(--top-h); flex: none;
  display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--pad-x);
  background: rgb(245 245 241 / .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--divider);
  position: relative; z-index: 30;
}
.top-back {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--divider);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color var(--fast);
}
.top-back:hover { color: var(--ink); }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: var(--t-base); color: var(--quiet); white-space: nowrap; min-width: 0; }
.crumbs b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.crumb-sep { color: var(--crumb); }
.datechip {
  display: flex; align-items: center; gap: var(--s2); flex: none;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--r-pill); padding: 6px var(--s3);
  font-size: var(--t-base); white-space: nowrap;
}
.datechip svg { color: var(--muted); }
.bell {
  width: 34px; height: 34px; flex: none; position: relative;
  display: grid; place-items: center;
  border-radius: var(--r-pill); border: 1px solid var(--divider);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: color var(--fast);
}
.bell:hover { color: var(--ink); }
.bell-dot {
  position: absolute; top: -2px; right: -2px;
  width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--held); border: 2px solid var(--ground);
}
.askbtn {
  display: flex; align-items: center; gap: 7px; flex: none;
  border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-dark);
  padding: var(--s2) var(--s4);
  font-size: var(--t-base); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--fast);
}
.askbtn:hover { background: var(--ink-2); }

/* -------------------------------------------------------------- the loop */
.loopwrap { flex: none; padding: var(--s5) var(--pad-x) 0; }
.loopcard {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--r-card); padding: var(--s4) var(--s5);
  box-shadow: var(--e1);
}
.loopcard-h { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); flex-wrap: wrap; }
.loop-now { display: flex; align-items: center; gap: 7px; font-size: var(--t-sm); color: var(--ink); white-space: nowrap; }
.loop-now b { font-weight: 600; }
.livedot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--accent); animation: aoPulse 2s ease-in-out infinite; flex: none; }

/* Nine stages: nine across, or three rows of three — never 8 + 1. Nine need
   about 800px at the design's size; under that the same switch drops to a
   third, so a laptop at 1280px no longer strands Re-plan on a line alone. */
.loopcard-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(calc(100% / 9 - 10px), (800px - 100%) * 999, calc(100% / 3 - 10px)), 1fr)); gap: var(--s5) 10px; }
.lstg { border: 0; background: transparent; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 7px; cursor: pointer; min-width: 0; }
.lstg-bar { height: 4px; border-radius: var(--r-pill); display: block; background: var(--hairline); }
.lstg--done .lstg-bar { background: var(--accent-100); }
.lstg--now .lstg-bar { background: var(--ink); }
.lstg-l { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.lstg-n {
  font-family: var(--font-mono); font-size: 9.5px; line-height: 1.4;
  border-radius: 4px; padding: 1px 4px; flex: none;
  color: var(--quiet); background: transparent;
}
.lstg-t { font-size: var(--t-xs); font-weight: 500; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The note may take a second line. With all nine stages on one row a 1280px
   laptop gives each ~90px, and one line cut "12 documents read" to "12
   documents re…" — the figure is the point, so it wraps rather than hides. */
.lstg-note { font-size: var(--t-prov); color: var(--quiet); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.lstg.is-here .lstg-n { background: var(--ink); color: var(--on-dark); }
.lstg.is-here .lstg-t { font-weight: 700; color: var(--ink); }
.lstg:hover .lstg-t { color: var(--ink); }

/* --------------------------------------------------------------- the tabs */
.tabs {
  display: flex; align-items: center; gap: var(--s1); flex: none;
  padding: var(--s3) var(--pad-x) 0;
  overflow-x: auto; scrollbar-width: none}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px var(--s3); border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600; color: var(--muted);
  white-space: nowrap; border: 1px solid transparent;
  transition: background var(--fast), color var(--fast);
}
.tab:hover { background: var(--surface); color: var(--ink); }
.tab.is-on { background: var(--surface); border-color: var(--divider); color: var(--ink); }
.tab-n { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--quiet); }
.tab.is-on .tab-n { color: var(--accent); }

.stageview { flex: 1; min-height: 0; overflow-y: auto; }
.page { padding: var(--s5) var(--pad-x) var(--s9); max-width: 1180px; }
.page--wide { max-width: none; }
.page--narrow { max-width: 820px; }

/* ==========================================================================
   5 · THE GREETING HEADER  — ref 6
   ========================================================================== */
/* .phead and .card-h now live in css/v1.css — defining them here too meant the
   later stylesheet won silently, which is how a layout changes shape without
   anyone editing it. tools/v1.mjs fails the build if that comes back. */
.phead-acts-legacy { display: none; }
.ptitle {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-3xl); line-height: var(--lh-tight);
  margin: 0; letter-spacing: -.026em}
.ptitle--lg { font-size: var(--t-4xl)}
/* ref 1: the two-tone headline */
.ptitle .soft { color: inherit; }   /* was a second colour; a headline carries its own emphasis */
.plede { margin: 6px 0 0; color: var(--n600); font-size: var(--t-md); max-width: 68ch; }
.phead-acts { display: flex; align-items: center; gap: var(--s2); flex: none; }

.eyebrow {
  font-size: var(--t-xs); color: var(--n500);
  text-transform: lowercase; letter-spacing: 0;
  margin: 0 0 var(--s2)}
.eyebrow::first-letter { text-transform: uppercase; }

/* ==========================================================================
   6 · CARDS  — one model. ref 4's header: icon + CAPS label + overflow
   ========================================================================== */
.card {
  background: var(--paper);
  border: 1px solid var(--divider);
  border-radius: var(--r-card)}
/* Elevation is spent once per screen, on the thing that needs a person. */
.card--gate, .card--needs { box-shadow: var(--e2); }
.card--flat { box-shadow: none; }
.card--quiet { background: var(--surface-2); border-color: var(--hairline)}
.card--warn { border-color: var(--terra-300); }
.card--gate { border: 1px solid var(--terra); box-shadow: var(--e2); }
.card--gate .card-t { color: var(--terra-800); }
.card-t {
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  letter-spacing: -.005em}
/* CAPS + mono survive in one place only: where the label names machine output
   rather than a heading a person wrote. */
.card--log .card-t, .card--data .card-t {
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--n600); font-weight: 400;
}
.card-h .grow { flex: 1; }
.card-b {}
.card-b--tight { padding: var(--s3); }
.card-f { border-top: 1px solid var(--hairline)}

/* a section label outside a card */
.slabel {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-sm); font-weight: 600; color: var(--n700);
  margin: var(--s7) 0 var(--s3);
}
.slabel:first-child { margin-top: 0; }
.slabel .grow { flex: 1; }
.slabel-rule { flex: 1; height: 1px; background: var(--divider); }

/* ref 5: bento cells that share edges rather than floating apart */
.bento {
  display: grid; gap: 1px;
  background: var(--divider);
  border: 1px solid var(--divider);
  border-radius: var(--r-card);
  overflow: hidden;
}
.bento > * { background: var(--paper); padding: var(--s4); }

/* ==========================================================================
   7 · STAT TILES  — refs 4, 6
   ========================================================================== */
/* Four readings of one instrument, not four objects: a single panel divided by
   hairlines. The eye reads the row, then a cell. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: var(--divider);
  border: 1px solid var(--divider); border-radius: var(--r-tile);
  overflow: hidden;
}
.tile {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4);
  background: var(--paper);
}
.tile--critical { background: var(--terra-50); box-shadow: inset 3px 0 0 var(--terra); }
.tile-h { display: flex; align-items: center; gap: var(--s2); }
.tile-ico {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; background: var(--n100); color: var(--n700);
}
.tile--critical .tile-ico { background: var(--terra-100); color: var(--terra-800); }
.tile-l {
  font-size: var(--t-xs); color: var(--n600);
  flex: 1; min-width: 0;
}
/* ref 3: the two-tone number — value bold, unit light */
.stat { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; }
.stat-v { font-family: var(--font-display); font-weight: 700; font-size: var(--t-3xl); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums}
.stat-v--lg { font-size: var(--t-4xl); }
.stat-v--xl { font-size: var(--t-5xl); }
.stat-u { font-size: var(--t-sm); color: var(--n500)}
.tile-note { font-size: var(--t-xs); color: var(--n600); }

/* the delta pill (refs 4, 6) */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11px; white-space: nowrap;
}
.delta--good, .delta--up { background: var(--good-bg); color: var(--good); }
.delta--bad, .delta--down { background: var(--held-bg); color: var(--held-ink); }
.delta--flat { background: var(--flat-bg); color: var(--flat); }

/* ==========================================================================
   8 · PILLS, TAGS, BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background var(--fast), border-color var(--fast), color var(--fast), transform var(--fast)}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn--primary { background: var(--terra); color: #fff; box-shadow: var(--e1); }
.btn--primary:hover:not(:disabled) { background: var(--terra-600); }
.btn--dark { background: var(--ink); color: var(--surface); }
.btn--dark:hover:not(:disabled) { background: var(--n900); }
.btn--outline { background: var(--paper); border-color: var(--divider); color: var(--n800); }
.btn--outline:hover:not(:disabled) { border-color: var(--n400); background: var(--surface-2); }
.btn--ghost { background: transparent; color: var(--n700)}
.btn--ghost:hover:not(:disabled) { background: var(--n100); }
.btn--danger { background: var(--stop-bg); color: var(--stop)}
.btn--lg { font-size: var(--t-base)}
.btn--sm { padding: 5px 11px; font-size: var(--t-xs)}
.btn--block { width: 100%}
.btn--icon {}

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-tag);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .05em; white-space: nowrap;
}
.tag--sage { background: var(--sage-100); color: var(--sage-900); }
.tag--terra { background: var(--terra-100); color: var(--terra-900); }
.tag--stop { background: var(--stop-bg); color: var(--stop); }
.tag--n { background: var(--n200); color: var(--n700); }
.tag--out { background: transparent; border: 1px dashed var(--n400); color: var(--n600); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--divider);
  font-size: var(--t-xs); color: var(--n700); white-space: nowrap;
}
.chip--on { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* ref 3/4/6: the segmented control — grey track, raised active */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--n100); border-radius: var(--r-pill); }
.seg-b {
  padding: 5px 13px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--n600);
  font-size: var(--t-xs); font-weight: 500; cursor: pointer;
  transition: background var(--fast), color var(--fast);
}
.seg-b:hover { color: var(--ink); }
.seg-b.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--e1); font-weight: 600; }
.seg--dark .seg-b.is-on { background: var(--ink); color: var(--surface); }

/* ==========================================================================
   9 · TABLES  — ref 4/6: checkbox column, mono values, status pills
   ========================================================================== */
.tablewrap { overflow-x: auto; border-radius: var(--r-card)}
table.t { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.t th {
  text-align: left; padding: 10px var(--s3);
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: .11em; text-transform: uppercase; font-weight: 500;
  color: var(--n500); white-space: nowrap;
  border-bottom: 1px solid var(--divider);
}
table.t td { padding: 11px var(--s3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover { background: var(--surface-2); }
table.t .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.t th.num, table.t td.num { text-align: right; }

/* ref 4: the stacked date chip in a list row */
.daychip {
  width: 40px; flex: none; text-align: center;
  padding: 5px 0; border-radius: var(--r-chip);
  background: var(--surface-2); border: 1px solid var(--divider);
  font-family: var(--font-mono); line-height: 1.2;
}
.daychip b { display: block; font-size: var(--t-md); font-weight: 500; }
.daychip span { font-size: 10px; color: var(--n500); }

.row { display: flex; align-items: center; gap: var(--s3); }
.row--top { align-items: flex-start; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g1 { gap: var(--s1) } .g2 { gap: var(--s2) } .g3 { gap: var(--s3) }
.g4 { gap: var(--s4) } .g5 { gap: var(--s5) } .g6 { gap: var(--s6) }
.mt2 { margin-top: var(--s2) } .mt3 { margin-top: var(--s3) } .mt4 { margin-top: var(--s4) }
.mt5 { margin-top: var(--s5) } .mt6 { margin-top: var(--s6) } .mt7 { margin-top: var(--s7) }

.grid { display: grid; gap: var(--s3); }
/* cols-2 MEANS TWO. It was `repeat(auto-fit, minmax(300px, 1fr))`, which asks
   how many 300px columns fit rather than how many were asked for — three at
   1440px — so four cards drew as 3 + 1 with two empty slots. The floor is now
   the larger of 300px and half the width, so it is two columns, or one where
   two would be narrower than 300px. The 24px it leaves is room for any gap up
   to 48px without dropping to one. */
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(max(300px, calc(50% - 24px)), 1fr)); }
/* An odd count ends with the last card across the whole row, never beside a
   hole. A lone card needs nothing: auto-fit already collapses the empty track. */
.grid.cols-2 > :last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Three in a cols-3 grid are three across or one above another. The plans and
   their three assurances sit in the run's live pane, which the 20 / 80 split
   narrows to ~650px at 1024 — auto-fit gave 2 + 1 there. */
.grid.cols-3:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(100% / 3 - 16px), (720px - 100%) * 999, 100%), 1fr));
}
/* Four in a cols-3 grid are a set of four — the KPI tiles on Home and Queue —
   and a set of four is 4 across or 2 x 2, never 3 + 1. The clamp is a switch:
   past 840px (840px - 100%) is hugely negative and the floor is a quarter;
   under it, hugely positive, and the floor is a half. */
.grid.cols-3:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(25% - 16px), (840px - 100%) * 999, calc(50% - 16px)), 1fr));
}
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s4); align-items: start; }
@media (max-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   10 · TYPE UTILITIES
   ========================================================================== */
.mono { font-family: var(--font-mono)}
.micro { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--n500); }
.xs { font-size: var(--t-xs) } .sm { font-size: var(--t-sm) } .lg { font-size: var(--t-lg) }
.muted { color: var(--n600) } .quiet { color: var(--n500) }
.strong { font-weight: 600 }
.sage { color: var(--sage-700) } .terra { color: var(--terra-700) }
.dash { color: var(--n400) }
.strike { text-decoration: line-through; color: var(--n500); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.021em; margin: 0; }
h2 { font-size: var(--t-2xl); line-height: var(--lh-tight); }
h3 { font-size: var(--t-lg); line-height: var(--lh-snug); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11 · FORM
   ========================================================================== */
.input, .textarea {
  width: 100%; padding: 10px 13px;
  background: var(--paper); border: 1px solid var(--divider);
  border-radius: var(--r-chip); font-size: var(--t-base);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.input:focus, .textarea:focus { outline: 0; border-color: var(--terra-300); box-shadow: 0 0 0 3px var(--terra-50); }
.textarea { resize: vertical; min-height: 84px; line-height: var(--lh-body); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-l { font-size: var(--t-xs); font-weight: 600; color: var(--n700); }

/* ==========================================================================
   12 · THE DARK TOOLTIP  — refs 4, 6
   ========================================================================== */
.tip {
  position: absolute; z-index: 40;
  min-width: 170px; padding: var(--s3);
  background: var(--n900); color: #f6efe2;
  border-radius: var(--r-chip); box-shadow: var(--e-pop);
  font-size: var(--t-xs); pointer-events: none;
}
.tip-t { font-weight: 600; margin-bottom: 6px; }
.tip-r { display: flex; align-items: center; gap: var(--s2); padding: 2px 0; }
.tip-bar { width: 3px; height: 13px; border-radius: 2px; flex: none; }
.tip-r .grow { color: #bdb3a2; }
.tip-v { font-family: var(--font-mono); }
.tip-f { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ink-3); display: flex; justify-content: space-between; }

/* ==========================================================================
   13 · PROGRESS  — ref 4's rounded-cap bar with a lighter "still to go" head
   ========================================================================== */
.bar { height: 8px; border-radius: var(--r-pill); background: var(--n200); overflow: hidden}
.bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: var(--terra); }
.bar--sage > span { background: var(--sage); }
.pace { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--n200)}
.pace-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-pill); background: var(--terra)}
.pace-due { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 2px; }

/* ==========================================================================
   14 · OVERLAYS
   ========================================================================== */
.scrim { position: fixed; inset: 0; background: rgb(32 30 29 / .34); z-index: 50; }
.drawer {
  position: fixed; top: var(--s3); right: var(--s3); bottom: var(--s3);
  width: min(560px, calc(100vw - var(--s6)));
  background: var(--surface); border-radius: var(--r-app);
  box-shadow: var(--e3); z-index: 60;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - var(--s6)));
  background: var(--surface); border-radius: var(--r-app);
  box-shadow: var(--e3); z-index: 60;
  display: flex; flex-direction: column; max-height: 84vh; overflow: hidden;
}
.ov-h { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--divider); }
.ov-b { flex: 1; overflow-y: auto; padding: var(--s5); }
.ov-f { padding: var(--s4) var(--s5); border-top: 1px solid var(--divider); display: flex; gap: var(--s2); justify-content: flex-end; }

.toasts { position: fixed; right: var(--s5); bottom: var(--s5); z-index: 80; display: flex; flex-direction: column; gap: var(--s2); }
.toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px 15px; border-radius: var(--r-card);
  background: var(--paper); border: 1px solid var(--divider);
  box-shadow: var(--e3); font-size: var(--t-sm); max-width: 380px;
  animation: rise var(--med);
}
.toast--success svg { color: var(--sage); }
.toast--warn svg { color: var(--terra); }

/* ==========================================================================
   15 · STATES
   ========================================================================== */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s9) var(--s5); text-align: center; }
.empty-ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--n100); color: var(--n500); }
.skel { background: linear-gradient(90deg, var(--n100) 25%, var(--n200) 37%, var(--n100) 63%); background-size: 400% 100%; animation: sweep 1.4s infinite; border-radius: var(--r-chip); }
.dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--terra); animation: pulse 1.5s infinite; flex: none; }
.appear { animation: appear var(--med) both; }

/* ==========================================================================
   16 · NARROW
   ========================================================================== */
@media (max-width: 1000px) {
  .page { padding: var(--s5) var(--s5) var(--s8); }
}
@media (max-width: 620px) {
  .app { padding: 0; }
  .shell { border-radius: 0; }
  .page { padding: var(--s4) var(--s4) var(--s8); }
  .split { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   17 · PIECES THE RUN NEEDS
   ========================================================================== */
.kv { margin: 0; display: grid; gap: 1px; }
.kv > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s3); padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--n500); padding-top: 2px; }
.kv dd { margin: 0; font-size: var(--t-sm); }
@media (max-width: 560px) { .kv > div { grid-template-columns: 1fr; gap: 2px; } }

.avatar {
  display: inline-grid; place-items: center; flex: none;
  border-radius: 50%; background: var(--terra-100); color: var(--terra-900);
  font-weight: 600; letter-spacing: .02em}
.bigmark {
  width: 54px; height: 54px; flex: none;
  display: grid; place-items: center; border-radius: var(--r-tile);
  background: var(--ink); color: var(--surface);
  font-family: var(--font-mono); font-size: var(--t-lg);
}
.fav {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--n100); color: var(--n700);
  font-family: var(--font-mono); font-size: var(--t-xs);
}
.fit { font-family: var(--font-mono); font-size: var(--t-md); color: var(--terra-700); }

/* the landing */
.landing { min-height: 100%; display: grid; place-items: center; padding: var(--s7) var(--s5); }
.landing-in { max-width: 680px; text-align: center; }
.landing-form { display: flex; gap: var(--s2); max-width: 520px; margin-inline: auto; }
.landing-form .input { text-align: center; font-family: var(--font-mono); }
.landing-steps { display: flex; align-items: center; justify-content: center; gap: var(--s2); flex-wrap: wrap; }
.lstage { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--n600); }
.lstage b { font-family: var(--font-mono); width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--n200); color: var(--n600); font-weight: 500; font-size: 10px; }
.lstage.is-ghost { color: var(--n400); }
.lsep { color: var(--n400); }

/* the interview */
.axes { display: flex; gap: 2px; }
.axe { width: 9px; height: 9px; border-radius: 2px; background: var(--n200); }
.axe.is-on { background: var(--sage); }
.said { display: flex; gap: var(--s3); padding: var(--s3); background: var(--surface-2); border-radius: var(--r-chip); }
.said p { margin: 0; font-size: var(--t-sm); }
.press { display: flex; gap: var(--s2); padding: var(--s3); background: var(--terra-50); border: 1px dashed var(--terra-300); border-radius: var(--r-chip); }
.press svg { color: var(--terra); flex: none; margin-top: 2px; }

/* the goal, the contribution, the rules */
.goalecho { font-family: var(--font-display); font-weight: 700; font-size: var(--t-xl); line-height: var(--lh-snug); letter-spacing: -.02em; }
.why { display: flex; gap: var(--s2); align-items: flex-start; padding: 11px 13px; background: var(--surface-2); border-radius: var(--r-tag); font-size: var(--t-sm); line-height: 1.55; color: var(--n700); }
.why svg { flex: none; margin-top: 3px; color: var(--terra); }
.rule { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-xs); color: var(--n600)}
.rule svg { flex: none; margin-top: 2px; }
.rule--warn { color: var(--terra-800); }
.what { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); color: var(--n800); }
.note { display: flex; gap: var(--s2); align-items: flex-start; padding: 12px 14px; background: var(--sage-100); border-radius: var(--r-tag); font-size: var(--t-sm); color: var(--sage-900); }
.note svg { flex: none; margin-top: 2px; }
.note--warn { background: var(--terra-100); color: var(--terra-900); }
.approved { display: flex; gap: var(--s2); align-items: center; padding: 14px 16px; background: var(--sage-100); border: 1px solid var(--sage-300); border-radius: var(--r-card); color: var(--sage-900); font-weight: 600; }
.beat--object { border-color: var(--terra-300); background: var(--terra-50); }
.beat--concede { border-color: var(--sage-300); }

/* cards that are buttons */
.segcard, .listrow, .holdopt, .doccard { text-align: left; width: 100%; cursor: pointer; display: block; }
.segcard:hover, .listrow:hover, .holdopt:hover, .doccard:hover { border-color: var(--n400); }
.segcard.is-on, .listrow.is-on { border-color: var(--terra); box-shadow: var(--e2); }
.prov { font-family: var(--font-mono); font-size: 10px; border-radius: var(--r-tag); background: var(--n100); color: var(--n500)}
.prov.is-hit { background: var(--sage-100); color: var(--sage-900); }
.mail p { font-size: var(--t-sm); line-height: 1.65; margin: 0 0 10px; }
.mail p:last-child { margin: 0; }

.advance { display: flex; gap: var(--s2); justify-content: flex-end; padding-top: var(--s5); margin-top: var(--s6); border-top: 1px solid var(--divider); }


/* ==========================================================================
   18 · SMOOTH STREAMING
   The run reveals work as it happens. Two rules keep that from juddering:
   an item animates once on the way in and never again, and anything that
   repeats forever (the pulse, the sweep) is composited rather than laid out.
   ========================================================================== */
/* smooth streaming */
.appear { animation: appear 260ms cubic-bezier(.2,.7,.3,1) both; }
.dot-pulse { animation: pulse 1.6s ease-in-out infinite; will-change: opacity; }
.skel { will-change: background-position; }
.stage, .tab, .btn { will-change: auto; }
/* a streamed log line arrives, it does not blink */
.logline { animation: appear 200ms cubic-bezier(.2,.7,.3,1) both; }
/* the stage view scrolls on its own; smooth it when a step hands on */
.stageview { scroll-behavior: smooth; overscroll-behavior: contain; }
/* ROOM TO SCROLL PAST THE LAUNCHER.
   "Play a flow" is fixed at the bottom-right corner and spans 1310-1424, while
   the content column runs to 1403 — so it sits over the lane where every
   right-aligned row action lives, and no size for it clears that. Overlap is
   the price of a floating launcher and every app with one pays it.

   What is NOT acceptable is a control that can never be moved out from under
   it. On Team the last row's Remove, on Settings the last connector and on
   Leads "Show them" were all pinned at the end of the scroll with nowhere left
   to go. This gives every page enough room below its last row that the launcher
   can always be scrolled clear of.

   As a trailing pseudo-element, not padding on the children: the stage holds
   three of them here — the loop card, the tab row and the page — and padding
   them all pushed a 76px hole between the loop and its tabs. */
.stageview::after { content: ''; display: block; height: 76px; }
@media (prefers-reduced-motion: reduce) {
  .appear, .logline { animation: none; }
  .stageview { scroll-behavior: auto; }
}

/* ==========================================================================
   19 · THE FLOW PLAYER
   Sits over the app, never inside it: a launcher, a menu, and a transport bar.
   ========================================================================== */
.flowlaunch {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 70;
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 9px 15px; border: 0; border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface);
  font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  box-shadow: var(--e3);
}
.flowlaunch:hover { background: var(--n900); }
.flowmenu {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: 70;
  width: min(340px, calc(100vw - var(--s6)));
  padding: var(--s3); border-radius: var(--r-card);
  background: var(--paper); border: 1px solid var(--divider);
  box-shadow: var(--e3);
  display: flex; flex-direction: column; gap: 2px;
  max-height: 72vh; overflow-y: auto;
}
.flowmenu-h { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s2) var(--s2); }
.flowitem {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px 10px; border: 0; border-radius: var(--r-chip);
  background: transparent; text-align: left; cursor: pointer; width: 100%;
}
.flowitem:hover { background: var(--surface-2); }
.flowitem svg { flex: none; color: var(--n500); }
.flowitem .grow { display: flex; flex-direction: column; min-width: 0; }
.flowitem b { font-size: var(--t-sm); font-weight: 600; }
.flowitem span { font-size: var(--t-xs); color: var(--n600); }
.flowitem--all { background: var(--surface-2); border: 1px solid var(--divider); margin-bottom: var(--s2); }
.flowitem--all svg { color: var(--terra); }
.flowbar {
  position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); z-index: 70;
  display: flex; align-items: center; gap: var(--s3);
  max-width: min(980px, calc(100vw - var(--s6)));
  padding: 10px 12px 10px 18px; border-radius: var(--r-pill);
  background: var(--n900); color: #f6efe2; box-shadow: var(--e3);
}
.flowbar-t { font-family: var(--font-display); font-weight: 700; font-size: var(--t-sm); letter-spacing: -.01em; color: var(--terra-300); white-space: nowrap; }
.flowbar-say { font-size: var(--t-sm); line-height: 1.4; min-width: 0; }
.flowbar-n { font-size: var(--t-xs); color: #bdb3a2; white-space: nowrap; }
.flowbar .btn--outline { background: transparent; border-color: #4a4239; color: #f6efe2; }
.flowbar .btn--outline:hover { background: var(--ink-2); border-color: var(--ink-3); }
.flowbar .btn--dark { background: var(--terra); color: #fff; }
@media (max-width: 760px) { .flowbar-say { display: none; } }

/* ==========================================================================
   20 · THE WORK LOG, AND THE THINKING
   Two densities of the same moment: the rail ticks, the stage reasons.
   ========================================================================== */
.worklog {
  margin: 2px 0 var(--s3) 21px;
  padding-left: var(--s3);
  border-left: 1px solid var(--divider);
  display: flex; flex-direction: column; gap: 3px;
}
.worklog--done { border-left-color: var(--sage-200); }
.worklog-h {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); color: var(--n700); font-weight: 600;
  padding-bottom: 2px;
}
.worklog-l {
  display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--n500);
  animation: appear 200ms cubic-bezier(.2,.7,.3,1) both;
}
.worklog-l.is-live { color: var(--ink); }
.worklog-tick { color: var(--sage); flex: none; }
.worklog-spin {
  width: 9px; height: 9px; flex: none; margin-top: 3px;
  border: 1.5px solid var(--terra-200); border-top-color: var(--terra);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .worklog-spin { animation: none; } }

/* the stage, while it works */
.thinkhead { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s5); }
.thinkhead .dot-pulse { margin-top: 9px; }
.think { display: flex; flex-direction: column; gap: var(--s2); }
.tk {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-tile);
  background: var(--paper); border: 1px solid var(--divider);
  font-size: var(--t-sm); line-height: 1.55;
}
.tk-ico {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--n100); color: var(--n600);
}
.tk--tool { background: var(--surface-2); }
.tk--tool .tk-ico { background: var(--ink); color: var(--surface); }
.tk-call { font-family: var(--font-mono); font-size: var(--t-xs); }
.tk-call b { color: var(--terra-700); font-weight: 500; }
.tk-call span { color: var(--n600); }
.tk-out { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--n700); margin-top: 3px; }
.tk--think { background: transparent; border-color: transparent; }
.tk--think .tk-ico { background: var(--terra-50); color: var(--terra); }
.tk--weigh .tk-ico { background: var(--terra-100); color: var(--terra-800); }
.tk-q { font-weight: 600; }
.tk-opts { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.tk-opt { display: flex; gap: var(--s3); align-items: baseline; padding: 5px 9px; background: var(--surface-2); border-radius: var(--r-tag); }
.tk-o { flex: 1; min-width: 0; font-size: var(--t-xs); }
.tk-v { font-family: var(--font-mono); font-size: 10.5px; color: var(--terra-800); text-align: right; flex: 0 1 46%; }
.tk--drop { border-color: var(--n300); background: var(--surface-2); }
.tk--drop .tk-ico { background: var(--n200); color: var(--n700); }
.tk--drop .tk-what { color: var(--n700); }
.tk--keep { border-color: var(--sage-300); background: var(--sage-50); }
.tk--keep .tk-ico { background: var(--sage-200); color: var(--sage-900); }
.tk--gap { border-style: dashed; }
.tk--gap .tk-ico { background: var(--terra-50); color: var(--terra-700); }
.tk-what { font-size: var(--t-sm); }
.tk-why { font-size: var(--t-xs); color: var(--n600); margin-top: 3px; }
.think-more { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0 0 var(--s2); }

/* ==========================================================================
   21 · THE STRIP
   Under the loop bar: what the stage you are standing in is for, and what is
   waiting for you. It exists so the model's vocabulary never has to be learned
   before someone can act.
   ========================================================================== */
.strip {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s5); flex: none;
  background: var(--surface-2);
  border-bottom: 1px solid var(--divider);
  font-size: var(--t-xs);
}
.strip-tag {
  flex: none; padding: 3px 9px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-weight: 600; white-space: nowrap;
}
.strip-mean { color: var(--n600); min-width: 0; }
.strip-wait {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--terra-50); border: 1px solid var(--terra-200); color: var(--terra-800);
  white-space: nowrap; font-weight: 600;
}
.strip-wait:hover { background: var(--terra-100); }
.strip-wait b { font-family: var(--font-mono); }
.strip-new { display: inline-flex; align-items: center; gap: var(--s2); flex: none; color: var(--n700); white-space: nowrap; }
@media (max-width: 900px) { .strip-mean { display: none; } }