/* ════════════════════════════════════════════════════════════════════
   MOONDOG · Design system — ported from moondog-prototype/src/theme.jsx
   Warm editorial · quiet luxury · dark + light
   ════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (GDPR: no third-party font CDN at runtime) ── */
@font-face { font-family: "Fraunces"; font-weight: 400; font-display: swap; src: url("../fonts/fraunces-400.15ccd91d7a8f.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 500; font-display: swap; src: url("../fonts/fraunces-500.2285bacdef39.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("../fonts/fraunces-600.b8dca52ca5f9.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.da03732a27e1.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.51205681a1ba.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.2ede57db1a3a.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("../fonts/jbmono-400.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("../fonts/jbmono-500.a21e038a03f7.woff2") format("woff2"); }

/* ── Dark theme (default) ── */
:root, :root[data-theme="dark"] {
  --bg0:#0E0D11; --bg1:#13121A; --bg2:#191822; --bg3:#21202A; --bg4:#2C2A36; --bg5:#3A3744;
  --glass:rgba(14,13,17,0.72); --glass-blur:rgba(19,18,26,0.92);
  --border-soft:#1A1922; --border:#222129; --border-strong:#33323D; --border-focus:#D4B68C;
  --accent:#D4B68C; --accent-light:#E5CFA8; --accent-soft:#EFDDC3; --accent-dark:#A88E63; --accent-muted:#7E6A4D;
  --accent-bg:rgba(212,182,140,0.06); --accent-bg2:rgba(212,182,140,0.12); --accent-bg3:rgba(212,182,140,0.20);
  --accent-line:rgba(212,182,140,0.30); --on-accent:#1A1812;
  --text:#F0EBE0; --text-soft:#BAB4A6; --text-muted:#7C766B; --text-dim:#4A4640; --text-ghost:#2A2722;
  --green:#7CC299; --green-bg:rgba(124,194,153,0.10); --green-bg2:rgba(124,194,153,0.18);
  --blue:#8AA8DD; --blue-bg:rgba(138,168,221,0.10); --blue-bg2:rgba(138,168,221,0.18);
  --amber:#E5B872; --amber-bg:rgba(229,184,114,0.10); --amber-bg2:rgba(229,184,114,0.18);
  --red:#D88989; --red-bg:rgba(216,137,137,0.10); --red-bg2:rgba(216,137,137,0.18);
  --purple:#A697D9; --purple-bg:rgba(166,151,217,0.10); --purple-bg2:rgba(166,151,217,0.18);
  --shadow-soft:0 1px 2px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-medium:0 2px 6px rgba(0,0,0,0.14), 0 24px 64px rgba(0,0,0,0.18);
  --shadow-glow:0 0 0 1px rgba(212,182,140,0.30), 0 8px 32px rgba(212,182,140,0.10);
  color-scheme: dark;
}

/* ── Light theme · warm parchment ── */
:root[data-theme="light"] {
  --bg0:#F6F2E7; --bg1:#FBF7EC; --bg2:#FFFCF3; --bg3:#EFE9D9; --bg4:#E2DBC7; --bg5:#CFC8B5;
  --glass:rgba(246,242,231,0.78); --glass-blur:rgba(251,247,236,0.94);
  --border-soft:#E0D8C0; --border:#C9C0A6; --border-strong:#A89F84; --border-focus:#9A7530;
  --accent:#9A6F2C; --accent-light:#B58A4A; --accent-soft:#D4B68C; --accent-dark:#6E5320; --accent-muted:#856E4A;
  --accent-bg:rgba(154,111,44,0.06); --accent-bg2:rgba(154,111,44,0.12); --accent-bg3:rgba(154,111,44,0.22);
  --accent-line:rgba(154,111,44,0.30); --on-accent:#FFFCF3;
  --text:#1E1A14; --text-soft:#3F3A2E; --text-muted:#6A6452; --text-dim:#8E8975; --text-ghost:#C5BFA8;
  --green:#4A8060; --green-bg:rgba(74,128,96,0.08); --green-bg2:rgba(74,128,96,0.16);
  --blue:#4A6BA3; --blue-bg:rgba(74,107,163,0.08); --blue-bg2:rgba(74,107,163,0.16);
  --amber:#9C6E1C; --amber-bg:rgba(156,110,28,0.08); --amber-bg2:rgba(156,110,28,0.16);
  --red:#A04848; --red-bg:rgba(160,72,72,0.08); --red-bg2:rgba(160,72,72,0.16);
  --purple:#6A5FA0; --purple-bg:rgba(106,95,160,0.08); --purple-bg2:rgba(106,95,160,0.16);
  --shadow-soft:0 1px 2px rgba(60,50,30,0.06), 0 8px 24px rgba(60,50,30,0.06);
  --shadow-medium:0 2px 6px rgba(60,50,30,0.10), 0 24px 64px rgba(60,50,30,0.10);
  --shadow-glow:0 0 0 1px rgba(154,111,44,0.30), 0 8px 32px rgba(154,111,44,0.10);
  color-scheme: light;
}

/* "System" follows the OS in CSS — robust even if JS is stale/blocked.
   (data-theme="system" + OS light → parchment; + OS dark → falls through to :root dark.) */
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg0:#F6F2E7; --bg1:#FBF7EC; --bg2:#FFFCF3; --bg3:#EFE9D9; --bg4:#E2DBC7; --bg5:#CFC8B5;
    --glass:rgba(246,242,231,0.78); --glass-blur:rgba(251,247,236,0.94);
    --border-soft:#E0D8C0; --border:#C9C0A6; --border-strong:#A89F84; --border-focus:#9A7530;
    --accent:#9A6F2C; --accent-light:#B58A4A; --accent-soft:#D4B68C; --accent-dark:#6E5320; --accent-muted:#856E4A;
    --accent-bg:rgba(154,111,44,0.06); --accent-bg2:rgba(154,111,44,0.12); --accent-bg3:rgba(154,111,44,0.22);
    --accent-line:rgba(154,111,44,0.30); --on-accent:#FFFCF3;
    --text:#1E1A14; --text-soft:#3F3A2E; --text-muted:#6A6452; --text-dim:#8E8975; --text-ghost:#C5BFA8;
    --green:#4A8060; --green-bg:rgba(74,128,96,0.08); --green-bg2:rgba(74,128,96,0.16);
    --blue:#4A6BA3; --blue-bg:rgba(74,107,163,0.08); --blue-bg2:rgba(74,107,163,0.16);
    --amber:#9C6E1C; --amber-bg:rgba(156,110,28,0.08); --amber-bg2:rgba(156,110,28,0.16);
    --red:#A04848; --red-bg:rgba(160,72,72,0.08); --red-bg2:rgba(160,72,72,0.16);
    --purple:#6A5FA0; --purple-bg:rgba(106,95,160,0.08); --purple-bg2:rgba(106,95,160,0.16);
    --shadow-soft:0 1px 2px rgba(60,50,30,0.06), 0 8px 24px rgba(60,50,30,0.06);
    --shadow-medium:0 2px 6px rgba(60,50,30,0.10), 0 24px 64px rgba(60,50,30,0.10);
    --shadow-glow:0 0 0 1px rgba(154,111,44,0.30), 0 8px 32px rgba(154,111,44,0.10);
    color-scheme: light;
  }
}

:root {
  --serif:"Fraunces","Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,monospace;
  /* The type scale (docs/DESIGN-LANGUAGE.md §1). Six sizes; anything else is
     drift. Use the token, never a raw px in a template. */
  --fs-micro:10.5px; --fs-small:12px; --fs-body:13.5px;
  --fs-title:17px; --fs-metric:20px; --fs-display:30px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-xxl:28px;
  --ease:cubic-bezier(0.22,1,0.36,1); --ease-out:cubic-bezier(0.16,1,0.3,1);
  --w-focus:560px; --w-form:760px; --w-workspace:1080px;
}

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg0);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); }
::selection { background: var(--accent-bg3); }

/* ── Typography ── */
h1, .h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
h2, .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 0; }
h3, .h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 2.5vw, 24px); line-height: 1.2; margin: 0; }
.lede { font-size: clamp(15px, 1.6vw, 17px); color: var(--text-soft); line-height: 1.6; }
.eyebrow { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); font-weight: 500; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.text-soft { color: var(--text-soft); }
.text-muted { color: var(--text-muted); }

/* ── Layout: the only three widths ── */
.page-shell { width: 100%; margin: 0 auto; padding: clamp(24px, 5vw, 56px) 20px 80px; }
.page-shell.focus { max-width: var(--w-focus); }
.page-shell.form { max-width: var(--w-form); }
.page-shell.workspace { max-width: var(--w-workspace); }
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.page-header { margin-bottom: 32px; }
.page-header .eyebrow { margin-bottom: 12px; }
.page-header h1, .page-header h2 { margin-bottom: 12px; }

.meta-strip { display: flex; flex-wrap: wrap; gap: 32px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric .metric-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.metric .metric-value { font-family: var(--mono); font-size: var(--fs-metric); color: var(--text); font-variant-numeric: tabular-nums; }
/* A metric whose value is words, not a figure ("Dynamic · 4.6%"). */
.metric .metric-value.is-text { font-family: var(--sans); font-size: var(--fs-title); }

/* ── Surfaces ── */
.surface, .card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; transition: border-color .25s var(--ease); }
.card.raised { box-shadow: var(--shadow-soft); }
.card.hover:hover { border-color: var(--border-strong); }
.panel { background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: var(--fs-body); font-weight: 500; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap; }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-light); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-bg2); }
.btn-minimal { background: transparent; color: var(--text-muted); padding: 8px 12px; }
.btn-minimal:hover { color: var(--text); }
.btn-sm { padding: 9px 16px; font-size: var(--fs-body); }
.btn-lg { padding: 16px 32px; font-size: var(--fs-body); }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-block { width: 100%; }

/* ── Forms ── */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: var(--fs-small); color: var(--text-soft); margin-bottom: 8px; }
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="url"], input[type="tel"], input[type="search"], input[type="date"], input[type="month"],
input[type="time"], textarea, select {
  width: 100%; background: var(--bg1); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px; font-family: var(--sans); font-size: var(--fs-body); transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.input:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg2); }
/* Selects — a designed control, not the OS default. appearance:none + an
   inline-SVG chevron (a data URI cannot read currentColor, so each theme's
   --text-muted value is hardcoded, mirroring the data-theme override pattern).
   List selects ([multiple]/[size]) keep their own rendering. */
select:not([multiple]):not([size]):not(.qb-type) {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C766B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  padding-right: 36px;
}
:root[data-theme="light"] select:not([multiple]):not([size]):not(.qb-type) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6452' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] select:not([multiple]):not([size]):not(.qb-type) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6452' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  }
}
/* Mono inputs are ordinary form fields with aligned digits. The spaced-out
   display treatment belongs to one field — the intake code — not to every
   number the app asks for. */
