/*
 * The visual system (docs/usability.md §1.5, §3.14; PLAN §4). Every value
 * comes from public/tokens.css — no colour is named here. Built phones
 * first: the base rules are the 375px layout, and the wide-screen layout is
 * added in min-width queries.
 *
 * Two layouts, chosen by views/partials/head.ejs:
 *   .has-sidebar   admin and advisor pages: a left sidebar with small-caps
 *                  group labels, white cards on the grey page
 *   .is-focused    investor and public pages: one column, no wider than a
 *                  form, the sponsor's name in the top bar
 */

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font-family: var(--font); font-size: var(--text-body); font-weight: var(--weight-normal); line-height: var(--leading);
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0 0 var(--space-2); color: var(--heading); font-weight: var(--weight-semibold); line-height: 1.25; }
h1 { font-size: var(--text-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); }
/* h3 is the small-caps section label of the sidebar style. */
h3 { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-caps); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
p { margin: 0 0 var(--space-3); }
ul, ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
strong { color: var(--heading); font-weight: var(--weight-semibold); }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
.muted { color: var(--muted); }
.small { font-size: var(--text-small); }
.right { text-align: right; }
.req { color: var(--error-text); }
.bad-text { color: var(--error-text); }
.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; }

/* Focus is always visible, and the same everywhere. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip-link { position: absolute; left: var(--space-3); top: -4rem; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--surface); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); }
.skip-link:focus { top: var(--space-2); }
main:focus { outline: none; }

/* ---- Frame: test-mode note, top bar, shell, sidebar ---------------------- */
.testmode { padding: var(--space-2) var(--space-4); background: var(--warning-tint); color: var(--warning-text); font-size: var(--text-small); text-align: center; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--divider); }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); min-height: 3.5rem; max-width: var(--measure-page); margin: 0 auto; padding: var(--space-2) var(--space-4); }
.brand { color: var(--heading); font-weight: var(--weight-semibold); letter-spacing: -0.01em; text-decoration: none; }
.brand:hover { color: var(--heading); }
.who { color: var(--muted); font-size: var(--text-label); }
/* Whose paperwork this is: the sponsor's name leads on an investor's page. */
.org { color: var(--heading); font-weight: var(--weight-semibold); }
.is-focused .brand { color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-medium); }

.shell { max-width: var(--measure-page); margin: 0 auto; }
.content { min-width: 0; padding: var(--space-4) var(--space-4) var(--space-8); }
.is-focused .shell { max-width: calc(var(--measure-form) + 2 * var(--space-4)); }

.sidebar { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2) var(--space-4) 0; }
.sidebar ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.sidebar .nav-group { display: contents; }
.nav-label { display: none; margin: var(--space-5) var(--space-3) var(--space-1); font-size: var(--text-caps); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sidebar a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--radius-sm); color: var(--text); font-size: var(--text-label); font-weight: var(--weight-medium); text-decoration: none; }
.sidebar a:hover { background: var(--neutral-tint); color: var(--heading); }
.sidebar a[aria-current="page"] { background: var(--accent-tint); color: var(--accent); font-weight: var(--weight-semibold); }

.foot { max-width: var(--measure-page); margin: 0 auto; padding: 0 var(--space-4) var(--space-6); color: var(--muted); font-size: var(--text-small); }
.is-focused .foot { max-width: calc(var(--measure-form) + 2 * var(--space-4)); }

@media (min-width: 56.25em) {
  .has-sidebar .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); align-items: start; }
  .has-sidebar .content { padding: var(--space-5) var(--space-5) var(--space-8); }
  .sidebar { display: block; position: sticky; top: 0; padding: var(--space-2) var(--space-2) var(--space-5) var(--space-4); }
  .sidebar ul { display: block; }
  .sidebar .nav-group { display: block; }
  .nav-label { display: block; }
  .sidebar a { min-height: 2.5rem; margin-bottom: 2px; }
  .is-focused .content { padding-top: var(--space-6); }
}

