:root {
  --plum: #250e22;
  --plum-deep: #17131c;
  --teal: #029096;
  --teal-bright: #06b7bf;
  --sage-light: #648b68;
  --pink: rgb(254, 40, 105);
  --ink: #0d0d12;
  --paper: #ffffff;
  --paper-warm: #f6f1ee;
  --rule: #0f0f181a;
  --rule-strong: #0f0f1833;
  --muted: #6a606e;
  /* --- Added by design-system foundation --- */
  /* Fonts */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'Fragment Mono', monospace;
  /* Type scale (clean ladder; off-scale strays migrate in a later plan) */
  --text-eyebrow: 10px;
  --text-xs: 11px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-lg: 20px;
  --text-xl: 22px;
  --text-2xl: 38px;
  --text-display: 44px;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --tracking-display: -0.01em;
  --tracking-tight: -0.02em;
  --tracking-eyebrow: 0.08em;
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 22px;
  --space-8: 26px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  /* Layout padding (body-wrap edges; off the linear scale on purpose) */
  --space-pad-h: 56px;
  --space-pad-tall: 80px;
  /* Radius */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-card: 14px;
  --radius-pill: 999px;
  /* Shadow */
  --shadow-card: 0 1px 0 rgba(15,15,24,0.04);
  --shadow-pop: 0 18px 50px rgba(37,14,34,0.20);
  --shadow-modal: 0 20px 60px rgba(37,14,34,0.08);
  /* Layout */
  --rail-width: 340px;
  /* Color additions (value-preserving; collapse of near-duplicate greys/reds is a later plan) */
  --amber: #b45309;
  --text-body: #2c2533;
  --text-strong: #1c1a22;
  --plum-hover: #3a1a36;
  /* --- Plan B additions: brand signature palette --- */
  --yellow: #ffda03;
  --cyan: #0bdfe8;
  --mint: #c0f1c5;
  --dark-plum: #2D0A24;
  --danger: #7a1f1f;
  --danger-bg: rgba(180,40,40,0.06);
  --text-strong-dark: #2a2230;
  /* --- Plan B additions: type --- */
  --text-hero: clamp(38px, 5vw, 64px);
  --text-hero-compact: clamp(32px, 4vw, 52px);
  /* --- Plan B additions: radius --- */
  --radius-card-lg: 16px;
  /* --- Plan B additions: shadow --- */
  --shadow-soft: 0 24px 60px -28px rgba(37,14,34,0.45);
  --shadow-focus-teal: 0 0 0 3px rgba(2,144,150,0.10);
  --shadow-yellow-glow: 0 30px 60px -20px rgba(255,218,3,0.35);
  /* --- Plan B additions: motion --- */
  --easing-rise: cubic-bezier(.2,.7,.3,1);
  --duration-rise: .18s;
  --duration-reveal: .6s;
  --ring-spin: 48s linear infinite;
  /* --- Plan B additions: named tints (collapse the 36 hand-expanded rgba() literals) --- */
  --teal-tint-7: rgba(2,144,150,0.07);
  --teal-tint-10: rgba(2,144,150,0.10);
  --teal-tint-14: rgba(2,144,150,0.14);
  --teal-tint-20: rgba(2,144,150,0.20);
  --teal-tint-25: rgba(2,144,150,0.25);
  --teal-tint-30: rgba(2,144,150,0.30);
  --pink-tint-7: rgba(254,40,105,0.07);
  --pink-tint-10: rgba(254,40,105,0.10);
  --pink-tint-20: rgba(254,40,105,0.20);
  --pink-tint-25: rgba(254,40,105,0.25);
  --sage-tint-8: rgba(100,139,104,0.08);
  --sage-tint-30: rgba(100,139,104,0.30);
  --amber-tint-7: rgba(180,83,9,0.07);
  --amber-tint-25: rgba(180,83,9,0.25);
  --amber-tint-28: rgba(180,83,9,0.28);
  --cyan-tint-7: rgba(11,223,232,0.07);
  --cyan-tint-30: rgba(11,223,232,0.30);
  --yellow-tint-10: rgba(255,218,3,0.10);
  --yellow-tint-18: rgba(255,218,3,0.18);
  --yellow-tint-22: rgba(255,218,3,0.22);
  --yellow-tint-25: rgba(255,218,3,0.25);
  --yellow-tint-35: rgba(255,218,3,0.35);
  --danger-tint-6: rgba(122,31,31,0.06);
  --danger-tint-30: rgba(122,31,31,0.30);
  --paper-overlay-5: rgba(255,255,255,0.05);
  --paper-overlay-7: rgba(255,255,255,0.07);
  --paper-overlay-10: rgba(255,255,255,0.10);
  --paper-overlay-15: rgba(255,255,255,0.15);
  --paper-overlay-20: rgba(255,255,255,0.20);
  --paper-overlay-60: rgba(255,255,255,0.60);
  --plum-shadow-08: rgba(37,14,34,0.08);
  --plum-shadow-20: rgba(37,14,34,0.20);
  /* --- Plan B: misc tokens to eliminate raw hex outside :root --- */
  --hero-gradient-start: #3a1638;
  --off-white: #fdfdfd;
  --mask-solid: #000;
  --text-muted-deep: #3a3340;
  /* --- Polish pass: consistent vertical rhythm tokens --- */
  --space-section: var(--space-10);   /* gap between major sections */
  --space-section-head-below: var(--space-6); /* space under a .section-head */
  --space-cols-gap: var(--space-8);   /* two-column grid gap */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper-warm); color: var(--ink); font-family: var(--font-body); }

/* Landing page */
.landing { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px; }
.landing-card {
  max-width: 480px; width: 100%; text-align: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 18px;
  padding: 64px 48px; box-shadow: var(--shadow-modal);
}
.landing-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--teal); margin-bottom: 16px; }
.landing-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-display); color: var(--plum); margin: 0 0 12px; letter-spacing: -0.01em; line-height: 1.1; }
.landing-sub { font-size: var(--text-base); color: var(--muted); line-height: 1.55; margin: 0 0 32px; }
.btn-google {
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--plum); color: var(--paper);
  border: none; border-radius: var(--radius-md); padding: 14px 24px;
  font: inherit; font-size: var(--text-base); font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: transform 150ms ease;
}
.btn-google:hover { transform: translateY(-1px); }
.btn-google .g-mark { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--sage-light)); display: inline-block; }
.landing-foot { margin-top: 28px; font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }

/* Shell */
.shell { height: 100vh; display: flex; flex-direction: column; background: var(--paper-warm); overflow: hidden; }
.topbar { background: var(--plum); color: var(--paper); height: 56px; display: flex; align-items: center; gap: var(--space-6); padding: 0 20px; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; z-index: 10; }
.brand-wordmark { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--paper); padding-right: 18px; border-right: 1px solid rgba(255,255,255,0.16); }
/* Topbar nav-link — bold full-white, yellow hover, yellow-pill active (Plan B) */
.topbar-nav-link { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--paper); text-decoration: none; padding: 6px 11px; border-radius: 7px; border: 1px solid transparent; transition: color .15s, background .15s, border-color .15s; cursor: pointer; }
.topbar-nav-link:hover { color: var(--yellow); background: var(--paper-overlay-10); border-color: var(--yellow-tint-35); }
.topbar-nav-link--active { color: var(--plum); background: var(--yellow); border-color: var(--yellow); }
.dropdown-wrap { position: relative; }
.dropdown-btn { background: rgba(255,255,255,0.07); color: var(--paper); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-sm); padding: 7px 14px 7px 12px; font: inherit; font-weight: 500; font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.dropdown-btn::after { content: '▾'; font-size: var(--text-eyebrow); opacity: 0.7; margin-left: 4px; }
.dropdown-btn .scope { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; opacity: 0.55; display: block; line-height: 1; margin-bottom: 2px; }
.dropdown-menu { position: absolute; top: 44px; left: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); width: 280px; padding: 6px; z-index: 20; display: none; }
.dropdown-wrap.open .dropdown-menu { display: block; }
.menu-item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: 6px; cursor: pointer; color: var(--plum); text-decoration: none; }
.menu-item:hover { background: var(--paper-warm); }
.menu-item.active { background: rgba(2,144,150,0.07); }
.menu-item.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.menu-item .icon { width: 24px; height: 24px; border-radius: 50%; background: var(--plum); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); }
.menu-item.active .icon { background: var(--teal); }
.menu-item .title { font-size: var(--text-sm); font-weight: 500; }
.menu-item .desc { font-size: var(--text-xs); color: var(--muted); }
.menu-sep { border-top: 1px solid var(--rule); margin: 6px 4px; }
.menu-foot { padding: 8px 12px; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.breadcrumb { font-family: var(--font-display); font-style: italic; font-size: var(--text-sm); color: var(--paper); flex: 1; display: flex; align-items: center; gap: var(--space-3); }
.breadcrumb .sep { opacity: 0.4; }
.crumb-link { color: rgba(255,255,255,0.78); text-decoration: none; }
.crumb-link:hover { color: var(--yellow); }

.user-chip { display: inline-flex; align-items: center; gap: var(--space-3); padding: 4px 10px 4px 4px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-pill); color: var(--paper); text-decoration: none; font-size: var(--text-xs); }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--sage-light)); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; }