.input.mono, input.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.input-code { letter-spacing: .25em; text-align: center; font-size: 22px; /* fs-exception: code entry legibility */ }
.field .help { font-size: var(--fs-small); color: var(--text-muted); margin-top: 6px; }
.errorlist { list-style: none; padding: 0; margin-top: 6px; color: var(--red); font-size: var(--fs-small); }

/* ── Badges ── */
/* Tag/label pill — quiet by default; colour only when it carries meaning.
   (State belongs on .status with a dot, not here.) */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: .02em; padding: 3px 10px; border-radius: 999px; background: var(--bg3); color: var(--text-soft); border: 1px solid var(--border-soft); }
.badge-ai { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.badge.green { background: var(--green-bg); color: var(--green); border-color: transparent; }
.badge.blue { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.badge.amber { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.badge.red { background: var(--red-bg); color: var(--red); border-color: transparent; }
.badge.purple { background: var(--purple-bg); color: var(--purple); border-color: transparent; }

/* ── Alerts ── */
.alert { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--r-md); border-left: 4px solid var(--accent); background: var(--accent-bg); font-size: var(--fs-body); margin-bottom: 16px; }
.alert.info { border-color: var(--blue); background: var(--blue-bg); }
.alert.ok { border-color: var(--green); background: var(--green-bg); }
.alert.warn { border-color: var(--amber); background: var(--amber-bg); }
.alert.error { border-color: var(--red); background: var(--red-bg); }

/* ── Progress line ── */
.progress-line { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; }
.progress-line > span { display: block; height: 100%; background: var(--accent); transition: width .6s var(--ease-out); }

/* ── Top bar / brand ── */
.topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; padding: 14px 24px; background: var(--glass); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: var(--fs-title); color: var(--text); }
.brand .mark { color: var(--accent); font-size: var(--fs-metric); }
.topbar-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-soft); cursor: pointer; transition: all .18s var(--ease); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Compass mark animation ── */
.compass-mark { color: var(--accent); font-size: var(--fs-display); line-height: 1; }

/* ── Utilities ── */
.stack { display: flex; flex-direction: column; }
/* A row never lets its children touch: without a default gap, a nowrap status
   and the sentence beside it collided. Utility gap classes still override. */
.row { display: flex; align-items: center; gap: 10px; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
/* One unit = 4px, so the number in the class is the number of units — the scale of
   docs/DESIGN-LANGUAGE.md §2 as utilities. mt-1/mt-3/mb-1/mb-3/mb-8 were used in 95
   places across the templates without ever being defined: every one of them asked
   for space and silently got none, which is most of the crowding in the product. */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 40px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 40px; }
.between { justify-content: space-between; }
.text-center { text-align: center; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .grid-2, .grid-4 { grid-template-columns: 1fr; } .meta-strip { gap: 20px; } }
.hint { font-size: var(--fs-small); color: var(--text-muted); }

/* ── Intake: option rows, chips, range ── */
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 10px; cursor: pointer; transition: all .18s var(--ease); }
.opt:hover { border-color: var(--border-strong); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.opt input { accent-color: var(--accent); width: 18px; height: 18px; }
.opt span { font-size: var(--fs-body); }
.chip { display: inline-flex; align-items: center; font-size: var(--fs-small); color: var(--text-soft); background: var(--bg2); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: all .18s var(--ease); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
input[type="range"] { accent-color: var(--accent); height: 6px; }
.q-parked { /* visual hint when a question is parked */ }

/* ── Intake hub (section overview) ── */
.hub-row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color .18s var(--ease), transform .18s var(--ease); }
.hub-row:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text); }
/* Firm-admin delete on the workspace list: the row keeps its full link surface;
   the trash sits beside it, quiet until hovered. */
.hub-row-wrap { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.hub-row-wrap > .hub-row { flex: 1; min-width: 0; }
.hub-row-delete { display: flex; }
.row-delete-btn { display: flex; align-items: center; justify-content: center; width: 40px; border: 1px solid transparent; border-radius: var(--r-lg); background: none; color: var(--text-dim); cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); }
.row-delete-btn:hover { color: var(--red); border-color: var(--border); background: var(--bg2); }
.status-dot { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-small); border: 1px solid var(--border-strong); color: var(--text-muted); background: transparent; }
.status-dot.complete { background: var(--green-bg2); border-color: var(--green); color: var(--green); }
.status-dot.in_progress { background: var(--amber-bg2); border-color: var(--amber); color: var(--amber); }
.status-dot.not_started { color: var(--text-muted); }
.qblock { padding-bottom: 4px; }
.qtick { color: var(--green); font-size: var(--fs-body); }

/* ── Engagement workspace: pipeline spine + progress ring ── */
.spine { display: flex; align-items: center; gap: 8px; }
.spine-step { display: flex; align-items: center; gap: 8px; }
.spine-dot { width: 26px; height: 26px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-micro); border: 1px solid var(--border-strong); color: var(--text-muted); }
.spine-step.done .spine-dot { background: var(--green-bg2); border-color: var(--green); color: var(--green); }
.spine-step.current .spine-dot { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.spine-label { font-size: var(--fs-small); color: var(--text-muted); }
.spine-step.current .spine-label { color: var(--text); font-weight: 500; }
.spine-step.done .spine-label { color: var(--text-soft); }
.spine-bar { flex: 1; height: 2px; background: var(--border); min-width: 16px; }
.spine-bar.done { background: var(--green); }

.ring { --pct: 0; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; position: relative; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--bg4) 0); }
.ring::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; background: var(--bg2); }
.ring span { position: relative; font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-soft); }
.ring.ring-sm { width: 28px; height: 28px; }
.ring.ring-sm::before { inset: 3px; }

/* ── Family alignment (RW-20): roster strip · diff-first dimension rows · binned
      distributions · option bars · lazy drill-down. Tokens only; scales to N=20+. ── */

/* Roster strip (A3.1) */
.roster-strip { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; background: var(--bg1); }
.roster-head { display: flex; align-items: baseline; gap: 12px; }
.roster-tokens { display: flex; gap: 8px; margin-top: 10px; }
.roster-tokens.wrap { flex-wrap: wrap; }
.roster-pop { position: relative; }
.roster-token { width: 30px; height: 30px; cursor: pointer; list-style: none; user-select: none; }
.roster-token::-webkit-details-marker { display: none; }
.roster-token.hl { box-shadow: 0 0 0 2px var(--purple); border-color: var(--purple); }
.roster-token:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.roster-all > summary { display: inline-flex; cursor: pointer; }

/* Popover cards (A3.1 / A3.4 / A3.5) — accessible replacement for every hover tooltip */
.popover-card { position: absolute; z-index: 40; margin-top: 8px; min-width: 220px; max-width: min(320px, 90vw);
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-medium); padding: 12px 14px; }
.pop-name { font-size: var(--fs-body); color: var(--text); }
.pop-meta { display: flex; align-items: center; gap: 12px; }
.pop-list { margin-top: 6px; padding-left: 0; list-style: none; font-size: var(--fs-small); }
.pop-list li { padding: 2px 0; color: var(--text-soft); }
.pop-link { display: inline-block; font-size: var(--fs-small); color: var(--accent); text-decoration: none; }

/* Diff-first dimension rows (A3.3) */
.dim-row { border-left: 3px solid var(--border); }
.dim-row.high { border-left-color: var(--red); }
.dim-row.moderate { border-left-color: var(--amber); }
.dim-row.aligned { border-left-color: var(--green); }
.dim-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.dim-summary::-webkit-details-marker { display: none; }
.dim-summary:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.dim-title::before { content: "▸"; color: var(--text-ghost); margin-right: 8px; font-size: var(--fs-micro); }
.dim-row[open] .dim-title::before { content: "▾"; }
.dim-body { margin-top: 12px; }
.dim-headline { color: var(--text-soft); }
.dim-code { font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-muted); margin-left: 6px; }
.dim-outliers { margin-top: 10px; }

/* Binned distribution strip (A3.4) — N-invariant bins or named markers at N<=5 */
.dist { margin: 18px 4px 6px; }
.dist-track { position: relative; height: 34px; }
/* Consensus lockup (A3.4) — a unanimous dimension renders agreement as a deliberate
   composition (member discs · joint · shared value), never a degenerate one-dot strip.
   Discs are the same visual family as .roster-token/.status-dot: 30px, initials, border. */
.consensus { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.consensus-people { display: flex; flex: 0 0 auto; }
.consensus-disc { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--fs-small); color: var(--text-soft);
  background: var(--bg1); border: 1px solid var(--border-strong); }
.consensus-disc + .consensus-disc { margin-left: -8px; }
.consensus-more { font-size: var(--fs-micro); color: var(--text-muted); }
.consensus-joint { flex: 0 0 24px; height: 1px; background: var(--border-strong); }
.consensus-value { font-family: var(--serif); font-size: var(--fs-metric); color: var(--text); line-height: 1.3; min-width: 0; }
.consensus-value.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dist-band { position: absolute; top: 14px; height: 6px; background: var(--accent-bg3); border-radius: 999px; }
.dist-med { position: absolute; top: 8px; height: 18px; width: 2px; background: var(--accent-line); transform: translateX(-50%); }
.dist-bin-wrap { position: absolute; bottom: 0; transform: translateX(-50%); }
.dist-bin { display: block; width: 14px; min-height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; cursor: pointer; list-style: none; }
.dist-bin::-webkit-details-marker { display: none; }
.dist-bin:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.dist-bin-count { position: absolute; top: -16px; transform: translateX(-50%); font-size: var(--fs-micro); color: var(--text-muted); }
.dist-marker { position: absolute; top: 0; transform: translateX(-50%); text-align: center; }
.dist-marker.hl .dist-mk-tok { border-color: var(--purple); color: var(--purple); }
.dist-mk-tok { display: inline-block; font-family: var(--mono); font-size: var(--fs-micro); padding: 1px 5px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg1); }
.dist-mk-val { display: block; font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }
.dist-scale { display: flex; justify-content: space-between; font-size: var(--fs-micro); color: var(--text-muted); margin-top: 6px; }
.dist-med-label { color: var(--text-soft); }

/* Option distribution bars (A3.5) — rows scale with options, not members */
.opt-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.opt-bar { display: flex; align-items: center; gap: 10px; font-size: var(--fs-body); }
.opt-bar.muted { opacity: 0.6; }
.opt-label { flex: 0 0 40%; color: var(--text); }
.opt-bar.lead .opt-label { color: var(--green); }
.opt-bar-track { flex: 1; height: 10px; background: var(--bg3); border-radius: 999px; overflow: hidden; }
.opt-bar-fill { display: block; height: 100%; background: var(--accent-bg3); border-radius: 999px; }
.opt-bar.lead .opt-bar-fill { background: var(--green-bg); }
.opt-count { flex: 0 0 auto; min-width: 20px; text-align: right; color: var(--text); }
.opt-who { position: relative; }
.opt-who > summary { list-style: none; }
.opt-who > summary::-webkit-details-marker { display: none; }
.chip-btn-xs { font-size: var(--fs-micro); padding: 2px 8px; }