/* ---- Cards ---------------------------------------------------------------- */
.card { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card.narrow { max-width: var(--measure-form); }
.card .card { background: var(--surface-sunken); border-color: var(--divider); }
.card-head { margin-bottom: var(--space-4); }
.card-head p { margin: 0; color: var(--muted); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.page-head > div { flex: 1 1 16rem; min-width: 0; }
.page-head p { margin: 0; color: var(--muted); }
.crumbs { margin: 0 0 var(--space-3); font-size: var(--text-label); }
.crumbs a { text-decoration: none; font-weight: var(--weight-medium); }
.crumbs a:hover { text-decoration: underline; }
.lede { color: var(--muted); }
@media (min-width: 40em) { .card { padding: var(--space-5); margin-bottom: var(--space-5); } }

/* ---- Notices: a tint, dark text and a stripe; never colour alone ----------- */
.alert { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--heading); }
.alert.ok { border-left-color: var(--success); background: var(--success-tint); color: var(--success-text); }
.alert.warn { border-left-color: var(--warning); background: var(--warning-tint); color: var(--warning-text); }
.alert.bad { border-left-color: var(--error); background: var(--error-tint); color: var(--error-text); }
.alert strong { color: inherit; }
.alert a { color: inherit; }
.alert ul { margin: 0; padding-left: var(--space-5); }
.alert > :last-child { margin-bottom: 0; }

/* ---- Status: a small rounded chip, always with its words ------------------- */
/* A status is never cut short: a long one wraps inside its chip. */
.pill { display: inline-block; max-width: 100%; padding: 0.125rem var(--space-3); border-radius: var(--radius); background: var(--neutral-tint); color: var(--text); font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: 1.5; vertical-align: middle; }
.pill.ok { background: var(--success-tint); color: var(--success-text); }
.pill.warn { background: var(--warning-tint); color: var(--warning-text); }
.pill.info { background: var(--accent-chip); color: var(--accent-strong); }
.pill.bad { background: var(--error-tint); color: var(--error-text); }
.pill.muted { background: var(--neutral-tint); color: var(--text); }

/* ---- Buttons: one primary per card ------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading); font: inherit; font-weight: var(--weight-semibold); line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--accent); color: var(--accent-strong); }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: var(--on-accent); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn.ghost:hover { background: var(--accent-tint); color: var(--accent-strong); }
.btn.small { min-height: 2.25rem; padding: 0 var(--space-3); font-size: var(--text-label); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (pointer: coarse) { .btn.small { min-height: var(--tap); } }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0; }
.actions .btn { flex: 1 1 auto; }
form.inline { display: inline-block; }
@media (min-width: 40em) { .actions .btn { flex: 0 0 auto; } }

/* ---- Forms: one column, labels above, inputs a finger can hit ---------------- */
.form { max-width: var(--measure-form); }
.form fieldset { margin: 0 0 var(--space-5); padding: var(--space-4) 0 0; border: 0; border-top: 1px solid var(--divider); }
.form fieldset:first-of-type { padding-top: 0; border-top: 0; }
.form legend { padding: 0; color: var(--heading); font-size: var(--text-h3); font-weight: var(--weight-semibold); }
.form label { display: block; margin: var(--space-4) 0 0; color: var(--heading); font-size: var(--text-label); font-weight: var(--weight-medium); }
.form label .muted, .form legend .muted { font-weight: var(--weight-normal); }
.field-label { margin: var(--space-4) 0 var(--space-1); color: var(--heading); font-size: var(--text-label); font-weight: var(--weight-medium); }
.help { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-small); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  display: block; width: 100%; max-width: 100%; min-height: var(--tap); margin: var(--space-1) 0 0; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading);
  font: inherit; font-size: var(--text-body); font-weight: var(--weight-normal);
}
textarea { min-height: 6rem; padding: var(--space-2) var(--space-3); line-height: var(--leading); resize: vertical; }
textarea.wide { min-height: 9rem; }
input:hover, select:hover, textarea:hover { border-color: var(--heading); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent); }
input[readonly] { background: var(--surface-sunken); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
/* An input the server or the browser refused: a red edge, and its reason in words beside it. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
.field-error, .qerror { display: block; margin: var(--space-1) 0 0; color: var(--error-text); font-size: var(--text-small); font-weight: var(--weight-medium); }
.form label.check, label.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); margin: var(--space-2) 0 0; color: var(--heading); font-size: var(--text-body); font-weight: var(--weight-normal); }
.form.row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); max-width: none; }
.form.row label { flex: 1 1 12rem; margin: 0; }
.form.row .btn { flex: 1 1 auto; }
@media (min-width: 40em) { .form.row .btn { flex: 0 0 auto; } }
.linkbox input, .linkfield { font-family: var(--font-mono); font-size: var(--text-label); }

/* ---- Calm lists: a row reads as a sentence, and the whole row opens it ------- */
.rows { margin: 0; padding: 0; list-style: none; }
.rows > .row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: center; padding: var(--space-3) var(--space-2); border-top: 1px solid var(--divider); }
.rows > .row:first-child { border-top: 0; }
.rows > .row.dim { opacity: 0.6; }
.row-title { color: var(--heading); font-weight: var(--weight-semibold); text-decoration: none; }
a.row-title::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
a.row-title:focus-visible { outline: none; }
a.row-title:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.rows > .row:hover { background: var(--surface-sunken); }
.row-sub { display: block; color: var(--muted); font-size: var(--text-small); overflow-wrap: anywhere; }
.row-when { color: var(--muted); font-size: var(--text-small); }
.row-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row-actions a { font-size: var(--text-label); font-weight: var(--weight-medium); }
.group-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: var(--space-5) 0 var(--space-1); }
.card > .group-title:first-child { margin-top: 0; }
.group-title .count { color: var(--muted); font-size: var(--text-small); font-weight: var(--weight-normal); }
@media (min-width: 45em) {
  .rows-investors .row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 2.2fr) minmax(0, 2fr) minmax(0, 1.1fr); }
  .rows-mine .row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.1fr); }
  .rows-sets .row { grid-template-columns: minmax(0, 2.4fr) minmax(0, 2.4fr) minmax(0, 0.9fr) minmax(0, 2.3fr); }
  .rows-advisors .row { grid-template-columns: minmax(0, 2fr) minmax(0, 2.6fr) minmax(0, 1.5fr) minmax(0, 1.5fr); }
  .row-when, .row-actions { justify-self: end; text-align: right; }
  .row-actions { justify-content: flex-end; }
}