/* Body row */
.row { flex: 1; display: flex; min-height: 0; }
.canvas { flex: 1; padding: 32px 40px; overflow: auto; }
.rail { width: var(--rail-width); background: var(--paper-warm); border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; }

/* Chat rail */
.rail-head { padding: 14px 18px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.rail-head-meta { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.rail-head .who { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--plum); }
.rail-head .status { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: 5px; }
.rail-head .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); display: inline-block; }
.rail-head .scope-tag { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--teal); background: var(--teal-tint-10); padding: 3px 8px; border-radius: var(--radius-pill); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-head .scope-tag--empty { color: var(--muted); background: var(--paper-warm); }
.rail-new-btn { background: none; border: 1px solid var(--rule-strong); color: var(--teal); padding: 4px 10px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; cursor: pointer; flex-shrink: 0; }
.rail-new-btn:hover { background: rgba(2,144,150,0.07); color: var(--teal-bright); border-color: var(--teal); }

.stream { flex: 1; min-height: 0; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); overflow-y: auto; }
/* Rail context: the chat-rail is narrower than the modal chats. Loosen the
   user-bubble max-width and tighten paragraph spacing so messages don't feel
   cramped. The canonical .chat-msg rules live below in the CATALOG block. */
.stream .chat-msg--user { max-width: 90%; padding: var(--space-3) var(--space-4); border-radius: 12px 12px 4px 12px; }
.stream .chat-msg--assistant { max-width: 100%; }
.rail-error { background: var(--danger-tint-6); border: 1px solid var(--danger-tint-30); color: var(--danger); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-xs); }
.cursor { display: inline-block; width: 7px; height: 14px; background: var(--teal); animation: cursor-blink 1.2s steps(2, end) infinite; vertical-align: -2px; margin-left: 2px; }
@keyframes cursor-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }

.rail-input-form { padding: 12px 14px; border-top: 1px solid var(--rule); display: flex; align-items: flex-end; gap: var(--space-2); background: var(--paper); }
.rail-input-form input, .rail-input-form textarea { flex: 1; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 10px 12px; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.rail-input-form textarea { resize: none; overflow-y: auto; min-height: 40px; max-height: 240px; line-height: 1.5; }
.send-btn { background: var(--teal); color: var(--paper); border: none; border-radius: var(--radius-md); height: 40px; padding: 0 16px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.05em; cursor: pointer; }
.send-btn:hover { background: var(--teal-bright); }

.brief-body { font-size: var(--text-sm); line-height: 1.65; color: var(--text-body); }
.brief-body h1, .brief-body h2, .brief-body h3 { font-size: var(--text-sm); font-weight: 600; line-height: 1.4; margin: 1em 0 0.25em; }
.brief-body h1:first-child, .brief-body h2:first-child, .brief-body h3:first-child { margin-top: 0; }
.brief-body ul, .brief-body ol { margin: 0 0 0.75em; padding-left: 1.25em; }
.brief-body li { margin-bottom: 0.2em; }
.brief-body p { margin: 0 0 0.5em; }
.brief-empty { color: var(--muted); font-size: var(--text-sm); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

/* Layout primitives — body-wrap canonicalises the hero→content padding. */
.body-wrap { padding: var(--space-10) var(--space-pad-h) var(--space-pad-h); }
.body-wrap--narrow { max-width: 780px; }
.body-wrap--tall { padding-bottom: var(--space-pad-tall); }

/* Standalone .mark — list-row scopes its own; these are for cards / inline marks. */
.mark { width: 36px; height: 36px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; color: var(--paper); flex-shrink: 0; letter-spacing: 0.04em; }
.mark--t { background: var(--teal); }
.mark--p { background: var(--plum); }
.mark--m { background: var(--pink); }
.mark--a { background: var(--amber); }
.mark--y { background: var(--yellow); color: var(--plum); }
.mark--md { width: 42px; height: 42px; border-radius: 13px; }
.mark--lg { width: 48px; height: 48px; border-radius: var(--radius-card); }

/* Capability/principle 3-up grid */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

/* Card content primitives — display title + summary + tag row. */
.card-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--plum); margin: 0 0 6px; }
.card-summary { font-size: var(--text-sm); line-height: 1.55; color: var(--muted); }
.card-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag-row--top { margin-top: var(--space-5); }
.tag-row--bottom { margin-bottom: var(--space-3); }
.roster-cta { margin-top: var(--space-5); }

/* Vertical stack for list-row groups and search results */
.col-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.col-stack--top { margin-top: var(--space-4); }

/* Bare list-row — used inside cards (e.g. capability-summary row) where the card itself owns the border. */
.list-row--bare { padding: 0; border: 0; background: transparent; }
.list-row--bare:hover { transform: none; }

/* Teal link-badge (issue/principle cross-refs) */
.badge--link-teal { color: var(--teal); border-color: var(--teal-tint-25); background: var(--teal-tint-7); }
.badge--link-teal:hover { background: var(--teal-tint-10); }

/* Studio context tag (e.g. "personal" / "wealth_management") */
.tag-context { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Bug-summary card on personal — a card whose contents are a horizontal flex row. */
.card--row { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-7); text-decoration: none; color: inherit; }
.card--row .body { flex: 1; }
.card--row .arrow { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--teal); }
.card-overline { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* Evidence disclosure (Bug Hunt finding cards) */
.evidence { margin-top: var(--space-4); }
.evidence summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); cursor: pointer; letter-spacing: 0.04em; }
.evidence-block { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-body); line-height: 1.5; }

/* Search input with icon (wm-selector) */
.search-input-wrap { position: relative; margin-bottom: var(--space-3); }
.search-input-wrap .icon { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--font-mono); font-size: var(--text-lg); pointer-events: none; }
.search-input { width: 100%; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-card-lg); padding: 18px 22px 18px var(--space-pad-h); font-size: var(--text-lg); font-family: var(--font-body); color: var(--ink); box-shadow: var(--shadow-card); transition: border-color var(--duration-rise), box-shadow var(--duration-rise); }
.search-input:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }

/* Principle-detail version-stack pieces */
.version-stack { display: flex; flex-direction: column; gap: var(--space-7); max-width: 820px; }
.card-eyebrow { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.card-eyebrow .label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.card-eyebrow .meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); margin-left: auto; letter-spacing: 0.04em; }
.card-version-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-xl); color: var(--plum); margin: 0 0 var(--space-7); line-height: 1.2; letter-spacing: -0.01em; }
.card-section { margin-bottom: var(--space-7); }
.card-actions { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--rule); }

/* Finding card pieces (Bug Hunt) */
.finding-card { padding: var(--space-6) var(--space-7); }
.finding-title { font-size: var(--text-sm); font-weight: 600; color: var(--plum); margin: 0 0 var(--space-1); line-height: 1.4; }
.finding-summary { margin: 0 0 var(--space-5); }
.findings--gap-md { gap: var(--space-4); }
.findings--reset { list-style: none; margin: 0; padding: 0; }

/* Hero filed/noted/suppressed colour accents */
.hero-counts .filed { color: var(--teal-bright); }
.hero-counts .noted { color: var(--cyan); }
.hero-counts .suppressed { color: var(--paper-overlay-60); }

.empty-state { display: flex; flex-direction: column; align-items: center; padding: 22px 12px 8px; text-align: center; }
.empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-warm); border: 1px dashed var(--rule-strong); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.empty-copy { font-size: var(--text-sm); color: var(--text-muted-deep); line-height: 1.5; max-width: 280px; margin-bottom: 14px; }
.empty-copy strong { color: var(--plum); }
.empty-line { color: var(--muted); font-size: var(--text-sm); padding: 12px 0; }