/* Lazy per-dimension drill-down (A3.6) */
.dim-drill > summary { display: inline-flex; cursor: pointer; }
.dim-drill-table th, .dim-drill-table td { white-space: nowrap; }
.dim-drill-table .dd-soft { color: var(--text-muted); font-style: italic; }
.dim-drill-table .dd-hl td { background: var(--purple-bg); }
.mdt-muted td { color: var(--text-muted); }

/* ── Account menu (topbar dropdown) ── */
.acct { position: relative; display: inline-flex; }
.acct > summary { list-style: none; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-trigger { width: 36px; height: 36px; border-radius: 999px; background: var(--accent-bg2); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; border: 1px solid var(--accent-line); transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease); }
.acct-trigger:hover { background: var(--accent-bg3); }
.acct > summary:focus-visible .acct-trigger,
.acct[open] .acct-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg2); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 248px; max-width: calc(100vw - 24px); background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 8px; z-index: 60; transform-origin: top right; animation: acct-pop .14s var(--ease-out); }
@keyframes acct-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.acct-id { padding: 6px 10px 8px; }
.acct-id strong { display: block; font-size: var(--fs-body); color: var(--text); }
.acct-id .hint { font-size: var(--fs-small); margin-top: 1px; }
.acct-sep { height: 1px; background: var(--border); margin: 6px -8px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 8px; background: transparent; border: 0; color: var(--text); font-size: var(--fs-body); cursor: pointer; text-decoration: none; transition: background .14s var(--ease), color .14s var(--ease); }
.acct-item:hover { background: var(--accent-bg2); color: var(--accent); }
.acct-danger { color: var(--text-soft); }
.acct-danger:hover { background: var(--red-bg); color: var(--red); }
.acct form { margin: 0; }
.acct-item .acct-ico { width: 18px; text-align: center; opacity: .8; }
.acct-item[aria-checked="true"] { color: var(--accent); font-weight: 600; }
.acct-item[aria-checked="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }

/* ── Busy state for long AI/engine actions ── */
.spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mdspin .7s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes mdspin { to { transform: rotate(360deg); } }
.busy-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 200; }
.busy-card { display: flex; align-items: center; gap: 12px; max-width: 380px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: 22px 26px; font-size: var(--fs-body); color: var(--text); }
.busy-card .hint { margin-top: 2px; }

/* ── Topbar nav links + mobile hamburger ── */
.nav-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nav-toggle { display: none; }

/* ── Grids that stack on small screens ── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── Responsive: tablet & nav collapse ── */
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .topbar.nav-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 55;
    background: var(--bg2); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-soft); padding: 10px 16px;
  }
  .topbar.nav-open .nav-links .btn { justify-content: flex-start; width: 100%; }
}

/* ── Responsive: phones ── */
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .meta-strip { gap: 16px 24px; padding: 16px 0; }
  .page-header { margin-bottom: 24px; }
  .mdt { min-width: 520px; }            /* wide tables scroll inside their card */
}

@media (max-width: 560px) {
  .brand .badge { display: none; }       /* firm name shows in the account menu */
  .topbar { padding: 12px 16px; }
  .card, .surface { padding: 18px; }
  .hub-row { flex-wrap: wrap; gap: 12px; }
  .hub-row .row.gap-2, .hub-row form { flex: 1 1 auto; }
  .btn { padding: 11px 18px; }
  h1, .h1 { font-size: clamp(32px, 9vw, 44px); }
}

/* ── Tables (advisor status / lists) ── */
.mdt { width: 100%; border-collapse: collapse; }
.mdt th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mdt td { padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-body); }
.mdt tr:hover td { background: var(--bg1); }

/* ── Questionnaire builder (Typeform/Tally-style visual editor) ── */
.qb-langs { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.qb-lang { font-size: var(--fs-small); padding: 5px 14px; border-radius: 999px; color: var(--text-muted); text-decoration: none; transition: all .15s var(--ease); }
.qb-lang:hover { color: var(--text); }
.qb-lang.is-active { background: var(--accent-bg2); color: var(--accent); }

.qb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.qb-editor { min-width: 0; }

/* Inline-edit inputs: invisible until hovered/focused, so the editor reads as a document. */
.qb-section-fields input, .qb-q-fields input.qb-q-label, .qb-q-fields input.qb-q-help, .qb-opt-fields input {
  width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--text); font-family: var(--sans); padding: 7px 9px; transition: all .15s var(--ease);
}
.qb-section-fields input:hover, .qb-q-fields input:hover, .qb-opt-fields input:hover { border-color: var(--border-soft); }
.qb-section-fields input:focus, .qb-q-fields input:focus, .qb-opt-fields input:focus {
  outline: none; background: var(--bg1); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg2);
}

.qb-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
.qb-section-head { display: flex; align-items: flex-start; gap: 8px; }
.qb-section-fields { flex: 1; min-width: 0; }
.qb-title-input { font-family: var(--serif) !important; font-size: var(--fs-title) !important; }
.qb-summary-input { font-size: var(--fs-body) !important; color: var(--text-soft) !important; }

.qb-handle { cursor: grab; color: var(--text-dim); font-size: var(--fs-title); line-height: 1; padding: 8px 4px; user-select: none; flex: none; }
.qb-handle:hover { color: var(--accent); }
.qb-handle:active { cursor: grabbing; }
.qb-dragging { opacity: .5; outline: 2px dashed var(--accent-line); outline-offset: 2px; border-radius: var(--r-md); }

.qb-del { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: var(--fs-body); line-height: 1; padding: 8px 9px; border-radius: var(--r-sm); flex: none; transition: all .15s var(--ease); }
.qb-del:hover { color: var(--red); background: var(--red-bg); }
.qb-del-sm { padding: 6px 7px; font-size: var(--fs-small); }

.qb-questions { margin-top: 8px; margin-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.qb-question { display: flex; align-items: flex-start; gap: 6px; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 10px; }
.qb-question--ai { border-left: 3px solid var(--accent); background: var(--accent-bg2); }
.qb-q-main { flex: 1; min-width: 0; }
.qb-q-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; padding-left: 9px; }
.qb-type { width: auto; min-width: 200px; padding: 7px 10px; font-size: var(--fs-body); }
.qb-req { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.qb-req input { width: 16px; height: 16px; accent-color: var(--accent); }

.qb-options { margin: 6px 0 4px 9px; padding-left: 12px; border-left: 2px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qb-option { display: flex; align-items: center; gap: 6px; width: 100%; }
.qb-opt-dot { color: var(--text-dim); flex: none; }
.qb-opt-fields { flex: 1; min-width: 0; }
.qb-add-opt, .qb-add-question { color: var(--accent) !important; }

/* Live preview pane */
.qb-preview-pane { position: sticky; top: 16px; }
.qb-preview-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; max-height: calc(100vh - 32px); overflow: auto; }
.qb-pv-title { font-family: var(--serif); font-size: var(--fs-metric); margin-bottom: 14px; }
.qb-pv-section { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.qb-pv-section:first-of-type { border-top: none; }
.qb-pv-q { margin: 12px 0; }
.qb-pv-label { font-size: var(--fs-body); font-weight: 500; margin-bottom: 6px; }
.qb-pv-req { color: var(--red); }
.qb-pv-opt { padding: 9px 12px; margin-bottom: 6px; cursor: default; }
.qb-pv .input[disabled], .qb-pv textarea[disabled] { opacity: .7; cursor: default; }

@media (max-width: 920px) {
  .qb-layout { grid-template-columns: 1fr; }
  .qb-preview-pane { position: static; order: -1; }
  .qb-preview-card { max-height: 420px; }
}

/* ════════════════════════════════════════════════════════════════════
   Questionnaire library + builder — elevated, minimalist UI
   ════════════════════════════════════════════════════════════════════ */

/* Inline SVG icons (quiet, hairline stroke). */
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: -3px; }
.ic-sm { width: 15px; height: 15px; }

/* Quiet icon button: invisible until hover, comes alive softly. */
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .16s var(--ease); padding: 0; }
.iconbtn:hover { background: var(--bg3); color: var(--text); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg2); }

/* Refined dropdown / popover menus (used by the topbar account menu too). */
.acct > summary { list-style: none; }
.acct > summary::-webkit-details-marker { display: none; }
.acct-menu { border-radius: var(--r-lg); box-shadow: var(--shadow-medium); border: 1px solid var(--border); padding: 6px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; cursor: pointer; font: inherit; font-size: var(--fs-body); color: var(--text); padding: 9px 12px; border-radius: var(--r-sm); transition: background .12s var(--ease); }
.acct-item:hover { background: var(--bg3); color: var(--text); }
.acct-item .ic { color: var(--text-muted); }
.acct-danger { color: var(--red); }
.acct-danger:hover { background: var(--red-bg); color: var(--red); }
.acct-danger .ic { color: var(--red); }

/* Small status dot. */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot-accent { background: var(--accent); }
.dot-amber { background: var(--amber); }
.dot-muted { background: var(--text-dim); }
.dot-green { background: var(--green); }
.dot-blue { background: var(--blue); }
.dot-red { background: var(--red); }
.dot-purple { background: var(--purple); }

/* Shared status — a quiet dot + label for state (the app-wide signature).
   Generalises the questionnaire card's .ql-status. */
.status { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); font-weight: 500; color: var(--text-soft); white-space: nowrap; vertical-align: middle; }
.status .dot { width: 7px; height: 7px; }
/* Row affordance chevron (replaces the plain › glyph). */
.row-chev { color: var(--text-dim); flex: 0 0 auto; }

/* ── Builder header ── */
.qb-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.qb-header-main { min-width: 0; flex: 1; }
.qb-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-name-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--r-md); color: var(--text); font-family: var(--serif); padding: 4px 10px; margin: 6px 0 4px -10px; transition: all .15s var(--ease); }
.qb-name-input:hover { background: var(--bg1); }
.qb-name-input:focus { outline: none; background: var(--bg1); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg2); }
.qb-name-lg { font-size: var(--fs-display); line-height: 1.12; font-weight: 500; }
.qb-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-muted); transition: color .2s var(--ease); margin-top: 2px; }
.qb-autosave.is-saved { color: var(--green); }
.qb-more .acct-menu, .ql-menu .acct-menu, .resp-menu .acct-menu { right: 0; left: auto; }

/* Open ⋯ menus must stay above neighbours and not flicker. A hovered card/row's
   translateY created a moving stacking context, so an open menu jittered as the
   cursor crossed into it and could sit behind the next card. While a menu is open,
   pin its card/row (no transform) and raise it; lift the menu above sibling content. */