/* ---- Tables, for what is a table. On a phone each row becomes a block and
        every cell says what it is (data-label), so nothing scrolls sideways. ---- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.table thead th { color: var(--muted); font-size: var(--text-caps); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.table th.k { width: 40%; color: var(--muted); font-size: var(--text-label); font-weight: var(--weight-medium); letter-spacing: 0; text-transform: none; }
.table.compact th, .table.compact td { padding: var(--space-2); }
.table tr.dim { opacity: 0.6; }
@media (max-width: 39.99em) {
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td, .table tbody th { display: block; width: 100%; }
  .table tr { padding: var(--space-2) 0; border-bottom: 1px solid var(--divider); }
  .table td, .table tbody th, .table th.k { padding: var(--space-1) 0; border: 0; width: 100%; }
  .table td.right { text-align: left; }
  .table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--text-caps); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
}

.summary { padding: 0 var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius); }
.summary-row { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--divider); }
.summary-row:last-child { border-bottom: 0; }
.summary-row .k { flex: 0 0 9rem; color: var(--muted); font-size: var(--text-label); }
.summary-row .v { flex: 1 1 14rem; min-width: 0; color: var(--heading); }

.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-4); margin: 0; }
.kv dt { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-label); }
.kv dd { margin: 0; color: var(--heading); overflow-wrap: anywhere; }
@media (min-width: 40em) { .kv { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); } .kv dt { margin-top: 0; } }

.timeline { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--divider); }
.timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-3); padding: var(--space-2) 0 var(--space-2) var(--space-4); }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 0.95rem; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.timeline .when, .timeline .type { color: var(--muted); font-size: var(--text-small); }
.timeline .what { color: var(--heading); }
@media (min-width: 45em) { .timeline li { grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: baseline; } }

/* What the investor reviews before sending: each answer under its question. */
.answers { margin: 0; padding: 0; list-style: none; }
.answer { padding: var(--space-3) 0; border-top: 1px solid var(--divider); }
.answers > .answer:first-child { border-top: 0; }
.answer-label { display: block; color: var(--muted); font-size: var(--text-label); }
.answer-value { display: block; color: var(--heading); font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.answer-by { display: block; color: var(--muted); font-size: var(--text-small); }

/* ---- The questionnaire: the documents' own words, with room to answer -------- */
.questionnaire { max-width: var(--measure-form); }
.qdoc-title { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-h2); }
.qsection { margin: var(--space-3) 0; padding: var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius); background: var(--surface); }
.qsection-title { margin: 0 0 var(--space-2); }
.qsection-body p { margin: var(--space-3) 0; line-height: var(--leading-prose); }
.qsection-body p:last-child { margin-bottom: 0; }
.qfield { display: block; max-width: 100%; margin: var(--space-1) 0; vertical-align: middle; }
.qinline input { margin: 0; }
.qblock, .qblock textarea { display: block; width: 100%; }
.qecho, .qcomputed, .qplaceholder { display: inline-block; margin: 0; }
.qecho, .qcomputed { min-width: 6ch; padding: 0 var(--space-2); border-bottom: 1px dashed var(--border-strong); color: var(--heading); font-weight: var(--weight-medium); }
.qcomputed { border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--surface-sunken); }
.qplaceholder { padding: 0 var(--space-2); border-bottom: 1px dashed var(--border); color: var(--muted); font-style: italic; }
.qcheck { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); color: var(--heading); font-weight: var(--weight-medium); cursor: pointer; }
/* Choices are large labelled options, the whole of which can be tapped. */
.qchoice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qopt { display: flex; flex: 1 1 100%; align-items: center; gap: var(--space-3); min-height: var(--tap); padding: var(--space-2) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--heading); font-weight: var(--weight-medium); line-height: 1.3; cursor: pointer; }
.qopt:hover { border-color: var(--accent); }
.qopt:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.qopt input:focus-visible { outline: none; }
.qopt:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.qfield.flagged { padding: var(--space-2); border: 2px solid var(--warning); border-radius: var(--radius-sm); background: var(--warning-tint); }
.qflag { display: block; margin-bottom: var(--space-1); color: var(--warning-text); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.qflag.inline { display: inline; margin: 0; }
.qsave-status { min-height: 1.5em; margin: var(--space-3) 0 0; }
.qsaved { display: inline-block; margin: var(--space-1) var(--space-2) 0 0; color: var(--muted); font-size: var(--text-small); }
.qclear { min-height: 2.25rem; padding: 0 var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-small); cursor: pointer; }
.qclear:hover { border-color: var(--error); color: var(--error-text); }
@media (pointer: coarse) { .qclear { min-height: var(--tap); } }
/* An address: one answer, five parts — a column on a phone, the paper's two lines on a wide screen. */
.qaddress, .address-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.qaddress { margin: var(--space-2) 0; }
.qpart { display: block; margin: 0; color: var(--heading); font-size: var(--text-label); font-weight: var(--weight-medium); }
.form .address-fields label { margin: 0; }
.address-fields legend, .address-fields .help { grid-column: 1 / -1; }
.qpart .muted { font-weight: var(--weight-normal); }
.qaddress .qerror, .qaddress .qflag { grid-column: 1 / -1; margin: 0; }
/* Where the advisor's details fill a blank: read-only, and it says from where when pointed at. */
.qprofile { border-bottom-style: solid; cursor: help; }
/* Units and their amount: one question, two ways in. */
.qor { display: block; margin: var(--space-2) 0 var(--space-1); color: var(--text); font-size: var(--text-label); }
.qunits-line { display: block; min-height: 1.5em; margin: var(--space-2) 0 0; color: var(--heading); font-weight: var(--weight-semibold); }
.qhint { display: block; margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-small); }
/* "Why we ask" on a sensitive question, and the summary of what a step still needs (usability.md §3.3). */
.qwhy strong { color: var(--heading); font-weight: var(--weight-semibold); }
.error-summary { outline: none; }
.error-summary a { color: inherit; text-decoration: underline; }
/* A question pinned to its field and the reply beside it (usability.md §3.10). */
.qthread { display: block; margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-tint); }
.qmsg { margin: 0 0 var(--space-2); }
.qmsg-who { color: var(--heading); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.qmsg-when { margin-left: var(--space-2); color: var(--muted); font-size: var(--text-small); }
.qmsg-body { margin: var(--space-1) 0 0; color: var(--text); }
.qmsg-reply { margin-left: var(--space-4); padding-left: var(--space-3); border-left: 2px solid var(--border-strong); }
.qmsg-wait { margin: 0; }
.qreply { margin-top: var(--space-2); }
.qreply textarea { width: 100%; }
/* "Same as my firm" ticked: the broker-dealer's own name is not asked (no script needed). */
.form:has([data-same-as-firm]:checked) [data-broker-dealer] { display: none; }
@media (min-width: 40em) {
  .qaddress, .address-fields { grid-template-columns: 3fr 2fr 2fr; }
  .qaddress.qfield { display: grid; margin: var(--space-2) 0; }
  .qpart-street { grid-column: 1 / span 2; }
  .qpart-unit { grid-column: 3; }
  .qunits.qfield { display: block; margin: var(--space-2) 0; }
  .qunits .qor { display: inline; margin: 0 var(--space-1); }
  .qunits .qerror { display: block; margin-left: 0; }
  .qfield { display: inline-block; margin: 0 var(--space-1); }
  .qinline input { display: inline-block; width: 22ch; }
  .qinline[data-type="email"] input { width: 30ch; }
  .qinline[data-type="phone"] input { width: 18ch; }
  .qinline[data-type="ssn"] input, .qinline[data-type="ein"] input { width: 15ch; }
  .qinline[data-type="integer"] input, .qinline[data-type="currency"] input { width: 14ch; }
  .qinline[data-type="date"] input { width: auto; }
  .qchoice, .qcheck, .qblock { display: flex; margin: var(--space-2) 0; }
  .qopt { flex: 0 1 auto; }
  .qerror { display: inline-block; margin-left: var(--space-2); }
}

/* ---- Steps: where you are, and what is left ---------------------------------- */
.steps { margin: var(--space-4) 0 var(--space-5); }
.step-now { margin: 0 0 var(--space-2); color: var(--text); }
.steps progress { display: block; width: 100%; height: 0.5rem; border: 0; border-radius: var(--radius-pill); background: var(--neutral-tint); overflow: hidden; appearance: none; -webkit-appearance: none; }
.steps progress::-webkit-progress-bar { background: var(--neutral-tint); }
.steps progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); }
.steps progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
.step-menu { margin-top: var(--space-1); }
.step-menu summary { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--accent); font-size: var(--text-label); font-weight: var(--weight-medium); cursor: pointer; }
.step-list { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-list li { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap); border-top: 1px solid var(--divider); counter-increment: step; }
.step-list li::before { content: counter(step); display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--neutral-tint); color: var(--text); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.step-list li.done::before { background: var(--success-tint); color: var(--success-text); }
.step-list li.current::before { background: var(--accent); color: var(--on-accent); }
.step-list li.current a { color: var(--heading); font-weight: var(--weight-semibold); text-decoration: none; }
.step-list .state { margin-left: auto; color: var(--muted); font-size: var(--text-small); }

