/* ════════════════════════════════════════════════════════════════════
   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; --w-shell:1600px;
}

/* ── 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 ── */
/* WP18 / DESIGN-LANGUAGE §1: six sizes, from the tokens, no exceptions. The law said
   30px for display and the product shipped 64px on the dashboard, 40px on every page
   title and 24px on the optimizer metrics: eight sizes in use where six are allowed,
   and the two loudest were not on the scale at all. The clamp() ladders are gone with
   them, because a heading that changes size with the viewport cannot be pinned by a
   test and reads as a marketing gesture on a working screen. */
h1, .h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
h2, .h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.1; margin: 0; }
h3, .h3 { font-family: var(--serif); font-weight: 500; font-size: var(--fs-title); line-height: 1.3; margin: 0; }
.lede { font-size: var(--fs-body); 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%; max-width: var(--w-shell); 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); }
.metric .metric-unit { font-family: var(--sans); font-size: var(--fs-small); color: var(--text-muted); }

/* ── 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); }
.inline-form { display: inline-flex; }
.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; }
.badge.dim { opacity: .6; }

/* ── Notices (the one message component: info / ok / warn / error / insight) ── */
.alert { display: flex; flex-direction: column; gap: 6px; 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); }
.alert.insight { border-color: var(--accent); background: var(--accent-bg2); }
.notice-title { display: block; font-weight: 600; }
.notice-text { color: var(--text-soft); }
.notice-actions { display: flex; gap: 10px; margin-top: 4px; }

/* ── Toasts (ephemeral flash messages) ── */
.toast-stack { position: fixed; top: 76px; right: 20px; z-index: 90; display: flex; flex-direction: column; gap: 10px; max-width: min(420px, calc(100vw - 40px)); }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); border-left: 4px solid var(--accent); background: var(--bg2); box-shadow: var(--shadow-medium); font-size: var(--fs-body); animation: toast-in .22s var(--ease-out); }
.toast--info { border-left-color: var(--blue); }
.toast--ok { border-left-color: var(--green); }
.toast--warn { border-left-color: var(--amber); }
.toast--error { border-left-color: var(--red); }
.toast-body { flex: 1; }
.toast-close { border: none; background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast-close:hover { color: var(--text); }
.toast-leaving { opacity: 0; transform: translateX(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Dismissible one-time hints (remembered per user) ── */
.hint-once { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--r-md); margin-bottom: 12px; }
.hint-once .hint { margin-top: 0; margin-bottom: 0; flex: 1; }
.hint-once-close { border: none; background: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.hint-once-close:hover { color: var(--text); }

/* ── 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; padding: 14px 24px; background: var(--glass); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
/* The glass line spans the screen, the content holds one centered column so ultra-wide
   monitors do not push the brand and the account menu to opposite corners. */
.topbar-inner { max-width: var(--w-shell); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 8px; }
.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); }
/* A wrapped row is ONE card: the frame sits on the wrap, so the overflow menu
   lives inside it like the respondent rows on the client page, while the link
   keeps its full click surface beside the menu. */
.hub-row-wrap { display: flex; align-items: center; gap: 2px; min-width: 0; padding-right: 10px;
  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-wrap:hover { border-color: var(--accent); transform: translateY(-1px); }
.hub-row-wrap > .hub-row { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: var(--r-lg); }
.hub-row-wrap > .hub-row:hover { border-color: transparent; transform: none; }
.hub-row-actions { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; }
.hub-row-actions > .btn { align-self: center; }
/* Row actions live behind one overflow trigger (the same menu the respondent rows
   use), so a row reads as a row and not a toolbar. The trigger is always visible,
   in the muted tone, and only strengthens on its own hover. */
.hub-row-menu { align-self: center; flex: 0 0 auto; }
.hub-row-menu > summary { list-style: none; color: var(--text-dim); }
.hub-row-menu > summary:hover { color: var(--text); }
.hub-row-menu > summary::-webkit-details-marker { display: none; }
.hub-row-menu .acct-menu { right: 0; left: auto; min-width: 200px; }
.hub-row-menu .acct-menu form { display: contents; }
/* While a row's menu is open, lift the whole wrap above the sibling rows below it. */
.hub-row-wrap:has(.hub-row-menu[open]) { position: relative; z-index: 30; }
/* Rename at the client name: the pencil sits beside the h2, its popover carries
   one input and one button. Left-aligned under the name, not right-aligned. */
.client-name-row { display: flex; align-items: center; gap: 10px; }
.client-rename > summary { list-style: none; }
.client-rename > summary::-webkit-details-marker { display: none; }
.client-rename .acct-menu { left: 0; right: auto; min-width: 300px; padding: 12px; font-family: "Inter", -apple-system, sans-serif; font-size: var(--fs-body); font-weight: 400; letter-spacing: normal; }
.rename-menu input { width: 100%; margin: 4px 0 10px; }
.rename-actions { display: flex; gap: 8px; }
.rename-menu .hint { margin-top: 8px; font-weight: 400; }
/* The per-group "load more" control, and the archived section it also serves. */
.eng-more { display: flex; justify-content: center; padding-top: 4px; }
.eng-archived > summary { cursor: pointer; font-size: var(--fs-small); color: var(--text-muted); letter-spacing: .02em; }
.eng-archived[open] > summary { color: var(--text-soft); }
.hub-row.is-archived { background: transparent; border-style: dashed; }
.hub-row.is-archived strong { color: var(--text-soft); }
.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-pop > summary: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; }

/* WP18a (MOO-246) retired the hand rolled comparison. The diff-first dimension
   rows, the binned distribution strip and the option percentage bars were
   .dist-* and .opt-bar-*: divs positioned by inline percentages, with marker
   labels landing on the tick values under them. They are ECharts islands now
   (strip, dmap, optbar), so every rule that styled them is gone with the markup
   rather than lingering as a second way to draw the same thing. The consensus
   lockup below stays: an aligned dimension deserves a composition, not a
   degenerate one dot chart. */

/* 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 .status-dot: 30px, the member's token, 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-title); color: var(--text); line-height: 1.3; min-width: 0; }
/* A figure keeps the mono face at the same size; a sentence (a categorical answer the
   family agrees on) reads as a sentence, never as a figure. */
.consensus-value.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.consensus-value.is-text { font-family: var(--sans); font-size: var(--fs-body); }

.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; }
.dd-soft { color: var(--text-muted); font-style: italic; }
.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; }
}