/* WM household article */
.hh-article { padding: 40px 56px 60px; max-width: 760px; }
.article-meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; }
.article-meta .dot { color: var(--muted); margin: 0 8px; }
.propose-btn-inline { margin-bottom: 28px; }
.hh-markdown h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-display); color: var(--plum); margin: 0 0 8px; letter-spacing: -0.02em; }
.hh-markdown h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-xl); color: var(--plum); margin: 32px 0 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.hh-markdown h3 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: var(--text-sm); color: var(--plum); margin: 20px 0 8px; }
.hh-markdown h4 { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: var(--text-sm); color: var(--plum); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.hh-markdown p { font-size: var(--text-sm); line-height: 1.7; color: var(--text-body); margin: 0 0 14px; }
.hh-markdown ul, .hh-markdown ol { font-size: var(--text-sm); line-height: 1.7; color: var(--text-body); padding-left: 22px; margin: 0 0 16px; }
.hh-markdown li { margin: 2px 0; }
.hh-markdown li > p { margin: 0; }
.hh-markdown strong { font-weight: 600; color: var(--text-strong); }
.hh-markdown em { font-style: italic; }
.hh-markdown a { color: var(--teal); text-decoration: underline; text-decoration-color: rgba(2,144,150,0.35); text-underline-offset: 2px; }
.hh-markdown a:hover { color: var(--teal-bright); text-decoration-color: var(--teal-bright); }
.hh-markdown code { font-family: var(--font-mono); font-size: var(--text-xs); background: rgba(2,144,150,0.07); padding: 1px 5px; border-radius: 4px; color: var(--text-strong); }
.hh-markdown pre { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 14px 16px; overflow-x: auto; margin: 14px 0; }
.hh-markdown pre code { background: none; padding: 0; font-size: var(--text-xs); line-height: 1.55; }
.hh-markdown blockquote { border-left: 3px solid var(--teal); background: rgba(2,144,150,0.05); padding: 12px 16px; margin: 14px 0; font-size: var(--text-sm); color: var(--text-body); line-height: 1.6; font-style: italic; }
.hh-markdown blockquote p:last-child { margin-bottom: 0; }
.hh-markdown hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
.hh-markdown table { border-collapse: collapse; width: 100%; margin: 16px 0; font-size: var(--text-sm); }
.hh-markdown th, .hh-markdown td { padding: 8px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.hh-markdown th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* Bug Hunt */
.bug-hunt { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: 22px 24px; margin-bottom: 22px; box-shadow: var(--shadow-card); }
.bug-hunt header { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: 16px; }
.bug-hunt header h2 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-lg); color: var(--plum); margin: 0; }
.bug-hunt header .meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); letter-spacing: 0.04em; margin-left: auto; }
.findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.finding { background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 14px 16px; }
.finding--suppressed_by_state { opacity: 0.55; }
.finding .badges { display: flex; gap: 6px; margin-bottom: 8px; }
/* Badge — full status + severity set (Plan B; fixes undefined-variant audit bugs) */
.badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--rule); color: var(--muted); background: var(--paper); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; display: inline-block; }

/* Severity */
.badge--sev-high { color: var(--pink); border-color: var(--pink-tint-25); background: var(--pink-tint-7); }
.badge--sev-medium { color: var(--amber); border-color: var(--amber-tint-25); background: var(--amber-tint-7); }
.badge--sev-low { color: var(--sage-light); border-color: var(--sage-tint-30); background: var(--sage-tint-8); }

/* Status — bug-hunt + capability roster + principles */
.badge--status-filed { color: var(--teal); border-color: var(--teal-tint-25); background: var(--teal-tint-7); }
.badge--status-noted { color: var(--cyan); border-color: var(--cyan-tint-30); background: var(--cyan-tint-7); }
.badge--status-duplicate { color: var(--pink); border-color: var(--pink-tint-25); background: var(--pink-tint-7); }
.badge--status-possible-duplicate { color: var(--amber); border-color: var(--amber-tint-25); background: var(--amber-tint-7); }
.badge--status-skipped { color: var(--muted); border-color: var(--rule-strong); background: var(--paper); }
.badge--status-skipped_low_conf { color: var(--muted); border-color: var(--rule-strong); background: var(--paper); }
.badge--status-skipped_low_severity { color: var(--muted); border-color: var(--rule-strong); background: var(--paper); }
.badge--status-error { color: var(--danger); border-color: var(--danger-tint-30); background: var(--danger-tint-6); }
.badge--status-suppressed_by_state { color: var(--muted); border-color: var(--rule-strong); background: var(--paper-warm); }
.badge--status-unknown { color: var(--muted); border-color: var(--rule-strong); background: var(--paper); }

/* Status — principles (the audit's headline bug fix) */
.badge--status-draft { color: var(--amber); border-color: var(--amber-tint-28); background: var(--amber-tint-7); }
.badge--status-published { color: var(--sage-light); border-color: var(--sage-tint-30); background: var(--sage-tint-8); }

/* Status — capability roster */
.badge--status-proposed { color: var(--muted); border-color: var(--rule-strong); background: var(--paper-warm); }
.badge--status-building { color: var(--amber); border-color: var(--amber-tint-25); background: var(--amber-tint-7); }
.badge--status-live { color: var(--sage-light); border-color: var(--sage-tint-30); background: var(--sage-tint-8); }
.badge--status-retired { color: var(--muted); border-color: var(--rule-strong); background: var(--paper-warm); }

/* Status — not-yet-built / placeholder (e.g. Marketing connectors) */
.badge--soon { color: var(--muted); border-color: var(--rule-strong); background: var(--paper-warm); }
.finding .title { font-size: var(--text-sm); font-weight: 600; color: var(--plum); margin: 0 0 4px; }
.finding .summary { font-size: var(--text-sm); color: var(--text-body); line-height: 1.55; margin: 0 0 10px; }
.finding .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.finding .actions button, .finding .actions a.link {
  font: inherit; font-size: var(--text-xs); font-weight: 500;
  padding: 5px 12px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--plum);
  text-decoration: none; display: inline-block;
}
.finding .actions button:hover, .finding .actions a.link:hover { border-color: var(--teal); color: var(--teal); }
.finding .evidence { margin-top: 10px; }
.finding .evidence summary { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); cursor: pointer; letter-spacing: 0.04em; }
.finding .evidence pre { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: var(--text-xs); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; margin: 6px 0 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-body); line-height: 1.5; }

/* Capability Creator */
.cap-form-wrap, .cap-review-wrap { max-width: 720px; }
.cap-form label { display: block; margin-bottom: var(--space-7); }
.cap-form label .card-overline { display: block; margin-bottom: var(--space-2); }
.form-label { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: 6px; }
.form-help { display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.cap-form input[type=text], .cap-form input[type=datetime-local], .cap-form input[type=date], .cap-form textarea, .cap-form select {
  width: 100%; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  transition: border-color var(--duration-rise), box-shadow var(--duration-rise);
}
.cap-form input[type=text]:focus, .cap-form input[type=datetime-local]:focus, .cap-form input[type=date]:focus, .cap-form textarea:focus, .cap-form select:focus {
  outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal);
}
@media (prefers-reduced-motion: reduce) {
  .cap-form input[type=text], .cap-form input[type=datetime-local], .cap-form input[type=date], .cap-form textarea, .cap-form select { transition: none; }
}
.cap-form textarea { resize: vertical; }
.cap-form textarea.font-mono { font-family: 'Fragment Mono', ui-monospace, monospace; font-size: var(--text-sm); line-height: 1.6; }
.radio-group { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 22px; }
.radio-group legend { padding: 0 4px; }
.radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; font-size: var(--text-sm); }

.form-error { background: rgba(254,40,105,0.10); color: var(--pink); border: 1px solid rgba(254,40,105,0.20); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 20px; }
.form-actions { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.cap-meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); margin-bottom: 22px; letter-spacing: 0.04em; }
.prompt-pre { background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 14px 16px; font-family: 'Fragment Mono', ui-monospace, monospace; font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); white-space: pre-wrap; overflow-x: auto; }

/* ============================================================ */
/* CATALOG (Plan B) — see DESIGN_SYSTEM.md and /styleguide       */
/* ============================================================ */

/* Buttons — one base class + variants. Replaces the 10 ad-hoc -btn classes. */
.btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 16px; border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.btn--primary { background: var(--plum); color: var(--paper); border-color: var(--plum); border-radius: var(--radius-md); padding: 12px 22px; }
.btn--primary:hover { background: var(--plum-hover); border-color: var(--plum-hover); }

.btn--confirm { background: var(--teal); color: var(--paper); border-color: var(--teal); border-radius: var(--radius-md); padding: 12px 22px; }
.btn--confirm:hover { background: var(--teal-bright); border-color: var(--teal-bright); }

.btn--accent { background: var(--yellow); color: var(--plum); border-color: var(--yellow); }
.btn--accent:hover { background: transparent; color: var(--yellow); }