.acct-menu { z-index: 100; }
.ql-card:has(.acct[open]),
.hub-row:has(.acct[open]) {
  transform: none;
  position: relative;
  z-index: 30;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-soft);
}
.qb-more form, .ql-menu form, .ql-new form { margin: 0; }

/* ── Library header + creation ── */
.ql .page-header { margin-bottom: 24px; }
.ql-new .acct-menu { right: 0; left: auto; min-width: 244px; }

/* ── Toolbar: search + tag filter ── */
.ql-toolbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.ql-searchwrap { position: relative; flex: 0 1 340px; display: flex; align-items: center; }
.ql-searchwrap .ic { position: absolute; left: 14px; color: var(--text-dim); pointer-events: none; }
.ql-searchwrap .ql-search { width: 100%; background: var(--bg1); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 16px 10px 42px; font: inherit; font-size: var(--fs-body); transition: all .15s var(--ease); }
.ql-searchwrap .ql-search::placeholder { color: var(--text-dim); }
.ql-searchwrap .ql-search:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg2); }
.ql-tagfilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ql-pill { font-size: var(--fs-small); padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; transition: all .15s var(--ease); }
.ql-pill:hover { border-color: var(--border-strong); color: var(--text); }
.ql-pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ── Cards ── */
#ql-list { display: flex; flex-direction: column; gap: 12px; }
.ql-card { display: flex; align-items: center; gap: 16px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; cursor: pointer; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.ql-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.ql-card-body { flex: 1; min-width: 0; }
.ql-name-row { display: flex; align-items: baseline; gap: 12px; }
.ql-name { flex: 1 1 auto; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); font-family: var(--serif); font-size: var(--fs-metric); font-weight: 500; line-height: 1.2; padding: 3px 8px; margin-left: -8px; text-overflow: ellipsis; transition: all .14s var(--ease); }
.ql-name:hover { background: var(--bg1); }
.ql-name:focus { outline: none; background: var(--bg1); border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-bg2); }
.ql-saved { font-size: var(--fs-small); letter-spacing: .02em; color: var(--green); opacity: 0; transition: opacity .25s var(--ease); white-space: nowrap; flex: none; }
.ql-saved.show { opacity: 1; }
.ql-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: var(--fs-body); color: var(--text-muted); }
.ql-sub .ql-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-soft); }
.ql-chip { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.ql-sep { color: var(--text-dim); }

/* Tags */
.ql-tags { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ql-tag { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); padding: 3px 6px 3px 11px; border-radius: 999px; background: var(--bg3); color: var(--text-soft); }
.ql-tag-x { display: inline-flex; background: transparent; border: none; color: var(--text-dim); cursor: pointer; line-height: 1; padding: 2px; border-radius: 999px; opacity: 0; transition: opacity .12s var(--ease), color .12s var(--ease); }
.ql-tag:hover .ql-tag-x { opacity: 1; }
.ql-tag-x:hover { color: var(--red); }
.ql-tag-input { width: 74px; background: transparent; border: 1px dashed var(--border); border-radius: 999px; color: var(--text-muted); font-size: var(--fs-small); padding: 3px 11px; transition: all .15s var(--ease); }
.ql-tag-input::placeholder { color: var(--text-dim); }
.ql-tag-input:focus { outline: none; width: 140px; border-style: solid; border-color: var(--border-focus); color: var(--text); }

.ql-actions { display: flex; align-items: center; gap: 2px; flex: none; }

/* ── Modal (preview + confirm), backdrop blur ── */
.ql-modal-overlay { position: fixed; inset: 0; background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 28px; z-index: 90; animation: ql-fade .16s var(--ease); }
.ql-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-medium); width: 100%; max-width: 620px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; animation: ql-rise .18s var(--ease-out); }
.ql-modal.is-confirm { max-width: 460px; }
.ql-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-soft); }
.ql-modal-title { font-family: var(--serif); font-size: var(--fs-metric); font-weight: 500; line-height: 1.2; margin-top: 2px; }
.ql-modal-body { overflow: auto; padding: 22px 24px; }
.ql-modal.is-confirm .ql-modal-body { padding: 6px 24px 22px; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.6; }
.ql-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-soft); }
@keyframes ql-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ql-rise { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .ql-card { flex-wrap: wrap; }
  .ql-actions { width: 100%; justify-content: flex-end; }
}

/* Danger button (used in confirm dialogs) + summary-as-button safety. */
.btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn-danger:hover { filter: brightness(1.06); }
/* Quiet destructive trigger — muted until hover; the danger lives in the confirm modal. */
.btn.danger { color: var(--text-muted); }
.btn.danger:hover { color: var(--red); background: var(--red-bg); border-color: transparent; }

/* Alpine: hide x-show/x-cloak elements until Alpine initialises (no flash of open forms). */
[x-cloak] { display: none !important; }

/* People list (client detail) — inline edit + remove. */
.person { padding: 13px 0; border-bottom: 1px solid var(--border-soft); }
.person:last-of-type { border-bottom: 0; }
.person-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.person-id { min-width: 0; display: flex; align-items: flex-start; gap: 12px; }
.person-disc { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
  font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-soft);
  background: var(--bg1); border: 1px solid var(--border-strong); }
.person-copy { min-width: 0; }
.person-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person-meta { margin-top: 3px; }
.person-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.person-actions form { margin: 0; }
.person-edit { background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 16px; margin-top: 12px; }
.person-edit .field { margin-bottom: 10px; }
.person-add > summary { display: inline-flex; }

/* Share panel — link + one-time code for out-of-band (emailless) delivery. */
.share-card .eyebrow { color: var(--accent); }
.share-rows { display: flex; flex-direction: column; gap: 10px; }
.share-row { display: flex; align-items: center; gap: 12px; }
.share-label { flex: 0 0 42px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.share-val { flex: 1 1 auto; min-width: 0; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 8px 12px; font-family: var(--mono); font-size: var(--fs-body); color: var(--text); overflow-x: auto; white-space: nowrap; }
.share-code { font-size: var(--fs-title); letter-spacing: .16em; color: var(--accent); }
@media (max-width: 560px) { .share-row { flex-wrap: wrap; } }
summary.btn { cursor: pointer; }
summary.btn::-webkit-details-marker { display: none; }
.ql-empty { padding: 40px 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-body); border: 1px dashed var(--border); border-radius: var(--r-lg); }


/* ════ Backported builder v2 styles (from release/2026-07-platform-v2) ════
   Appended as overrides — later rules supersede the v1 builder styles. */
:root, :root[data-theme="dark"] { --hairline: rgba(240,235,224,0.14); }
:root[data-theme="light"] { --hairline: rgba(30,26,20,0.16); }
@media (prefers-color-scheme: light) { :root[data-theme="system"] { --hairline: rgba(30,26,20,0.16); } }