/* ── 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; }
/* Section bar: one sticky line inside the scrolling preview card. */
.qb-pv-bar { position: sticky; top: -18px; z-index: 2; display: flex; align-items: center; gap: 8px; margin: -6px -6px 16px; padding: 8px 6px; background: var(--bg2); border-bottom: 1px solid var(--border-soft); }
.qb-pv-step { flex: none; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--bg1); color: var(--text-soft); font-size: 18px; line-height: 1; cursor: pointer; }
.qb-pv-step:hover { color: var(--text); border-color: var(--border-strong); }
.qb-pv-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border-soft); border-radius: 999px; background: var(--bg1); padding: 3px 6px 3px 10px; }
.qb-pv-pos { flex: none; font-family: var(--serif); font-size: var(--fs-micro); color: var(--text-soft); white-space: nowrap; }
.qb-pv-select { flex: 1; min-width: 0; border: 0; background: transparent; font-size: var(--fs-small); color: var(--text); padding: 4px 0; cursor: pointer; }
.qb-pv-select:focus { outline: none; }
/* Vertical list for the full preview page. */
.qb-pv-nav { display: flex; flex-direction: column; gap: 6px; }
.qb-pv-navitem { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-soft); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 8px 10px; text-decoration: none; background: var(--bg1); }
.qb-pv-navitem:hover { color: var(--text); border-color: var(--border-strong); }
.qb-pv-navitem.is-current { border-color: var(--accent); color: var(--text); background: var(--accent-bg2); }
.qb-pv-navnum { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--bg3, var(--border-soft)); font-family: var(--serif); font-size: var(--fs-micro); color: var(--text-soft); }
.qb-pv-navitem.is-current .qb-pv-navnum { background: var(--accent); color: var(--on-accent); }
.qb-pv-navai { font-size: 9px; letter-spacing: .08em; font-weight: 700; color: var(--accent); margin-left: auto; }
/* The full preview page: navigator beside the client rendering. */
.qb-pvpage-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.qb-pvpage-nav { position: sticky; top: 16px; }
.qb-pvpage-card { max-height: calc(100vh - 32px); overflow: auto; }
.qb-pvpage-card .qb-pv-bar { display: none; }
@media (max-width: 900px) { .qb-pvpage-layout { grid-template-columns: 1fr; } .qb-pvpage-nav { display: none; } .qb-pvpage-card .qb-pv-bar { display: flex; } }
.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); }
/* Optional one-field capture inside a confirm dialog (the revise reason). */
.ql-modal-field { display: block; margin-top: 16px; }
.ql-modal-field > span { display: block; font-size: var(--fs-small); color: var(--text-muted); margin-bottom: 8px; }
.ql-modal-error { margin-top: 8px; font-size: var(--fs-small); color: var(--amber); }
/* The same field, plain and visible, for a page whose JavaScript never arrived: the
   server requires it either way, so it must be fillable either way. Hidden before
   paint when scripting is alive, because the dialog then collects it instead. */
.confirm-fallback { display: block; margin-top: 12px; }
[data-js] .confirm-fallback { display: none; }
@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); }
/* MOO-200: what a question's answer feeds. One row, quiet until it is narrowed. */
.qb-feeds { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 4px; padding-left: 9px; }
.qb-feeds-label { font-size: var(--fs-small); color: var(--text-dim); white-space: nowrap; }
.qb-feeds-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qb-feeds-opt { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.qb-feeds-opt input { width: 15px; height: 15px; 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; }
/* Section navigator: sticky inside the scrolling preview card. */
.qb-pv-nav { position: sticky; top: -18px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin: -6px -6px 14px; padding: 8px 6px; background: var(--bg2); border-bottom: 1px solid var(--border-soft); }
.qb-pv-navitem { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-soft); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px 4px 5px; text-decoration: none; background: var(--bg1); white-space: nowrap; }
.qb-pv-navitem:hover { color: var(--text); border-color: var(--border-strong); }
.qb-pv-navitem.is-current { border-color: var(--accent); color: var(--text); background: var(--accent-bg2); }
.qb-pv-navnum { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--bg3, var(--border-soft)); font-family: var(--serif); font-size: var(--fs-micro); color: var(--text-soft); }
.qb-pv-navitem.is-current .qb-pv-navnum { background: var(--accent); color: var(--on-accent); }
.qb-pv-navai { font-size: 9px; letter-spacing: .08em; font-weight: 700; color: var(--accent); }
.qb-pv-nav.is-vertical { position: static; flex-direction: column; align-items: stretch; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; padding: 0; background: transparent; border: 0; }
.qb-pv-nav.is-vertical .qb-pv-navitem { white-space: normal; border-radius: var(--r-md); padding: 8px 10px; }
/* The full preview page: navigator beside the client rendering. */
.qb-pvpage-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; }
.qb-pvpage-nav { position: sticky; top: 16px; }
.qb-pvpage-card { max-height: calc(100vh - 32px); overflow: auto; }
.qb-pvpage-card .qb-pv-bar { display: none; }
@media (max-width: 900px) { .qb-pvpage-layout { grid-template-columns: 1fr; } .qb-pvpage-nav { display: none; } .qb-pvpage-card .qb-pv-bar { display: flex; } }
.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-untranslated::placeholder { color: var(--amber); font-style: italic; opacity: .8; }
.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); }

/* Behaviour toggles as quiet pills; the checked state reads without hunting the box. */
.qb-req { border: 1px solid var(--border-soft); border-radius: 999px; padding: 5px 12px; background: var(--bg2); transition: border-color .15s var(--ease), color .15s var(--ease); }
.qb-req:hover { border-color: var(--border-strong); color: var(--text); }
.qb-req:has(input:checked) { border-color: var(--accent); color: var(--text); background: var(--accent-bg2); }
.qb-req input { width: 14px; height: 14px; }