.btn--danger { background: var(--paper); color: var(--danger); border: 1px solid var(--danger-tint-30); }
.btn--danger:hover { background: var(--danger-tint-6); border-color: var(--danger); }

.btn--ghost { background: var(--paper); color: var(--plum); border-color: var(--rule-strong); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn--nav { background: var(--paper); color: var(--plum); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); padding: 8px 14px; }
.btn--nav:hover { border-color: var(--teal); color: var(--teal); }

.btn--sm { padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--text-eyebrow); font-weight: 600; }

/* Cards — one base + modifiers. Replaces hero-card / secondary-card / bug-hunt / cap-chat / landing-card. */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-card); padding: var(--space-7) var(--space-7); box-shadow: var(--shadow-card); position: relative; }
.card--lg { border-radius: var(--radius-card-lg); padding: var(--space-8) 28px; }
.card--lift { transition: transform var(--duration-rise) var(--easing-rise), box-shadow var(--duration-rise) var(--easing-rise); }
.card--lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
@media (prefers-reduced-motion: reduce) {
  .card--lift { transition: none; }
  .card--lift:hover { transform: none; }
}

.card--accent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-top-left-radius: var(--radius-card); border-bottom-left-radius: var(--radius-card); }
.card--lg.card--accent::before { border-top-left-radius: var(--radius-card-lg); border-bottom-left-radius: var(--radius-card-lg); }
.card--accent-y::before { background: var(--yellow); }
.card--accent-t::before { background: var(--teal); }
.card--accent-p::before { background: var(--pink); }
.card--accent-amber::before { background: var(--amber); }
.card--accent-sage::before { background: var(--sage-light); }

/* List rows — one component. Replaces .proposal-row / .hh-card / .capability-card. */
.list-row { display: flex; gap: var(--space-5); padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius-card); background: var(--paper); align-items: center; flex-wrap: wrap; transition: border-color var(--duration-rise), transform var(--duration-rise); text-decoration: none; color: inherit; }
.list-row:hover { border-color: var(--teal); transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .list-row { transition: none; }
  .list-row:hover { transform: none; }
}

.list-row .mark { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; color: var(--paper); flex-shrink: 0; letter-spacing: 0.04em; }
.list-row .mark--lg { width: 42px; height: 42px; border-radius: 50%; font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); }
.list-row .mark--t { background: var(--teal); }
.list-row .mark--p { background: var(--plum); }
.list-row .mark--m { background: var(--pink); }
.list-row .mark--a { background: var(--amber); }
.list-row .mark--y { background: var(--yellow); color: var(--plum); }
.list-row .mark--chtr { background: var(--teal); }
.list-row .mark--doc { background: var(--plum); }
.list-row .body { flex: 1; min-width: 0; }
.list-row .title { font-size: var(--text-sm); color: var(--plum); font-weight: 500; line-height: 1.3; }
.list-row .title strong { font-family: var(--font-mono); color: var(--teal); font-weight: 600; margin-right: var(--space-2); letter-spacing: 0.02em; }
.list-row .meta { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); margin-top: 4px; letter-spacing: 0.04em; display: flex; gap: var(--space-3); align-items: center; }
.list-row .meta strong { color: var(--teal); font-weight: 600; }
.list-row .arrow { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); }
.list-row:hover .arrow { color: var(--teal); }

/* Page header (editorial pages — no hero) */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-7); margin-bottom: var(--space-9); padding-bottom: var(--space-7); border-bottom: 1px solid var(--rule); }
.page-header .lead { max-width: 640px; }
.page-header .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); }
.page-header .eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.page-header h1 { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-2xl); color: var(--plum); margin: 0; letter-spacing: -0.01em; line-height: 1.05; }
.page-header h1 .id { font-family: var(--font-mono); font-style: normal; font-weight: 600; color: var(--teal); margin-right: var(--space-3); letter-spacing: 0.02em; }
.page-header .sub { font-size: var(--text-base); color: var(--text-body); margin: var(--space-4) 0 0; line-height: 1.55; max-width: 640px; }

/* Hero band — landing pages */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% -10%, var(--hero-gradient-start) 0%, var(--plum) 45%, var(--plum-deep) 100%); color: var(--paper); padding: 58px 56px 50px; }
.hero--compact { padding: 56px 56px 40px; }
.hero-inner { position: relative; z-index: 3; max-width: 640px; }
.hero--compact .hero-inner { max-width: 560px; }
.hero .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--yellow); margin-bottom: 14px; }
.hero .eyebrow .sep { color: var(--paper-overlay-20); margin: 0 8px; }
.hero h1 { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: var(--text-hero); line-height: 1.02; letter-spacing: -0.015em; margin: 0; }
.hero--compact h1 { font-size: var(--text-hero-compact); line-height: 1.05; }
.hero h1 em { font-style: italic; color: var(--yellow); font-weight: 500; }
.hero .lede { font-size: var(--text-lg); line-height: 1.55; color: rgba(255,255,255,0.78); margin: 16px 0 0; max-width: 520px; }
.hero--compact .lede { font-size: var(--text-base); margin-top: 12px; max-width: 460px; }
.hero .lede strong { color: var(--paper); font-weight: 600; }
.hero-cta-row { margin-top: var(--space-8); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.hero-counts { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--paper-overlay-60); padding-left: var(--space-6); border-left: 1px solid var(--paper-overlay-15); }
.hero-counts strong { color: var(--paper); font-weight: 500; }

/* Section head (between-section divider with kicker + rule) */
.section-head { display: flex; align-items: center; gap: var(--space-4); margin: 0 0 var(--space-section-head-below); }
.section-head:not(:first-child) { margin-top: var(--space-section); }
.section-head .kicker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: var(--space-2); }
.section-head .kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.section-head--live .kicker::before { background: var(--sage-light); }
.section-head--inflight .kicker::before { background: var(--amber); }
.section-head--filed .kicker::before { background: var(--teal); }
.section-head--noted .kicker::before { background: var(--cyan); }
.section-head--suppressed .kicker::before { background: var(--muted); }
.section-head--charter .kicker::before { background: var(--yellow); }
.section-head--decisions .kicker::before { background: var(--teal); }
.section-head--client .kicker::before { background: var(--pink); }
.section-head--ai .kicker::before { background: var(--cyan); }
.section-head .count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.section-head .line { flex: 1; height: 1px; background: var(--rule); }

/* Motifs — per-page signature elements rendered into .hero */
.motif { position: absolute; pointer-events: none; }

/* Spinning ring (Personal) */
.m-ring { top: -90px; right: 60px; width: 360px; height: 360px; border-radius: 50%;
  background: conic-gradient(from -20deg, var(--plum) 0 14%, var(--yellow) 14% 36%, var(--pink) 36% 54%, var(--cyan) 54% 74%, var(--sage-light) 74% 92%, var(--plum) 92% 100%);
  -webkit-mask: radial-gradient(transparent 58%, var(--mask-solid) 59%); mask: radial-gradient(transparent 58%, var(--mask-solid) 59%);
  opacity: 0.92; animation: m-ring-spin var(--ring-spin); }
.m-yellow-dot { top: 120px; right: 300px; width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); }
.m-ghost { border-radius: 50%; border: 1.5px solid var(--paper-overlay-15); }
.m-ghost--a { top: 200px; right: -40px; width: 200px; height: 200px; }
.m-ghost--b { top: -30px; right: 420px; width: 110px; height: 110px; border-color: var(--cyan-tint-30); }
@keyframes m-ring-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .m-ring { animation: none; }
}

/* Petal tile (Capabilities) — quarter-circle cells, radius = cell size */
.m-petals { position: absolute; top: 0; right: 0; bottom: 0; --cs: 64px;
  display: grid; grid-template-columns: repeat(8, var(--cs)); grid-template-rows: repeat(4, var(--cs));
  justify-content: end; align-content: start; }
