/* Hallmark · genre: editorial · design-system: design.md · designed-as-app
 * families: Stat-Led (Today) · Workbench (directories, Review) · Long Document
 *           (Profile, Source, Industry) · nav: N9 edge-aligned · footer: Ft2 inline
 * theme: custom OKLCH on the product's own hues — see static/tokens.css
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 *
 * Kairos — PRD §10 implemented, not approximated.
 * 10.1 keyboard review + 5s undo toast · 10.2 anchored evidence popover
 * 10.4 pending = amber AND dashed · 10.5 CJK stack, 1.75 leading, no tracking
 * 10.6 motion only where the budget allows · 10.7 progressive disclosure,
 * thumb-zone actions · 10.8 no decorative charts (the map is navigation)
 *
 * The one rule that governs the rest: amber + dashed means a human has not
 * yet judged this row. It appears nowhere else. A page that dashes every row
 * to look busy has spent the only semantic the product cannot do without.
 */

/* tokens are inlined by the same rule: one versioned sheet, nothing the browser can keep stale */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; overflow-x: clip; }
body {
  margin: 0; overflow-x: clip;
  background: var(--paper); color: var(--ink);
  /* one language (audit of 28 Sep 2026): the interface speaks sans; Newsreader
     is kept for one thing only — someone's words: quotes, transcripts, notes */
  font-family: var(--sans); font-size: var(--t-sm); line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* serif = a person said this */
blockquote, .txt, .transcript, .seg-text, .quote-text, .prep blockquote { font-family: var(--serif); font-size: var(--t-base); }
.gloss { font-family: var(--sans); }

/* §10.5 — CJK: sans stack, looser leading, and NO letter-spacing (it mangles) */
:lang(zh), [lang="zh"] {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC",
               "Microsoft YaHei", sans-serif;
  line-height: 1.75;
  letter-spacing: normal;
}

/* one focus ring for the whole product: instant, never animated (§10.1) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px;
                 border-radius: 1px; }

/* ---------- chrome: the mockup's shell — a sidebar and a scroll column ---- *
 * The mockup's tokens, mapped onto the product's own palette so the CRM pages
 * and the intelligence pages are one product, not two.                       */
:root {
  --ground: var(--paper); --surface: var(--card); --sunk: var(--paper-2);
  --hover: var(--line-2); --muted: var(--ink-2); --faint: var(--ink-3);
  --accent-soft: var(--accent-2); --on-accent: var(--accent-ink);
  --late: var(--danger); --late-soft: var(--danger-tint);
  --warn: var(--amber); --warn-soft: var(--amber-2);
  --ok: var(--accent); --ok-soft: var(--accent-2);
}
html, body { height: 100%; }
.app { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: 100%; }
.side { background: var(--surface); border-right: var(--rule-hair) solid var(--line);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 14px; overflow: auto;
  font-family: var(--sans); font-size: var(--t-sm); }
.ws { display: flex; align-items: center; gap: 8px; padding: 2px 6px; text-decoration: none; color: var(--ink); }
.ws .lg { width: 26px; height: 26px; border-radius: 6px; background: var(--ink); color: var(--ground);
  display: grid; place-items: center; font: 700 12px var(--mono); }
.ws b { font-size: 14.5px; }
.sr { display: flex; gap: 6px; }
.sbtn { flex: 1; display: flex; align-items: center; gap: 8px; border: var(--rule-hair) solid var(--line);
  background: var(--ground); border-radius: 7px; padding: 6px 9px; color: var(--faint); text-align: left;
  font: inherit; cursor: pointer; }
.sbtn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.sbtn kbd { margin-left: auto; font: 500 11px var(--mono); border: 1px solid var(--line); border-radius: 4px;
  padding: 0 4px; background: none; color: inherit; }
.ibtn { position: relative; border: var(--rule-hair) solid var(--line); background: var(--ground); border-radius: 7px;
  width: 34px; display: grid; place-items: center; color: var(--muted); }
.ibtn.on { background: var(--sunk); color: var(--ink); }
.ibtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.ibtn .bd { position: absolute; top: -5px; right: -5px; background: var(--ex); color: var(--on-ex);
  font: 600 10px var(--mono); border-radius: 8px; padding: 0 5px; }
.grp { display: flex; flex-direction: column; gap: 1px; }
.grp h4 { margin: 4px 0 3px; padding: 0 8px; font: 600 11px var(--sans); color: var(--faint); display: flex; align-items: center; }
.grp h4 button { margin-left: auto; border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; padding: 0 2px; cursor: pointer; }
.grp h4 button:hover { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; padding: 6px 8px;
  border-radius: 6px; text-align: left; color: var(--muted); text-decoration: none; font: inherit; cursor: pointer; }
.nav:hover { background: var(--sunk); color: var(--ink); }
.nav[aria-current="true"] { background: var(--sunk); color: var(--ink); font-weight: 600; }
.nav svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; }
.nav .n { margin-left: auto; font: 500 11px var(--mono); color: var(--faint); }
.sq { width: 16px; height: 16px; border-radius: 4px; flex: none; display: inline-grid; place-items: center;
  font: 700 9.5px var(--sans); color: #fff; }
.note { margin-top: auto; border-top: var(--rule-hair) solid var(--line); padding: 10px 8px 0;
  font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.note a { color: inherit; }
.note .num { font-family: var(--mono); color: var(--ink-2); }
/* ---- light, dark or auto: the switch at the foot of the sidebar ---------------- */
/* pinned to the sidebar's foot, so the switch is visible however long the lists grow */
.sidefoot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: sticky; bottom: -12px;
  background: var(--surface); padding: 8px 0 12px; }
.sidefoot .note { margin-top: 0; }
.theme-pick { display: flex; margin: 0 8px; }
.theme-pick button { flex: 1; text-align: center; }
.main { overflow: auto; display: flex; flex-direction: column; min-width: 0; }
.content { padding: 18px 22px 40px; max-width: 80rem; width: 100%; }
.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 22px; border-bottom: var(--rule-hair) solid var(--line);
  background: var(--surface); position: sticky; top: 0; z-index: var(--z-sticky); flex-wrap: wrap;
  font-family: var(--sans); }
.topbar h1 { font-family: var(--sans); font-size: 15px; margin: 0; display: flex; align-items: center; gap: 8px;
  letter-spacing: 0; }
.topbar h1 .sq { width: 20px; height: 20px; }
.objchip { font: 500 11.5px var(--sans); color: var(--muted); border: var(--rule-hair) solid var(--line); border-radius: 5px;
  padding: 1px 7px; display: inline-flex; gap: 5px; align-items: center; }
.objchip svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bar2 { display: flex; align-items: center; gap: 8px; padding: 9px 22px; border-bottom: var(--rule-hair) solid var(--line);
  flex-wrap: wrap; font-family: var(--sans); font-size: 13px; }
.push { margin-left: auto; }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { border-color: var(--accent); filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: none; color: var(--muted); }
.sel { border: var(--rule-hair) solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: var(--radius-md); padding: 4px 8px; font: inherit; font-family: var(--sans); font-size: 13px; }
.segs { display: inline-flex; background: var(--sunk); border-radius: 7px; padding: 2px; font-family: var(--sans); }
.segs a, .segs button { border: 0; background: none; padding: 3px 10px; border-radius: 5px; color: var(--muted);
  font: inherit; font-size: 12.5px; text-decoration: none; cursor: pointer; }
.segs [aria-pressed="true"], .segs .on { background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.1); }
/* Event contacts: one button per event between the toolbar and the columns (events PRD, 7 Oct 2026) */
.evrow-wrap { display: grid; gap: 8px; padding: 9px 22px; border-bottom: var(--rule-hair) solid var(--line);
  font-family: var(--sans); min-width: 0; }
.evrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.evb { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; flex: none;
  border: var(--rule-hair) solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: var(--radius-md); padding: 4px 10px; font: 13px var(--sans); text-decoration: none; cursor: pointer; }
.evb b { font-weight: 500; color: var(--ink); max-width: min(18rem, 60vw); overflow: hidden; text-overflow: ellipsis; }
.evb .d, .evmenu .d { font: 12px var(--mono); color: var(--faint); }
.evb .n, .evmenu .n { font: 500 11px var(--mono); background: var(--sunk); color: var(--muted); border-radius: 9px; padding: 1px 7px; }
.evb:hover { border-color: var(--line-strong); }
.evb.on { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.evb.on b, .evb.on .d { color: var(--ground); }
.evb.on .n { background: color-mix(in oklch, var(--ground) 20%, transparent); color: var(--ground); }
.evb:focus-visible, .evmenu a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.evmore { position: relative; flex: none; }
.evmore summary { list-style: none; }
.evmore summary::-webkit-details-marker { display: none; }
.evmenu { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; min-width: 16rem; display: grid;
  background: var(--surface); border: var(--rule-hair) solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px; }
.evmenu a { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 5px; color: var(--ink);
  text-decoration: none; font-size: 13px; }
.evmenu a:hover { background: var(--hover); }
.evmenu a b { font-weight: 500; margin-right: auto; }
.evinfo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--muted); }
.evinfo > b { color: var(--ink); font-weight: 600; }
.evinfo .d { font: 12px var(--mono); color: var(--faint); }
.evinfo .sep { color: var(--faint); }
@media (max-width: 700px) { .evrow-wrap { padding-left: 16px; padding-right: 16px; } .evinfo .push { margin-left: 0; } }
.search { border: var(--rule-hair) solid var(--line-strong); background: var(--surface); border-radius: var(--radius-md);
  padding: 5px 9px; font: inherit; font-family: var(--sans); font-size: 13px; color: var(--ink); width: 220px; max-width: 100%; }