/* One routing drawer per question: a stated summary, controls only on demand. */
.qb-settings { margin: 6px 0 2px 9px; border-top: 1px solid var(--hairline); }
.qb-settings-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; padding: 8px 0 6px; font-size: var(--fs-small); color: var(--text-soft); }
.qb-settings-summary::-webkit-details-marker { display: none; }
.qb-settings-summary::before { content: "›"; color: var(--text-muted); transition: transform .15s var(--ease); display: inline-block; }
.qb-settings[open] > .qb-settings-summary::before { transform: rotate(90deg); }
.qb-settings-summary:hover { color: var(--text); }
.qb-settings-title { font-weight: 500; color: var(--text-soft); }
.qb-settings-body { padding: 4px 0 10px 16px; display: grid; gap: 14px; }
.qb-settings-cap { display: block; font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.qb-settings .qb-feeds { padding-left: 0; display: block; margin-top: 0; margin-bottom: 0; }
.qb-concepts-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; }
.qb-concept-opt { display: inline-flex; align-items: baseline; gap: 7px; font-size: var(--fs-small); color: var(--text-soft); cursor: pointer; }
.qb-concept-opt input { width: 14px; height: 14px; accent-color: var(--accent); transform: translateY(2px); }
.qb-concept-opt:hover { color: var(--text); }
.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); }
@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; }
/* The result side: a chart well, outcome tiles, one row of key figures. */
.studio-well { background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 14px 10px 6px; }
.studio-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .studio-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.studio-tile { background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.studio-tile .metric-label { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.studio-tile .metric-value { font-family: var(--mono); font-size: var(--fs-metric); color: var(--text); line-height: 1.1; }
.studio-figures { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.studio-figures .badge { font-family: var(--mono); }

/* ── 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; }
/* A seg built from radios inherits the ring from the rule above. A seg built from
   submit buttons (which is what a decision is, because each verb posts its own
   value) inherits nothing: those buttons carried .btn until WP18a and lost the ring
   with it. Same ring, so a keyboard walk shows where it is. */
.seg button:focus-visible { 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); } }

/* The allocation list on a board card: one compact row per sleeve, largest first. The
   name takes the free width and may wrap, the share and the amount keep their own
   width and never wrap, so the list fits a three-column card and a phone alike (no
   fixed min-width anywhere, unlike the table it replaced). */
.alloc-list { margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.alloc-row { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 13px; border-top: 0.5px solid var(--border-soft); }
.alloc-row:first-child { border-top: 0; }
.alloc-row .alloc-name { flex: 1 1 0; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.alloc-row .alloc-val { flex: none; margin-left: 0; width: 3.5em; text-align: right; white-space: nowrap; }
.alloc-row .alloc-amt { flex: none; min-width: 5.5em; margin-left: 4px; text-align: right; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── 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(140px, max-content) minmax(0, 1fr); gap: 10px 28px; margin-top: 12px; font-size: var(--fs-small); padding: 16px 18px; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.prov-grid dt { color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; align-self: center; }
.prov-grid dd { margin: 0; color: var(--text); 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); }
/* The no-op panel's answer to "so what would move a weight?": a grouped block, set off
   from the green sentence above it the way sibling policy-change panels are set off
   from each other, rather than loose text held apart by a margin utility. */
.pc-noop { padding-top: 14px; border-top: 1px solid var(--border-soft); }
.pc-noop-list { margin-bottom: 0; padding-left: 18px; font-size: var(--fs-small); color: var(--text-soft); }
.pc-noop-list li { padding: 1px 0; }
@media (max-width: 680px) {
  .pc-rule { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .pc-prev-name { min-width: 0; flex-basis: 100%; }
}

/* ── What holds the ceiling down: the rails and their break-even settings ──── */
.rail-lever { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-body); color: var(--text-soft); }
.rail-lever-name { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; }
.proj-assumption { display: block; margin-top: 4px; }
@media (max-width: 680px) {
  .rail-lever { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ── 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 { min-width: 104px; width: auto; max-width: 100%; padding: 0 28px 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; }
/* A gated step posts, so its chip action is a button inside a form. It reads as the
   same link-weight action as its neighbours: the form takes no space of its own. */
.stale-action-form { display: inline; }
button.stale-action {
  padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit;
  line-height: inherit;
}

.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; }
/* The group's own one-line explanation stays secondary to the values it heads. */
.rails-prose p.hint { font-size: var(--fs-small); color: var(--text-muted); }

/* ── The rail row's provenance stack (MOO-201): label, then the basis, then the
     model's proposal, then the open points about this rail. Quiet by default,
     because the number is what the advisor reads first; amber only where the
     honest answer is that nothing was derived, since that is the state the screen
     used to express by staying silent. ── */
.rail-derived { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px;
  max-width: 60ch; }
.rail-prov { font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px;
  text-transform: uppercase; letter-spacing: .06em; }
.rail-prov[data-rail-state="not_answered"],
.rail-prov[data-rail-state="not_derived_by_method"] { color: var(--amber); }
.rail-proposal { font-size: var(--fs-small); color: var(--text-soft); margin-top: 4px; }
.rail-point { border-left: 2px solid var(--border); padding-left: 12px; }
.rail-point .input { margin-top: 4px; }

/* ── 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; align-items: center; gap: 10px; max-width: 480px; }
.save-view-bar .input { flex: 1; min-width: 0; }
.save-view-bar .btn { flex: 0 0 auto; }
.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; }

/* ── Advisor publish panel ──────────────────────────────────────────────── */
/* The publish form reads as two columns of one decision each: what the client
   sees (structured choices) and the advisor's own words (prose). One column
   again under 900px, choices first. */
.pub-grid { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 8px 48px; }
@media (max-width: 900px) { .pub-grid { grid-template-columns: 1fr; } }
.pub-col-title { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 500; margin-bottom: 14px; }
.pub-grid .field select.input, .pub-grid .field textarea.input { width: 100%; }
.pub-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.pub-foot .hint { max-width: 60ch; }

.q-group + .q-group { border-top: 1px solid var(--border-soft); padding-top: 20px; }

/* Personal access: people and their controls sit on one optical middle line,
   actions flush right, never wrapping into a ragged second row. */
.access-table td { vertical-align: middle; }
.access-table td:last-child { text-align: right; }
.access-table td:last-child .row { justify-content: flex-end; flex-wrap: nowrap; }
.access-table .person-id { align-items: center; }

/* ── Client board, the page ─────────────────────────────────────────────── */
.board { --board-w: 980px; min-height: 100vh; background: var(--bg0, var(--bg1)); }
.board-mast { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg1) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-soft); }
.board-mast-inner { max-width: var(--board-w); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.board-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: var(--fs-body); letter-spacing: .02em; }
.board-brand .compass-mark { font-size: 18px; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; }
.board-mast-actions { display: flex; align-items: center; gap: 8px; }
.board-print { display: inline-flex; align-items: center; gap: 7px; }
.board-print .ic { vertical-align: 0; }
.board-main { max-width: var(--board-w); margin: 0 auto; padding: 40px 24px 80px; }
.board-hero { padding: 24px 0 28px; }
.board-hero h1 { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); line-height: 1.1; margin-top: 6px; margin-bottom: 10px; letter-spacing: -.01em; }
.board-hero-meta { color: var(--text-soft); font-size: var(--fs-small); margin-bottom: 12px; }
.board-hero .lede { max-width: 62ch; }
.board-glance { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 8px; margin-bottom: 40px; }
@media (max-width: 960px) { .board-glance { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.board-tile { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.board-tile-accent { background: var(--accent-bg); border-color: var(--accent-line); }
.board-tile-label { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.board-tile-value { font-family: var(--mono); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.1; color: var(--text); }
.board-tile-value.serif { font-family: var(--serif); }
.board-tile-sub { font-size: var(--fs-small); color: var(--text-soft); }
.board-neg { color: var(--red); }
.board-tiles-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 640px) { .board-tiles-3 { grid-template-columns: 1fr; } }
.board-section { margin-top: 0; margin-bottom: 44px; }
.board-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.board-section-head h2 { font-family: var(--serif); font-size: clamp(20px, 2.4vw, 26px); margin-top: 0; margin-bottom: 0; letter-spacing: -.005em; }
.board-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: var(--serif); font-size: var(--fs-small); font-weight: 600; flex: none; }
.board-card { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 24px 26px; }
.board-card-accent { border-color: var(--accent-line); box-shadow: var(--shadow-glow, none); }
.board-prose { font-size: var(--fs-title); line-height: 1.7; max-width: 68ch; margin-top: 0; margin-bottom: 0; }
.board-callout { margin-top: 16px; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--accent-bg2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.board-callout p { margin-top: 4px; margin-bottom: 0; color: var(--text-soft); }
.board-rec-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.board-rec-grid .alloc-legend { grid-template-columns: minmax(0, 1fr); gap: 6px 18px; }
.board-legend-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 22px; }
@media (max-width: 760px) { .board-legend-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .board-rec-grid { grid-template-columns: 1fr; } }
.board-rec-name { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.1; margin-top: 4px; }
.board-note { padding: 16px 18px; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.board-note .board-prose { font-size: var(--fs-body); }
.board-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .board-insights { grid-template-columns: 1fr; } }
.board-insight { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 16px 18px; }
.board-insight-figure { font-family: var(--mono); font-size: var(--fs-metric); color: var(--accent); line-height: 1.1; white-space: nowrap; }
.board-insight p { margin-top: 2px; margin-bottom: 0; color: var(--text-soft); line-height: 1.55; }
.board-chart { width: 100%; }
.board-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 860px) { .board-paths { grid-template-columns: 1fr; } }
.board-path { background: var(--bg2); border: 1px solid var(--border-soft); border-radius: var(--r-lg); padding: 18px 18px 14px; min-width: 0; }
.board-path.is-recommended { border-color: var(--accent-line); background: var(--accent-bg); }
.board-path.is-reference { opacity: .85; }
.board-path h3 { font-family: var(--serif); font-size: var(--fs-metric); margin-top: 0; margin-bottom: 0; }
.board-path-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.board-path-metrics > div { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
.board-path-metrics .board-tile-label { min-height: 2.4em; display: flex; align-items: flex-end; }
.board-path-value { font-family: var(--mono); font-size: var(--fs-title); color: var(--text); }
.board-donut-wrap { position: relative; }
.board-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.board-donut-value { font-family: var(--mono); font-size: var(--fs-metric); color: var(--text); line-height: 1; }
.board-donut-hint { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.board-qa { display: flex; flex-direction: column; gap: 12px; }
.board-q { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 720px) { .board-q { grid-template-columns: 1fr; } }
.board-q-text, .board-q-answer { padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border-soft); background: var(--bg1); }
.board-q-answer { background: var(--accent-bg2); border-color: var(--accent-line); }
.board-q-answer.is-pending { background: transparent; border-style: dashed; display: flex; align-items: center; }
.board-q p { margin-top: 6px; margin-bottom: 0; line-height: 1.6; }
@media print {
  .board-mast, .no-print { display: none !important; }
  .board-main { padding: 0; max-width: none; }
  .board-section { break-inside: avoid; margin-bottom: 24px; }
  .board-card, .board-tile, .board-path, .board-insight { break-inside: avoid; border-color: #ddd; background: #fff; }
  .board-glance { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .board-chart canvas { max-width: 100% !important; }
}

/* ── 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; } }

/* ── MOO-203 (WP6): the pre-profile discrepancy review ──────────────────────
   S1 is one table of homogeneous, countable items, and its last column carries a
   note box, so it is wide by nature. The wrapper takes the horizontal scroll so the
   page itself never does at 1280 or on a phone (AC27). The blocking row is marked on
   the row, not by colouring the whole table: one contradiction out of six should
   read as one contradiction. */
.dr-tablewrap { overflow-x: auto; }
.dr-table { min-width: 720px; }
.dr-table td { vertical-align: top; }
.dr-table tr.mdt-block td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.dr-table .input { min-width: 220px; }

/* S2's per-dimension write action sits inside the dimension card, quieter than the
   distribution above it: the reading is the point, the recording is the follow-up. */
.family-position { border-top: 1px solid var(--border-soft); padding-top: 12px; }
.family-position .input { width: 100%; }

/* ── MOO-209 (WP14): the client board, printed ───────────────────────────────
   The board is the family's most polished surface and until now it could not be
   kept: no print rules, so a browser print produced the dark theme, the
   interactive controls and a page break through the middle of the governance
   block. Delivery is browser print to PDF; no server side PDF service is
   introduced, and this stylesheet creates no stored file and therefore no new
   erasure path.

   The rules, in order: force the light palette so the ink is readable on paper,
   drop the chrome nobody can press on a page, keep every server-rendered SVG
   (the donut, the mix bars and the projection ARE the content), and start the
   family governance block on its own page. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="system"] {
    --bg0:#FFFFFF; --bg1:#FFFFFF; --bg2:#FFFFFF; --bg3:#F4F1E8; --bg4:#E2DBC7;
    --glass:#FFFFFF; --glass-blur:#FFFFFF;
    --border-soft:#E0D8C0; --border:#C9C0A6; --border-strong:#A89F84;
    --accent:#9A6F2C; --accent-light:#B58A4A; --on-accent:#FFFFFF;
    --text:#1E1A14; --text-soft:#3F3A2E; --text-muted:#5A5646; --text-dim:#6A6452;
    --red:#8C3A3A; --green:#3F6B50; --amber:#8A6018; --blue:#3F5C8C;
  }
  body { background:#FFFFFF; color:#1E1A14; }

  /* One column, no viewport-height centring: a printed page is not a screen. */
  .center-screen { display:block; padding:0; }
  .center-screen > div { max-width:none; width:100%; }

  /* Nothing a reader can press survives onto paper. Forms included: the "note my
     direction" control is an invitation to click, and on paper it reads as a
     field somebody forgot to fill in. */
  .site-nav, .topbar, nav, button, .btn, form, .theme-toggle,
  details > summary, .alert.info { display:none !important; }
  details { display:block; }
  details > *:not(summary) { display:block !important; }

  /* The pictures are the content: never let a card clip or drop them. */
  .card { break-inside:avoid; box-shadow:none; border:1px solid var(--border-soft); }
  svg, .donut, .mixbar, .proj-chart { break-inside:avoid; max-width:100%; }
  .donut circle, .mixbar span { print-color-adjust:exact; -webkit-print-color-adjust:exact; }

  /* The family's governance record starts on its own page: it is the part that
     gets signed, filed and handed on. */
  .board-family { break-before:page; }

  /* A printed page has no hover and no tooltip, so a link must carry its target. */
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:9px; color:#5A5646; }
  a[href^="mailto"]::after { content:none; }
}

/* ── Optimizer (MOO-208 / WP12) ─────────────────────────────────────────────
   The decision surface. Three rules carry the design language here: the cards are
   one row of equal tracks that never clips (auto-fit with a min-width, so four
   cards reflow to two and then to one rather than squeezing to unreadable), the
   advisor's confirmed choice is card STATE rather than another badge competing
   with the verdict, and everything that is not the decision is either a tab or a
   closed drawer. */
.opt-tabs { display: flex; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--hairline); }
.opt-tab {
  padding: 8px 16px; font-size: var(--fs-small); color: var(--text-soft);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.opt-tab:hover { color: var(--text); }
.opt-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* Four cards, then two, then one: an auto-fit track with a floor is what keeps a
   fourth scenario from clipping the row it joins. Scoped to the Optimizer's own
   row rather than to every .scards grid, so turning the flag off really does leave
   the previous run page exactly as it was. */
.scards.opt-cards { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }

/* The choice, as state. A gold rail down the leading edge plus a pill beside the
   name: legible at a glance, and it does not occupy the badge slot, which belongs
   to the one verdict. */
.opt-card.is-chosen { border-color: var(--accent); box-shadow: var(--shadow-glow); }
.chosen-pill {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bg1); background: var(--accent);
  border-radius: 999px; padding: 2px 9px;
}
.opt-alloc-table { min-width: 0; width: 100%; font-size: var(--fs-small); margin-top: 10px; }
.opt-alloc-table .alloc-swatch { margin-right: 8px; }
.opt-alloc-table th { font-size: var(--fs-micro); letter-spacing: .1em; }
.opt-alloc-table td { padding-top: 7px; padding-bottom: 7px; }
.opt-alloc-table tr.is-excluded td { color: var(--text-muted); text-decoration: line-through; }
.opt-alloc-table tr.is-excluded td.hint { text-decoration: none; }
.opt-rail-col { text-align: right; white-space: nowrap; }
.opt-fan { min-height: 92px; }

/* ── The Optimizer card's anatomy ────────────────────────────────────────────
   Head, a metric well, the ring with the real return at its centre, the table as
   the ring's legend, then captioned fact lines with a status dot. The swatch is an
   inline box so it also shows inside a table cell; as a bare span it had a width
   nothing could see, which is why the blocks carried no colour. */
.alloc-swatch { display: inline-block; vertical-align: middle; }
.retline { gap: 16px; border: 0; padding-top: 8px; padding-bottom: 8px; font-variant-numeric: tabular-nums; }
.opt-card { padding-top: 22px; padding-bottom: 20px; }
.opt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.opt-name { min-width: 0; font-size: 19px; }
.opt-metrics { background: var(--bg1); border: 1px solid var(--hairline); border-radius: 12px; padding: 8px 14px 10px; }
.opt-metrics .retline { padding-top: 2px; padding-bottom: 4px; gap: 14px 22px; }
.opt-metrics .metric:first-child .metric-value { color: var(--accent); }
.opt-metrics-sub { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); color: var(--text-muted); margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.opt-metrics-sub strong { color: var(--text-soft); font-weight: 500; }
.opt-mix { margin-top: 16px; }
.opt-donut-wrap { position: relative; width: 156px; height: 156px; margin-left: auto; margin-right: auto; }
.opt-donut { width: 156px; height: 156px; }
.opt-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.opt-donut-value { font-size: var(--fs-metric); color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.opt-donut-hint { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-top: 4px; }
.opt-facts { margin-top: 14px; display: grid; gap: 10px; }
.opt-fact { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: start; border-top: 1px solid var(--hairline); padding-top: 10px; }
.opt-fact > .dot { margin-top: 5px; }
.opt-fact.opt-fan { display: block; }
.opt-ceiling { margin-top: 24px; }

@media (max-width: 760px) {
  /* The tab strip scrolls rather than wrapping into two rows that push the cards
     below the fold on a phone. */
  .opt-tabs { overflow-x: auto; }
  .opt-alloc-table { min-width: 0; }
}

/* ── WP18: the advisory path, one grammar ────────────────────────────────────
   Four components, named in DESIGN-LANGUAGE §6 before use: the rails table with its
   per-rail disclosure, the decision table's note line, the resolved line (a settled
   fact with no control on it), and the action bar promoted from .ws-actions.
   Nothing here is a new colour or a new size: it is the existing law, applied. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.rails-tablewrap { overflow-x: auto; margin-top: 24px; }
.rails-table { min-width: 620px; }
.rails-table th[scope="row"] { font-weight: 400; color: var(--text); text-align: left;
  padding: 12px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-body);
  text-transform: none; letter-spacing: 0; }
.rails-table .rails-group-head th { font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-muted); font-weight: 500; padding: 18px 12px 6px;
  border-bottom: 1px solid var(--border); }
.rails-table tr:hover td { background: transparent; }
.rails-table .rail-row:hover td, .rails-table .rail-row:hover th { background: var(--bg1); }
.rails-table .rail-value { width: 200px; }
.rails-table .rail-more { width: 40px; text-align: right; }
.rails-table tfoot td { border-bottom: 0; padding-top: 12px; }
.rail-detail td { background: var(--bg1); padding: 12px 12px 16px; }
.rail-toggle { transition: transform .15s ease; }
.rail-toggle.is-open { transform: rotate(90deg); }
.rail-gap { color: var(--amber); }

/* A unit is an adornment beside the box, never inside the value: what posts is what
   was typed, unlocalized, and the server parses it in one place. */
.unit-field { display: inline-flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.unit-field .input, .unit-field .rail-input { width: 110px; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }
.unit-field select { min-width: 130px; }
.unit-adorn { font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
.chip-source { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-soft); }

.decision-table .seg { margin-bottom: 8px; }
.decision-table th:first-child { width: 44%; }
.decision-table .decision-detail { white-space: normal; line-height: 1.55; max-width: 60ch; }
.decision-table .decision-note { width: 100%; min-width: 200px; }
.decision-table .decided-by { color: var(--text-dim); }
.decision-table tr.is-settled td { opacity: .78; }
.fc-accept-form { flex: 1; }
/* Long detail clamps to two lines instead of one ellipsised line whose full text
   only lived in a title attribute, unreachable on touch. */
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 62ch; }
.one-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 46ch; }
.mdt tr.mdt-gap td:first-child { box-shadow: inset 3px 0 0 var(--amber); }

/* A settled fact, downstream. No control lives in it, by law. */
.resolved-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: var(--fs-small); padding: 6px 0; }
.resolved-label { color: var(--text-soft); }
.resolved-value { color: var(--text); font-variant-numeric: tabular-nums; }
.resolved-meta { color: var(--text-muted); }
.resolved-link { color: var(--accent); text-decoration: none; }
.resolved-link:hover { text-decoration: underline; }
.resolved-list { display: grid; gap: 2px; }

.fix-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-size: var(--fs-small); padding: 3px 0; }
.excl-row { padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.excl-row:last-child { border-bottom: 0; }
.excl-note { flex: 1; }
.policy-more { display: grid; gap: 8px; }
.approve-open-list { margin-top: 8px; padding-left: 18px; }

.actionbar { margin-top: 40px; }
.approve-dialog { border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: var(--bg1); color: var(--text); padding: 24px; max-width: 460px; width: 92vw; }
.approve-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.approve-dialog h3 { font-family: var(--serif); font-size: var(--fs-title); margin-bottom: 8px; }
.approve-dialog .input { width: 100%; }
/* Without JavaScript the dialog never opens, so it renders as a plain block and its
   submit button posts the same form. An approval path that needs a script is a dead
   end for anyone whose script did not arrive. */
html:not([data-js]) .approve-dialog { display: block; position: static; width: auto;
  max-width: none; margin-top: 16px; }

/* The client's own answer reads as text; correcting a mis-extraction is one
   deliberate disclosure per row, and it needs no JavaScript. */
.ip-adjust > summary { list-style: none; cursor: pointer; }
.ip-adjust > summary::-webkit-details-marker { display: none; }
.ip-adjust > summary::after { content: "▸"; font-size: var(--fs-micro); color: var(--text-dim);
  margin-left: 8px; }
.ip-adjust[open] > summary::after { content: "▾"; }
.ip-adjust.is-missing > summary { color: var(--amber); }

/* WP18: the nine templates the redesign spec names carry no style attributes. Each
   inline declaration became one named class, which is most of the "looks generated"
   tell on its own. The single exception is a custom property carrying a per-row value
   (the progress ring), which is data rather than design and no stylesheet can hold. */
.next-action { border-left: 4px solid var(--accent); }
.plain-list { margin-top: 8px; padding-left: 18px; }
.no-grow { flex: none; }
.grow-min { flex: 1; min-width: 0; }
.hub-meta { margin-top: 2px; }
.acct-menu-pad { padding: 12px; min-width: 240px; }
.is-amber { color: var(--amber); }
.is-error { color: var(--red); }
.pill-amber { background: var(--amber); color: var(--bg0); }
.gdpr-lede { max-width: 60ch; }

/* Client assumptions editor (MOO-245): a cell carrying this client's own figure
   rather than the firm's reads as chosen, not as typed over. */
.input.is-changed { border-color: var(--accent); background: var(--accent-bg); }

/* ── The prose figure check panel (MOO-246) ──────────────────────────────────
   One line per flagged figure on the profile and the policy review. It borrows the
   alert's own frame, so it inherits both themes and needs no colour of its own; only
   the list rhythm and the quoted sentence are its. */
.fc-list { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; }
.fc-row { padding: 12px 0; }
.fc-row + .fc-row { border-top: 1px solid var(--hairline); }
.fc-head { display: flex; align-items: center; gap: 8px; }
.fc-sentence { margin-top: 6px; font-size: var(--fs-small); }
.fc-actions { flex-wrap: wrap; }
.fc-actions .input { min-width: 220px; }

/* ── Family alignment (WP18a / MOO-246) ──────────────────────────────────── */
/* The one screen an advisor opens with the family in the room. Divergence is
   drawn, never narrated, and it is amber at most: red belongs to a blocked
   approval and to nothing else on this page. */
.actionbar {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: 12px;
  align-items: center; margin-top: 40px; padding: 14px 0;
  background: var(--bg0); border-top: 1px solid var(--border);
}
.actionbar form { margin-left: auto; }
.actionbar form.inline-form { margin-left: 0; }
.actionbar-hint { margin-left: auto; text-align: right; max-width: 46ch; }
.settle-count { font-size: var(--fs-small); color: var(--text-soft); }

/* One family member, one colour, in both themes: the hue travels inside a JSON
   chart payload, so it cannot resolve per theme. Pinned to apps/common/palette.py
   by apps/common/test_palette.py, exactly as the asset sleeves are. Red is absent
   on purpose: it is reserved for a blocked approval. */
:root {
  --member-1:#9A6F2C; --member-2:#4A6BA3; --member-3:#4A8060; --member-4:#6A5FA0;
  --member-5:#31808E; --member-6:#717D41; --member-7:#8A6BB5; --member-8:#A85E8E;
}
/* Eight classes, so a member's colour reaches the page without an inline style. */
.mcolor-1 { --member-color: var(--member-1); }
.mcolor-2 { --member-color: var(--member-2); }
.mcolor-3 { --member-color: var(--member-3); }
.mcolor-4 { --member-color: var(--member-4); }
.mcolor-5 { --member-color: var(--member-5); }
.mcolor-6 { --member-color: var(--member-6); }
.mcolor-7 { --member-color: var(--member-7); }
.mcolor-8 { --member-color: var(--member-8); }
.chip-member { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.chip-member .member-disc {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--member-color, var(--text-muted));
}
.roster-pop > summary.chip-member {
  list-style: none; cursor: pointer; padding: 4px 10px 4px 8px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: var(--fs-small); color: var(--text-soft); background: var(--bg2);
}
.roster-pop > summary.chip-member::-webkit-details-marker { display: none; }
.roster-pop > summary.chip-member.hl { border-color: var(--member-color); color: var(--text); }
/* The consensus discs carry the member's own colour too: an aligned dimension is
   still a statement about named people. */
.consensus-disc.mcolor-1, .consensus-disc.mcolor-2, .consensus-disc.mcolor-3,
.consensus-disc.mcolor-4, .consensus-disc.mcolor-5, .consensus-disc.mcolor-6,
.consensus-disc.mcolor-7, .consensus-disc.mcolor-8 { border-color: var(--member-color); }

/* One dimension block: what it is, what the answers say, the drawing, the people,
   the one act. Nothing here is a card inside a card. */
/* Slight elevation: the block reads as one object without changing its anatomy.
   Same layout, same controls, a card ground and a hairline instead of a divider. */
.algn-dim { padding: 20px 22px; background: var(--bg2);
  border: 1px solid var(--border-soft); border-radius: var(--r-lg); }
.algn-dim + .algn-dim { margin-top: 14px; }
.algn-settled, .algn-quiet, .algn-failed { background: var(--bg1); }
.algn-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.algn-title { font-size: var(--fs-title); font-family: var(--serif); font-weight: 500; }
.algn-settled { font-size: var(--fs-body); color: var(--text-soft); }
.algn-members { width: 100%; margin-top: 12px; }
.algn-members td, .algn-members th { vertical-align: top; }
.algn-decide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The note is its own line under the three verbs and the figure: a decision reads as
   "what" then "why", and a note squeezed beside a button is a note nobody writes. */
.algn-decide .ip-line[name="note"] { flex: 1 1 100%; min-width: 18ch; }
.algn-decide .unit-field .ip-line { width: 7ch; text-align: right; }
.algn-family { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
/* The Range / One figure switch hides the inactive group. The group sets its own
   display, which beats the UA [hidden] rule, so the override is stated here: without
   it the switch changed nothing on screen and both value groups sat side by side. */
.algn-family-form [data-mode-group][hidden] { display: none !important; }
/* The bulk act, as a quiet toolbar over the member rows: flush right, off the
   table's edge, with air on both sides. */
.algn-members-bar { display: flex; justify-content: flex-end; align-items: center;
  margin-top: 14px; margin-bottom: 6px; }
/* A block that is mid-request says so: the answer arrives into a surface that
   dimmed the moment the advisor acted, which reads as response, not as lag. */
.algn-dim.htmx-request { opacity: .55; transition: opacity .12s var(--ease); }
.algn-dim { transition: opacity .15s var(--ease); }
.algn-family-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.algn-family-note { flex: 1 1 22ch; min-width: 16ch; }
.algn-failed { flex-basis: 100%; }
/* Every chart scrolls inside its own wrapper: the page body never scrolls sideways. */
.chart-wrap { overflow-x: auto; margin-top: 12px; }
.algn-chart-strip { height: 92px; min-width: 380px; }
.algn-chart-optbar { height: 56px; min-width: 320px; }
.algn-dmap { min-width: 340px; }
/* A text field that carries a unit rather than a browser's idea of a number: a
   native number input formats in the BROWSER's locale, which is how 40,00 came to
   sit beside a derived EUR 40.00m on one row. */
.unit-field { display: inline-flex; align-items: baseline; gap: 4px; }
.unit-field .ip-line { width: 6ch; }
.unit-adorn { font-size: var(--fs-small); color: var(--text-muted); }
.algn .ip-line { background: transparent; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: 2px 0 3px; font: inherit; font-size: var(--fs-small);
  color: inherit; }
.algn .ip-line:focus { outline: none; border-bottom-color: var(--accent); }
/* The rule above suppresses the ring for the pointer, where the line turning gold is
   indication enough. A keyboard walk needs the ring back, or the only thing marking
   the caret's position on a page of borderless fields is a 1px colour change. */
.algn .ip-line:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.algn .ip-line::placeholder { color: var(--text-soft); opacity: .55; font-style: italic; }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* The client page's row of three (wealth, assumptions, documents): the grid item is
   the section, so the card stretches to the row's height itself and keeps its
   actions on one baseline across the three. */
.trio > section { display: flex; flex-direction: column; }
.trio .trio-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.trio .trio-card .hint .status { margin-right: 6px; }
.trio .trio-actions { margin-top: auto; padding-top: 16px; }

/* Optimizer: the three-step grammar (choose, fine-tune, deliver). The header row is
   a rule with the step name on it, so the page reads as a process, not a scroll. */
.opt-step { border-top: 1px solid var(--border); padding-top: 14px; }
.opt-step .eyebrow { margin-bottom: 0; }
.opt-step-head { display: flex; align-items: center; gap: 10px; }
.opt-step-num { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; flex: none;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--serif); font-size: var(--fs-body); font-weight: 600; line-height: 1; }

/* A chip acting as a small state toggle (saved suggestion in the report). */
.chip.is-on { background: var(--accent); color: var(--bg0); border-color: var(--accent); font-weight: 600; }
button.chip { cursor: pointer; font: inherit; font-size: var(--fs-small); }

/* MOO-282: the builder's library drawer and the honest length counter. */
.qb-library-drawer { display: inline-block; }
.qb-library-drawer > summary { list-style: none; cursor: pointer; }
.qb-library { display: flex; flex-direction: column; gap: 10px; padding: 10px 2px 4px; }
.qb-library-group { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.qb-library-item { background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 4px 10px; font-size: 12.5px; cursor: pointer; text-align: left; }
.qb-library-item:hover { border-color: var(--accent); }
.qb-count.warn { color: var(--amber); }

/* MOO-282: the library modal picker. Category colours are quiet accents, never
   semantic states: profile gold, advisor blue, exercise purple. */
.qb-lib-modal { display: flex; flex-direction: column; max-height: min(82vh, 760px); width: min(680px, 94vw); }
.qb-lib-count { text-transform: none; letter-spacing: 0; color: var(--text-soft); }
.qb-lib-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border); }
.qb-lib-search { flex: 1 1 200px; min-width: 160px; background: var(--bg-2, transparent);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  padding: 7px 12px; font-size: 13.5px; }
.qb-lib-search:focus { outline: none; border-color: var(--accent); }
.qb-lib-chips { display: flex; gap: 6px; }
.qb-lib-chip { background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-muted); padding: 4px 12px; font-size: 12px; cursor: pointer; }
.qb-lib-chip span { opacity: .6; margin-left: 2px; }
.qb-lib-chip.is-active { color: var(--text); border-color: var(--accent); }
.qb-lib-list { overflow-y: auto; padding: 10px 18px 18px; display: flex;
  flex-direction: column; gap: 10px; }