.m-petals.m-petals--compact { --cs: 48px; grid-template-columns: repeat(6, var(--cs)); grid-template-rows: repeat(4, var(--cs)); align-content: center; padding-right: 40px; }
.m-petals > i { display: block; width: var(--cs); height: var(--cs); background: var(--m-c, transparent); }
.m-petals .p-tl { -webkit-mask: radial-gradient(circle var(--cs) at 0 0, var(--mask-solid) 99%, transparent 100%); mask: radial-gradient(circle var(--cs) at 0 0, var(--mask-solid) 99%, transparent 100%); }
.m-petals .p-tr { -webkit-mask: radial-gradient(circle var(--cs) at 100% 0, var(--mask-solid) 99%, transparent 100%); mask: radial-gradient(circle var(--cs) at 100% 0, var(--mask-solid) 99%, transparent 100%); }
.m-petals .p-bl { -webkit-mask: radial-gradient(circle var(--cs) at 0 100%, var(--mask-solid) 99%, transparent 100%); mask: radial-gradient(circle var(--cs) at 0 100%, var(--mask-solid) 99%, transparent 100%); }
.m-petals .p-br { -webkit-mask: radial-gradient(circle var(--cs) at 100% 100%, var(--mask-solid) 99%, transparent 100%); mask: radial-gradient(circle var(--cs) at 100% 100%, var(--mask-solid) 99%, transparent 100%); }
.m-petals .p-yel { --m-c: var(--yellow); }
.m-petals .p-pnk { --m-c: var(--pink); }
.m-petals .p-plm { --m-c: var(--dark-plum); }
.m-petals .p-cyn { --m-c: var(--cyan); }
.m-petals .p-mnt { --m-c: var(--mint); }
.m-petals .p-wht { --m-c: var(--off-white); }
.m-petals-fade { position: absolute; inset: 0; background: linear-gradient(90deg, var(--plum) 0%, var(--plum) 36%, rgba(37,14,34,0) 60%); pointer-events: none; z-index: 2; }

/* Overlapping circles (Principles) */
.m-circles { position: absolute; top: 50%; right: 80px; transform: translateY(-50%); display: flex; z-index: 1; }
.m-circles.m-circles--compact { right: 90px; }
.m-circles span { width: 170px; height: 170px; border-radius: 50%; mix-blend-mode: screen; }
.m-circles.m-circles--compact span { width: 110px; height: 110px; }
.m-circles .c-mnt { background: rgba(192,241,197,0.85); }
.m-circles .c-yel { background: rgba(255,218,3,0.80); margin-left: -76px; }
.m-circles .c-pnk { background: rgba(254,40,105,0.78); margin-left: -76px; }
.m-circles.m-circles--compact .c-yel { background: rgba(255,218,3,0.72); margin-left: -48px; }
.m-circles.m-circles--compact .c-pnk { background: rgba(254,40,105,0.72); margin-left: -48px; }
.m-circles.m-circles--compact .c-mnt { background: rgba(192,241,197,0.78); }
.m-circles-bg { position: absolute; top: -40px; right: -60px; width: 540px; height: 380px; background: radial-gradient(circle at 75% 50%, var(--yellow-tint-10) 0%, transparent 60%); pointer-events: none; z-index: 1; }

/* Yellow circle + plum half (WM) */
.m-wm-half { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 130px; height: 240px; background: var(--dark-plum); border-radius: 0 120px 120px 0; z-index: 2; }
.m-wm-circle { position: absolute; top: 50%; right: 110px; transform: translateY(-50%); width: 220px; height: 220px; border-radius: 50%; background: var(--yellow); z-index: 1; box-shadow: var(--shadow-yellow-glow); }

/* Dot grid with hits (Bugs) */
.m-bugs { position: absolute; top: 50%; right: 70px; transform: translateY(-50%); width: 360px; height: 240px; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px; z-index: 1; }
.m-bugs > i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--paper-overlay-10); }
.m-bugs > i.hit-pnk { background: var(--pink); box-shadow: 0 0 0 4px var(--pink-tint-20); }
.m-bugs > i.hit-yel { background: var(--yellow); box-shadow: 0 0 0 4px var(--yellow-tint-22); }
.m-bugs > i.hit-cyn { background: var(--cyan); box-shadow: 0 0 0 4px rgba(11,223,232,0.22); }
.m-bugs > i.glow { background: rgba(255,218,3,0.30); }
.m-bugs-halo { position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 540px; height: 380px; background: radial-gradient(circle at 60% 50%, var(--pink-tint-10) 0%, transparent 55%); pointer-events: none; z-index: 0; }

/* Chat — canonical surface, shared across /capabilities/request, /principle/new,
   and the chat-rail (Ask Sven on Personal + WM). All three renderers emit the
   same .chat-msg / .chat-body / .chat-tool DOM so this one stylesheet drives
   the look everywhere.

   Rich-content rules below apply to .chat-msg--assistant descendants so the
   markdown that flows in (headings, lists, blockquotes, tables, code, hr)
   renders as a structured document instead of a wall of text. */
.chat { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); }
.chat-messages { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-7) var(--space-8); min-height: 320px; max-height: 580px; overflow-y: auto; }
.chat-msg { font-size: var(--text-sm); line-height: 1.6; }
.chat-msg .who-line { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--teal); margin-bottom: var(--space-1); }
.chat-msg--user { align-self: flex-end; background: var(--teal-tint-10); color: var(--text-strong); padding: var(--space-4) var(--space-5); border-radius: 14px 14px 4px 14px; max-width: 70%; }
.chat-msg--user .who-line { color: var(--teal); }
.chat-msg--assistant { color: var(--text-body); max-width: 820px; }
.chat-msg--assistant > .chat-body > :first-child { margin-top: 0; }
.chat-msg--assistant > .chat-body > :last-child { margin-bottom: 0; }
.chat-msg--assistant p { margin: 0 0 var(--space-3); }
.chat-msg--assistant ul, .chat-msg--assistant ol { margin: var(--space-2) 0 var(--space-3) var(--space-6); padding: 0; }
.chat-msg--assistant li { margin-bottom: var(--space-1); }
.chat-msg--assistant li > p { margin: 0; }
.chat-msg--assistant li > ul, .chat-msg--assistant li > ol { margin-top: var(--space-1); margin-bottom: 0; }
.chat-msg--assistant h1, .chat-msg--assistant h2, .chat-msg--assistant h3 { font-family: var(--font-display); font-style: italic; font-weight: 500; color: var(--plum); margin: var(--space-5) 0 var(--space-2); line-height: 1.3; }
.chat-msg--assistant h1 { font-size: var(--text-lg); }
.chat-msg--assistant h2 { font-size: var(--text-base); }
.chat-msg--assistant h3 { font-size: var(--text-sm); }
.chat-msg--assistant h4, .chat-msg--assistant h5, .chat-msg--assistant h6 { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin: var(--space-4) 0 var(--space-1); }
.chat-msg--assistant strong { font-weight: 600; color: var(--text-strong); }
.chat-msg--assistant em { font-style: italic; }
.chat-msg--assistant a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.chat-msg--assistant a:hover { color: var(--teal-bright); }
.chat-msg--assistant code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--teal-tint-7); padding: 1px 5px; border-radius: 4px; color: var(--text-strong); }
.chat-msg--assistant pre { background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); overflow-x: auto; margin: var(--space-3) 0; font-size: var(--text-xs); line-height: 1.5; }
.chat-msg--assistant pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.chat-msg--assistant blockquote { border-left: 3px solid var(--teal); margin: var(--space-3) 0; padding: var(--space-1) var(--space-4); color: var(--text-body); background: var(--teal-tint-7); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.chat-msg--assistant blockquote p:last-child { margin-bottom: 0; }
.chat-msg--assistant hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-5) 0; }
.chat-msg--assistant table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-xs); }
.chat-msg--assistant th, .chat-msg--assistant td { border-bottom: 1px solid var(--rule); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; }
.chat-msg--assistant th { font-family: var(--font-mono); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); background: var(--paper-warm); }
.chat-tool { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted); margin: var(--space-1) 0; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 6px; }
.chat-tool::before { content: '\27A4'; color: var(--teal); font-size: var(--text-eyebrow); }

.chat-composer { display: flex; align-items: stretch; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--rule); background: var(--paper-warm); }
.chat-composer textarea { flex: 1; resize: none; min-height: 56px; max-height: 240px; overflow-y: auto; background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font: inherit; font-size: var(--text-sm); color: var(--ink); line-height: 1.5; }
.chat-composer textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }
.chat-composer button { background: var(--teal); color: var(--paper); border: none; border-radius: var(--radius-md); padding: 0 var(--space-7); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.05em; cursor: pointer; transition: background .15s; }
.chat-composer button:hover { background: var(--teal-bright); }