.chip { font: 500 11px var(--mono); padding: 1px 7px; border-radius: 9px; white-space: nowrap; border: 0; }
.chip.late { background: var(--late-soft); color: var(--late); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.plain { background: var(--sunk); color: var(--muted); }
.chip.tag { font-size: 10px; padding: 0 6px; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.inten { display: inline-flex; gap: 2px; align-items: flex-end; vertical-align: middle; }
.inten i { width: 4px; border-radius: 1px; background: var(--line); display: inline-block; }
.inten i:nth-child(1) { height: 6px; } .inten i:nth-child(2) { height: 9px; } .inten i:nth-child(3) { height: 12px; }
.inten i.on { background: var(--accent); } .inten.w i.on { background: var(--warn); }
.av { width: 20px; height: 20px; border-radius: 50%; background: var(--accent-soft); color: var(--accent);
  font: 600 9.5px var(--sans); display: inline-grid; place-items: center; border: 1.5px solid var(--surface); flex: none; }
.av.big { width: 38px; height: 38px; font-size: 14px; }
.avs { display: inline-flex; } .avs .av + .av { margin-left: -6px; }
.logo { width: 20px; height: 20px; border-radius: 5px; flex: none; display: inline-grid; place-items: center;
  font: 700 10px var(--sans); color: #fff; }
.logo.big { width: 38px; height: 38px; border-radius: 9px; font-size: 16px; }
.lnk { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 600; text-align: left; text-decoration: none; }
.lnk:hover { text-decoration: underline; }
.empty.pad { padding: 12px 14px; margin: 0; }

/* kanban */
.boardwrap { overflow-x: auto; padding: 14px 22px 20px; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: 268px; gap: 10px; align-items: start; }
.col { background: var(--sunk); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.col.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.col > header { display: flex; align-items: center; gap: 7px; padding: 3px 4px; font-family: var(--sans); }
.col > header b { font-size: 13px; }
.col > header .c { font: 500 11px var(--mono); color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; }
.col > header button { margin-left: auto; border: 0; background: none; color: var(--faint); font-size: 17px; line-height: 1;
  padding: 0 3px; cursor: pointer; }
.addc { border: 1px dashed var(--line-strong); background: none; border-radius: 6px; padding: 5px; color: var(--faint);
  font: inherit; font-family: var(--sans); font-size: 12.5px; cursor: pointer; }
.addc:hover { background: var(--hover); color: var(--ink); }
.cards { display: flex; flex-direction: column; gap: 6px; max-height: 62vh; overflow: auto; }
.card.k { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 7px; padding: 9px 10px;
  display: flex; flex-direction: column; gap: 6px; cursor: grab; text-align: left; font-family: var(--sans); }
.card.k:hover { border-color: var(--faint); }
.card.k.dragging { opacity: .5; }
.card.k .t { display: flex; align-items: center; gap: 7px; }
.card.k .t b { font-size: 13px; line-height: 1.3; }
.card.k .t a { color: inherit; text-decoration: none; }
.card.k .ft { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--faint); flex-wrap: wrap; }
.card.k .ft .sp { margin-left: auto; }
.card.k .nx { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; border-top: 1px dashed var(--line); padding-top: 5px; }
.card.k .stage-select { display: none; }
@media (pointer: coarse) { .card.k .stage-select { display: block; } .card.k { cursor: default; } }
.more { font-size: 12px; color: var(--muted); text-align: center; padding: 4px; font-family: var(--sans); }
.cards.more-wrap.open > .card.k.hidden-item { display: flex; }   /* a shown card keeps its card layout */
.nothing { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.nothing b { font-size: 16px; }

/* list table */
.tblwrap { overflow-x: auto; background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 9px; }
table.lt { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 13px; font-family: var(--sans); }
table.lt th { font: 600 11.5px var(--sans); color: var(--faint); text-align: left; padding: 8px 12px;
  border-bottom: var(--rule-hair) solid var(--line); white-space: nowrap; }
table.lt td { padding: 7px 12px; border-top: var(--rule-hair) solid var(--line); vertical-align: top; }
table.lt tbody tr:hover td { background: var(--sunk); }
table.lt td.m { font: 12px var(--mono); color: var(--muted); white-space: nowrap; }
table.lt td .nx { max-width: 320px; color: var(--muted); display: inline-block; }

/* record page */
.rec { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 100%; }
.rec .l { border-right: var(--rule-hair) solid var(--line); min-width: 0; }
.rhead { display: flex; gap: 12px; align-items: center; padding: 18px 22px 10px; flex-wrap: wrap; }
.rhead h2 { margin: 0; font-size: 20px; text-wrap: balance; font-family: var(--sans); }
.rhead .sub { color: var(--muted); font-size: 13px; font-family: var(--sans); }
.rhead .badge { vertical-align: 2px; }
.acts { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 22px 14px; }
.hl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 22px 16px; border: var(--rule-hair) solid var(--line);
  border-radius: 9px; background: var(--surface); font-family: var(--sans); }
.hl > div { padding: 10px 12px; border-left: var(--rule-hair) solid var(--line); border-top: var(--rule-hair) solid var(--line);
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hl > div:nth-child(3n+1) { border-left: 0; } .hl > div:nth-child(-n+3) { border-top: 0; }
.hl span { font-size: 11.5px; color: var(--faint); }
.hl b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.hl b a { color: inherit; }
.hl small { font-weight: 400; color: var(--faint); font-size: 12px; }
.tabs { display: flex; gap: 2px; border-bottom: var(--rule-hair) solid var(--line); padding: 0 22px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 8px 10px; color: var(--muted); border-bottom: 2px solid transparent;
  font: inherit; font-family: var(--sans); font-size: 13px; white-space: nowrap; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs .n { font: 500 11px var(--mono); color: var(--faint); margin-left: 3px; }
.tabc { padding: 16px 22px 30px; display: flex; flex-direction: column; gap: 14px; }
.tabc[hidden] { display: none; }
.tabc h3:first-child { margin-top: 0; }
.rp { padding: 16px 18px; display: flex; flex-direction: column; gap: 18px; background: var(--surface); font-family: var(--sans); }
.rp h5 { margin: 0 0 8px; font: 600 12px var(--sans); color: var(--ink); display: flex; align-items: center; gap: 6px; }
.rp h5 .n { font: 500 11px var(--mono); color: var(--faint); }
.rp h6 { margin: 10px 0 4px; font: 600 10.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.attrs { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 7px 10px; font-size: 13px; margin: 0; }
.attrs dt { color: var(--faint); } .attrs dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.attrs .ed { font-size: 13px; }
.attrs dd .mini { margin-left: 4px; }
.rp .push { margin-left: auto; font-weight: 400; }
.rp .push .sel { font-size: 12px; padding: 2px 6px; max-width: 150px; }
.le { border: var(--rule-hair) solid var(--line); border-radius: 8px; padding: 9px 10px; display: flex; flex-direction: column; gap: 7px; }
.le .h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 13px; }
.le .h a { color: inherit; text-decoration: none; }
.le .h .sel { margin-left: auto; padding: 2px 6px; font-size: 12px; max-width: 45%; }
.le .attrs { grid-template-columns: 78px minmax(0, 1fr); font-size: 12.5px; }
.le .ppl { font-size: 12.5px; color: var(--muted); }
.le .history { font-size: 11px; color: var(--faint); }
.tl { display: flex; flex-direction: column; border-left: 2px solid var(--line); margin-left: 6px; }
.tl > div { position: relative; padding: 0 0 14px 18px; font-size: 13px; }
.tl > div::before { content: ""; position: absolute; left: -7px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); }
.tl > div.pending::before { border-color: var(--amber); border-style: dashed; }
.tl .mt { font: 500 11.5px var(--mono); color: var(--faint); display: block; margin-bottom: 2px; }
.logbox { display: flex; gap: 6px; flex-wrap: wrap; }
.logbox input[type=text] { flex: 1; min-width: 12rem; border: var(--rule-hair) solid var(--line-strong); border-radius: var(--radius-md);
  padding: 6px 9px; font: inherit; font-family: var(--sans); font-size: 13px; background: var(--surface); color: var(--ink); }
.plist { display: flex; flex-direction: column; border: var(--rule-hair) solid var(--line); border-radius: 9px; background: var(--surface); }
.plist > * { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: var(--rule-hair) solid var(--line);
  text-align: left; font-family: var(--sans); font-size: 13px; text-decoration: none; color: inherit; }
.plist > *:first-child { border-top: 0; }
.plist .r { color: var(--muted); font-size: 12.5px; }
.plist .e { margin-left: auto; }

/* Home's two columns (mockup) */
.cols2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .cols2 { grid-template-columns: 1fr; } }

/* panels and task rows (home, tasks, record tabs) */
.panel { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; overflow: hidden;
  font-family: var(--sans); }
.panel > header { display: flex; align-items: baseline; gap: 8px; padding: 11px 14px; border-bottom: var(--rule-hair) solid var(--line); }
.panel > header h3 { margin: 0; font-size: 13.5px; text-transform: none; letter-spacing: 0; color: var(--ink); }
.panel > header .c { font: 500 12px var(--mono); color: var(--faint); }
.panel > header .r { margin-left: auto; font-size: 12px; color: var(--muted); }
.trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 14px;
  border-top: var(--rule-hair) solid var(--line); align-items: start; font-family: var(--sans); }
.panel > .trow:first-of-type, .panel > header + .trow { border-top: 0; }
.trow input[type=checkbox] { margin: 3px 0 0; accent-color: var(--accent); width: 15px; height: 15px; }
.trow .x { font-size: 13px; }
.trow .y { grid-column: 2 / -1; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trow .y a { color: var(--ink); }
.trow .y .act { font-size: 11px; min-height: 1.4rem; padding: 0 6px; border-color: transparent; color: var(--muted); }
.trow .y .act:hover { border-color: var(--line-strong); color: var(--ink); }
.trow.done .x { text-decoration: line-through; color: var(--faint); }
.trow.leaving { opacity: 0; transition: opacity var(--dur-pop) var(--ease-out); }
.taskbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.taskbar input[type=text] { flex: 1; min-width: 14rem; }

/* feeds, reports, workflows (stories 57–60) */
.feed { display: flex; flex-direction: column; gap: 10px; max-width: 780px; font-family: var(--sans); }
.feed h3 { margin: 8px 0 0; }
.fi { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 9px; padding: 11px 14px; display: flex; flex-direction: column; gap: 5px; }
.fi .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.fi .h .lnk { font-size: 13px; }
.fi p { margin: 0; font-size: 13px; }
.rep { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fun { display: flex; flex-direction: column; gap: 6px; padding: 14px; font-family: var(--sans); }
.fun .r { display: grid; grid-template-columns: 130px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 12.5px; }
.fun .r > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fun .r i { display: block; height: 14px; border-radius: 3px; min-width: 2px; }
.fun .r span:last-child { font: 500 12px var(--mono); text-align: right; color: var(--muted); }
.wfs { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 900px; font-family: var(--sans); }
.wf { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.blk { border: var(--rule-hair) solid var(--line); border-radius: 7px; padding: 6px 9px; font-size: 12.5px; background: var(--ground); display: flex; flex-direction: column; gap: 1px; }
.blk small { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.blk.tr { border-color: var(--accent); background: var(--accent-soft); }
.arrow { color: var(--faint); }
.tag { font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--sunk); color: var(--muted); white-space: nowrap; }
.tag.prop { background: var(--accent-soft); color: var(--accent); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
/* the new-list modal */
#newlist-dialog { width: min(980px, 94vw); max-height: 88vh; display: none; flex-direction: column; }
#newlist-dialog[open] { display: flex; }
#newlist-dialog header, #newlist-dialog footer { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-family: var(--sans); }
#newlist-dialog header { border-bottom: var(--rule-hair) solid var(--line); font-size: 15px; }
#newlist-dialog header .pick-close { margin-left: auto; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
#newlist-dialog footer { border-top: var(--rule-hair) solid var(--line); justify-content: flex-end; flex-wrap: wrap; }
#newlist-dialog footer .empty { margin-right: auto; font-size: 12.5px; }
.tg { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; flex: 1; overflow: hidden; font-family: var(--sans); }
.tg aside { border-right: var(--rule-hair) solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.tg aside h6 { margin: 0 0 4px; padding: 0 8px; font: 600 11px var(--sans); color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.tg .lst { overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; }
.tpl { border: var(--rule-hair) solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; text-align: left; background: none; width: 100%; font: inherit; color: inherit; cursor: pointer; }
.tpl:hover, .tpl[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.tpl b { font-size: 14px; }
.tpl p { margin: 0; grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.tpl .stgs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: var(--muted); }
.tpl .stgs span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 900px) { .rep { grid-template-columns: 1fr; } .tg { grid-template-columns: 1fr; } .tg aside { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: var(--rule-hair) solid var(--line); } }

/* the Inbox (ADR 0005): the mockup's three steps and its group cards */
.flow3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--surface); border: var(--rule-hair) solid var(--line);
  border-radius: 10px; margin-bottom: 16px; max-width: 900px; font-family: var(--sans); }
.flow3 > div { padding: 12px 14px; border-left: var(--rule-hair) solid var(--line); display: flex; flex-direction: column; gap: 3px; }
.flow3 > div:first-child { border-left: 0; }
.flow3 b { font-size: 13px; } .flow3 span { font-size: 12.5px; color: var(--muted); }
.flow3 em { font: 600 11px var(--mono); font-style: normal; color: var(--accent); }
.props { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.prop { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); }
.prop .h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prop .h b { font-size: 14px; }
.prop ul { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.prop.confirmed { opacity: .55; } .prop.rejected { opacity: .4; }
.prop.err { border-color: var(--danger); }
.tag.ex { background: var(--ex-soft); color: var(--ex); }
.prop .refusal { margin: 0; }
@media (max-width: 900px) { .flow3 { grid-template-columns: 1fr; } .flow3 > div { border-left: 0; border-top: var(--rule-hair) solid var(--line); } }

/* the CRM lens: chips that point a piece of intelligence back to a deal */
.lens { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-family: var(--sans); font-size: 12px; margin: 4px 0 0; }
.lens a.lc { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; color: var(--ink); background: var(--sunk);
  border-radius: 9px; padding: 1px 8px 1px 4px; }
.lens a.lc .sq { width: 13px; height: 13px; font-size: 8px; }
.lens a.lc .st { color: var(--muted); }
.lens .act { font-size: 11px; min-height: 1.4rem; padding: 0 7px; }
#task-dialog, #career-dialog { width: min(520px, 94vw); }
#task-dialog header, #career-dialog > header { display: flex; align-items: center; padding: 10px 14px; border-bottom: var(--rule-hair) solid var(--line); font-family: var(--sans); font-size: 14px; }
#task-dialog header .pick-close, #career-dialog > header .pick-close { margin-left: auto; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }

/* a group's items, previewed before the tap */
.payload-detail { margin-top: 6px; }
.payload-detail .trow { grid-template-columns: auto minmax(0, 1fr) auto; }
.payload-detail .trow.tier2 { background: var(--amber-2); border-left: var(--rule-trust) dashed var(--amber); }
.payload-detail .x.txt { font-size: 14px; }

/* the tier-2 rows of the Inbox speak the card language too: the amber
   dashed edge stays (it is the one semantic), the August buttons and the
   full-size paired quotes go */
.inbox-rows .row { padding: 10px 14px; font-family: var(--sans); }
.inbox-rows .row > a, .inbox-rows .row > strong { font-size: 13.5px; }
.inbox-rows .row .badge { vertical-align: 1px; }
.inbox-rows .actions { margin-top: 8px; gap: 6px; }
.inbox-rows .actions .act { font-size: 12.5px; min-height: 1.7rem; padding: 2px 10px; border-radius: 6px;
  border-color: var(--line); color: var(--ink); background: var(--surface); font-weight: 500; }
.inbox-rows .actions .act.yes { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.inbox-rows .actions .act.no { color: var(--muted); }
.inbox-rows .actions .act kbd { margin-left: 4px; font-size: 10px; border-color: currentColor; opacity: .7; background: none; color: inherit; }
.inbox-rows .actions .act.yes kbd { border-color: var(--on-accent); }
.inbox-rows .pair { gap: 10px; margin: 6px 0; }
.inbox-rows .pair blockquote { font-size: 14px; line-height: 1.45; padding-left: 10px; margin: 0; }
.inbox-rows blockquote.txt { font-size: 14px; }
.inbox-rows .why, .inbox-rows .rationale { font-size: 12.5px; }
.inbox-rows .pick .verdict { font-size: 12.5px; }
.inbox-rows + .actions .btn, .inbox-rows + .actions .act { font-size: 12.5px; }

/* signals as records: the table, the type tags, the drawer */
table.signals tr.sig { cursor: pointer; }
table.signals tr.sig.is-new .sigtext { font-weight: 600; }
table.signals tr.sig.open td { background: var(--sunk); }
table.signals tr.drawer td { background: var(--paper-2); padding: 0; border-top: 0; }
/* the capture preview: one row per meeting or thread, who was on it, what it would link to */
table.cap { min-width: 900px; }
table.cap td .sub { display: block; color: var(--muted); font-size: 12px; }
table.cap td .who { display: block; font-size: 12.5px; line-height: 1.5; }
table.cap td .who .meta { font-size: 11.5px; }
table.cap td b { font-weight: 600; }
pre.mailtext { white-space: pre-wrap; font: 13px/1.55 var(--sans); margin: 0; color: var(--ink); max-height: 70vh; overflow: auto; }
table.cap td .fullname { font-size: 12px; padding: 1px 6px; width: 11rem; margin-top: 2px; }
table.cap td .who.quiet { opacity: .7; }
table.cap td .newform { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 3px; }
table.cap td .newform input[type=text] { font-size: 12px; padding: 2px 6px; width: 10.5rem; }
table.cap td p.plan { margin: 0; font-size: 12.5px; line-height: 1.45; max-width: 300px; }
table.cap tr.done td { background: color-mix(in oklab, var(--ok-soft) 40%, transparent); font-size: 12.5px; }
table.cap tr.done td .act { display: inline-block; margin: 0 0 0 6px; }
table.cap td p.plan.blocked { color: var(--late); }
table.cap td.do .act.yes { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
table.cap td.do .act.yes:disabled { opacity: .45; cursor: not-allowed; }
table.cap td.do { white-space: normal; min-width: 120px; }
table.cap td.do .act { display: block; margin-bottom: 4px; }
/* a Gathering: the triage tiers, as the Cannes artifact coloured them */
.tag.tier-p0 { background: var(--accent); color: var(--on-accent); }
.tag.tier-p1 { background: var(--accent-soft); color: var(--accent); }
.tag.tier-p2 { background: var(--sunk); color: var(--ink); }
.tag.tier-p3 { background: var(--sunk); color: var(--faint); }
.tag.tier-xx { background: var(--late-soft); color: var(--late); }
table.gath { min-width: 980px; }
table.gath td .why { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  min-width: 240px; max-width: 420px; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
table.gath td .why + .meta { display: block; font-size: 11px; color: var(--faint); }
table.gath td .sub { display: block; color: var(--muted); font-size: 12px; max-width: 260px; }
table.gath td .av { width: 20px; height: 20px; font-size: 9px; vertical-align: middle; margin-right: 2px; }
table.gath tr.pending td { background: color-mix(in oklab, var(--warn-soft) 35%, transparent); }
table.gath td.do { white-space: normal; min-width: 150px; }
table.gath td.do .meta { display: block; font-size: 11px; }
table.gath details.bio p { font-size: 12px; margin: 4px 0 0; max-width: 420px; }
/* the tier is yours to change on the row (events PRD, C9), painted as the tag was */
.sel.tiersel { font: 600 11px var(--mono); padding: 2px 4px; border-radius: 4px; background: var(--sunk); color: var(--muted); }
.sel.tiersel.tier-p0 { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sel.tiersel.tier-p1 { background: var(--accent-soft); color: var(--accent); }
.sel.tiersel.tier-p2 { color: var(--ink); }
.sel.tiersel.tier-p3 { color: var(--faint); }
.sel.tiersel.tier-xx { background: var(--late-soft); color: var(--late); }
.tag.t-regulation { background: var(--amber-2); color: var(--amber); }
.tag.t-funding { background: var(--accent-2); color: var(--accent); }
.tag.t-product { background: var(--sunk); color: var(--muted); }
.tag.t-market { background: var(--market-2); color: var(--market); }
.tag.t-people { background: var(--ex-soft); color: var(--ex); }
.tag.t-event { background: var(--gathering-2); color: var(--gathering); }
.tag.t-gathering { background: var(--gathering-2); color: var(--gathering); }
.tag.t-deadline { background: var(--accent-2); color: var(--accent); }
a.tag { text-decoration: none; }
.sigdrawer { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; padding: 14px 16px 16px; font-family: var(--sans); }
.sigfull { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; max-width: 70ch; }
.sigdrawer .attrs { grid-template-columns: 130px minmax(0, 1fr); }
.sigside h5 { margin: 0 0 6px; font: 600 12px var(--sans); }
.sigside .segs button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.aboutrow { display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-top: var(--rule-hair) solid var(--line); font-size: 13px; }
.aboutrow:first-of-type { border-top: 0; }
@media (max-width: 900px) { .sigdrawer { grid-template-columns: 1fr; } }

/* the picker dialog */
#pick-dialog { width: min(520px, 94vw); }
#pick-dialog header { display: flex; align-items: center; padding: 10px 14px; border-bottom: var(--rule-hair) solid var(--line);
  font-family: var(--sans); font-size: 14px; }
#pick-dialog .pick-close { margin-left: auto; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
#pick-input { width: 100%; font-family: var(--sans); font-size: var(--t-base); padding: var(--sp-3) var(--sp-4); border: none;
  border-bottom: var(--rule-hair) solid var(--line); outline: none; background: var(--card); color: var(--ink); }
#pick-results { max-height: 50vh; overflow: auto; padding: 0 8px 10px; }
#pick-results button { display: flex; gap: 9px; align-items: center; width: 100%; border: 0; background: none; padding: 7px 8px;
  border-radius: 6px; text-align: left; font: inherit; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; }
#pick-results button:hover, #pick-results button.sel { background: var(--sunk); }
#pick-results small { color: var(--faint); margin-left: auto; font-size: 11.5px; }

.bottombar, .scrim { display: none; }
@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  /* the sidebar becomes a sheet the More button opens; the bottom bar is the nav */
  .side { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: var(--z-modal);
    transform: translateX(-100%); transition: transform var(--dur-modal) var(--ease-out);
    box-shadow: var(--shadow-lift); }
  body.nav-open .side { transform: none; }
  .scrim { position: fixed; inset: 0; background: var(--backdrop); z-index: calc(var(--z-modal) - 1); display: none; }
  body.nav-open .scrim { display: block; }
  .main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  .bottombar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    background: var(--surface); border-top: var(--rule-hair) solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; }
  .bottombar a, .bottombar button { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1;
    border: 0; background: none; color: var(--muted); font: 500 11px var(--sans); text-decoration: none; padding: 2px 0; position: relative; }
  .bottombar svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .bottombar [aria-current="true"] { color: var(--ink); }
  .bottombar .bd { position: absolute; top: -2px; right: calc(50% - 18px); background: var(--ex); color: var(--on-ex);
    font: 600 10px var(--mono); border-radius: 8px; padding: 0 5px; }
  .thumb { display: none !important; }
  .topbar, .bar2, .content, .boardwrap { padding-inline: 16px; }
  .rec { grid-template-columns: minmax(0, 1fr); } .rec .l { border-right: 0; }
  .tabc, .panel, .plist { min-width: 0; }
  .hl { grid-template-columns: repeat(2, 1fr); }
  .hl > div { border-left: var(--rule-hair) solid var(--line) !important; border-top: var(--rule-hair) solid var(--line) !important; }
}

/* Ft2 — one inline band. It earns its place by carrying data freshness. */
.sitefoot {
  max-width: 74rem; margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-7);
  border-top: var(--rule-hair) solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  align-items: baseline;
  font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3);
}
.sitefoot .wordmark { font-family: var(--serif); font-size: var(--t-sm);
                      font-weight: 700; color: var(--ink-2); }
.sitefoot .num { font-family: var(--mono); font-variant-numeric: tabular-nums;
                 color: var(--ink-2); }

/* ---------- page head and headings --------------------------------------- *
 * Stacked, never tag-left/heading-right. The count sits with the title
 * because "People 157" is one fact, not a heading plus an ornament.          */
h1 {
  font-family: var(--sans); font-size: var(--t-md); line-height: 1.2; font-weight: 600;
  margin: 0 0 var(--sp-2); letter-spacing: -0.012em; text-wrap: balance;
  overflow-wrap: anywhere; min-width: 0;
}
h1 .badge.count { font-size: var(--t-sm); vertical-align: 0.4em;
                  margin-left: var(--sp-2); }
h2 { font-family: var(--sans); font-size: var(--t-base); font-weight: 600; margin: var(--sp-6) 0 var(--sp-3);
     letter-spacing: -0.01em; display: flex; align-items: baseline;
     gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
h3 { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 600;
     text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3);
     margin: var(--sp-5) 0 var(--sp-2); }
p { margin: 0 0 var(--sp-2); }
/* the one line under a page title that says what the page is for */
.lede { max-width: 66ch; color: var(--ink-2); margin-bottom: var(--sp-4); font-size: var(--t-sm); }
/* a figure that leads a row — the count is the subject, the words qualify it */
.fig { font-family: var(--mono); font-size: var(--t-md); font-weight: 500;
       font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
       color: var(--ink); margin-right: var(--sp-1); }

a { color: var(--accent); text-underline-offset: 2px;
    text-decoration-thickness: from-font; }

/* ---------- rows: hairlines, not cards. §10.4 trust state on the left ----- *
 * A bordered box inside a bordered column inside a bordered table is three
 * frames around one fact. Rules separate; frames enclose. This product needs
 * separation, so the row keeps one hairline and spends its border budget on
 * the only thing that must be seen at a glance: has a human judged this?     */
.rows { padding: 0; margin: 0 0 var(--sp-4); list-style: none; background: var(--card);
        border: var(--rule-hair) solid var(--line); border-radius: 10px; overflow: hidden; }
.row {
  background: transparent; border: 0;
  border-bottom: var(--rule-hair) solid var(--line-2);
  border-left: var(--rule-trust) solid transparent;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-4);
  margin: 0; list-style: none; position: relative; min-width: 0;
}
.rows > .row:last-child { border-bottom: 0; }
/* §10.4 — texture AND colour, so the state survives greyscale and screenshots */
.row.pending {
  border-left-style: dashed; border-left-color: var(--amber);
  background: var(--amber-2);
}
.row.confirmed { border-left-style: solid; border-left-color: var(--accent); }
.row.overdue {
  border-left-style: dashed; border-left-color: var(--danger);
  background: var(--danger-tint);
}
.row.written { border-left-style: solid; border-left-color: var(--line-strong); }
.row.rejected { opacity: 0.55; }
.row.rejected .txt { text-decoration: line-through; }
.row .meta { font-family: var(--sans); font-size: var(--t-xs);
             color: var(--ink-2); }
.row strong { font-weight: 600; }

.badge {
  font-family: var(--sans); font-size: var(--t-2xs); line-height: 1.7;
  border: var(--rule-hair) solid var(--line); border-radius: var(--radius-sm);
  padding: 0 var(--sp-2); color: var(--ink-2); white-space: nowrap;
  display: inline-block; vertical-align: 1px;
  letter-spacing: 0.02em;
}
.badge.pending { border-color: var(--amber); color: var(--amber);
                 background: var(--amber-2); border-style: dashed; }
.badge.count { font-family: var(--mono); font-variant-numeric: tabular-nums;
               color: var(--ink-3); }
.badge.warm-active { border-color: var(--accent); color: var(--accent);
                     background: var(--accent-2); font-weight: 600; }

.empty { color: var(--ink-3); max-width: 62ch; font-size: var(--t-sm); }
.empty a { color: var(--accent); }
.alarm { color: var(--danger); font-weight: 600; max-width: 62ch;
         border-left: var(--rule-trust) dashed var(--danger);
         padding-left: var(--sp-3); }
.gloss { color: var(--ink-2); font-size: var(--t-sm); margin: var(--sp-1) 0 0; }
.rationale { color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; }
.why { margin: var(--sp-1) 0 0 var(--sp-4); color: var(--ink-2);
       font-family: var(--sans); font-size: var(--t-sm); }
/* A directory prints a name its own way. Keep the printed form visible —
   it is the evidence the row resolved from — but subordinate to the record. */
.raw { color: var(--ink-2); font-family: var(--sans); font-size: var(--t-sm); }
/* An imported bio, folded away: evidence, not the headline. */
.row > details.bio { margin: var(--sp-1) 0 0 var(--sp-4); }
.row > details.bio > summary { color: var(--ink-2); cursor: pointer;
                               font-family: var(--sans); font-size: var(--t-sm); }
.row > details.bio p { margin: var(--sp-1) 0 0; max-width: 62ch;
                       color: var(--ink-2); font-family: var(--sans);
                       font-size: var(--t-sm); }

blockquote { margin: 0; padding-left: var(--sp-4); max-width: 62ch;
             border-left: 2px solid var(--line); }

/* ---------- layout: asymmetric on purpose -------------------------------- */
.cols { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-7); }
.lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
         gap: var(--sp-6); }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--sp-4); margin: var(--sp-3) 0; }