.qb-langs { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; gap: 2px; }
.qb-lang { font-size: var(--fs-small); padding: 5px 14px; border-radius: 999px; color: var(--text-muted); text-decoration: none; transition: all .15s var(--ease); }
.qb-lang:hover { color: var(--text); }
.qb-lang.is-active { background: var(--accent-bg2); color: var(--accent); }
.qb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.qb-editor { min-width: 0; }
.qb-section-fields input, .qb-q-fields input.qb-q-label, .qb-q-fields input.qb-q-help, .qb-opt-fields input {
  width: 100%; background: transparent; border: 1px solid transparent; border-radius: 0;
  color: var(--text); font-family: var(--sans); padding: 7px 9px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.qb-section-fields input:hover, .qb-q-fields input.qb-q-label:hover, .qb-q-fields input.qb-q-help:hover, .qb-opt-fields input:hover { border-bottom-color: var(--hairline); }
.qb-section-fields input:focus, .qb-q-fields input.qb-q-label:focus, .qb-q-fields input.qb-q-help:focus, .qb-opt-fields input:focus {
  outline: none; background: transparent;
  border-color: transparent; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent);
}
.qb-section { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 16px; }
.qb-section-head { display: flex; align-items: flex-start; gap: 8px; }
.qb-section-fields { flex: 1; min-width: 0; }
.qb-title-input { font-family: var(--serif) !important; font-size: var(--fs-title) !important; }
.qb-summary-input { font-size: var(--fs-body) !important; color: var(--text-soft) !important; }
.qb-handle { cursor: grab; color: var(--text-muted); font-size: var(--fs-title); line-height: 1; padding: 8px 4px; user-select: none; flex: none; }
.qb-handle:hover { color: var(--accent); }
.qb-handle:active { cursor: grabbing; }
.qb-dragging { opacity: .5; outline: 2px dashed var(--accent-line); outline-offset: 2px; border-radius: var(--r-md); }
.qb-del { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: var(--fs-body); line-height: 1; padding: 8px 9px; border-radius: var(--r-sm); flex: none; transition: all .15s var(--ease); }
.qb-del:hover { color: var(--red); background: var(--red-bg); }
.qb-del-sm { padding: 6px 7px; font-size: var(--fs-small); }
.qb-questions { margin-top: 8px; margin-left: 26px; display: flex; flex-direction: column; gap: 8px; }
.qb-question { display: flex; align-items: flex-start; gap: 6px; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 10px; }
.qb-question--ai { border-left: 3px solid var(--accent); background: var(--accent-bg2); }
.qb-q-main { flex: 1; min-width: 0; }
.qb-q-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0; padding-left: 9px; }
.qb-type { width: auto; min-width: 200px; padding: 7px 10px; font-size: var(--fs-body); }
.qb-req { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.qb-req input { width: 16px; height: 16px; accent-color: var(--accent); }
.qb-options { margin: 6px 0 4px 9px; padding-left: 12px; border-left: 2px solid var(--border-soft); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qb-option { display: flex; align-items: center; gap: 6px; width: 100%; }
.qb-opt-dot { color: var(--text-dim); flex: none; }
.qb-opt-fields { flex: 1; min-width: 0; }
.qb-add-opt, .qb-add-question { color: var(--accent) !important; }
.qb-preview-pane { position: sticky; top: 16px; }
.qb-preview-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px; max-height: calc(100vh - 32px); overflow: auto; }
.qb-pv-title { font-family: var(--serif); font-size: var(--fs-metric); margin-bottom: 14px; }
.qb-pv-section { padding: 12px 0; border-top: 1px solid var(--border-soft); }
.qb-pv-section:first-of-type { border-top: none; }
.qb-pv-q { margin: 12px 0; }
.qb-pv-label { font-size: var(--fs-body); font-weight: 500; margin-bottom: 6px; }
.qb-pv-req { color: var(--red); }
.qb-pv-opt { padding: 9px 12px; margin-bottom: 6px; cursor: default; }
.qb-pv .input[disabled], .qb-pv textarea[disabled] { opacity: .7; cursor: default; }
@media (max-width: 920px) {
  .qb-layout { grid-template-columns: 1fr; }
  .qb-preview-pane { position: static; order: -1; }
  .qb-preview-card { max-height: 420px; }
}
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; fill: none; vertical-align: -3px; }
.ic-sm { width: 15px; height: 15px; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; transition: all .16s var(--ease); padding: 0; }
.iconbtn:hover { background: var(--bg3); color: var(--text); }
.iconbtn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-bg2); }
.acct-item .ic { color: var(--text-muted); }
.acct-danger .ic { color: var(--red); }
.qb-header { margin-bottom: 32px; }
.qb-topline { display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 10px; min-height: 36px; }
.qb-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qb-name-input { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 0; color: var(--text); font-family: var(--serif); padding: 4px 10px; margin: 6px 0 4px -10px; text-overflow: ellipsis; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.qb-name-input:hover { border-bottom-color: var(--hairline); }
.qb-name-input:focus { outline: none; background: transparent; border-color: transparent; border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.qb-name-lg { font-size: var(--fs-display); line-height: 1.12; font-weight: 500; }
.qb-autosave { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-muted); transition: color .2s var(--ease); margin-top: 2px; }
.qb-autosave.is-saved { color: var(--green); }
.qb-autosave.is-error { color: var(--amber); }
.qb-more .acct-menu, .ql-menu .acct-menu, .resp-menu .acct-menu { right: 0; left: auto; }
.qb-more form, .ql-menu form, .ql-new form { margin: 0; }
.ql-searchwrap .ic { position: absolute; left: 14px; color: var(--text-dim); pointer-events: none; }
.ql-modal-overlay { position: fixed; inset: 0; background: var(--glass); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 28px; z-index: 90; animation: ql-fade .16s var(--ease); }
.ql-modal { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-medium); width: 100%; max-width: 620px; max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; animation: ql-rise .18s var(--ease-out); }
.ql-modal.is-confirm { max-width: 460px; }
.ql-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-soft); }
.ql-modal-title { font-family: var(--serif); font-size: var(--fs-metric); font-weight: 500; line-height: 1.2; margin-top: 2px; }
.ql-modal-body { overflow: auto; padding: 22px 24px; }
.ql-modal.is-confirm .ql-modal-body { padding: 6px 24px 22px; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.6; }
.ql-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-soft); }
.q-image { max-width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--r-md); margin: 4px 0 12px; display: block; }
.q-statement-title { font-family: var(--serif); font-size: var(--fs-metric); font-weight: 500; margin-bottom: 10px; }
.q-statement-body { font-size: var(--fs-title); line-height: 1.7; color: var(--text-soft); max-width: 66ch; }
.q-statement-body h3, .q-statement-body h4 { font-family: var(--serif); color: var(--text); margin: 14px 0 6px; }
.q-statement-body ul, .q-statement-body ol { padding-left: 22px; margin: 8px 0; }
.q-statement-body a { text-decoration: underline; }
.q-statement-body blockquote { border-left: 2px solid var(--accent); padding-left: 14px; color: var(--text-soft); font-style: italic; margin: 10px 0; }
.qb-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.qb-move { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: var(--fs-micro); padding: 1px 4px; border-radius: 4px; }
.qb-move:hover { color: var(--accent); background: var(--accent-bg2); }
.qb-drop-indicator { height: 3px; border-radius: 2px; background: var(--accent); margin: 4px 0; box-shadow: 0 0 6px var(--accent-line); }
.qb-moved { outline: 2px solid var(--accent-line); transition: outline .4s; border-radius: var(--r-md); }
.qb-lang-gap { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--amber-bg2); color: var(--amber); font-size: var(--fs-micro); text-align: center; }
.qb-img-btn { display: inline-flex; align-items: center; cursor: pointer; color: var(--text-muted); padding: 3px; border-radius: 5px; }
.qb-img-btn:hover { color: var(--accent); background: var(--accent-bg2); }
.qb-img-btn .ic { width: 15px; height: 15px; }
.qb-img-chip { display: inline-flex; align-items: center; gap: 4px; }
.qb-img-chip img { height: 24px; width: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.qb-img-x { background: none; border: 0; color: var(--text-muted); cursor: pointer; font-size: var(--fs-micro); }
.qb-img-x:hover { color: var(--red); }
.qb-richtext { border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 8px; background: var(--bg1); }
.qb-rt-toolbar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.qb-rt-toolbar button { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 3px 8px; border-radius: 5px; font-size: var(--fs-body); }
.qb-rt-toolbar button:hover { color: var(--text); background: var(--accent-bg2); }
.qb-rt-area { min-height: 90px; padding: 12px 14px; outline: none; font-size: var(--fs-body); line-height: 1.6; }
.qb-rt-area:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.qb-rt-area h3 { font-family: var(--serif); font-size: var(--fs-title); margin: 8px 0 4px; }
.qb-rt-area ul, .qb-rt-area ol { padding-left: 20px; }
.qb-rt-area a { color: var(--accent); text-decoration: underline; }
.qb-move { min-width: 22px; height: 18px; font-size: var(--fs-micro); line-height: 1; }
[data-qb-list] > [data-qb-item]:last-of-type .qb-move[data-qb-move="down"] { opacity: .35; pointer-events: none; }
.qb-count { min-width: 22px; height: 20px; line-height: 20px; text-align: center; border-radius: 99px; background: var(--bg1); border: 1px solid var(--border-strong); color: var(--text-soft); font-size: var(--fs-micro); padding: 0 6px; }
.qb-toggle { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 6px; }
.qb-toggle:hover { color: var(--accent); background: var(--accent-bg2); }
.qb-toggle .ic { width: 16px; height: 16px; transition: transform .18s; }
.qb-section.is-open .qb-toggle .ic { transform: rotate(180deg); }
.qb-section-body { display: none; }
.qb-section.is-open .qb-section-body { display: block; margin-top: 10px; }
.qb-section { margin-bottom: 0; }
.qb-divider { display: flex; justify-content: center; padding: 3px 0; opacity: .55; transition: opacity .15s; }
.qb-divider:hover { opacity: 1; }
.qb-divider-btn { background: var(--bg2); border: 1px dashed var(--border-strong); color: var(--text-soft); border-radius: 99px; font-size: var(--fs-micro); padding: 3px 14px; cursor: pointer; }
.qb-divider-btn:hover { color: var(--accent); border-color: var(--accent); }
.qb-preview-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex; justify-content: center; padding: 3vh 16px; }
.qb-preview-overlay[hidden] { display: none; }
.qb-preview-modal { width: 100%; max-width: 760px; background: var(--bg0); border: 1px solid var(--border); border-radius: var(--r-lg); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-medium); }
.qb-preview-modalbar { padding: 12px 18px; border-bottom: 1px solid var(--hairline); background: var(--bg1); }
.qb-preview-body { overflow-y: auto; padding: 26px 30px; flex: 1; }
.qb-section { padding: 16px 20px; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.qb-section:hover { border-color: var(--border-strong); }
.qb-section.is-open { box-shadow: var(--shadow-soft); }
.qb-section-head { align-items: center; gap: 10px; }
.qb-title-input { font-size: var(--fs-metric) !important; }
.qb-question { padding: 12px 14px; gap: 8px; transition: border-color .16s var(--ease); }
.qb-question:hover { border-color: var(--border-strong); }
.qb-questions { margin-left: 30px; gap: 10px; }
@media (hover: hover) {
  .qb-side, .qb-del, .qb-img-form, .qb-img-chip { opacity: .55; transition: opacity .16s var(--ease); }
  .qb-section-head:hover .qb-side, .qb-section-head:hover .qb-del,
  .qb-section-head:hover .qb-img-form, .qb-section-head:hover .qb-img-chip,
  .qb-question:hover .qb-side, .qb-question:hover .qb-del,
  .qb-question:hover .qb-img-form, .qb-question:hover .qb-img-chip,
  .qb-section-head:focus-within .qb-side, .qb-section-head:focus-within .qb-del,
  .qb-question:focus-within .qb-side, .qb-question:focus-within .qb-del { opacity: 1; }
}
.qb-type {
  min-width: 0; width: auto; background: var(--bg2); border: 1px solid var(--border-soft);
  border-radius: 999px; font-size: var(--fs-small); color: var(--text-soft); padding: 5px 30px 5px 12px;
}
.qb-type:hover { border-color: var(--border-strong); color: var(--text); }
.qb-q-controls { gap: 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.qb-divider { padding: 6px 0; }
.qb-add-section-row { display: flex; justify-content: center; padding: 14px 0 4px; }
.qb-type-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-soft); border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 12px; background: var(--bg2); }
.qb-type-chip .ic { color: var(--text-muted); }
.qb-rt-sep { width: 1px; align-self: stretch; margin: 3px 4px; background: var(--hairline); }
.qb-rt-img { display: inline-flex; align-items: center; color: var(--text-muted); cursor: pointer; padding: 3px 8px; border-radius: 5px; }
.qb-rt-img:hover { color: var(--text); background: var(--accent-bg2); }
.qb-rt-toolbar .ic-sm { width: 14px; height: 14px; }
.qb-rt-area img { max-width: 100%; border-radius: var(--r-md); margin: 6px 0; display: block; }
.q-statement-body img { max-width: 100%; border-radius: var(--r-md); margin: 10px 0; display: block; }
.qb-rt-area blockquote { border-left: 2px solid var(--accent); padding-left: 12px; color: var(--text-soft); font-style: italic; margin: 8px 0; }
.qb-pv img, .qb-preview-body img { max-width: 100%; }

.section-hero { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 18px; display: block; }

/* ── Investment profile review: a document you annotate, not a form ──────── */
.ip .ip-line { width: 100%; background: transparent; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 2px 0 4px; font: inherit; color: inherit; line-height: 1.55; transition: border-color .15s var(--ease); }
.ip .ip-line:hover:not([disabled]) { border-bottom-color: var(--border); }
.ip .ip-line:focus { outline: none; border-bottom-color: var(--accent); }
.ip .ip-line::placeholder { color: var(--text-soft); opacity: .55; font-style: italic; }
.ip .ip-line[disabled] { opacity: 1; -webkit-text-fill-color: currentColor; }
.ip textarea.ip-line { resize: none; overflow: hidden; display: block; }
.ip .ip-title { font-family: var(--serif); font-weight: 500; font-size: var(--fs-metric); line-height: 1.3; }
.ip .ip-mini { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px; }
.ip .ip-mini-amber { color: var(--amber); }
.ip .ip-tension { border-left: 3px solid var(--amber); background: var(--bg2); padding: 12px 18px 14px; border-radius: 0 var(--r-md) var(--r-md) 0; }
.ip .ip-sheet { padding: 0; overflow: hidden; }
.ip .ip-empty { padding: 16px 20px; margin: 0; }
.ip .ip-dimrow { display: grid; grid-template-columns: minmax(150px, 210px) minmax(140px, 180px) minmax(0, 1fr); gap: 6px 28px; padding: 16px 20px; align-items: baseline; }
.ip .ip-dimrow + .ip-dimrow { border-top: 1px solid var(--hairline); }
.ip .ip-dimhead { padding: 12px 20px 10px; border-bottom: 1px solid var(--border); }
.ip .ip-dimhead span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.ip .ip-dimlabel { font-family: var(--serif); font-size: var(--fs-title); line-height: 1.45; }
.ip .ip-val { font-size: var(--fs-body); }
.ip .ip-val.is-missing { border-bottom-color: var(--amber); }
.ip .ip-oprow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding: 16px 20px; }
.ip .ip-oprow + .ip-oprow { border-top: 1px solid var(--hairline); }
.ip .ip-opnum { font-family: var(--serif); font-size: var(--fs-body); color: var(--text-soft); line-height: 1.6; }
.ip .ip-optopic { font-weight: 600; font-size: var(--fs-body); margin-bottom: 2px; }
@media (max-width: 760px) {
  .ip .ip-dimrow { grid-template-columns: 1fr; gap: 4px; }
  .ip .ip-dimhead { display: none; }
  .ip .ip-val { max-width: 240px; }
}