/* Draft card — inlined in .chat-messages when Sven produces a draft */
.draft-card { background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-6); margin-top: var(--space-3); }
.draft-card .label-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.draft-card .draft-label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); }
.draft-card .draft-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--plum); background: var(--paper); border: 1px solid var(--rule-strong); padding: 2px 8px; border-radius: var(--radius-pill); letter-spacing: 0.04em; }
.draft-card .draft-id--draft { color: var(--amber); border-color: var(--amber-tint-28); }
.draft-card .draft-title { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--plum); margin: 0 0 var(--space-4); line-height: 1.3; }
.draft-card .field { margin-bottom: var(--space-4); }
.draft-card .field:last-of-type { margin-bottom: 0; }
.draft-card .form-label { display: block; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-1); }
.draft-card .field-body { font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); margin: 0; }
.draft-card-actions { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--rule); display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* Glance — four brand-coloured stat numerals; even spacing, generous breathing room */
.glance { display: flex; gap: var(--space-10); margin-top: var(--space-8); flex-wrap: wrap; align-items: flex-end; }
.glance .stat { display: flex; flex-direction: column; gap: var(--space-1); }
.glance .stat .n { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); line-height: 1; }
.glance .stat .l { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--paper-overlay-60); }
.glance .stat .n--y { color: var(--yellow); }
.glance .stat .n--t { color: var(--teal-bright); }
.glance .stat .n--p { color: var(--pink); }

/* Sven mini-ring avatar — static conic-gradient masked donut */
.ring-mini { width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--yellow), var(--pink), var(--cyan), var(--sage-light), var(--yellow));
  -webkit-mask: radial-gradient(transparent 50%, var(--mask-solid) 51%); mask: radial-gradient(transparent 50%, var(--mask-solid) 51%); }

/* Empty state — replaces .empty-state / .brief-empty / .empty-line */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: var(--space-7) var(--space-4) var(--space-2); text-align: center; }
.empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--paper-warm); border: 1px dashed var(--rule-strong); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5); }
.empty-copy { font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; max-width: 280px; margin-bottom: var(--space-5); }
.empty-copy strong { color: var(--plum); }

/* Muted utility class — fixes the audit's undefined-.muted bug in bug-hunt */
.muted { color: var(--muted); }

/* Bug dashboard ("By the numbers" block on /bugs).
   A scoreboard pattern — two cards inside .body-wrap that sit between the
   /bugs hero and the per-status finding lists. Reuses .card / .card--lg /
   .card-title / .card-overline / .section-head; the bug-dash-* classes are
   the new catalog entries for the metrics-table layout itself. */
.bug-dash { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-10); }
.bug-dash-card { display: flex; flex-direction: column; gap: var(--space-6); }
.bug-dash-card--narrow { max-width: 720px; }

.bug-dash-card-head { display: flex; flex-direction: column; gap: var(--space-1); }
.bug-dash-code { font-family: var(--font-mono); font-size: var(--text-eyebrow); background: var(--teal-tint-7); color: var(--teal); padding: 1px 6px; border-radius: var(--radius-sm); text-transform: lowercase; letter-spacing: 0.04em; }

/* Reporters table — true <table>, fluid columns, horizontal scroll on narrow.
   On the desktop case (Studio's primary viewport) the columns are even and
   the data reads as a clean grid. */
.bug-dash-table-wrap { width: 100%; overflow-x: auto; }
.bug-dash-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bug-dash-th { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); text-align: right; vertical-align: bottom; }
.bug-dash-th--label { text-align: left; color: var(--teal); }
.bug-dash-th--num { white-space: nowrap; }
/* Lock numeric columns to equal widths so longer headers don't widen their column. */
.bug-dash-table--reporters { table-layout: fixed; }
.bug-dash-table--reporters .bug-dash-th--label,
.bug-dash-table--reporters .bug-dash-cell--label { width: 24%; }
.bug-dash-table--reporters .bug-dash-th--num,
.bug-dash-table--reporters .bug-dash-cell--num { width: 19%; }
.bug-dash-table--reporters .bug-dash-th--num { white-space: normal; }
.bug-dash-th-sub { display: block; font-size: var(--text-eyebrow); letter-spacing: 0.06em; color: var(--muted); font-weight: 400; margin-top: 2px; text-transform: none; font-family: var(--font-body); }

.bug-dash-row { transition: background var(--duration-rise) var(--easing-rise); }
.bug-dash-row:hover { background: var(--teal-tint-7); }
.bug-dash-cell { padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--rule); vertical-align: middle; }
.bug-dash-cell--label { text-align: left; font-weight: 500; color: var(--text-strong); }
.bug-dash-cell--num { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-lg); color: var(--text-body); white-space: nowrap; }
.bug-dash-reporter { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--plum); }

/* Total row — distinct but quiet: paper-warm wash, plum label, no hover lift. */
.bug-dash-row--total { background: var(--paper-warm); }
.bug-dash-row--total:hover { background: var(--paper-warm); }
.bug-dash-row--total .bug-dash-cell { border-top: 1px solid var(--rule-strong); border-bottom: none; padding-top: var(--space-4); padding-bottom: var(--space-4); }
.bug-dash-row--total .bug-dash-cell--num { color: var(--plum); font-weight: 600; }
.bug-dash-total-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); font-weight: 600; }

/* Over-time windows — three big italic numerals side by side. */
.bug-dash-windows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.bug-dash-window { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) 0; border-top: 1px solid var(--rule); }
.bug-dash-window-num { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-2xl); line-height: 1; color: var(--plum); font-variant-numeric: tabular-nums; }
.bug-dash-window-label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); }

/* Generated-at footnote — small, mono, muted; sits below both cards. */
.bug-dash-footnote { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); margin: 0; padding-left: var(--space-1); }

/* Responsive: below ~720px the reporter table reflows to row-per-record stacked
   cards using the data-col attribute as a per-cell label. */
@media (max-width: 720px) {
  .bug-dash-table, .bug-dash-table tbody, .bug-dash-table tr, .bug-dash-table th, .bug-dash-table td { display: block; width: 100%; }
  .bug-dash-table thead { display: none; }
  .bug-dash-row { border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); background: var(--paper); }
  .bug-dash-row:hover { background: var(--paper); }
  .bug-dash-cell { padding: var(--space-2) 0; border-bottom: none; }
  .bug-dash-cell--label { padding: 0 0 var(--space-3); border-bottom: 1px solid var(--rule); margin-bottom: var(--space-2); text-align: left; }
  .bug-dash-cell--num { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); text-align: right; font-size: var(--text-base); }
  .bug-dash-cell--num::before { content: attr(data-col); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .bug-dash-row--total { background: var(--paper-warm); border-color: var(--rule-strong); }
  .bug-dash-row--total:hover { background: var(--paper-warm); }
  .bug-dash-row--total .bug-dash-cell { border: none; }
  .bug-dash-windows { grid-template-columns: 1fr; gap: 0; }
}

/* ── Prep sheet ─────────────────────────────────────────────────────────── */
.prep-title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--text-xl); color: var(--plum); margin: 0 0 var(--space-3); }
.prep-meta { margin-bottom: var(--space-8); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.prep-meta-item { font-size: var(--text-sm); }
.prep-section { margin-bottom: var(--space-8); }
.prep-agenda { width: 100%; min-height: var(--space-12); font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--text-body); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-4); }
.prep-checklist-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.prep-check-box { display: inline-block; width: var(--space-5); height: var(--space-5); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); flex-shrink: 0; margin-top: 2px; }

@media print {
  .topbar, .rail, .dropdown-wrap, .btn--print, .breadcrumb, .rail-input-form { display: none !important; }
  .canvas, .body-wrap { margin: 0; padding: 0; }
  body { background: var(--paper); }
}

/* ============================================================
   Household profile — The Range redesign (#141)
   ============================================================ */

/* ---------- PROFILE HEADER ---------- */
.hh-head { position: relative; overflow: hidden; border-radius: var(--radius-card-lg);
  background: linear-gradient(135deg, var(--plum) 0%, var(--hero-gradient-start) 70%, var(--dark-plum) 100%);
  color: var(--paper); padding: var(--space-8) var(--space-9) var(--space-7);
  box-shadow: var(--shadow-soft); }
/* Reserve right-side space for next-touch callout at wide widths */
.hh-head .hh-head-inner { max-width: calc(100% - 220px); }
.hh-head .ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; opacity: .22;
  pointer-events: none; }
.hh-head .eyebrow { font-family: var(--font-mono); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--paper-overlay-60); }
.hh-title { font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: var(--text-hero-compact); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin: var(--space-1) 0 var(--space-4); color: var(--paper); }
.hh-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
.hh-chip { display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--paper-overlay-10); border: 1px solid var(--paper-overlay-15);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm); color: var(--paper); white-space: nowrap; }
.hh-chip .dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--mint); flex-shrink: 0; }
.hh-chip .role { color: var(--paper-overlay-60); font-size: var(--text-xs); }

/* next-touch callout floats top-right of the header; collapses below chips on narrow screens */
.next-touch { position: absolute; top: var(--space-8); right: var(--space-9);
  background: var(--paper-overlay-10); border: 1px solid var(--paper-overlay-20);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); min-width: 190px; max-width: 210px;
  backdrop-filter: blur(2px); }