.qb-lib-card { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg-1, transparent); }
.qb-lib-card-main { flex: 1; min-width: 0; }
.qb-lib-card-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.qb-lib-dot { width: 7px; height: 7px; border-radius: 50%; }
.qb-lib-card.cat-profile .qb-lib-dot { background: var(--accent); }
.qb-lib-card.cat-advisor .qb-lib-dot { background: var(--blue); }
.qb-lib-card.cat-exercise .qb-lib-dot { background: var(--purple); }
.qb-lib-cat { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); }
.qb-lib-tag { font-size: 10.5px; border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 8px; color: var(--text-muted); }
.qb-lib-tag.own { border-color: var(--accent); color: var(--accent); }
.qb-lib-label { font-size: 14px; line-height: 1.45; }
.qb-lib-help { font-size: 12.5px; color: var(--text-muted); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qb-lib-add { white-space: nowrap; align-self: center; }
.qb-lib-add.is-added { color: var(--green); border-color: var(--green); opacity: .85; }
.qb-lib-chip.cat-profile.is-active { border-color: var(--accent); }
.qb-lib-chip.cat-advisor.is-active { border-color: var(--blue); color: var(--text); }
.qb-lib-chip.cat-exercise.is-active { border-color: var(--purple); color: var(--text); }

/* MOO-282 fix: the hidden attribute must beat the cards' own display rule,
   or the picker's search and chips filter nothing. */
.qb-lib-modal [hidden] { display: none !important; }

/* ── Grouped nav dropdown (Assumptions) ── */
.navdrop > summary { display: inline-flex; align-items: center; gap: 6px; }
.navdrop .navdrop-caret { font-size: 10px; color: var(--text-muted); transition: transform .18s var(--ease); }
.navdrop[open] .navdrop-caret { transform: rotate(180deg); color: var(--accent); }
.navdrop .acct-menu { left: 0; right: auto; }

/* ── Activity log filters ── */
.activity-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; margin-bottom: 16px; }
.activity-filters label.hint { display: inline-flex; align-items: center; gap: 8px; }
.ql-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 6px 0 2px; }