@media (max-width: 60rem) { .lanes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 52rem) {
  .cols, .pair { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

/* summary strip — a band of figures, not five identical tiles. Sizing by
   content keeps the widths uneven, which is what stops it reading as a grid. */
.strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border: var(--rule-hair) solid var(--line); border-radius: 9px; background: var(--card);
  margin-bottom: var(--sp-5); overflow: hidden; max-width: 60rem;
}
.strip > * { padding: 10px 12px; text-decoration: none; color: inherit; display: flex;
             flex-direction: column-reverse; gap: 3px; min-width: 0;
             border-left: var(--rule-hair) solid var(--line); }
.strip > *:first-child { border-left: 0; }
.strip a:hover { background: var(--paper-2); }
.strip b { font-family: var(--sans); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
           line-height: 1.2; color: var(--ink); }
.strip span { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); text-transform: none; letter-spacing: 0; }
.strip .hot b { color: var(--amber); }

/* ---------- refs + §10.2 anchored popover -------------------------------- */
a.ref {
  font-family: var(--mono); font-size: var(--t-xs); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
  color: var(--accent); white-space: nowrap;
}
.ref-static { font-family: var(--mono); font-size: var(--t-xs);
              color: var(--ink-3); }

.pop {
  position: absolute; z-index: var(--z-tooltip); width: min(34rem, 88vw);
  background: var(--card); border: var(--rule-hair) solid var(--ink-2);
  box-shadow: var(--shadow-lift);
  padding: var(--sp-4); font-size: var(--t-sm);
  transform-origin: var(--pop-origin, top left);
  /* §10.2 pins this one verbatim — 150ms, ease-out, scale(.96) → 1. It is not
     routed through --dur-pop / --ease-out because the spec names the values,
     and the most-used interaction in the product is not a place to drift. */
  animation: pop 150ms ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(.96); }
                 to   { opacity: 1; transform: scale(1); } }