/* ── Granular wealth capture ─────────────────────────────────────────────── */
.wl-triple { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px 6px; margin-bottom: 14px; }
.wl-triple-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-weight: 600; font-size: var(--fs-body); }
.wl-locked { background: var(--bg2); }
.wl-locked input[disabled] { opacity: .75; cursor: not-allowed; }

/* ── Commitments table ───────────────────────────────────────────────────── */
.cm-sort { color: inherit; text-decoration: none; white-space: nowrap; }
.cm-sort:hover { color: var(--accent); }
.cm-sort.is-active { color: var(--accent); }
#cm-table input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent); }

/* ── Upload drop zone ────────────────────────────────────────────────────── */
.upzone { border: 1.5px dashed var(--border); border-radius: var(--r-lg); padding: 22px 24px 18px; cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.upzone:hover, .upzone.is-drag { border-color: var(--accent); background: var(--bg2); }
.upzone.has-file { border-style: solid; border-color: var(--accent); }
.upzone-body { display: flex; gap: 16px; align-items: flex-start; }
.upzone-ic { width: 26px; height: 26px; flex: none; color: var(--accent); margin-top: 2px; }
.upzone-foot { margin-top: 14px; }

/* ── Wealth position: reads like a statement ─────────────────────────────── */
.ws-head { display: flex; gap: 32px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.ws-recon { min-width: 250px; margin-left: auto; font-variant-numeric: tabular-nums; }
.ws-recon-row { display: flex; justify-content: space-between; gap: 24px; padding: 5px 0; font-size: var(--fs-body); color: var(--text-soft); }
.ws-recon-row + .ws-recon-row { border-top: 1px solid var(--hairline); }
.ws-recon-row b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
#ws-r-diffrow b { color: inherit; }
#wealth-form label.ws-mini, .ws-mini { display: block; font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); opacity: .8;
  margin-bottom: 0; }
.ws-rows .ws-row { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 8px 0; }
.ws-rows .ws-row + .ws-row { border-top: 1px solid var(--hairline); }
.ws-rows .ws-row label { font-size: var(--fs-body); }
.ws-group { padding: 20px 24px; }
.ws-group .wl-triple { margin-bottom: 14px; border: 1px solid var(--hairline); padding: 12px 16px 8px; }
.ws-group .wl-triple:last-of-type { margin-bottom: 4px; }
.ws-group .wl-triple legend { padding: 0 6px; }
.ws-group .wl-triple .field { margin-bottom: 2px; }
/* Seamless statement amounts: a hairline that only asserts itself on focus. */
.ws-input, .ws-rows .ws-row input, .wl-triple input {
  width: 150px; max-width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--border); border-radius: 0; padding: 3px 2px 5px;
  text-align: right; font: inherit; font-size: var(--fs-body); color: inherit;
  font-variant-numeric: tabular-nums; transition: border-color .15s var(--ease);
  -moz-appearance: textfield; appearance: textfield;
}
.wl-triple input { width: 100%; }
.ws-input::-webkit-outer-spin-button, .ws-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ws-input:hover:not([disabled]) { border-bottom-color: var(--text-soft); }
.ws-input:focus { outline: none; border-bottom-color: var(--accent); }
.ws-input::placeholder { color: var(--text-soft); opacity: .45; }
.ws-input[disabled] { opacity: .7; }
/* The action bar stays reachable on a long statement. */
.ws-actions { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px; align-items: center;
  margin-top: 22px; padding: 14px 0; background: var(--bg0);
  border-top: 1px solid var(--border); }
.ws-actions-hint { margin-left: auto; text-align: right; max-width: 46ch; }
@media (max-width: 640px) { .ws-actions-hint { display: none; } }
#wealth-form input[type="number"]::-webkit-outer-spin-button,
#wealth-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#wealth-form input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Outcomes studio ─────────────────────────────────────────────────────── */
.studio { padding: 22px 24px; }
.studio-grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 28px; }
@media (max-width: 900px) { .studio-grid { grid-template-columns: 1fr; } }
.studio-controls { border-right: 1px solid var(--hairline); padding-right: 24px; }
@media (max-width: 900px) { .studio-controls { border-right: 0; padding-right: 0; } }
.studio-slider { margin-bottom: 10px; }
.studio-slider input[type="range"] { width: 100%; accent-color: var(--accent); height: 22px; }
.studio-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: baseline; }
.studio-canvas { min-height: 380px; }

/* ── Scenario cards: lab-grade presentation ──────────────────────────────── */
/* Grid tracks default to min-width:auto, so one wide child stretched the row
   past the page and clipped the third card. */