/* ── Polish pass 06.09: quiet depth, provenance pills, table life ── */
.card { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.btn-minimal:hover { color: var(--text); background: var(--accent-bg); border-radius: var(--r-md); }
.mdt tbody tr { transition: background .15s var(--ease); }
.mdt tbody tr:hover { background: var(--accent-bg); }
.mdt tbody tr.rail-detail:hover, .mdt tbody tr.rails-group-head:hover { background: transparent; }
.mdt tbody tr:last-child td { border-bottom: none; }
.rails-table .rails-group-head th, .rails-group-head th { padding-top: 26px; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); font-weight: 600; border-bottom: 1px solid var(--accent-line); }
.chip-source { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg3); }
.chip-source--derived { color: var(--green); background: var(--green-bg); border-color: transparent; }
.chip-source--derived .dot { background: var(--green); }
.chip-source--ai-proposal { color: var(--blue); background: var(--blue-bg); border-color: transparent; }
.chip-source--ai-proposal .dot { background: var(--blue); }
.chip-source--advisor-set { color: var(--accent); background: var(--accent-bg2); border-color: transparent; }
.chip-source--advisor-set .dot { background: var(--accent); }
.chip-source--not-answered { color: var(--amber); background: var(--amber-bg); border-color: transparent; }
.chip-source--not-answered .dot { background: var(--amber); }
.chip-source--not-derived-by-method { color: var(--text-soft); }