.pop blockquote { font-size: var(--t-base); border-left-color: var(--accent); }
.pop .pop-close { position: absolute; top: 4px; right: 6px; border: none;
                  background: none; font-size: var(--t-md); cursor: pointer;
                  color: var(--ink-3); line-height: 1; }
.pop .src { font-family: var(--mono); font-size: var(--t-xs);
            color: var(--ink-3); margin-top: var(--sp-2); }
.pop.missing { color: var(--danger); }

/* ---------- buttons: one voice, square-ish, never a pill ----------------- */
.act, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;              /* an <a class="btn"> is still a button */
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
  border: var(--rule-hair) solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--card);
  cursor: pointer; padding: var(--sp-1) var(--sp-3); color: var(--ink);
  white-space: nowrap;                 /* a two-line button is a broken button */
  min-height: 2rem; line-height: 1.5;
  transition: border-color var(--dur-press) var(--ease-out),
              color var(--dur-press) var(--ease-out);
}
.act:hover, .btn:hover { border-color: var(--ink-2); }
.act:active, .btn:active { transform: scale(0.97); }   /* §10.6 press */
.act.yes { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.act.yes:hover { background: var(--accent-2); }
.act.no  { border-color: var(--danger); color: var(--danger); }
/* disabled needs three channels, not opacity alone */
.act:disabled, .btn:disabled, .filters button:disabled {
  opacity: 0.55; cursor: not-allowed; border-color: var(--line);
  color: var(--ink-3); }
.act:disabled:active, .btn:disabled:active { transform: none; }
.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3);
           flex-wrap: wrap; }
/* decide-in-place: the verdict buttons sit on the line they belong to */
.actions.inline { display: inline-flex; margin: 0 0 0 var(--sp-2);
                  vertical-align: baseline; font-family: var(--sans); }
.actions.inline .act { font-size: var(--t-2xs); padding: 0 var(--sp-2);
                       min-height: 1.4rem; }

/* A tick-box row: the whole label is the target, so the name is as clickable
   as the box itself — these get ticked a dozen at a time. */
.pick { display: flex; gap: var(--sp-3); align-items: flex-start;
        cursor: pointer; }
.pick input { margin-top: 0.3rem; flex: none; width: 1.05rem; height: 1.05rem;
              accent-color: var(--accent); cursor: pointer; }
.pick > span { display: block; }
.pick .rationale { margin: var(--sp-1) 0 0; }
.pick .meta { margin: var(--sp-1) 0 0; }
.row:has(.pick input:checked) { border-color: var(--accent); }

/* A judgement, shown as one: the number and its reason on the same line, and
   who made the call — never a bare score floating free of its author. */
.verdict { margin: var(--sp-1) 0 0; font-size: var(--t-sm); color: var(--ink-2);
           max-width: 68ch; }
.verdict b { color: var(--ink); }
.verdict.yes b { color: var(--accent); }
.verdict.no b { color: var(--ink-2); font-weight: 500; }
.verdict .whose { display: block; font-size: var(--t-2xs); color: var(--ink-3, var(--ink-2));
                  opacity: 0.75; }

/* ---------- review: focus, exit, progress -------------------------------- */
.reviewable { transition: opacity var(--dur-pop) var(--ease-out),
                          max-height var(--dur-pop) var(--ease-out); }
.row:focus { outline: none; }
.row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.row.leaving { opacity: 0; max-height: 0; overflow: hidden; padding-top: 0;
               padding-bottom: 0; margin: 0; border-width: 0; }
.row.err { border-left-color: var(--danger); }
.kbd-hint { font-family: var(--sans); font-size: var(--t-sm);
            color: var(--ink-2); display: flex; flex-wrap: wrap;
            gap: var(--sp-1) var(--sp-3); align-items: baseline; }
kbd { font-family: var(--mono); font-size: var(--t-2xs);
      border: var(--rule-hair) solid var(--line-strong); border-bottom-width: 2px;
      border-radius: var(--radius-md); padding: 0 var(--sp-1);
      background: var(--paper); color: var(--ink-2); }
.progress { font-family: var(--mono); font-size: var(--t-sm);
            color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* §10.1 — the 5-second undo toast: without it, undo is invisible */
#toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%);
  z-index: var(--z-toast); background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-size: var(--t-sm);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md);
  display: none; align-items: center; gap: var(--sp-3);
  box-shadow: var(--shadow-lift); max-width: calc(100vw - 2rem);
}
#toast.show { display: flex; }
#toast button { font: inherit; background: none; color: var(--paper);
                border: var(--rule-hair) solid var(--hairline-on-ink);
                border-radius: var(--radius-sm);
                padding: 0 var(--sp-2); cursor: pointer; white-space: nowrap; }
#toast .bar { position: absolute; left: 0; bottom: 0; height: 2px;
              background: var(--amber); width: 100%;
              transform-origin: left center; }
/* the drain runs on transform, not width — width animates layout every frame */
#toast.show .bar { animation: drain 5s linear forwards; }
@keyframes drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- the relationship map (navigation, not decoration) ------------ */
.map { background: var(--card); border: var(--rule-hair) solid var(--line);
       margin-bottom: var(--sp-5); overflow-x: auto; }
.map svg { display: block; max-width: 100%; height: auto; }
.map .node-hit { cursor: pointer; }
.map .node-hit:hover .node-bg { fill: var(--accent-2); stroke: var(--accent); }
.map .node-bg { fill: var(--card); stroke: var(--ink-3); stroke-width: 1.2; }
.map .node-bg.centre { fill: var(--accent-2); stroke: var(--accent);
                       stroke-width: 1.8; }
.map .node-label { font-family: var(--sans); font-size: 12px; fill: var(--ink); }
.map .edge { stroke: var(--ink-3); stroke-width: 1.1; }
.map .edge.pending { stroke: var(--amber); stroke-dasharray: 3 2.5; }
/* a halo, so a label crossing an edge stays readable without a box behind it */
.map .edge-label { font-family: var(--mono); font-size: 9px; fill: var(--ink-2);
                   paint-order: stroke; stroke: var(--card); stroke-width: 3.5px;
                   stroke-linejoin: round; }
.map .edge-label.pending { fill: var(--amber); }
.map figcaption { font-family: var(--sans); font-size: var(--t-xs);
                  color: var(--ink-3); padding: var(--sp-2) var(--sp-4);
                  border-top: var(--rule-hair) solid var(--line-2); }

/* ---------- profile ------------------------------------------------------ */
.profile-head { border-bottom: var(--rule-hair) solid var(--line);
                padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); }
.profile-head h1 { margin-bottom: var(--sp-2); font-size: 20px; }
.profile-head .sub { font-family: var(--sans); color: var(--ink-2);
                     font-size: var(--t-sm); letter-spacing: 0.01em; }
.profile-head .bio { max-width: 62ch; color: var(--ink-2);
                     font-size: var(--t-base); margin-top: var(--sp-3); }

/* ---------- the dossier: the CRM's own fields, typed in place ------------ *
 * Ruled bands, not a grid of cards. Same information, one frame fewer.      */
.dossier { display: grid; gap: 0; background: transparent;
           border-top: var(--rule-hair) solid var(--line);
           border-bottom: var(--rule-hair) solid var(--line);
           margin-bottom: var(--sp-6);
           grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }
.dossier .card { background: transparent; padding: var(--sp-4) var(--sp-5)
                 var(--sp-4) 0; min-width: 0; }
.dossier .card + .card { border-left: var(--rule-hair) solid var(--line-2);
                         padding-left: var(--sp-5); }
.dossier h3 { margin: 0 0 var(--sp-3); }
.dossier dl { margin: 0; font-family: var(--sans); font-size: var(--t-sm); }
.dossier .f { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr);
              gap: var(--sp-3); align-items: baseline;
              padding: var(--sp-2) 0;
              border-bottom: var(--rule-hair) solid var(--line-2); }
.dossier .f:last-child { border-bottom: none; }
.dossier dt { color: var(--ink-3); font-size: var(--t-2xs);
              text-transform: uppercase; letter-spacing: 0.1em; }
.dossier dd { margin: 0; display: flex; gap: var(--sp-2); align-items: baseline;
              min-width: 0; }
/* notes take the whole last band — a paragraph in a 21rem column reads as an
   accident */
.dossier .card.notes { grid-column: 1 / -1; border-left: 0;
                       border-top: var(--rule-hair) solid var(--line-2);
                       padding-left: 0; }
.dossier .notes p { margin: 0; }

/* an empty field must read as an invitation, not as an absent feature */
.ed { cursor: text; border-bottom: 1px dashed var(--line-strong); min-width: 4rem;
      display: inline-block; max-width: 100%; overflow-wrap: anywhere;
      color: var(--ink); }
.ed:hover { border-bottom-color: var(--accent); }
.ed:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ed:empty::after { content: "+ " attr(data-label); color: var(--ink-3);
                   font-style: italic; }
.ed.long { display: block; border-bottom: none; font-family: var(--sans);
           font-size: var(--t-sm); color: var(--ink-2); min-height: 1.4em; }
.ed.long:empty::after { border-bottom: 1px dashed var(--line-strong); }
.ed-input { font: inherit; font-family: var(--sans); font-size: var(--t-sm);
            width: 100%; min-width: 8rem; padding: 1px var(--sp-1);
            border: var(--rule-hair) solid var(--accent);
            border-radius: var(--radius-sm);
            background: var(--card); color: var(--ink); }
textarea.ed-input { width: 100%; min-height: 4.5em; resize: vertical; }
a.mini { font-family: var(--sans); font-size: var(--t-xs); color: var(--accent);
         text-decoration: none; }
a.mini[hidden] { display: none; }

.prep { border-left: var(--rule-trust) solid var(--accent);
        background: var(--card); padding: var(--sp-4) var(--sp-5);
        margin-bottom: var(--sp-6);
        border-top: var(--rule-hair) solid var(--line);
        border-bottom: var(--rule-hair) solid var(--line); }
.prep h2 { margin-top: 0; }
.prep h3 { margin-top: var(--sp-5); }