.next-touch .label { font-family: var(--font-mono); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--mint); }
.next-touch .when { font-family: var(--font-display); font-size: var(--text-xl); color: var(--paper);
  margin-top: var(--space-1); line-height: var(--leading-tight); }
.next-touch .meta { font-size: var(--text-xs); color: var(--paper-overlay-60); margin-top: var(--space-1); }
/* On narrow screens reflow next-touch below the chips instead of overlapping */
@media (max-width: 720px) {
  .hh-head .hh-head-inner { max-width: 100%; }
  .next-touch { position: static; margin-top: var(--space-5); max-width: 100%; }
}

/* ---------- QUICK ACTIONS ---------- */
.hh-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-7) 0 var(--space-7); }

/* ---------- THE RANGE ---------- */
.range-wrap { margin: var(--space-9) 0 var(--space-10); }
.range-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-4); }
.peak { position: relative; background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-card); padding: var(--space-4) var(--space-5) var(--space-5);
  /* flex-column lets the .cov chip pin to the bottom regardless of .desc length */
  display: flex; flex-direction: column;
  transition: transform var(--duration-rise) var(--easing-rise),
              border-color var(--duration-rise), box-shadow var(--duration-rise); cursor: default; }
.peak:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--rule-strong); }
.peak .num { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--muted);
  letter-spacing: var(--tracking-eyebrow); }
.peak .name { font-family: var(--font-display); font-size: var(--text-lg); color: var(--plum);
  line-height: var(--leading-tight); margin: var(--space-2) 0 var(--space-1); }
/* desc fills remaining space so .cov always aligns at the same row baseline */
.peak .desc { font-size: var(--text-xs); color: var(--muted); flex: 1; line-height: 1.45; }
/* coverage chip + a left ridge bar that reads the state at a glance */
.peak::before { content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4);
  width: 3px; border-radius: var(--radius-pill); background: var(--rule-strong); }
.peak .cov { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3); align-self: flex-start;
  font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; padding: 3px var(--space-3); border-radius: var(--radius-pill); }
.peak .cov .tick { width: 6px; height: 6px; border-radius: var(--radius-pill); flex-shrink: 0; }
/* states */
.peak.is-active  { background: var(--sage-tint-8); }
.peak.is-active::before  { background: var(--sage-light); }
.peak.is-active  .cov { color: var(--sage-light); background: var(--sage-tint-30); }
.peak.is-active  .cov .tick { background: var(--sage-light); }
.peak.is-present::before { background: var(--teal); }
.peak.is-present .cov { color: var(--teal); background: var(--teal-tint-14); }
.peak.is-present .cov .tick { background: var(--teal); }
.peak.is-gap::before { background: var(--amber); }
.peak.is-gap     .cov { color: var(--amber); background: var(--amber-tint-25); }
.peak.is-gap     .cov .tick { background: var(--amber); }
.peak.is-na::before { background: var(--rule-strong); }
.peak.is-na      { opacity: .62; }
.peak.is-na      .cov { color: var(--muted); background: var(--rule); }
.peak.is-na      .cov .tick { background: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .peak { transition: none; }
  .peak:hover { transform: none; }
}

/* ---------- MEETINGS (two columns) ---------- */
.hh-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-cols-gap); }
@media (max-width: 760px) { .hh-cols { grid-template-columns: 1fr; gap: 0; } }
.meet-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--rule); }
.meet-row:last-child { border-bottom: 0; }
.meet-when { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted);
  width: 80px; flex: none; line-height: 1.4; }
.meet-body { flex: 1; min-width: 0; }
.meet-body .t { font-size: var(--text-sm); color: var(--text-strong); line-height: 1.35; }
.meet-body .m { font-size: var(--text-xs); color: var(--muted); margin-top: var(--space-1); }
.type-pill { font-family: var(--font-mono); font-size: var(--text-eyebrow); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); padding: 3px var(--space-3); border-radius: var(--radius-pill);
  background: var(--teal-tint-10); color: var(--teal); flex-shrink: 0; white-space: nowrap; }

/* linked meeting rows — pointer + hover teal-tint + horizontal edge-to-edge fill */
a.meet-row--link { text-decoration: none; color: inherit; cursor: pointer; display: flex;
  margin: 0 calc(-1 * var(--space-2)); padding-left: var(--space-2); padding-right: var(--space-2);
  border-radius: var(--radius-sm); transition: background var(--duration-rise); }
a.meet-row--link:hover { background: var(--teal-tint-7); }
.meet-row-hint { font-family: var(--font-mono); font-size: var(--text-eyebrow); color: var(--teal);
  letter-spacing: var(--tracking-eyebrow); flex-shrink: 0; opacity: 0; transition: opacity var(--duration-rise); white-space: nowrap; }
a.meet-row--link:hover .meet-row-hint { opacity: 1; }

/* meeting notes view — meta line + prose */
.meet-meta-line { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); letter-spacing: var(--tracking-eyebrow); }
.meet-meta-sep { color: var(--rule-strong); }
.meet-prose { font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-normal); margin: 0; }
/* Email draft — the persisted follow-up email on a held meeting. Shares the
   warm-paper draft surface with .draft-card; body shows the email verbatim,
   editable via a .review-textarea, with a Save / Mark-sent action row. */
.email-draft { background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: var(--radius-md); padding: var(--space-6); }
.email-draft__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.email-draft__body { margin: 0; white-space: pre-wrap; font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-body); }
.email-draft__actions { display: flex; gap: var(--space-3); align-items: center;
  margin-top: var(--space-4); flex-wrap: wrap; }
.email-draft__sent-meta { font-family: var(--font-mono); font-size: var(--text-eyebrow);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--teal); }
/* Inline select control (owner picker, etc.) — inherits the body voice rather
   than the browser default, unlike a bare native select. */
.select-inline { font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--text-body); background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-width: 150px; }
.meet-summary { margin: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.meet-summary-section { display: flex; flex-direction: column; gap: var(--space-2); }
.meet-summary-label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--teal); display: inline-flex; align-items: center; gap: var(--space-2); }
.meet-summary-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: 0.55; }
.meet-summary-body { margin: 0; font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-normal); }

/* ---- Proposed-changes review — editable promote/reject card + flag rows ---- */
/* Catalog: see /styleguide and DESIGN_SYSTEM.md. The review-card is applied alongside
   .card.card--lg.card--accent-t; the flag rows are a lighter list. Tokens only. */
.review-card { display: flex; flex-direction: column; gap: var(--space-4); }
.review-card .card-actions { margin-top: 0; }

/* current → proposed framing: superseded text recessed, editable proposal foregrounded */
.review-diff { display: flex; flex-direction: column; gap: var(--space-3); }
.review-slot-label {
  font-family: var(--font-mono); font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted);
}
.review-card-current {
  margin: 0; padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--rule-strong);
  background: var(--paper-warm);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--text-sm); color: var(--muted);
  line-height: var(--leading-normal);
}
.review-card-current .review-slot-label { display: block; margin-bottom: var(--space-1); }
.review-proposed .review-slot-label { color: var(--teal); display: block; margin-bottom: var(--space-2); }
.review-textarea {
  width: 100%; box-sizing: border-box; min-height: var(--space-12);
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-body); line-height: var(--leading-normal);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  resize: vertical; transition: box-shadow .15s ease, border-color .15s ease;
}
.review-textarea:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }
.review-flags { display: flex; flex-direction: column; gap: var(--space-1); }
.review-flag {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--rule);
}
.review-flag:last-child { border-bottom: 0; }
.review-flag-body { flex: 1; font-size: var(--text-sm); color: var(--text-body); line-height: var(--leading-normal); }
.review-flag .btn { flex: none; }
/* A promotable "new fact" needs room for its section + edit form, so it stacks
   full-width instead of the compact dismiss-only flag row. */
.review-flag--fact { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.review-flag-head { display: flex; align-items: flex-start; gap: var(--space-3); }
.review-flag-promote summary { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); cursor: pointer; list-style: none; transition: color var(--duration-rise); }
.review-flag-promote summary::-webkit-details-marker { display: none; }
.review-flag-promote summary:hover, .review-flag-promote[open] summary { color: var(--plum); }
.review-promote-form { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.review-promote-form .card-actions { margin-top: var(--space-2); }
.review-select {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: var(--text-base);
  color: var(--text-body); background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.review-select:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }

.meet-action-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.meet-action-item { font-size: var(--text-sm); color: var(--text-body); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--rule); }
.meet-action-item:last-child { border-bottom: 0; }