/* ── Polish round two: rails header discipline, uniform controls, detail inset ── */
.rails-table thead th { border-bottom: 1px solid var(--border-strong); padding-bottom: 12px; letter-spacing: .12em; }
.rails-table thead th:nth-child(2) { text-align: right; }
.rails-table td:nth-child(2) { text-align: right; }
.rails-table th[scope="row"] { border-bottom: 1px solid var(--border-soft); }
.mdt tbody tr:last-child th[scope="row"] { border-bottom: none; }
.rails-table .unit-field { width: 170px; justify-content: flex-end; }
.rails-table .unit-field select { width: 100%; min-width: 0; }
.rail-detail td { border-left: 3px solid var(--accent-line); padding: 14px 18px 16px 21px; }
.rail-detail .rail-derived { color: var(--text-soft); line-height: 1.6; max-width: 76ch; margin-top: 0; }
.rail-detail .rail-derived + .rail-derived { margin-top: 6px; }

/* ── Asset constraints: three tight columns, centered toggles ── */
.asset-constraints-table th:first-child { width: 52%; }
.asset-constraints-table th:nth-child(2), .asset-constraints-table td:nth-child(2) { text-align: center; width: 110px; }
.asset-constraints-table th.num, .asset-constraints-table td.num { text-align: right; width: 160px; }
.asset-constraints-table td { padding: 10px 12px; }
.asset-constraints-table input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.asset-constraints-table .unit-field { width: 120px; }