/* PRD "Meeting prep layout", revision 10 Oct — the call script. One column
   to glance at during a call: questions bold, in phases; follow-ups lighter
   with soft dots, no group labels; the reason folded under "› Why". The call
   view (/p/<type>/<id>/call) and prep mode share it. Tokens only. */
.cs { margin-top: var(--sp-2); }
.cs-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
          flex-wrap: wrap; padding: var(--sp-3) 0; border-bottom: var(--rule-hair) solid var(--line); }
.cs[data-cs-mode="call"] .cs-bar { position: sticky; top: env(safe-area-inset-top, 0px);
                                   background: var(--paper); z-index: var(--z-sticky); }
.cs-progress { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
               font-variant-numeric: tabular-nums; }
.cs-progress b { color: var(--ink); font-weight: 500; }
.cs-toggle { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--t-sm);
             color: var(--ink-2); cursor: pointer; }
.cs-toggle input { accent-color: var(--accent); }
.cs-phase { margin-top: var(--sp-6); }
.cs-phase-name { margin: 0 0 var(--sp-1); }
.cs-qs { list-style: none; margin: 0; padding: 0; }
.cs-q { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--sp-2);
        padding: var(--sp-3) 0; }
.cs-n { font-family: var(--mono); font-size: var(--t-sm); font-weight: 500; color: var(--ink-3);
        font-variant-numeric: tabular-nums; padding-top: 0.2rem; }
.cs-body { min-width: 0; }
.cs-say { margin: 0; font-family: var(--sans); font-size: var(--t-md); font-weight: 600;
          line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); text-wrap: pretty; }
.cs[data-cs-mode="call"] .cs-say { cursor: pointer; }
.cs-fu { list-style: none; margin: var(--sp-2) 0 0; padding: 0; display: grid; gap: 6px; }
.cs-fu li { position: relative; padding-left: 18px; color: var(--ink-2); font-size: var(--t-base);
            line-height: 1.45; }
.cs-fu li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 5px; height: 5px;
                    border-radius: 50%; background: var(--line-strong); }
.cs-fu li.cs-split { margin-top: var(--sp-2); }
.cs-fu li.cs-note { color: var(--ink-3); font-style: italic; padding-left: 0; }
.cs-fu li.cs-note::before { display: none; }
.cs-why-link { margin-top: var(--sp-2); font: 500 var(--t-xs) var(--sans); color: var(--ink-3);
               background: none; border: 0; padding: 2px 0; cursor: pointer;
               display: inline-flex; align-items: center; gap: var(--sp-1); }
.cs-why-link[aria-expanded="true"] { color: var(--accent); }
.cs-chev { display: inline-block; transition: transform var(--dur-pop) var(--ease-out); }
.cs-why-link[aria-expanded="true"] .cs-chev { transform: rotate(90deg); }
@media (hover: hover) and (pointer: fine) {
  .cs-why-link:hover, .cs[data-cs-mode="call"] .cs-say:hover { color: var(--accent); }
}
.cs-why { margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-left: 2px solid var(--accent);
          background: var(--accent-2); color: var(--ink); font-size: var(--t-sm); line-height: 1.5;
          border-radius: 0 var(--radius-md) var(--radius-md) 0; max-width: 66ch; }
.cs-why p { margin: 0; }
/* asked: set aside quietly, a tick where the number was */
.cs-q.done .cs-say { color: var(--ink-3); font-weight: 500; }
.cs-q.done .cs-fu, .cs-q.done .cs-why-link, .cs-q.done .cs-why { display: none; }
.cs-q.done .cs-n { color: var(--accent); }
.cs-q.done .cs-num, .cs-q:not(.done) .cs-tick { display: none; }
/* revision 2 — prep mode you can read: a 66ch measure, a lead, real lists,
   a timeline with years on the left, sources once per section; the
   questions as a numbered list in the page's own style */
.pr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.pr-head h2 { margin: 0; }
.pr-head .meta { margin: var(--sp-1) 0 0; }
.pr-purpose { margin: var(--sp-4) 0 0; font-size: var(--t-base); line-height: 1.55; max-width: 66ch; }
.pr-sec { margin-top: var(--sp-6); }
.pr-sec h3 { margin: 0 0 var(--sp-2); }
.pr-measure { max-width: 66ch; }
.pr-lead { margin: 0 0 var(--sp-2); }
.pr-sub { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.pr-list li { position: relative; padding-left: var(--sp-4); }
.pr-list li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 5px; height: 5px;
                      border-radius: 50%; background: var(--line-strong); }
.pr-d { color: var(--ink-2); }
.pr-small { margin: var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.pr-tl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.pr-tl li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); }
.pr-yr { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); padding-top: 0.1rem;
         font-variant-numeric: tabular-nums; }
.pr-tl b { font-weight: 600; }
.pr-srcs { margin: var(--sp-3) 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.pr-qhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pr-phase { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.pr-qs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pr-qs > li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 6px; }
.pr-n { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); padding-top: 0.15rem; }
.pr-q { font-weight: 500; }
.pr-fu { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: 2px; }
.pr-fu li { position: relative; padding-left: 14px; color: var(--ink-2); font-size: var(--t-sm); }
.pr-fu li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.pr-fu li.pr-note { font-style: italic; color: var(--ink-3); }
.pr-why { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--t-xs); }
/* the call view's own page: no sidebar, one reading column */
.cs-page { height: auto; }
.cs-wrap { max-width: 42rem; margin: 0 auto; padding-inline: var(--sp-4); padding-block: var(--sp-5) var(--sp-8); }
.cs-back { margin: 0 0 var(--sp-3); font-size: var(--t-sm); }
.cs-back a { color: var(--ink-3); text-decoration: none; }
.cs-who { margin: 0; font-family: var(--sans); font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.cs-meta { margin: var(--sp-1) 0 0; color: var(--ink-3); font-size: var(--t-sm); }
@media (max-width: 30rem) {
  .cs-q { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .cs-say { font-size: 1.125rem; }
  .pr-tl li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pr-head { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .cs-chev { transition: none; } }

details.tab { border-top: var(--rule-hair) solid var(--line);
              padding: var(--sp-4) 0; }
details.tab > summary { font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 600; cursor: pointer; color: var(--ink); list-style: none;
  display: flex; align-items: center; gap: var(--sp-2);
  text-transform: uppercase; letter-spacing: 0.1em; }
details.tab > summary::-webkit-details-marker { display: none; }
details.tab > summary::before { content: "▸"; color: var(--ink-3);
                                font-size: var(--t-2xs); }
details.tab[open] > summary::before { content: "▾"; }
details.tab > summary:hover { color: var(--accent); }
.tab-body { padding-top: var(--sp-4); }

/* §10.7 progressive disclosure — 3 shown, the rest behind one click */
.more-wrap > .hidden-item { display: none; }
.more-wrap.open > .hidden-item { display: block; }
.more-btn { font-family: var(--sans); font-size: var(--t-sm); color: var(--accent);
            background: none; border: none; cursor: pointer;
            padding: var(--sp-2) 0; text-decoration: underline;
            text-underline-offset: 3px; }

/* ---------- tables (directories) ----------------------------------------- */
/* .tw is the scrollport, not the viewport: overflow on one axis makes it a
   scroll container on both, so a sticky header inside it pins to .tw. Offset
   it by the nav height and it never pins — it just sits 41px lower, on top of
   the rows. The table scrolls itself; the header pins at top: 0. */
.tw { overflow: auto; max-height: calc(100vh - 15rem);
      overscroll-behavior: contain;
      border: var(--rule-hair) solid var(--line); border-radius: 9px;
      background: var(--card); }
table.dir { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--sans); }
table.dir th { text-align: left; font-family: var(--sans); font-size: var(--t-2xs);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--ink-3); padding: var(--sp-3);
  /* collapsed borders don't travel with a sticky cell — paint the rule inside */
  box-shadow: inset 0 -1px 0 var(--line);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
  background: var(--card); }
table.dir th a { color: inherit; text-decoration: none; }
table.dir th a:hover { color: var(--ink); }
table.dir th a.sorted { color: var(--accent); }
/* 157 teal names is not an accent, it is a colour scheme. In a dense table a
   link identifies itself by its underline; the accent stays for state. */
table.dir td a { color: var(--ink); text-decoration: underline;
                 text-decoration-color: var(--line-strong);
                 text-underline-offset: 2px; }
table.dir td a:hover { color: var(--accent); text-decoration-color: var(--accent); }
table.dir td { padding: var(--sp-3); vertical-align: baseline;
               border-bottom: var(--rule-hair) solid var(--line-2); }
/* the name is the row's subject: it gets the serif and the weight */
table.dir td:first-child { font-size: 13.5px; }
table.dir td:first-child a { text-decoration: none; }
table.dir td:first-child a:hover { text-decoration: underline; }
table.dir td .meta { font-family: var(--sans); font-size: var(--t-xs);
                     color: var(--ink-3); }
table.dir tr:hover td { background: var(--paper-2); }
table.dir td.num { font-family: var(--mono); font-variant-numeric: tabular-nums;
                   text-align: right; color: var(--ink-2);
                   white-space: nowrap; }  /* count and bar stay one line */
/* absence, not pendency. "No connections recorded" is a hole in the data, not
   a row awaiting judgement — so it reads as a dashed underline on the figure
   and the amber left rule stays reserved for what a human must decide. */
table.dir td.trust-pending { color: var(--ink-3);
  text-decoration: underline dashed var(--line-strong);
  text-decoration-thickness: 1px; text-underline-offset: 4px; }
table.dir td.reach { font-family: var(--sans); white-space: nowrap; }
table.dir td.reach a { color: var(--accent); text-decoration: none;
                       margin-right: var(--sp-1); }
table.dir td.reach a.none { color: var(--ink-3); }

/* bar-in-cell: density without a chart nobody reads */
.bar { display: inline-block; height: 6px; background: var(--accent);
       opacity: 0.45; vertical-align: 1px; margin-left: var(--sp-2);
       min-width: 1px; }

table.compare { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
table.compare th, table.compare td {
  border: var(--rule-hair) solid var(--line);
  padding: var(--sp-3); text-align: left; vertical-align: top; }
table.compare th { font-family: var(--sans); font-size: var(--t-2xs);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  background: var(--paper-2); }

/* ---------- filters ------------------------------------------------------ */
.filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5);
           flex-wrap: wrap; align-items: center; }
.filters select, .filters input, .filters button {
  font-family: var(--sans); font-size: var(--t-sm);
  padding: var(--sp-1) var(--sp-2);
  border: var(--rule-hair) solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--card);
  color: var(--ink); min-height: 2rem;
}
.filters input { min-width: 12rem; }
.filters button { cursor: pointer; font-weight: 500; }
.filters button:hover { border-color: var(--ink-2); }

/* ---------- D2 Industry: the chips are the filter, the divider is today -- */
.page-head { display: flex; align-items: center;
             justify-content: space-between; gap: var(--sp-4);
             flex-wrap: wrap; }
.seg { display: flex; border: var(--rule-hair) solid var(--line-strong);
       border-radius: var(--radius-md); overflow: hidden;
       font-family: var(--sans); font-size: var(--t-sm); }
.seg a { padding: var(--sp-1) var(--sp-3); color: var(--ink-2);
         text-decoration: none; font-variant-numeric: tabular-nums;
         border-right: var(--rule-hair) solid var(--line); }
.seg a:last-child { border-right: 0; }
.seg a.active { color: var(--accent); font-weight: 600;
                background: var(--accent-2); }
.lede .n { font-family: var(--mono); font-weight: 500; color: var(--ink);
           font-variant-numeric: tabular-nums; }
.chips { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5);
         padding: var(--sp-3) var(--sp-4); background: var(--card);
         border: var(--rule-hair) solid var(--line); border-radius: 9px; }
.chiprow { display: flex; flex-wrap: wrap; align-items: baseline;
           gap: var(--sp-2); }
.chiprow .rowlab { font-family: var(--sans); font-size: var(--t-2xs);
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-3);
  min-width: 4.5rem; }
a.chip, .chip.zero { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2);
        text-decoration: none; padding: 2px var(--sp-2); background: none;
        border: var(--rule-hair) solid var(--line);
        border-radius: var(--radius-md); }
.chip .n { font-family: var(--mono); font-variant-numeric: tabular-nums;
           color: var(--ink-3); }
a.chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-2); }
.chip.active .n { color: var(--accent); }
/* a zero is a finding, not a link: shown, muted, inert */
.chip.zero { border-color: transparent; color: var(--ink-3); }
.today-line { display: flex; align-items: center; gap: var(--sp-3);
              margin: var(--sp-7) 0 var(--sp-5); font-family: var(--mono);
              font-size: var(--t-xs); color: var(--ink-3); }
.today-line::before, .today-line::after {
  content: ""; flex: 1; border-top: var(--rule-hair) solid var(--line-strong); }
.row.gathering { display: flex; align-items: baseline; gap: var(--sp-3);
                 flex-wrap: wrap; }