/* ---- Development only: the one-off template tiles (ONE_OFF_INTAKE) ------------ */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--divider); border-radius: var(--radius); }
.tile.disabled { opacity: 0.7; }
.tile-title { color: var(--heading); font-weight: var(--weight-semibold); }
.tile-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-small); }
.tile-warnings { margin: 0; padding-left: var(--space-4); color: var(--warning-text); font-size: var(--text-small); }
.tile .btn { align-self: flex-start; margin-top: auto; }

/* ---- The document view (usability.md §2.3): the pages, the boxes over them,
        the panel beside them. Colours are the owner tokens; positions come
        from public/documentView.js as percentages of the page. ---- */
.dv-picker { margin-bottom: var(--space-4); }
.dv-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.dv-main, .dv-panel { min-width: 0; margin: 0; }
.dv-status { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-small); }
.dv-status.bad { color: var(--error-text); }
.dv-status.warn { color: var(--warning-text); }
.dv-doc { margin: 0 0 var(--space-5); }
.dv-doc-title { margin: 0 0 var(--space-2); font-size: var(--text-h2); }
.dv-band { margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--heading); font-size: var(--text-small); }
.dv-band.excluded, .dv-doc.excluded .dv-band { border-left-color: var(--border-strong); background: var(--neutral-tint); color: var(--text); }
.dv-band.missing { border-left-color: var(--warning); background: var(--warning-tint); color: var(--warning-text); }
/* The page's font size is the size of a filled box's text: the script sets it with the page's width, as the merged text on the paper scales. */
.dv-page { position: relative; margin: 0 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; font-size: var(--text-caps); }
.dv-page canvas { display: block; width: 100%; height: auto; }
.dv-page-number { position: absolute; right: var(--space-2); bottom: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--neutral-tint); color: var(--text); font-size: var(--text-caps); }
.dv-overlays { position: absolute; inset: 0; }
/* A box: an answer that prints here, in its owner's colour, with its words when they fit. */
.ov { position: absolute; display: block; margin: 0; padding: 0 2px; border: 1.5px solid var(--border-strong); border-radius: 2px; background: var(--neutral-tint); color: var(--text); font: inherit; font-size: var(--text-caps); line-height: 1.2; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; opacity: 0.85; }
.ov-text { display: block; overflow: hidden; text-overflow: ellipsis; }
.ov.tiny { padding: 0; }
.ov[data-owner="app"] { border-style: dashed; }
.ov[data-owner="gp"], .ov-signer[data-role="GP"], .dv-swatch[data-owner="gp"] { border-color: var(--owner-gp); background: var(--owner-gp-tint); color: var(--owner-gp-text); }
.ov[data-owner="advisor"], .ov-signer[data-role="Advisor"], .dv-swatch[data-owner="advisor"] { border-color: var(--owner-advisor); background: var(--owner-advisor-tint); color: var(--owner-advisor-text); }
.ov[data-owner="investor"], .ov-signer[data-role="Investor"], .dv-swatch[data-owner="investor"] { border-color: var(--owner-investor); background: var(--owner-investor-tint); color: var(--owner-investor-text); }
.ov[data-owner="either"], .dv-swatch[data-owner="either"] { border-color: var(--owner-either); background: var(--owner-either-tint); color: var(--owner-either-text); }
/* A block a signer fills at signing: dashed, in the signer's colour. */
.ov-signer, .dv-swatch-signer { border-style: dashed; border-width: 2px; }
.ov.lit { opacity: 1; outline: 3px solid var(--accent); outline-offset: 1px; z-index: 2; }
.ov:hover, .ov:focus-visible { opacity: 1; z-index: 3; }
.ov.selected { box-shadow: var(--focus-ring); z-index: 3; }
.dv-docs { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.dv-docs li { margin-bottom: var(--space-2); }
.dv-answers { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.dv-legend { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--text-small); }
.dv-legend li { display: flex; align-items: center; gap: var(--space-2); }
.dv-swatch { display: inline-block; flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border: 1.5px solid var(--border-strong); border-radius: 2px; background: var(--neutral-tint); }
.dv-about { padding-top: var(--space-3); border-top: 1px solid var(--divider); }
.dv-about .kv { grid-template-columns: minmax(0, 1fr); }
.dv-places { margin: 0; padding-left: var(--space-4); }
.dv-list { margin: 0 0 var(--space-3); }
.dv-list summary { display: flex; align-items: center; min-height: var(--tap); color: var(--heading); font-weight: var(--weight-semibold); cursor: pointer; }
/* An investor's paperwork on the paper (usability.md §2.4 uses 2–3): a filled
   box shows its answer at the page's own scale and is a link back to its
   question; a band links to the question that decides it. */
.ov[href] { text-decoration: none; }
.ov.filled { background: var(--surface); color: var(--heading); font-size: inherit; font-weight: var(--weight-medium); opacity: 1; }
.ov.filled.tiny, .ov.ticked { padding: 0; text-align: center; }
.ov.filled.tiny .ov-text, .ov.ticked .ov-text { text-align: center; }
.ov.masked { letter-spacing: 0.04em; }
.dv-band-link { margin-left: var(--space-2); }
.dv-band.lit { outline: 3px solid var(--accent); outline-offset: 1px; }
.dv-value { color: var(--heading); font-weight: var(--weight-medium); }
.dv-words { margin-top: var(--space-4); }
.dv-words > summary { display: flex; align-items: center; min-height: var(--tap); color: var(--heading); font-weight: var(--weight-semibold); cursor: pointer; }
.qpaper { display: inline-block; margin: var(--space-1) var(--space-3) 0 0; font-size: var(--text-small); }
@media (min-width: 56.25em) {
  .dv-layout { grid-template-columns: minmax(0, 1fr) 19rem; }
  .dv-panel { position: sticky; top: var(--space-4); max-height: calc(100vh - 2 * var(--space-4)); overflow: auto; }
}