/* ── Polish round three: sticky rails header, prose panels, asset dots ── */
.rails-table thead th { position: sticky; top: var(--rails-stick, 69px); z-index: 5; background: var(--bg0); box-shadow: 0 1px 0 var(--border-strong); border-bottom: none; }
.rails-table .rails-group-head th { position: sticky; top: var(--rails-stick2, 108px); z-index: 4; background: var(--bg0); box-shadow: 0 1px 0 var(--accent-line); border-bottom: none; }
.policy-more .field label { display: block; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px; }
.policy-more .field textarea.input { background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 16px; line-height: 1.65; resize: none; }
.policy-more .field textarea.input:focus { border-color: var(--border-focus); background: var(--bg2); }
.asset-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; vertical-align: 0; }
.asset-dot--cash { background: var(--asset-cash); }
.asset-dot--public_equity { background: var(--asset-public_equity); }
.asset-dot--private_equity { background: var(--asset-private_equity); }
.asset-dot--liquid_fi { background: var(--asset-liquid_fi); }
.asset-dot--private_credit { background: var(--asset-private_credit); }
.asset-dot--re_infra { background: var(--asset-re_infra); }
.asset-dot--decorrelated { background: var(--asset-decorrelated); }
/* Sticky needs an unclipped ancestor: on wide screens the rails table fits, so the
   wrapper releases its scroll and the header plus each group head pin under the
   topbar, every category taking its turn. Narrow screens keep the scroll. */
@media (min-width: 1000px) { .rails-tablewrap { overflow-x: visible; } }

/* ── Run page: the honesty panel's sub-blocks share the meta-card surface ── */
.rail-levers, #ceiling-levers { margin-top: 14px; padding: 14px 18px; background: var(--bg1); border: 1px solid var(--border-soft); border-radius: var(--r-md); }
.rail-levers .rail-lever:first-of-type { border-top: none; }
.lever-row { padding: 7px 0 7px 14px; border-left: 2px solid var(--accent-line); margin-top: 8px; color: var(--text-soft); font-size: var(--fs-small); line-height: 1.6; max-width: 80ch; }