.row.gathering form { margin-left: auto; }
.row .when { font-family: var(--mono); font-size: var(--t-xs);
             color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dim { margin-bottom: var(--sp-6); }
.dim h3 { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
          display: flex; align-items: baseline; gap: var(--sp-2);
          margin: 0 0 var(--sp-2);
          border-bottom: var(--rule-hair) solid var(--line);
          padding-bottom: var(--sp-1); }
.dim h3 a { color: inherit; text-decoration: none; }
.dim h3 .n { font-family: var(--mono); font-weight: 400; color: var(--ink-3);
             font-variant-numeric: tabular-nums; }
.dim .figs { font-family: var(--sans); font-size: var(--t-sm);
             color: var(--ink-2); display: flex; flex-wrap: wrap;
             gap: var(--sp-1) var(--sp-4); margin: var(--sp-2) 0 0; }
.dim .figs b { font-family: var(--mono); font-weight: 500;
               font-variant-numeric: tabular-nums; }
.more { display: inline-block; font-family: var(--sans);
        font-size: var(--t-sm); margin-top: var(--sp-2); }
.more.muted { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  a.chip:hover { border-color: var(--ink-2); }
  .seg a:hover { color: var(--ink); }
  .dim h3 a:hover { text-decoration: underline; }
}

/* ---------- dialogs: §10.3 ⌘K opens with NO animation -------------------- */
dialog { border: var(--rule-hair) solid var(--ink-2);
         border-radius: var(--radius-md); padding: 0;
         width: min(40rem, 94vw); box-shadow: var(--shadow-lift);
         background: var(--card); color: var(--ink); }
dialog::backdrop { background: var(--backdrop); }
#k-input, #ask-input { width: 100%; font-family: var(--sans);
  font-size: var(--t-md); padding: var(--sp-3) var(--sp-4); border: none;
  border-bottom: var(--rule-hair) solid var(--line);
  outline: none; background: var(--card); color: var(--ink); }
#k-results { max-height: 60vh; overflow-y: auto; padding: var(--sp-2); }
.k-group h4 { font-family: var(--sans); font-size: var(--t-2xs);
  margin: var(--sp-3) 0 2px; color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.11em; padding: 0 var(--sp-2); }
.k-item { display: flex; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2); text-decoration: none; color: var(--ink);
  font-size: var(--t-sm); border-radius: var(--radius-sm); }
.k-item .k-hint { font-family: var(--sans); font-size: var(--t-2xs);
                  color: var(--ink-3); white-space: nowrap; }
.k-item.sel { background: var(--accent); color: var(--accent-ink); }
.k-item.sel .k-hint { color: var(--accent-ink-2); }
#ask-form { display: flex; }
#ask-form button { border: none;
                   border-bottom: var(--rule-hair) solid var(--line);
                   background: var(--accent-2); color: var(--accent);
                   font-family: var(--sans); font-weight: 600;
                   padding: 0 var(--sp-4); cursor: pointer; }
#ask-answer { padding: var(--sp-4); white-space: pre-wrap;
              font-size: var(--t-sm); max-height: 50vh; overflow-y: auto; }
#ask-answer .offline { color: var(--danger); font-weight: 600;
                       font-family: var(--sans); }

/* ---------- login -------------------------------------------------------- */
.login-page { display: grid; place-items: center; min-height: 100vh; }
.login-box { display: grid; gap: var(--sp-3); width: 21rem;
             background: var(--card);
             border-top: var(--rule-trust) solid var(--accent);
             border-bottom: var(--rule-hair) solid var(--line);
             box-shadow: var(--shadow-whisper);
             padding: var(--sp-6); }
.login-box h1 { font-size: var(--t-lg); margin: 0; }
.login-box input, .login-box button { font-family: var(--sans);
  font-size: var(--t-base); padding: var(--sp-2) var(--sp-3);
  border: var(--rule-hair) solid var(--line-strong);
  border-radius: var(--radius-md); }
.login-box button { background: var(--accent); color: var(--accent-ink);
                    border-color: var(--accent); cursor: pointer;
                    font-weight: 600; }

/* ---------- §10.7 thumb-zone actions on mobile --------------------------- */
.thumb { display: none; }
@media (max-width: 40rem) {
  .content { padding-bottom: 7rem; }
  .sitefoot { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .cols { gap: var(--sp-5); }
  .strip { gap: var(--sp-3) var(--sp-5); }
  .dossier { grid-template-columns: minmax(0, 1fr); }
  .dossier .card + .card { border-left: 0; padding-left: 0;
                           border-top: var(--rule-hair) solid var(--line-2); }
  .tw { max-height: none; }
  h2 { margin-top: var(--sp-6); }
  .thumb {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal);
    display: flex; gap: var(--sp-2); padding: var(--sp-3);
    background: var(--card); border-top: var(--rule-hair) solid var(--line);
    box-shadow: var(--shadow-thumb);
  }
  .thumb .act { flex: 1; padding: var(--sp-3); font-size: var(--t-base); }
  #toast { bottom: 5.5rem; }
}

/* hover effects only on real pointers (§10.6) */
@media not all and (hover: hover) and (pointer: fine) {
  .nav:hover, .act:hover, .btn:hover, table.dir tr:hover td { all: revert; }
}
@media (prefers-reduced-motion: reduce) {
  .pop { animation: none; }
  #toast.show .bar { animation: none; }
  .reviewable, .row.leaving, .act, .btn { transition: none; }
  .act:active, .btn:active { transform: none; }
}

/* ---------- tags (PRD §2.2: derived, never typed) and the campaign board --- */
h1 .badge.tag-researched, h1 .badge.tag-prospect, h1 .badge.tag-partner {
  font-size: var(--t-2xs); vertical-align: 0.5em; margin-left: var(--sp-2); }
.badge.tag-prospect { border-color: var(--accent); color: var(--accent); }
.badge.tag-partner { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.badge.tag-researched { color: var(--ink-2); }
table.dir.campaign td.ask { max-width: 22rem; font-family: var(--sans);
  font-size: var(--t-xs); color: var(--ink-2); }
table.dir.campaign tr.overdue td:first-child { border-left: var(--rule-trust) solid var(--danger); }
table.dir.campaign .ed.long { min-width: 9rem; }
table.dir td.reach a { margin-right: var(--sp-1); text-decoration: none; }
.dossier.campaign-rows { margin-bottom: var(--sp-5); }
.dossier.campaign-rows h3 a { color: inherit; text-decoration: none; }
.dossier.campaign-rows h3 a:hover { text-decoration: underline; }
.dossier.campaign-rows details { margin-top: var(--sp-3); }
.kv { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 2px var(--sp-3);
      font-family: var(--sans); font-size: var(--t-xs); margin: var(--sp-2) 0 0; }
.kv dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em;
         font-size: var(--t-2xs); }
.kv dd { margin: 0; color: var(--ink-2); }

/* A commitment is a sentence, not a field value. In a three-column dossier a
   long one wraps to a two-word ribbon, so it gets the card's full width and
   its label moves above it. */
.dossier .f.stacked { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.dossier .f.stacked dd { flex-wrap: wrap; }
.dossier .f.stacked .ed { line-height: 1.5; }

/* ---- lists, kanban, tasks (slice 1a, decisions 2 and 4) ---------------- */
.bars { display: inline-flex; gap: 2px; align-items: flex-end; vertical-align: middle; margin-left: var(--sp-1); }
.bars i { width: 4px; border-radius: 1px; background: var(--line-strong); display: inline-block; }
.bars i:nth-child(1) { height: 5px; } .bars i:nth-child(2) { height: 8px; } .bars i:nth-child(3) { height: 11px; }
.bars i.on { background: var(--accent); }
.stage-select, .inline-form select, .inline-form input { font: inherit; font-family: var(--sans); font-size: var(--t-sm);
  border: var(--rule-hair) solid var(--line-strong); border-radius: 3px; padding: 1px var(--sp-1); background: transparent; color: inherit; }
.inline-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0; }
.inline-form input[type=search], .inline-form input[type=text] { min-width: 12rem; flex: 1; }
.row.done strong { text-decoration: line-through; color: var(--ink-3); }
.late { color: var(--amber); font-family: var(--mono); }
.stagebar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--line-2); margin: var(--sp-2) 0 var(--sp-1); max-width: 30rem; }
.stagebar i { display: block; height: 100%; }
.lists-index .row { padding-bottom: var(--sp-3); }

/* duplicates in the Inbox (Duplicates PRD, 1 Oct 2026): two cards side by side, the kept one marked */
.dup-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dup-card { border: var(--rule-hair) solid var(--line); border-radius: 8px; padding: 9px 11px; display: flex;
  flex-direction: column; gap: 4px; background: var(--surface); cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.dup-card:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.dup-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dup-card:has(input:checked) .keep-word { color: var(--accent); font-weight: 600; }
@media (max-width: 700px) { .dup-pair { grid-template-columns: 1fr; } }

/* a button that reads as a link: the small "set company · remove · cancel" actions */
button.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--accent, inherit);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hl .co-acts { display: block; margin-top: 2px; font-weight: 400; }
.acts .enrich-q { align-self: center; color: var(--muted); font-size: 13px; white-space: nowrap; }
.acts .enrich-q:has(.enrich-why) { white-space: normal; flex-basis: 100%; }
.enrich-why { color: var(--ink); }
.acts .enrich-q.failed { color: var(--late); white-space: normal; }
.enrich-pick { position: relative; display: inline-flex; }
.enrich-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 270px; padding: 4px;
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.enrich-menu[hidden] { display: none; }
.enrich-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px;
  background: none; border: 0; border-radius: 6px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.enrich-menu button:hover, .enrich-menu button:focus-visible { background: var(--hover); }
.enrich-menu small { color: var(--muted); }

/* ---- the Inbox in queues (PRD 1 Oct 2026) ------------------------------------ *
 * One queue on screen, one card frame for every kind (D6). No beige rows here:
 * everything in an Inbox waits for a human, so the §10.4 pending mark would say
 * nothing — it stays on the pages where pending and judged rows sit together. */
.ikeys { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--faint); }
.ihelp { position: relative; }
.ihelp summary { list-style: none; cursor: pointer; width: 24px; height: 24px; border-radius: 50%; display: grid;
  place-items: center; border: var(--rule-hair) solid var(--line); background: var(--surface); color: var(--muted);
  font-weight: 600; font-size: 12px; }
.ihelp summary::-webkit-details-marker { display: none; }
.ihelp-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); z-index: var(--z-dropdown);
  background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lift);
  padding: 14px 16px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.ihelp-pop p { margin: 0; }
.ihelp-pop b { color: var(--ink); }
/* flex: none — .main is a flex column, and a scroll container may shrink to nothing in one */
.qtabs { flex: none; display: flex; gap: 2px; padding: 0 22px; border-bottom: var(--rule-hair) solid var(--line); background: var(--surface);
  overflow-x: auto; scrollbar-width: none; font-family: var(--sans); }
.qtabs a { display: flex; align-items: center; gap: 7px; padding: 10px 10px 9px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13.5px; }
.qtabs a:hover { color: var(--ink); }
.qtabs .c { font: 500 11.5px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.qtabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.qtabs a[aria-current="page"] .c { color: var(--ink); }
.qtabs a.zero { opacity: .5; }
.qtabs a.done { margin-left: auto; }
.inbox { display: flex; flex-direction: column; gap: 12px; max-width: 880px; font-family: var(--sans); }
.inbox .muted { color: var(--muted); }
.inbox .faint { color: var(--faint); font-size: 12.5px; }
.ihead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ilede { margin: 0; color: var(--muted); font-size: 13.5px; }
.ihead .ilede { flex: 1 1 300px; }   /* a width beside the button — in the column it would be a height */
.isubs { align-self: flex-start; flex-wrap: wrap; }
.isubs .c { font: 500 11px var(--mono); color: var(--faint); margin-left: 5px; }
.icards { display: flex; flex-direction: column; gap: 10px; }
.icard { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; padding: 13px 16px;
  display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-whisper); min-width: 0;
  transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out); }