/* Action-item rows — interactive list on the meeting page (Pattern B HTMX). */
.action-row { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--rule); border-radius: var(--radius-sm); transition: background var(--duration-rise); }
.action-row:last-child { border-bottom: 0; }
.action-row:hover { background: var(--paper-warm); }
.action-row__body { flex: 1 1 auto; min-width: 0; }
.action-row__desc { font-size: var(--text-sm); color: var(--text-body); line-height: 1.4; }
.action-row__meta { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.action-row__actions { display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.action-row--done { opacity: 0.72; }
.action-row--done .action-row__desc { color: var(--muted); text-decoration: line-through; }
.action-row__edit { margin-top: var(--space-2); }
.action-row__edit summary { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; list-style: none; transition: color var(--duration-rise); }
.action-row__edit summary::-webkit-details-marker { display: none; }
.action-row__edit summary:hover, .action-row__edit[open] summary { color: var(--teal); }
.action-row__edit form { margin-top: var(--space-2); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.action-row__edit input[type=text] { flex: 1 1 auto; }
/* Add-item form reads as a deliberate footer, set off from the list above. */
.action-add { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--rule); display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; }
.action-add input[type=text] { flex: 1 1 auto; }
/* Inline action-item form fields: roomier than the compact .date-inline pill so
   the add/edit rows read as deliberate inputs rather than cramped chips. */
.action-add input.date-inline, .action-row__edit input.date-inline {
  padding: var(--space-2) var(--space-3); height: auto; border-radius: var(--radius-md); }
/* Add button: filled accent with a tactile lift + yellow glow on hover, press on click. */
.action-add .btn { transition: background .15s, border-color .15s, color .15s,
  transform .12s var(--easing-rise), box-shadow .12s var(--easing-rise); }
.action-add .btn--accent:hover { background: var(--yellow); color: var(--plum); border-color: var(--yellow);
  transform: translateY(-1px); box-shadow: var(--shadow-yellow-glow); }
.action-add .btn:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .action-row, .action-row__edit summary { transition: none; }
}

.meet-prep-link { color: var(--teal); text-decoration: none; font-weight: 500; }
.meet-prep-link:hover { text-decoration: underline; }
.page-title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--plum);
  margin: 0 0 var(--space-4) 0; font-weight: 700; line-height: var(--leading-tight); }

/* compiled prose lives behind a quiet disclosure */
.prose-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--teal); text-decoration: none; cursor: pointer; }

/* obvious disclosure toggle for compiled narrative */
summary.disclosure-toggle { list-style: none; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-5) var(--space-7); margin-top: var(--space-9); cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-card);
  background: var(--paper-warm); transition: background var(--duration-rise), border-color var(--duration-rise), box-shadow var(--duration-rise); }
summary.disclosure-toggle::-webkit-details-marker { display: none; }
summary.disclosure-toggle:hover { background: var(--teal-tint-7); border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }
.disclosure-toggle__body { flex: 1; min-width: 0; }
.disclosure-toggle__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.disclosure-toggle__sub { font-family: var(--font-mono); font-size: var(--text-eyebrow);
  color: var(--muted); letter-spacing: var(--tracking-eyebrow); margin-top: var(--space-1); }
/* chevron: right edge, vertically centred by flex, size consistent with body text */
.chev { font-size: var(--text-sm); color: var(--teal); transition: transform var(--duration-rise); flex-shrink: 0; line-height: 1; }
details[open] summary.disclosure-toggle .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .chev { transition: none; }
}

/* staggered load reveal */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise var(--duration-reveal) var(--easing-rise) both; }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } }

/* inline date picker for scheduling-list confirm form */
.date-inline { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2); height: calc(var(--space-6) + 2px); }
.date-inline:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }
.list-row .actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.confirm-form { display: inline-flex; align-items: center; gap: var(--space-2); }

/* expand panel inside scheduling list rows */
.expand-panel[hidden] { display: none; }
.expand-panel { width: 100%; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  border-top: 1px solid var(--teal-tint-20); padding: var(--space-2) var(--space-3); margin-top: var(--space-2);
  background: var(--teal-tint-7); border-radius: 0 0 var(--radius-card) var(--radius-card);
  margin-left: calc(-1 * var(--space-5)); margin-right: calc(-1 * var(--space-5));
  padding-left: var(--space-5); padding-right: var(--space-5); }
.expand-panel-label { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--teal); flex-shrink: 0; }
/* active state: mark-held toggle button signals panel is open */
.btn--accent[aria-expanded="true"] { background: var(--teal-tint-10); color: var(--teal); border-color: var(--teal); }

/* ---------- SEGMENTED CONTROL + FILTER ROW ---------- */
/* Querystring-driven range/preset selector (links, no JS). Active item filled. */
.filter-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--radius-pill); overflow: hidden; background: var(--paper); }
.seg-item { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: var(--space-2) var(--space-4); border-right: 1px solid var(--rule); }
.seg-item:last-child { border-right: none; }
.seg-item:hover:not(.seg-item--active) { color: var(--ink); background: var(--paper-warm); }
.seg-item--active { background: var(--teal); color: var(--paper); }
/* Match the day-picker input to the "View day" .btn box (same padding/height/pill)
   so the input + button read as a matched pair. Scoped to .filter-row so the
   compact .date-inline used in scheduling/action-item forms is unaffected. */
.filter-row .date-inline { padding: 9px 16px; height: auto; border-radius: var(--radius-pill); font-size: var(--text-xs); }

/* ---------- ASSET-MANAGEMENT TABLES ---------- */
/* Two read tables for the Asset Management Studio cockpit (see /styleguide +
   DESIGN_SYSTEM.md): .alloc-table (model variant sleeve weights) and
   .holdings-table (sleeve holdings). Both live inside a .card and scroll
   horizontally on narrow screens via their -wrap. Numeric cells are tabular
   and right-aligned; the final row is a tinted plum total. Tokens only. */
.alloc-table-wrap, .holdings-table-wrap { width: 100%; overflow-x: auto; }
.alloc-table, .holdings-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.alloc-table th, .alloc-table td,
.holdings-table th, .holdings-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--rule); }

/* Column headers — mono uppercase eyebrow */
.alloc-th, .holdings-th { font-family: var(--font-mono); font-size: var(--text-eyebrow); letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; vertical-align: bottom; }
.alloc-th--label, .holdings-th--tkr { color: var(--teal); }
.alloc-th--num, .holdings-th--num { text-align: right; }

/* Body cells */
.alloc-cell, .holdings-cell { color: var(--text-body); }
.alloc-cell--num, .holdings-cell--num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.holdings-cell--name { color: var(--text-strong); }

/* Row hover */
.alloc-table tbody tr, .holdings-table tbody tr { transition: background var(--duration-rise) var(--easing-rise); }
.alloc-table tbody tr:hover, .holdings-table tbody tr:hover { background: var(--teal-tint-7); }

/* Linked label / ticker cells */
.alloc-cell--label a { color: var(--text-strong); font-weight: 500; text-decoration: none; }
.alloc-cell--label a:hover { color: var(--teal); }
.holdings-cell--tkr a, .holdings-tkr-plain { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; }
.holdings-cell--tkr a { color: var(--teal); text-decoration: none; }
.holdings-cell--tkr a:hover { color: var(--teal-bright); text-decoration: underline; }
.holdings-tkr-plain { color: var(--muted); }

/* Total row — recessed warm-paper band with plum emphasis */
.alloc-row--total td, .holdings-row--total td { border-top: 1px solid var(--rule-strong); border-bottom: 0; background: var(--paper-warm); }
.alloc-row--total .alloc-cell--label,
.holdings-row--total .holdings-cell--name { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.10em; text-transform: uppercase; color: var(--plum); font-weight: 600; }
.alloc-row--total .alloc-cell--num,
.holdings-row--total .holdings-cell--num { color: var(--plum); font-weight: 600; }

/* Footnote under a table (e.g. the SMA note) */
.alloc-note { font-size: var(--text-xs); margin: var(--space-4) 0 0; }

/* Editable holdings inputs — the IC-only propose card reuses .holdings-table
   but swaps text/weight cells for inputs. Tokens only; mirrors the form-input
   look from .cap-form. The weight input is mono + right-aligned to line up
   under the numeric column. */
.holdings-input { width: 100%; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 8px 10px; font: inherit; font-size: var(--text-sm); color: var(--ink); }
.holdings-input:focus { outline: none; border-color: var(--teal); box-shadow: var(--shadow-focus-teal); }
.holdings-input--tkr { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.holdings-input--num { text-align: right; font-variant-numeric: tabular-nums; max-width: 8rem; }
/* Live running total — turns plum→teal when valid via the .is-ok modifier. */
.holdings-total { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--plum); font-weight: 600; }
.holdings-total.is-ok { color: var(--teal); }