.scards .scard { display: flex; flex-direction: column; padding: 20px 20px 18px; min-width: 0; }
.scard h3 { font-size: var(--fs-title); }
.scard-block { border-top: 1px solid var(--hairline); padding-top: 10px; }
.scard-caption { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.scard form { margin-top: auto; padding-top: 14px; }
@media (prefers-reduced-motion: no-preference) {
  .scards .scard { animation: scard-in .5s var(--ease) both; }
  @keyframes scard-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
#pacing-panel { min-height: 120px; }

/* ── Segmented control (radio-backed, no JS needed for state) ────────────── */
.seg { display: inline-flex; border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; gap: 2px; background: var(--bg1); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label, .seg button { border: 0; background: transparent; color: var(--text-soft); font: inherit; font-size: var(--fs-small); line-height: 1; padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.seg label:hover, .seg button:hover { color: var(--text); }
.seg input:checked + label, .seg button[aria-pressed="true"] { background: var(--accent); color: var(--bg0); font-weight: 600; }
.seg input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Breadcrumbs: the trail back up, and visibly a way back ─────────────── */
/* Navigation, not a caption. Read at body size, the links carry a resting
   underline so it is obvious before hovering that they are the way back, and the
   page you are on is stated plainly rather than dressed as a link. */
.crumbs { font-size: var(--fs-body); color: var(--text-dim); line-height: 1.6; margin-bottom: 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: flex; align-items: baseline; min-width: 0; }
/* The separator belongs to the layer that draws, not to the text that is read. */
.crumbs li + li::before { content: "›"; margin: 0 10px; color: var(--text-dim); }
.crumbs a {
  color: var(--text-soft); text-decoration: underline;
  text-decoration-color: var(--accent-line); text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 3px; transition: color .15s ease, text-decoration-color .15s ease;
}
.crumbs a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.crumbs [aria-current="page"] { color: var(--text-muted); }
/* A long client name shortens; it never pushes the trail onto a second line alone. */
.crumbs a, .crumbs [aria-current="page"] { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Allocation legend: the ring's key, and the mix itself ──────────────── */
.alloc-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; margin-top: 12px; padding: 0; list-style: none; }
.alloc-legend li { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--fs-small); }
.alloc-swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; transform: translateY(-1px); }
.alloc-name { color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alloc-val { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .alloc-legend { grid-template-columns: minmax(0, 1fr); } }

/* ── Provenance: a summary line, the full tuple on demand ───────────────── */
.prov { margin-top: 12px; }
.prov > summary { list-style: none; cursor: pointer; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; display: flex; align-items: baseline; gap: 10px; }
.prov > summary::-webkit-details-marker { display: none; }
.prov > summary::before { content: "▸"; font-size: var(--fs-micro); transition: transform .15s ease; }
.prov[open] > summary::before { transform: rotate(90deg); }
.prov > summary:hover { color: var(--text-soft); }
.prov-sum { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--text-soft); }
.prov-grid { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 4px 20px; margin-top: 10px; font-size: var(--fs-small); }
.prov-grid dt { color: var(--text-muted); }
.prov-grid dd { margin: 0; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ── "What your policy changed": one scenario at a time, rail-first ─────── */
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pc-seg { max-width: 100%; }
.pc-panel { min-width: 0; }
.pc-panel + .pc-panel { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-soft); }
.pc-js .pc-panel { display: none; }
.pc-js .pc-panel.is-active { display: block; }
.pc-js .pc-panel + .pc-panel { margin-top: 0; padding-top: 0; border-top: 0; }
.pc-lede { font-size: var(--fs-body); line-height: 1.6; color: var(--text-soft); margin-bottom: 12px; max-width: 78ch; }
.pc-lede strong { color: var(--text); font-weight: 600; }
.pc-lede-movers { color: var(--text-muted); }
.pc-rule { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border-soft); }
.pc-rule-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; }
.pc-rule-body { font-size: var(--fs-body); line-height: 1.65; color: var(--text-soft); }
.pc-move { font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pc-tablewrap { overflow-x: auto; margin-top: 16px; }
.pc-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.pc-table th { text-align: left; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; padding: 0 0 8px; }
.pc-table td { padding: 7px 0; border-top: 1px solid var(--border-soft); color: var(--text); }
.pc-table th.num, .pc-table td.num { text-align: right; }
.pc-table td:first-child, .pc-table th:first-child { padding-right: 12px; }
.pc-dim { color: var(--text-muted); }
.pc-delta { color: var(--text); }
.pc-prev { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border); }
.pc-prev-grid { display: grid; gap: 7px; margin-top: 9px; }
.pc-prev-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 20px; font-size: var(--fs-small); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.pc-prev-name { min-width: 96px; color: var(--text); }
.pc-prev-k { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
@media (max-width: 680px) {
  .pc-rule { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pc-prev-name { min-width: 0; flex-basis: 100%; }
}

/* ── Scenario pills (start the studio from a stored mix) ─────────────────── */
.chip-btn { border: 1px solid var(--hairline); background: transparent; border-radius: 999px; padding: 6px 14px; font-family: var(--sans); font-size: var(--fs-small); color: var(--text-soft); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.chip-btn:hover { color: var(--text); }
.chip-btn:hover { border-color: var(--accent); }
.chip-btn[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.studio-sep { border: 0; border-top: 1px solid var(--hairline); margin: 16px 0 12px; }

/* ── Pacing sandbox: one composed instrument row, inset from the charts ──── */
.pace-card { background: var(--bg1); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; }
.pace-grid { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.pace-field .ws-mini { display: block; margin-bottom: 7px; }
.pace-grid .seg, .pace-grid .input, .pace-grid .btn { height: 38px; box-sizing: border-box; }
.pace-grid .seg { align-items: center; }
.pace-amt-wrap { display: inline-flex; align-items: baseline; gap: 7px; }
.pace-amt-wrap .pace-unit { color: var(--text-soft); font-size: var(--fs-small); }
input.pace-amt { width: 84px; padding: 0 10px; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--fs-body); }
select.pace-sel { width: 104px; padding: 0 10px; }
.pace-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; }
@media (max-width: 720px) { .pace-actions { margin-left: 0; } }
.assumptions summary { cursor: pointer; color: var(--text-soft); font-size: var(--fs-small); list-style: none; }
.assumptions summary::before { content: "▸ "; font-size: var(--fs-micro); }
.assumptions[open] summary::before { content: "▾ "; }
.assumptions table { margin-top: 8px; font-size: var(--fs-small); border-collapse: collapse; }
.assumptions th, .assumptions td { padding: 4px 14px 4px 0; text-align: left; color: var(--text-soft); font-weight: 400; border-bottom: 1px solid var(--hairline); }
.assumptions td.mono { font-variant-numeric: tabular-nums; }
.pace-card .pace-grid { margin-top: 4px; }

/* Intake autosave states — the ack must never lie (visible saving / saved / failed). */
#save-ack.htmx-request > * { display: none; }
#save-ack.htmx-request::before { content: "Saving…"; color: var(--text-muted); }
.q-save-err {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font-size: var(--fs-micro); border-radius: 99px;
  background: var(--amber-bg2); color: var(--amber); border: 1px solid var(--amber);
  white-space: nowrap;
}

/* ── RW-08 staleness + version chips, pipeline rail (UX §4.4/§5.4) ────────────
   One grammar for S1–S20. Amber is a fact, never an alarm (red stays for errors).
   All tokens are existing custom properties — zero new colors/spacing. */
.vchip {
  display: inline-block; padding: 1px 7px; border-radius: 99px;
  font-family: var(--mono); font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  color: var(--text-soft); background: var(--bg3); border: 1px solid var(--border);
  white-space: nowrap;
}
.stale-chip {
  display: inline-block; margin: 2px 6px 2px 0; padding: 2px 9px; border-radius: 99px;
  font-size: var(--fs-micro); font-weight: 500; line-height: 1.5;
  color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber);
}
.stale-chip.pre {  /* honesty label: nothing is wrong, provenance is unknown */
  color: var(--text-muted); background: var(--bg3); border-color: var(--border);
}
/* The node-sized form. A pill is a shape for one line; where the cause is stated
   once elsewhere, the chip states its fact quietly and drops the enclosure. */
.stale-chip.is-compact {
  padding: 0; border: 0; background: none; border-radius: 0;
  font-weight: 400; font-size: var(--fs-small);
}
.stale-chip.pre.is-compact { color: var(--text-muted); }
/* One sentence for the upstream change the rail is waiting on. */
/* Longhand, so a spacing utility on the same element still applies: a `margin: 0`
   shorthand here silently zeroed the top margin and sat the sentence on the card
   above it. A component owns the side it needs, never all four by accident. */
.rail-cause {
  margin-top: 24px; margin-bottom: 12px;
  font-size: var(--fs-body); color: var(--amber);
}
.stale-action {
  display: inline-block; margin-left: 2px; font-size: var(--fs-small); font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.stale-action:hover { text-decoration: underline; }

.pipeline-rail {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 900px) { .pipeline-rail { grid-template-columns: repeat(2, 1fr); } }
.rail-node {
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg2); display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.rail-eyebrow {
  font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.rail-state { display: flex; align-items: center; gap: 6px; }
.rail-dot {
  width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--text-dim); border: 1px solid var(--border-strong);
}
.rail-done .rail-dot { background: var(--accent); border-color: var(--accent); }
.rail-current .rail-dot { background: var(--amber); border-color: var(--amber); }
.rail-actions { margin-top: auto; }

/* ── RW-09 answer-review redesign (UX §3, §7). Zero new custom properties —
   composes existing tokens. Hover-lift lands only on interactive elements
   (summary, a) — the G3.3 rule: nothing inert wears a clickable affordance. */

/* Pipeline context strip: state + one workspace link, above the fold (REQ3-C). */
.context-strip { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg2);
  display: flex; flex-direction: column; gap: 12px; }
.context-lede { font-size: var(--fs-body); color: var(--text-soft); }
.context-nodes { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.context-node { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.context-next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding-top: 12px; border-top: 1px solid var(--border); }
.context-nextlabel { font-size: var(--fs-small); color: var(--text-soft); margin-right: auto; }

/* Attention dot: all filled in, but parked > 0 — amber, never green (G3.4). */
.status-dot.attention { background: var(--amber-bg2); border-color: var(--amber);
  color: var(--amber); font-weight: 600; }

/* Open items: to-discuss + parked, each a jump link to its row. */
.open-items { display: flex; flex-direction: column; gap: 18px; }
.open-group { display: flex; flex-direction: column; }
.open-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg2); color: var(--text);
  transition: border-color .18s var(--ease), transform .18s var(--ease); }
a.open-item:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text); }
.open-item-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.open-item-label { font-size: var(--fs-body); }
.open-item-sec { font-size: var(--fs-small); }

/* Category answer cards (merge the two old disconnected blocks). */
.section-card { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--bg2); overflow: hidden; }
.section-summary { display: flex; align-items: center; gap: 16px; padding: 16px 18px;
  cursor: pointer; list-style: none;
  transition: border-color .18s var(--ease), background .18s var(--ease); }
.section-summary::-webkit-details-marker { display: none; }
summary.section-summary:hover { background: var(--accent-bg); }
.section-card[open] > .section-summary { border-bottom: 1px solid var(--border); }
.section-summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--border-focus); }
.section-summary-main { flex: 1; min-width: 0; }
.section-counts { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.section-chevron { color: var(--text-muted); font-size: var(--fs-small); transition: transform .18s var(--ease); }
.section-card[open] .section-chevron { transform: rotate(180deg); }
.section-card-body { padding: 6px 18px 16px; }

/* Rendered answer rows. */
.answer-rows { display: flex; flex-direction: column; }
.answer-row { padding: 14px 0; border-bottom: 1px solid var(--border-soft); }
.answer-row:last-child { border-bottom: none; }
.answer-q { font-size: var(--fs-body); color: var(--text-soft); margin-bottom: 6px; }
.answer-v { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.answer-eyebrow { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); }
.answer-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.answer-chip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
  font-size: var(--fs-small); background: var(--bg3); border: 1px solid var(--border-soft); color: var(--text); }
.answer-quote { font-size: var(--fs-body); color: var(--text); line-height: 1.5;
  overflow-wrap: anywhere; }
.answer-figure { font-size: var(--fs-body); color: var(--text); }
.answer-empty { font-size: var(--fs-body); color: var(--text-muted); }
.answer-ranked { margin: 0; padding-left: 20px; display: inline-block; }
.answer-ranked li { font-size: var(--fs-body); color: var(--text); }
.answer-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 6px; }
.answer-note { font-size: var(--fs-small); color: var(--text-soft); overflow-wrap: anywhere; }

/* Lazy-body skeleton (no shimmer-as-personality — a calm placeholder). */
.skeleton-row { height: 14px; margin: 12px 0; border-radius: var(--r-sm);
  background: var(--bg3); }

/* ── RW-17 client history: timeline, diffs, version banner (UX §4.1–§4.3) ─────
   Same token vocabulary as the RW-08 chips; amber banner = fact, not alarm. */
/* The toolbar is one surface, not floating controls: search on the left (what am
   I looking for), filters on the right (what am I looking at), the date window
   quiet underneath. */
.tl-bar {
  background: var(--bg1); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 16px; margin-bottom: 24px;
}
.tl-bar-row { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 20px; }
.tl-bar-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
/* The search keeps its own measure so the filters stay on the same line and to
   the right; below ~900px the row wraps and each half takes the full width. */
.tl-search-form { display: flex; align-items: center; gap: 8px; flex: 0 1 340px; min-width: 220px; }
.tl-search { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); padding: 8px 12px; }
.tl-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; justify-content: flex-end; }
.tl-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-date-label { font-size: var(--fs-small); color: var(--text-muted); }
/* input[type=date] is a type selector and outranks a bare class — name the
   element so the field sizes to its content instead of the whole row. */
input.tl-date { width: auto; flex: 0 0 auto; font-size: var(--fs-small); padding: 6px 10px; }
.tl-filter {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-small);
  color: var(--text-soft); background: var(--bg0); border: 1px solid var(--border);
  text-decoration: none; white-space: nowrap;
}
.tl-filter:hover { color: var(--text); border-color: var(--border-strong); }
.tl-filter.active { color: var(--text); background: var(--bg3); border-color: var(--text-muted); }
/* The feed fills the page's own measure — it used to cap itself at 860px inside a
   shell with no max-width, which is what pinned the whole page to the left. */
.tl-feed { width: 100%; }
.tl-day { margin-top: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--border); padding-bottom: 4px;
  color: var(--text-muted); font-size: var(--fs-small); letter-spacing: 0.04em; }
/* A history is read by scanning: rows are one line where they can be, and the
   actions sit on the same line as the claim rather than under it. */
/* A history is a table, not a stack of paragraphs: fixed columns for when and
   what kind, the claim in its own column so every claim starts at the same x,
   and who/what-you-can-do closing the row on the right. The row bleeds 8px into
   the gutter so its hover reads as a full row without moving the text (longhand:
   `margin: 0 -8px` would zero the vertical margins — DESIGN-LANGUAGE §2). */
.tl-event {
  display: grid; grid-template-columns: 44px 104px minmax(0, 1fr) auto;
  column-gap: 16px; align-items: baseline;
  padding: 9px 8px; margin-left: -8px; margin-right: -8px;
  border-bottom: 1px dotted var(--border); border-radius: var(--r-sm);
}
.tl-event:hover { background: var(--bg1); }
.tl-event.quiet { opacity: 0.65; }
.tl-time { color: var(--text-muted); font-size: var(--fs-small); }
.tl-kind { font-size: var(--fs-micro); letter-spacing: 0.09em; color: var(--text-muted);
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.tl-main { min-width: 0; }
.tl-claim { font-size: var(--fs-body); color: var(--text); }
.tl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  justify-self: end; text-align: right; }
.tl-actor { font-size: var(--fs-small); color: var(--text-soft); white-space: nowrap; }
.tl-prov { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px;
  align-items: baseline; font-size: var(--fs-small); }