.icard:focus { outline: none; }
.icard.cur { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.icard.leaving { opacity: 0; transform: translateX(12px); }
.icard[hidden] { display: none; }
.ic-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ic-h .tag { align-self: center; }
.ic-t { font-weight: 600; font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; }
.ic-flag { font-size: 14.5px; line-height: 1; }
.icard.found { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic-when { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.ic-ctx { font-size: 12.5px; color: var(--faint); margin-top: -4px; overflow-wrap: anywhere; }
.ic-b { margin: 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
p.ic-b { display: block; }
.ic-b p { margin: 0; }
.ic-a { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 2px; }
.ic-err { margin: 0; color: var(--danger); font-size: 13px; }
.tag.mail { background: var(--accent-2); color: var(--accent); }
.tag.ex { background: var(--ex-soft); color: var(--ex); }
.ic-props { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ic-props label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.ic-props input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.ic-props .k, .ic-heads .k { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-right: 6px; }
.ic-props .k.task { color: var(--warn); }
.ic-heads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.ic-heads li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px; }
.ic-heads .k { padding-top: 2px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ic-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.icard blockquote.txt { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); min-width: 0; overflow-wrap: anywhere;
  font-size: 15.5px; line-height: 1.5; }
.icard blockquote .ref { display: block; margin-top: 4px; font: 500 11px var(--mono); }
.icard .payload-slot:empty { display: none; }
.icard .dup-card .meta { font-size: 12.5px; color: var(--muted); }
.imore { align-self: center; }
.inothing { background: var(--surface); border: var(--rule-hair) dashed var(--line-strong); border-radius: 10px; padding: 28px 18px;
  text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.inothing b { font-size: 15px; }
.ihistory { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; display: flex; flex-direction: column; }
.ih-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-top: var(--rule-hair) solid var(--line-2); font-size: 13.5px; }
.ih-row:first-child { border-top: 0; }
.ih-row .d { font-size: 12.5px; color: var(--faint); }
.ih-row details { font-size: 12.5px; color: var(--muted); }
.ih-row summary { cursor: pointer; color: var(--accent); width: max-content; }
.ih-row ul { margin: 4px 0 0; padding-left: 18px; }
#toast .toast-undo[hidden] { display: none; }
@media (max-width: 900px) {
  .qtabs { padding-inline: 16px; }
  .ikeys .kh { display: none; }
  .ic-pair { grid-template-columns: 1fr; }
  .ic-heads li { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .icard { transition: none; } }

/* ---- the Watch newsletter (Watch on Claude PRD, D14; the approved mockup) ------ *
 * One issue as a page inside Inbox › Research. Unlike the queues, judged and
 * unjudged findings sit together here, so the §10.4 mark comes back: a finding
 * nobody has judged yet is amber AND dashed; kept turns solid accent, rejected
 * solid grey and faded. Tokens only — dark mode follows them.                   */
.nl { gap: 14px; }
.nl .back { font-size: 13px; color: var(--muted); text-decoration: none; align-self: flex-start; }
.nl .back:hover { color: var(--ink); }
.nl-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.nl-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.nl-head h2 { margin: 0; font: 600 20px var(--sans); text-wrap: balance; }
.nl-head .meta { margin: 4px 0 0; font-size: 12.5px; color: var(--faint); }
.nl .prog { font: 500 12px var(--mono); color: var(--muted); display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.nl .prog .bar { width: 90px; height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; display: inline-block; }
.nl .prog .bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.nl-sections { display: flex; flex-wrap: wrap; gap: 6px; position: sticky; top: 41px; /* under the sticky topbar */ z-index: 2; background: var(--paper); padding: 6px 0;
  box-shadow: 0 -12px 0 var(--paper); /* covers the strip between the topbar and the chips, where scrolled text showed */ }
.nl-sections a { font-size: 12.5px; color: var(--muted); text-decoration: none; border: var(--rule-hair) solid var(--line); border-radius: 14px;
  padding: 3px 10px; background: var(--surface); }
.nl-sections a:hover { color: var(--ink); border-color: var(--line-strong); }
.nl-sections .c { font: 500 11px var(--mono); color: var(--faint); margin-left: 3px; }
.nl h3.sec { margin: 10px 0 0; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); scroll-margin-top: 96px; }
.nl .icard.wf, .nl .pendingbox { border-left: var(--rule-trust) dashed var(--amber); }
.nl .pendingbox { background: var(--amber-2); border-radius: 10px; padding: 12px 16px; display: flex; flex-direction: column; gap: 8px;
  border-top: var(--rule-hair) solid var(--line); border-right: var(--rule-hair) solid var(--line); border-bottom: var(--rule-hair) solid var(--line); }
.nl .icard.wf.kept { border-left-style: solid; border-left-color: var(--accent); }
.nl .icard.wf.rejected { border-left-style: solid; border-left-color: var(--line-strong); }
.nl .icard.wf.rejected > :not(.state):not(.ic-err) { opacity: .6; }
.nl .icard.wf.kept > :not(.ic-h):not(.state):not(.ic-err), .nl .icard.wf.rejected > :not(.ic-h):not(.state):not(.ic-err) { display: none; }
.nl .icard.wf:not(.kept):not(.rejected) > .state { display: none; }
.nl .state { margin: 0; font-size: 12.5px; color: var(--muted); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.nl .state button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }
.nl .state input { font: 12.5px var(--sans); padding: 3px 6px; border: var(--rule-hair) solid var(--line-strong); border-radius: 5px;
  background: var(--surface); color: var(--ink); min-width: 0; flex: 1 1 220px; }
.nl .state .said { color: var(--ink); }
.nl .zh { margin: 0; font-size: 14px; color: var(--ink); }
.nl blockquote.orig, .wkept blockquote.orig { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); font-family: var(--serif);
  font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.nl blockquote.orig:lang(zh), .wkept blockquote.orig:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", sans-serif; font-size: 14px; }
.nl .src { display: inline-flex; gap: 8px; align-items: center; margin-left: 6px; font: 12px var(--sans); flex-wrap: wrap; }
.nl .src a, .nl .snip a { color: var(--accent); }
.nl .badge.ok { border-color: var(--accent); color: var(--accent); }
.nl .snip { margin: 0; font-size: 12.5px; color: var(--muted); font-style: italic; }
.nl .snip a { font-style: normal; }
.nl .for { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; font-size: 13px; }
.nl .for .k, .nl .angle .k, .nl .rejrow .k, .wkept .k { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.nl .wrec { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: var(--rule-hair) solid var(--line-strong); }
.nl a.wrec:hover { color: var(--accent); }
.nl .for .sep { color: var(--faint); }
.nl .angle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; background: var(--accent-2);
  border-radius: 8px; padding: 8px 10px; }
.nl .angle .k { padding-top: 3px; color: var(--accent); }
.nl .angle p { margin: 0; font-size: 13.5px; }
.nl .angle .btn.sm { font-size: 12px; padding: 2px 8px; min-height: 0; }
.nl .why { margin: 0; font-size: 12px; color: var(--faint); }
.nl .partners { margin: 0; font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nl .prog-facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 14px; font-size: 13px; }
.nl .prog-facts dt { font: 600 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.nl .prog-facts dd { margin: 0; }
.nl .addto { font-size: 13px; display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.nl .addto input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.nl .rejrow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nl .rejrow .k { margin-left: 4px; }
.nl .rchip { font: 12.5px var(--sans); border: var(--rule-hair) solid var(--line-strong); background: var(--surface); color: var(--ink);
  border-radius: 14px; padding: 3px 10px; cursor: pointer; }
.nl .rchip:hover { border-color: var(--ink); }
.nl .rchip:disabled, .nl .btn:disabled { opacity: .5; cursor: wait; }
.nl-foot { border-top: var(--rule-hair) solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.nl-foot p { margin: 0; }
.nl .linkbtn { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.nl .left-out { border-style: dashed; }
.nl .icards[hidden] { display: none; }   /* .icards is a flex column: without this the fold never folds */
.nl-notes { font-size: 12.5px; color: var(--muted); }
.nl-notes summary { cursor: pointer; color: var(--accent); width: max-content; }
.nl-notes p { white-space: pre-line; overflow-wrap: anywhere; }
.nl .lesson.done { border-left-style: solid; border-left-color: var(--accent); background: var(--surface); }
.nl .lesson.done .ic-t { color: var(--muted); }
@media (max-width: 760px) {
  .nl .angle { grid-template-columns: minmax(0, 1fr); }
  .nl .ic-when { margin-left: 0; white-space: normal; }
  .nl .src { margin-left: 0; }
}
/* a record's page: the findings Quentin kept (W20) */
.wkept .wk { padding: 10px 14px; border-top: var(--rule-hair) solid var(--line-2); display: flex; flex-direction: column; gap: 6px; }
.wkept .wk:first-of-type { border-top: 0; }
.wkept .wk-h { margin: 0; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.wkept .wk-h a { color: var(--ink); font-weight: 600; text-decoration: none; }
.wkept .wk-h a:hover { color: var(--accent); }
.wkept .wk-h .faint { color: var(--faint); font-size: 12px; }
.wkept .wk-angle { margin: 0; font-size: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; background: var(--accent-2);
  border-radius: 8px; padding: 6px 10px; }
.wkept .wk-angle .k { color: var(--accent); padding-top: 2px; }
.wkept .wk-more { font-size: 12.5px; color: var(--muted); }
.wkept .wk-more summary { cursor: pointer; color: var(--accent); width: max-content; }
.wkept .wk-more blockquote, .wkept .wk-more .zh { margin-top: 6px; }
/* Workflows › Automations, the Watch row (it runs in Claude) */
.wf2 .rt { font: 600 10.5px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 3px 0; border-radius: 4px;
  background: var(--ex-soft); color: var(--ex); text-decoration: none; width: 52px; text-align: center; }
.wf2 .wlessons { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.wf2 .wlessons li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.wf2 .wlessons .t { flex: 1 1 260px; min-width: 0; }
.wf2 .wlessons textarea { flex: 1 1 100%; font: 13px var(--sans); padding: 6px 8px; border: var(--rule-hair) solid var(--line-strong);
  border-radius: 6px; background: var(--surface); color: var(--ink); min-height: 60px; }
.wf2 .wflag { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.home-queues { flex: 1; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.home-queues a { color: var(--muted); text-decoration: none; }
.home-queues a:hover { color: var(--ink); }
.home-queues b { color: var(--ink); font: 600 12px var(--mono); }

/* the work list at the top of Workflows (PRD "Work that survives a restart") */
table.work { width: 100%; border-collapse: collapse; font-size: 13px; }
table.work th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.work td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.work .late-text { color: var(--late); }
.nav .n.late { color: var(--late); }
@media (max-width: 700px) { table.work th:nth-child(2), table.work td:nth-child(2) { display: none; } }

/* ---- Workflows in tabs (PRD 1 Oct 2026) ---------------------------------------- *
 * The strip answers "is everything working?" before any detail (W1); one tab at a
 * time (W2); one row per automation (W3). Scoped to .wf2 and .wstrip.             */
.wstrip { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface);
  border-bottom: var(--rule-hair) solid var(--line); font-family: var(--sans); }
.wstrip > div { padding: 10px 22px; border-left: var(--rule-hair) solid var(--line-2); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wstrip > div:first-child { border-left: 0; }
.wstrip small { font-size: 11.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wstrip b { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; min-width: 0; font-variant-numeric: tabular-nums; }
.wstrip b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wstrip .hot b { color: var(--danger); }
.sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.sdot.ok { background: var(--accent); } .sdot.off { background: var(--line-strong); }
.sdot.bad { background: var(--danger); } .sdot.warn { background: var(--amber); }
.qtabs .c.hot { background: var(--danger); color: var(--accent-ink); border-radius: 8px; padding: 0 6px; }
.btn.sm { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
.wf2 { display: flex; flex-direction: column; gap: 12px; max-width: 920px; font-family: var(--sans); }
.wf-alarm { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--amber-2); color: var(--ink); font-size: 13px; }
.wf2 .whead { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 -2px; font-size: 12px; font-weight: 600; color: var(--faint); }
.wf2 .whead .c { font: 500 11px var(--mono); }
.wf2 .autos, .wf2 .wlist { display: flex; flex-direction: column; background: var(--surface); border: var(--rule-hair) solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-whisper); }
.wf2 .auto { border-top: var(--rule-hair) solid var(--line-2); }
.wf2 .auto:first-child { border-top: 0; }
.wf2 .arow { display: grid; grid-template-columns: auto minmax(0, 1fr) 160px 210px auto; gap: 14px; align-items: center; padding: 12px 16px; }
.wf2 .nmw { min-width: 0; }
.wf2 .nm { font-weight: 600; font-size: 14px; }
.wf2 .gl { font-size: 12.5px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.wf2 .when { font-size: 12.5px; color: var(--muted); }
.wf2 .last { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; min-width: 0; }
.wf2 .last .bad { color: var(--danger); } .wf2 .last .warnt { color: var(--amber); }
.wf2 .aacts { display: flex; gap: 6px; align-items: center; }
.wf2 .chev { border: 0; background: none; color: var(--faint); width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; }
.wf2 .chev:hover { background: var(--sunk); }
.wf2 .chev svg { width: 14px; height: 14px; transition: transform var(--dur-pop) var(--ease-out); }
.wf2 .chev[aria-expanded="true"] svg { transform: rotate(180deg); }
.wf2 .switch { position: relative; width: 34px; height: 20px; border-radius: 10px; border: 0; background: var(--line-strong);
  padding: 0; flex: none; cursor: pointer; transition: background var(--dur-pop) var(--ease-out); }
.wf2 .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); box-shadow: var(--shadow-whisper); transition: transform var(--dur-pop) var(--ease-out); }
.wf2 .switch[aria-checked="true"] { background: var(--accent); }
.wf2 .switch[aria-checked="true"]::after { transform: translateX(14px); }
.wf2 .switch:disabled { opacity: .5; cursor: wait; }
.wf2 .adetail { padding: 2px 16px 16px 64px; display: flex; flex-direction: column; gap: 12px; }
.wf2 .adetail[hidden] { display: none; }
.wf2 .blk { max-width: 280px; }
.wf2 .wfacts { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 4px 12px; font-size: 12.5px; margin: 0; }
.wf2 .wfacts dt { color: var(--faint); } .wf2 .wfacts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wf2 .wbar { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; width: 160px; display: inline-block;
  vertical-align: middle; margin-right: 8px; }
.wf2 .wbar i { display: block; height: 100%; background: var(--accent); }
.wf2 .segs { align-self: flex-start; }
.wf2 .segs .c { font: 500 11px var(--mono); color: var(--faint); margin-left: 5px; }
.wf2 .wlist[hidden] { display: none; }
.wf2 .li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; padding: 11px 16px;
  border-top: var(--rule-hair) solid var(--line-2); }
.wf2 .li:first-child { border-top: 0; }
.wf2 .li.bad { background: var(--danger-tint); }
.wf2 .li .w { font-size: 13.5px; min-width: 0; }
.wf2 .li .d { grid-column: 2; font-size: 12.5px; color: var(--faint); min-width: 0; overflow-wrap: anywhere; }
.wf2 .li .r { grid-row: 1 / 3; grid-column: 3; display: flex; gap: 6px; align-items: center; }
.wf2 .li details { grid-column: 2 / -1; font-size: 12.5px; color: var(--muted); }
.wf2 .li summary, .wf2 .conn summary { cursor: pointer; color: var(--accent); width: max-content; }
.wf2 .names { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; }
.wf2 .conn { background: var(--surface); border: var(--rule-hair) solid var(--line); border-radius: 10px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-whisper); }
.wf2 .conn .h, .wf2 .draft .h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf2 .conn .h b, .wf2 .draft .h b { font-size: 14.5px; }
.wf2 .sub { color: var(--faint); font-size: 12.5px; }
.wf2 .cp { margin: 0; font-size: 13px; color: var(--muted); }
.wf2 .cp.bad { color: var(--danger); }
.wf2 .nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border: var(--rule-hair) solid var(--line-2); border-radius: 8px; }
.wf2 .nums > * { padding: 8px 12px; border-left: var(--rule-hair) solid var(--line-2); display: flex; flex-direction: column; min-width: 0;
  text-decoration: none; color: inherit; }
.wf2 .nums > *:first-child { border-left: 0; }
.wf2 .nums small { font-size: 11.5px; color: var(--faint); }
.wf2 .nums b { font-size: 15px; font-variant-numeric: tabular-nums; }
.wf2 .nums a b { color: var(--accent); }
.wf2 .nums b.ell { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf2 .cacts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wf2 .conn details { font-size: 12.5px; color: var(--muted); }
.wf2 .conn details .wfacts { margin-top: 8px; }
.wf2 .draft { border: var(--rule-hair) dashed var(--line-strong); border-radius: 10px; padding: 13px 16px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) {
  .wstrip { grid-template-columns: 1fr 1fr; }
  .wstrip > div { padding: 9px 16px; }
  .wstrip > div:nth-child(3) { border-left: 0; }
  .wstrip > div:nth-child(n+3) { border-top: var(--rule-hair) solid var(--line-2); }
  .wf2 .arow { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; }
  .wf2 .arow .when, .wf2 .arow .last { grid-column: 2 / 3; }
  .wf2 .arow .aacts { grid-row: 1; grid-column: 3; }
  .wf2 .adetail { padding: 2px 16px 16px; }
  .wf2 .wfacts { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .wf2 .switch, .wf2 .switch::after, .wf2 .chev svg { transition: none; } }
.crumb { color: var(--faint); font-size: 13px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }
.ih-row .sumlist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ih-row .sumlist .said { color: var(--ink); }

/* ---------- Recordings: the Transcript app inside Kairos (migration 029) ------- */
.linktabs { flex: none; }   /* in .main (a flex column) a scrolling bar collapses to 1px without it */
.linktabs a { padding: 8px 10px; color: var(--muted); border-bottom: 2px solid transparent; font: 500 13px var(--sans);
  text-decoration: none; white-space: nowrap; }
.linktabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.linktabs .n { font: 500 11px var(--mono); color: var(--faint); margin-left: 4px; }
.recs { display: flex; flex-direction: column; gap: 14px; }
.recfilters { display: flex; gap: 6px; flex-wrap: wrap; }
.recfilters .chip { text-decoration: none; padding: 3px 9px; font-family: var(--sans); font-size: 12px; }
.recfilters .chip.on { background: var(--ink); color: var(--paper); }
.recfilters .chip .n { margin-left: 5px; opacity: .75; }
.recrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 120px 70px 260px; gap: 14px; align-items: center;
  padding: 11px 16px; border-top: var(--rule-hair) solid var(--line-2); font-family: var(--sans); }
.recrow.rechead { border-top: 0; padding: 8px 16px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.recrow.wait { background: color-mix(in oklch, var(--warn-soft) 55%, transparent); }
.recsrc { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--sunk); color: var(--muted); }
.recsrc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.rect { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rect b { font-weight: 500; font-size: 14px; color: var(--ink); }
.rect small, .recstate small { color: var(--faint); font-size: 12px; }
.reclen { font: 12.5px var(--mono); color: var(--muted); }
.recstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recbar { display: block; width: 100%; height: 5px; border-radius: 9px; background: var(--line-2); overflow: hidden; }
.recbar > span { display: block; height: 5px; background: var(--accent); }
.recnote { margin: 0; font-size: 12.5px; }
#rec-dialog { width: min(620px, 94vw); }
#rec-dialog header, #rec-dialog footer { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-family: var(--sans); }
#rec-dialog header { border-bottom: var(--rule-hair) solid var(--line); font-size: 16px; }
#rec-dialog header .pick-close { margin-left: auto; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }
#rec-dialog footer { border-top: var(--rule-hair) solid var(--line); background: var(--sunk); }
#rec-dialog footer small { color: var(--faint); font-size: 12px; max-width: 260px; margin-right: auto; }
.recbody { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; font-family: var(--sans); }
.recmodes { width: 100%; }
.recmodes button { flex: 1; padding: 7px 10px; font-size: 13px; }
.recfield { display: flex; flex-direction: column; gap: 6px; }
.recfield[hidden] { display: none; }
.recfield > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.recfield > small { color: var(--faint); font-size: 12px; }
.recfield input[type="url"], .recfield input[type="text"] { padding: 9px 11px; border: var(--rule-hair) solid var(--line-strong);
  border-radius: 8px; font: 13.5px var(--sans); background: var(--card); color: var(--ink); }
.recengines { display: flex; gap: 10px; }
.recengine { flex: 1; border: var(--rule-hair) solid var(--line); border-radius: 9px; padding: 10px 12px; display: grid;
  grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; cursor: pointer; }
.recengine input { grid-row: span 2; margin-top: 3px; }
.recengine small { color: var(--faint); font-size: 12px; }
.recengine:has(input:checked) { border: 2px solid var(--accent); background: color-mix(in oklch, var(--accent-2) 50%, transparent); }
.recengine.off { opacity: .6; cursor: not-allowed; }
.recmic > div { display: flex; align-items: center; gap: 10px; }
/* From Wispr (PRD "Bring calls and documents into Kairos", B1): your meetings, one per line */
.recwispr { display: grid; gap: 6px; max-height: 18rem; overflow: auto; }
.recwm { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: baseline;
  border: var(--rule-hair) solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.recwm input { grid-row: span 2; }
.recwm small { grid-column: 2; color: var(--faint); font-size: 12px; }
.recwm:has(input:checked) { border: 2px solid var(--accent); background: color-mix(in oklch, var(--accent-2) 50%, transparent); }
.recwm.done, .recwm.off { grid-template-columns: minmax(0, 1fr); cursor: default; }
.recwm.done small, .recwm.off small { grid-column: 1; }
.recwm.off { opacity: .6; }
.recfield textarea { padding: 9px 11px; border: var(--rule-hair) solid var(--line-strong); border-radius: 8px;
  font: 13.5px var(--sans); background: var(--card); color: var(--ink); resize: vertical; }
.recerr { margin: 0; color: var(--late); font-size: 13px; }
.rec { display: flex; flex-direction: column; gap: 14px; font-family: var(--sans); }
.rechd { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.rechd h2 { margin: 0; font: 600 21px var(--sans); }
.recchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.recacts { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; }
.recacts .enrich-menu { left: auto; right: 0; min-width: 200px; }
.enrich-menu a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 6px;
  color: var(--ink); text-decoration: none; font-size: 13px; }
.enrich-menu a:hover, .enrich-menu a:focus-visible { background: var(--hover); }
.recwait { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.recwait p { margin: 0; font-size: 13.5px; }
.recwait small { color: var(--faint); }
.recplayer { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: var(--rule-hair) solid var(--line);
  border-radius: 10px; background: var(--card); }
.recplayer audio { flex: 1; height: 36px; }
.recplayer small { color: var(--faint); }
.reccols { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.rectext { flex: 999 1 520px; min-width: 0; }
.rectext h3 { margin: 0 0 6px; font: 600 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
.rectext h3 small { color: var(--faint); font: 500 12px var(--mono); margin-left: 6px; }
.recseg { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 8px 6px; border-top: var(--rule-hair) solid var(--line-2); border-radius: 6px; }
.recseg.now { background: color-mix(in oklch, var(--accent-2) 55%, transparent); }
.recseg .ts { border: 0; background: none; color: var(--accent); font-size: 12px; text-align: left; padding: 2px 0; cursor: pointer; align-self: start; }
.recseg .who { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.recseg p { margin: 0; font: 16px/1.55 var(--serif); color: var(--ink); }
.recside { flex: 1 1 320px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.recpad { padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.recpad p, .recpad ul { margin: 0; }
.recpad ul { padding-left: 18px; }
.recpad h4 { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.recspk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: var(--rule-hair) solid var(--line-2); }
.recspk:first-child { border-top: 0; }
.recspk > span:first-child { flex: 1; color: var(--ink); }
.recspk small { display: block; color: var(--faint); font-size: 12px; width: 100%; }
.recspk.sug { background: color-mix(in oklch, var(--warn-soft) 60%, transparent); border-radius: 8px; padding: 8px 10px; border-top: 0; }
.recspkacts { display: flex; gap: 6px; }
@media (max-width: 760px) {
  .recrow { grid-template-columns: 30px minmax(0, 1fr); }
  .recrow > :nth-child(3), .recrow > :nth-child(4) { display: none; }
  .recrow > .recstate { grid-column: 2; }
  .recrow.rechead { display: none; }
  .recengines { flex-direction: column; }
  .recside { max-width: none; }
}
/* D2 (12 Oct): people a call names, on the recording page */
.recnamed { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.recnamed h3 { margin: 0; font-size: 14px; }
.recnamed > small { color: var(--faint); font-size: 12px; }
.recnm { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: var(--rule-hair) solid var(--line); }
.recnm small { display: block; color: var(--faint); font-size: 12px; margin-top: 2px; }
.recnm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.recnm-acts small { display: inline; margin: 0; }

/* Career on profiles (migration 033) */
.career .cgroup { padding: 10px 14px; border-top: var(--rule-hair) solid var(--line); }
.career > header + .cgroup, .career .csub + .cgroup { border-top: 0; }
.career .corg { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.career .crole { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 3px 0; }
.career .crole + .crole { border-top: 1px dashed var(--line); padding-top: 6px; margin-top: 3px; }
.career .ct { font-size: 13px; }
.career .cd { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.career .cedit { font-size: 12px; font-weight: 500; color: var(--accent); }
.career .cmore { grid-column: 1 / -1; font-size: 12.5px; }
.career .cmore summary { cursor: pointer; color: var(--accent); font-size: 12px; width: max-content; }
.career .cmore p { margin: 4px 0 2px; color: var(--muted); white-space: pre-line; }
.career .csub { margin: 0; padding: 10px 14px 2px; font: 600 12px var(--sans); color: var(--faint); border-top: var(--rule-hair) solid var(--line); }
.careerform { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.careerform label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.careerform .search, .careerform textarea { width: 100%; }
.careerform .crow2 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.careerform .cnow { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; white-space: nowrap; }
.careerform footer { display: flex; gap: 8px; align-items: center; }
.alumni-h { margin: 16px 0 8px; }
@media (max-width: 520px) { .careerform .crow2 { grid-template-columns: 1fr 1fr; } }