/* The diff opens under the whole row, not inside the claim column. */
.tl-event > .tl-diff-slot { grid-column: 1 / -1; }
@media (max-width: 720px) {
  .tl-event { grid-template-columns: 44px minmax(0, 1fr); }
  .tl-kind { grid-column: 2; }
  .tl-main, .tl-side { grid-column: 2; }
  .tl-side { align-items: flex-start; justify-self: start; text-align: left; }
  .tl-actions { justify-content: flex-start; }
}
.tl-pin-form { display: inline; }
.tl-pin-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.tl-diff-slot:not(:empty) { margin-top: 8px; }
.tl-diff-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.tl-diff-table th { text-align: left; padding: 5px 10px 5px 0; color: var(--text-soft);
  font-weight: 500; vertical-align: top; width: 38%; }
.tl-diff-table td { padding: 5px 10px 5px 0; vertical-align: top; }
.tl-diff-row { padding: 5px 0; font-size: var(--fs-body); }
.tl-diff-block { padding: 5px 9px; border-radius: 6px; margin: 3px 0; font-size: var(--fs-small); }
.tl-diff-block.old { background: var(--bg3); color: var(--text-muted); text-decoration: line-through; }
.tl-diff-block.new { background: var(--green-bg, var(--bg1)); }
.tl-empty { padding: 40px 0; text-align: center; color: var(--text-soft);
  font-size: var(--fs-body); }
.tl-note { margin-top: 16px; font-size: var(--fs-small); color: var(--text-muted); }
/* One footer, same shape on every page: what you are looking at on the left,
   where you can go on the right. Directions that lead nowhere are disabled, not
   removed, so the chrome never changes shape under the reader. */
.tl-footer { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 20px;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.tl-count { font-size: var(--fs-small); color: var(--text-muted); }
.tl-pager { display: flex; align-items: center; gap: 12px; }
.tl-page-no { font-size: var(--fs-small); color: var(--text-muted); min-width: 64px;
  text-align: center; }
.btn.is-disabled { pointer-events: none; opacity: 0.35; }
.version-banner {
  padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: var(--fs-body);
  color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber);
}
.version-banner.current { color: var(--text-soft); background: var(--bg3); border-color: var(--border); }
.tl-banner-actions { margin-left: 10px; display: inline-flex; gap: 12px; }
.tl-recent { margin-top: 8px; }
/* The workspace digest carries no kind column — three columns, not four. */
.tl-event.is-compact { grid-template-columns: 92px minmax(0, 1fr) auto; padding: 7px 8px; }

/* ── Policy rails as a document (approved) and grouped fields (draft) ─────────
   The central artifact reads as sections with aligned values, never a flat
   form dump ("Risk tolerance 1to10" era). */
.rails-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px; }
@media (max-width: 860px) { .rails-grid { grid-template-columns: 1fr; } }
.rails-group { min-width: 0; }
.rails-summary { font-size: var(--fs-body); color: var(--text-soft); max-width: 70ch; }
.rails-doc .prov-grid dd { font-variant-numeric: tabular-nums; }
.rails-prose p { font-size: var(--fs-body); color: var(--text-soft); max-width: 70ch; }

/* ── Motion: swapped content settles, never pops (prefers-reduced-motion aware) ── */
@media (prefers-reduced-motion: no-preference) {
  .htmx-added { opacity: 0; }
  .htmx-settling { opacity: 1; transition: opacity .18s var(--ease); }
}

/* ── Stat strip: composed stat card (client workspace + respondent status).
     Eyebrow label over a metric value, hairline dividers between stats,
     compact ring on the progress stat. Colour is state: the amber flag
     appears only when a count needs attention; zero values recede. ── */
.card.stat-strip { padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 16px; }
.stat-strip .stat { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 4px 24px; }
.stat-strip .stat:first-child { padding-left: 0; }
.stat-strip .stat:last-child { padding-right: 0; }
.stat-strip .stat + .stat { border-left: 1px solid var(--hairline); }
.stat-strip .stat-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.stat-strip .stat-value { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; font-family: var(--mono); font-size: var(--fs-metric); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.stat-strip .stat-value.is-zero { color: var(--text-muted); }
.stat-strip .stat-flag { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--amber); }

@media (max-width: 640px) {
  .card.stat-strip { display: grid; grid-template-columns: 1fr 1fr; row-gap: 16px; padding: 16px 18px; }
  .stat-strip .stat, .stat-strip .stat + .stat { border-left: 0; padding: 0; }
  .stat-strip .stat:nth-child(odd) { padding-right: 16px; }
  .stat-strip .stat:nth-child(even) { border-left: 1px solid var(--hairline); padding-left: 16px; }
}

/* Numeric alignment for .mdt tables, mirroring .pc-table's .num convention. */
.mdt th.num, .mdt td.num { text-align: right; }
.mdt td.num .input { text-align: right; }

/* .ta-table: the pacing-assumptions table (templates/ta_assumptions/): eight
   columns, first column prose; give it room and let the card scroll it. */
.ta-table { min-width: 720px; }
.ta-table th:first-child, .ta-table td:first-child { white-space: nowrap; }

/* Saved views (scenarios/run.html + outcome_views/_shelf.html, RW-18).
   .shelf-row: one saved view as a hairline-separated row (not a nested card).
   .save-view: the save affordance as one composed group under the rows. */
.shelf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.shelf-row:first-child { padding-top: 0; }
.shelf-row:last-child { border-bottom: 0; padding-bottom: 0; }
.shelf-meta { margin-top: 4px; font-size: var(--fs-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.save-view { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.save-view .ws-mini { margin-bottom: 8px; }
.save-view-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.save-view-bar .input { flex: 1 1 220px; max-width: 340px; }
.save-view-bar .btn { flex: none; }

/* Ranked choice (intake): tap to rank, the chip carries the order */
.rank-widget { display: flex; flex-direction: column; gap: 8px; }
.rank-row { display: flex; min-width: 0; }
.rank-row > * { flex: 1; min-width: 0; }
.rank-pick { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-soft); font-size: var(--fs-body); text-align: left; cursor: pointer; transition: all .18s var(--ease); }
.rank-pick:hover { border-color: var(--border-strong); color: var(--text); }
.rank-slot { width: 22px; height: 22px; flex: none; border: 1px dashed var(--border-strong); border-radius: 999px; }
.rank-picked { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border: 1px solid var(--accent); background: var(--accent-bg); border-radius: var(--r-md); }
.rank-chip { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.rank-name { font-size: var(--fs-body); min-width: 0; }
.rank-picked .rank-name { color: var(--text); }
.rank-tools { margin-left: auto; display: flex; gap: 4px; flex: none; }
.rank-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text-soft); font-size: var(--fs-body); cursor: pointer; transition: all .18s var(--ease); }
.rank-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rank-btn:disabled { opacity: .35; cursor: default; }
.rank-hint { margin-bottom: 8px; }

/* ── Arrival highlight: a redirect fragment or data-arrive swap lands here (ui.js).
   A brief wash of accent over the destination, background only: no border, no
   shadow, no movement. Runs under reduced motion too (a colour fade is not motion). ── */
.arrive { position: relative; }
.arrive::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent-bg2);
  pointer-events: none;
  animation: arrive-fade 1.2s ease-out forwards;
}
@keyframes arrive-fade {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Tension groups on the policy review: one details per source group. */
.tension-group { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg1); margin-bottom: 8px; }
.tension-group > summary.tension-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; }
.tension-group > summary.tension-head::-webkit-details-marker { display: none; }
.tension-group > summary.tension-head:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.tension-group > summary.tension-head::after { content: "\203A"; color: var(--text-muted); transition: transform .18s var(--ease); }
.tension-group[open] > summary.tension-head::after { transform: rotate(90deg); }
.tension-title { font-size: var(--fs-body); font-weight: 500; }
.tension-count { margin-left: auto; }
.tension-body { padding: 0 16px 4px; }
.tension-body .alert { margin-bottom: 12px; }
/* .btn and .dot set their own display, which beats the UA [hidden] rule. */
.tension-group [hidden] { display: none !important; }

/* Share panel: the revealed link + code sit inside a participants-table cell.
   The wrapper contributes no intrinsic width (contain: inline-size), so a long
   URL can never stretch the table past its card (section 7 containment); the
   .share-val fields scroll inside themselves as they already do. */
.mdt td.share-reveal { width: 100%; }
.share-reveal-wrap { contain: inline-size; }

/* ── Client board: recommendation, allocation visual, projection ──────────────
   Asset sleeve palette as CSS variables (mirrors the report charts; same hues
   in both themes). */
:root {
  --asset-cash:#7C766B; --asset-public_equity:#8AA8DD; --asset-private_equity:#E5B872;
  --asset-liquid_fi:#7CC299; --asset-private_credit:#A697D9; --asset-re_infra:#B5835A;
  --asset-decorrelated:#D88989;
}

/* Recommendation hero: hairline-separated evidence lines */
.why-list { list-style: none; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; }
.why-list li { padding: 8px 0; color: var(--text-soft); }
.why-list li + li { border-top: 1px solid var(--border-soft); }

/* Chosen-path allocation: donut + legend */
.mix-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; align-items: center; }
@media (max-width: 640px) { .mix-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.donut-wrap { position: relative; width: 132px; flex: none; }
.donut { display: block; width: 132px; height: 132px; }
.donut circle { fill: none; stroke-width: 14; }
.donut .donut-track { stroke: var(--bg3); }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.donut-value { font-family: var(--mono); font-size: var(--fs-metric); color: var(--text); font-variant-numeric: tabular-nums; }
.donut-hint { font-size: var(--fs-micro); color: var(--text-muted); max-width: 80px; line-height: 1.3; }
.mix-legend { margin-top: 0; }

/* Stacked mix bars (fallback for the chosen path; slim variant for alternatives) */
.mixbar { display: flex; width: 100%; height: 14px; border-radius: 4px; overflow: hidden; background: var(--bg3); }
.mixbar span { display: block; height: 100%; }
.mixbar-slim { height: 6px; border-radius: 3px; opacity: .85; }

/* Alternatives: clearly quieter */
.alt-list { border-top: 1px solid var(--border-soft); padding-top: 16px; }
.alt-row + .alt-row { margin-top: 16px; }
.alt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.alt-name { color: var(--text-soft); min-width: 0; }
.alt-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Projection band chart */
.proj-chart { display: block; width: 100%; height: auto; }
.proj-chart .proj-text { font-family: var(--mono); font-size: var(--fs-micro); fill: var(--text-muted); }
.proj-grid { stroke: var(--border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.proj-band { fill: var(--accent-bg3); stroke: none; }
.proj-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
/* viewBox scaling shrinks SVG text on narrow screens; 16 user units renders at
   roughly the micro size there, so the rendered scale stays on the six tokens. */
@media (max-width: 640px) { .proj-chart .proj-text { font-size: 16px; } }