/* ============================================================================
   Quote-builder dashboard styles.
   Palette + fonts lifted straight from led_wall_calculator_6.html so the
   dashboard reads as the same product. Light theme in :root, dark under body.dark.
   ============================================================================ */
:root {
  --bg:#f4f5f7; --bg-2:#ffffff; --bg-3:#edf0f4; --bg-4:#e2e6ed;
  --border:#d0d6e0; --border-2:#b8c0cc;
  --text:#0f1117; --text-2:#4a5568; --text-3:#8492a6;
  --accent:#2563eb; --accent-dim:rgba(37,99,235,0.10); --accent-glow:rgba(37,99,235,0.22);
  --warn:#d97706; --warn-dim:rgba(217,119,6,0.10); --warn-text:#b45309;
  --good:#059669; --good-dim:rgba(5,150,105,0.10);
  --success:#059669; --success-dim:rgba(5,150,105,0.10);
  --danger:#dc2626; --red-dim:rgba(220,38,38,0.10);
  --purple:#7c3aed; --purple-dim:rgba(124,58,237,0.10);
  /* Per-area category accents — lifted from led_wall_calculator_6.html so the
     workbench's config areas read as distinct the way the calculator's do. */
  --col-tech:#6366f1; --col-tech-dim:rgba(99,102,241,0.09);
  --col-spares:#059669; --col-spares-dim:rgba(5,150,105,0.09);
  --col-trim:#d97706;  --col-trim-dim:rgba(217,119,6,0.09);
  --col-mount:#db2777; --col-mount-dim:rgba(219,39,119,0.09);
  --col-proc:#7c3aed;  --col-proc-dim:rgba(124,58,237,0.09);
  --col-ship:#0891b2;  --col-ship-dim:rgba(8,145,178,0.09);
  --col-comm:#ea580c;  --col-comm-dim:rgba(234,88,12,0.09);
  --col-warr:#65a30d;  --col-warr-dim:rgba(101,163,13,0.09);
  --radius:3px; --radius-lg:4px; --radius-sm:2px;
  /* Self-contained font stacks — DM Sans/Mono used if installed, else system. */
  --font:'DM Sans',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'DM Mono','Cascadia Code','Cascadia Mono',Consolas,'Courier New',monospace;
}
body.dark {
  --bg:#0a0c10; --bg-2:#10141a; --bg-3:#171c25; --bg-4:#1e2535;
  --border:#232b3a; --border-2:#2e3a4e;
  --text:#e8eaf0; --text-2:#8a95ae; --text-3:#4e5a70;
  --accent:#3b82f6; --accent-dim:rgba(59,130,246,0.13); --accent-glow:rgba(59,130,246,0.28);
  --warn:#f59e0b; --warn-dim:rgba(245,158,11,0.12); --warn-text:#fbbf24;
  --good:#10b981; --good-dim:rgba(16,185,129,0.13);
  --success:#10b981; --success-dim:rgba(16,185,129,0.12);
  --danger:#ef4444; --red-dim:rgba(239,68,68,0.12);
  --purple:#8b5cf6; --purple-dim:rgba(139,92,246,0.12);
  --col-tech:#6366f1; --col-tech-dim:rgba(99,102,241,0.12);
  --col-spares:#10b981; --col-spares-dim:rgba(16,185,129,0.12);
  --col-trim:#f59e0b;  --col-trim-dim:rgba(245,158,11,0.10);
  --col-mount:#ec4899; --col-mount-dim:rgba(236,72,153,0.10);
  --col-proc:#8b5cf6;  --col-proc-dim:rgba(139,92,246,0.11);
  --col-ship:#06b6d4;  --col-ship-dim:rgba(6,182,212,0.10);
  --col-comm:#f97316;  --col-comm-dim:rgba(249,115,22,0.10);
  --col-warr:#84cc16;  --col-warr-dim:rgba(132,204,22,0.10);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* The staff app runs a size up (quotes are hand-transcribed off these
   screens); the dealer-facing intake keeps its original scale. */
body.intake-page { font-size: 14px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 22px; background: var(--bg-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
header .brand { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
header .brand span { color: var(--accent); }
header nav { display: flex; gap: 4px; }
header nav a {
  padding: 6px 12px; border-radius: var(--radius); color: var(--text-2);
  font-weight: 500;
}
header nav a:hover { background: var(--bg-3); text-decoration: none; color: var(--text); }
header nav a.active { background: var(--accent-dim); color: var(--accent); }
header .spacer { flex: 1; }
header .who { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; }
header .who input {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 13px; padding: 5px 9px; width: 130px;
}
.icon-btn {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-2); cursor: pointer; font-size: 15px; padding: 5px 9px; line-height: 1;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-2); }

main { padding: 22px; max-width: 1500px; margin: 0 auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); cursor: pointer; font-family: var(--font); font-size: 13px;
  font-weight: 500; padding: 7px 13px; text-decoration: none; transition: all .12s;
}
.btn:hover { border-color: var(--border-2); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: 12px; }
form.inline { display: inline; }

/* ── Board ──────────────────────────────────────────────────────────────── */
/* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr), so a long
   title or wide card content can push its column past its share and leave the
   lanes ragged. minmax(0, …) forces every lane to the same width. */
.board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.column { background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; }
.column > h2 {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 12px;
}
.column > h2 .dot { width: 8px; height: 8px; border-radius: 50%; }
.column > h2 .n {
  margin-left: auto; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 9px; font-size: 12px; color: var(--text-2);
}
.col-needs_attention .dot { background: var(--warn); }
.col-new .dot { background: var(--accent); }
.col-in_progress .dot { background: var(--purple); }
.col-draft_ready .dot { background: var(--success); }

.empty { color: var(--text-2); font-size: 13.5px; padding: 10px 4px; font-style: italic; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; margin-bottom: 10px;
}
.card:last-child { margin-bottom: 0; }
.card .id { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.card h3 { font-size: 15.5px; font-weight: 600; margin: 2px 0 2px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card h3 a { color: var(--text); }
.card .company { color: var(--text-2); font-size: 14px; margin-bottom: 8px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.chip {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 2px 7px; font-size: 12.5px; color: var(--text-2);
}
.chip b { color: var(--text); font-weight: 500; }
.card .flagmsg {
  background: var(--warn-dim); border: 1px solid var(--warn); color: var(--warn);
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: 13px; margin-bottom: 10px;
}
.card .assigned { color: var(--text-2); font-size: 12.5px; margin-bottom: 8px; }
.card .assigned.stale { color: var(--warn); }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Detail page ────────────────────────────────────────────────────────── */
.detail-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.detail-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.detail-head .sub { color: var(--text-2); margin-top: 2px; }
.detail-head .spacer { flex: 1; }
.badge {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-sm); font-size: 12px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.badge.needs_attention { background: var(--warn-dim); color: var(--warn); }
.badge.new { background: var(--accent-dim); color: var(--accent); }
.badge.in_progress { background: var(--purple-dim); color: var(--purple); }
.badge.draft_ready { background: var(--success-dim); color: var(--success); }
.badge.complete { background: var(--bg-4); color: var(--text-2); }

.cols { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
.panel {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 16px;
}
.panel h2 {
  font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-2); margin-bottom: 14px;
}
.field { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.field:first-of-type { border-top: none; }
.field .k { color: var(--text-2); font-size: 14px; }
.field .v { color: var(--text); }
.field .v.prose { white-space: pre-wrap; }
.field .v.empty { color: var(--text-2); font-style: italic; }

.timeline { list-style: none; }
.timeline li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; }
.timeline li:first-child { border-top: none; }
.timeline .t-status { font-weight: 600; }
.timeline .t-meta { color: var(--text-2); font-size: 12.5px; }

.actionbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
/* Pushes the Delete action to the far end, clear of the primary buttons. */
.actionbar-spacer { flex: 1 1 0; min-width: 0; }

details.raw summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
details.raw pre {
  margin-top: 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; overflow-x: auto; font-family: var(--mono);
  font-size: 12px; color: var(--text-2); white-space: pre-wrap; word-break: break-word;
}

/* ── Archive table ──────────────────────────────────────────────────────── */
.searchbar { display: flex; gap: 8px; margin-bottom: 16px; }
.searchbar input {
  flex: 1; max-width: 380px; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-family: var(--font);
  font-size: 15px; padding: 9px 12px;
}
table.list { width: 100%; border-collapse: collapse; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 10px 14px; border-top: 1px solid var(--border); font-size: 14px; }
table.list th { background: var(--bg-3); color: var(--text-2); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.03em; border-top: none; }
table.list tr:hover td { background: var(--bg-3); }
table.list td.id { font-family: var(--mono); color: var(--text-2); }

/* ── Wizard ─────────────────────────────────────────────────────────────── */
.wiz-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.wiz-top .spacer { flex: 1; }

/* Build | Review switcher — a full-width two-tab band between the request box
   and the wizard body (roughly the old 1-2-3 stepper's footprint). The
   inactive tab is a button/link (navigates), the active one a span. */
.wiz-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
  margin-bottom: 18px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.wiz-tab {
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius);
  background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font); font-size: 17px; font-weight: 600;
  padding: 12px 18px; text-decoration: none; transition: all .12s;
}
.wiz-tab:hover { color: var(--text); text-decoration: none; }
.wiz-tab.active { background: var(--accent); color: #fff; cursor: default; }

/* Echo of the form submission — a vertical label/value list (one fact per
   line) rather than chips in a row, since quotes get hand-transcribed now. */
.form-summary {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.form-summary .fs-label { font-weight: 600; color: var(--text-2); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; }
.fs-list { margin: 4px 0 0; }
.fs-row {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 3px 0; border-top: 1px solid var(--border);
}
.fs-row:first-child { border-top: none; }
.fs-row dt { color: var(--text-2); }
.fs-row dd { margin: 0; color: var(--text); }
/* Fulfillment acknowledgements — the permanent paper trail from the intake. */
.fs-acks { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding-top: 4px; border-top: 1px solid var(--border); }
.fs-ack { color: var(--text-2); font-size: 13px; }
.fs-ack .fs-ack-state.ok { color: var(--success); }
.fs-ack .fs-ack-state.no { color: var(--warn); }
.fs-notes { margin-top: 6px; }
.fs-notes summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.fs-notes p { margin-top: 8px; color: var(--text-2); max-width: 640px; white-space: pre-wrap; }
.fs-notes p b { color: var(--text); }

.from-form { background: var(--accent-dim); color: var(--accent); border-radius: var(--radius-sm);
  padding: 6px 10px; font-size: 12.5px; margin-bottom: 12px; }

/* AI interpretation panel */
.ai-panel { background: var(--purple-dim); border: 1px solid var(--purple);
  border-radius: var(--radius-lg); padding: 12px 14px; margin-bottom: 14px; }
.ai-panel.ai-flagged { background: var(--warn-dim); border-color: var(--warn); }
.ai-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.ai-badge { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--purple); }
.ai-flagged .ai-badge { color: var(--warn); }
.ai-model { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.ai-summary { font-size: 14px; color: var(--text); margin: 0 0 6px; }
.ai-flags { list-style: none; margin: 6px 0; font-size: 12.5px; color: var(--warn); }
.ai-flags li { padding: 2px 0; }
.ai-note { font-size: 11.5px; color: var(--text-3); margin: 4px 0 0; }

/* size controls */
.size-controls { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.size-controls .fld { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); }
.dim-fields { display: flex; align-items: flex-end; gap: 8px; }
.mode-field { display: flex; gap: 12px; align-items: flex-end; }
.text-input.sm { width: 90px; }
.text-input.xs { width: 60px; }
.ftin-extra { display: inline-flex; align-items: flex-end; }


.hint { color: var(--text-2); font-size: 13.5px; margin-top: 6px; }
.env-tag { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 500;
  background: var(--accent-dim); color: var(--accent); padding: 2px 8px; border-radius: var(--radius-sm); margin-left: 8px; }

.text-input, .num-input, select {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 14px; padding: 9px 11px;
}
.text-input { width: 100%; max-width: 340px; }
select { max-width: 340px; }
.num-input { width: 70px; }

.wiz-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

/* option cards (suggestions + snaps) */
.opt-cards { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.opt-card {
  position: relative; text-align: left; cursor: pointer; min-width: 150px;
  background: var(--bg-2); border: 1.5px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; color: var(--text); font-family: var(--font); transition: all .12s;
}
.opt-card:hover { border-color: var(--border-2); }
.opt-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.opt-card .ribbon, .opt-card .oc-note .rec { font-size: 11px; }
.opt-card .ribbon {
  position: absolute; top: -9px; left: 12px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.03em;
}
.oc-title { font-weight: 600; font-size: 13px; }
.oc-big { font-size: 22px; font-weight: 500; margin: 4px 0; color: var(--accent); }
.oc-note { color: var(--text-2); font-size: 12.5px; }
.oc-render { margin: 8px 0; }
.oc-render svg { max-width: 100%; height: auto; display: block; }
.oc-stats { font-size: 12px; color: var(--text-2); line-height: 1.5; }
/* Over/under vs the requested size — green = meets/exceeds, red = falls short,
   mirroring the calculator. Used on the fit cards and the Selected-build table. */
.oc-delta { font-size: 11px; margin-top: 3px; color: var(--text-3); }
.delta-inline { font-size: 11px; margin-left: 8px; color: var(--text-3); }
.delta-pos { color: var(--success); }
.delta-neg { color: var(--danger); }
.delta-exact { color: var(--text-3); }

/* Series/pitch suggestion cards: compact — several should fit on one row. */
.opt-card.suggestion { min-width: 112px; padding: 8px 10px; }
.opt-card.suggestion .oc-title { font-size: 12px; }
.opt-card.suggestion .oc-big { font-size: 16px; margin: 2px 0; }
.opt-card.suggestion .oc-note { font-size: 11.5px; }

/* Snap-fit cards: even grid + a uniform render slot so cards line up regardless
   of each wall's aspect ratio (was ragged with flex + min-width). */
.opt-cards.snaps {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.opt-cards.snaps .opt-card { min-width: 0; display: flex; flex-direction: column; }
.opt-cards.snaps .oc-render {
  flex: 1; display: flex; align-items: center; justify-content: center; min-height: 120px;
}
.opt-cards.snaps .oc-render svg { max-height: 120px; width: auto; }

.dropdowns, .dim-inputs, .check-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.dropdowns label, .dim-inputs label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }
.dim-inputs .times { font-size: 20px; color: var(--text-3); padding-bottom: 8px; }
.check-row { margin-top: 14px; gap: 20px; }
.check-row label { display: flex; align-items: center; gap: 7px; font-size: 13px; }

/* dimensions layout */
.dim-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.big-render { background: var(--bg-3); border-radius: var(--radius); padding: 14px; text-align: center; }
.big-render svg { max-width: 100%; height: auto; }
.spec-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; }
.spec-table td { padding: 7px 0; border-top: 1px solid var(--border); vertical-align: top; }
.spec-table td:first-child { color: var(--text-2); width: 42%; }
.spec-table .dim { color: var(--text-2); }
.suggest-169 { margin-top: 14px; background: var(--success-dim); border: 1px solid var(--success);
  border-radius: var(--radius); padding: 12px; font-size: 13px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.radio-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.inputs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }
.inputs-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }

/* review */
.review-head { display: flex; margin-bottom: 16px; }
.review-total { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.review-total span { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.warn-panel { border-color: var(--warn); }
.warn-panel h2 { color: var(--warn); }
.warn-panel ul { margin: 0 0 0 18px; font-size: 13px; color: var(--text-2); }
/* Step-3 numbers are hand-transcription targets now — larger, tabular digits. */
/* The badge lives inside the hard-coded-white .qsheet, so its colors are
   hard-coded too — theme variables would vanish in dark mode. */
.qflag { display: inline-block; font-size: 11px; color: #6b7280; border: 1px solid #d6d9e0; border-radius: var(--radius-sm); padding: 0 5px; margin-top: 3px; }

@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols { grid-template-columns: 1fr; }
  .dim-layout, .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
  .inputs-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== The quoting workbench: screen list left, calculator pane right ===== */
.workbench {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 22px; align-items: start; margin-bottom: 18px;
}
/* The screen list is its own area: a filled, bordered sidebar so it reads on a
   different visual level from the calculator (which sits on the page bg). The
   bg-2 screen cards then pop against this bg-3 panel — the calculator's own
   layering. Sticky so the roster stays put while a tall calculator scrolls. */
.wb-left {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); padding: 14px;
  position: sticky; top: 74px;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
/* Height + bottom padding mirror .pane-head (14px top via .wb-left padding, a
   ~27px content row for its small buttons, 10px bottom) so this label's divider
   and the pane header's divider land on the same horizontal line. */
.wb-list-label {
  display: flex; align-items: center; min-height: 27px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-2);
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
/* Screen rows are submit buttons (select:<idx>) — switching = save-then-load. */
.wb-screen {
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border);
  border-left: 3px solid var(--border-2);
  border-radius: var(--radius); padding: 10px 12px;
  font: inherit; color: var(--text); transition: all .12s;
}
.wb-screen:hover { border-color: var(--border-2); border-left-color: var(--text-3); }
/* Selected reads as a lit card, not just a ring: accent left bar + tint + lift. */
.wb-screen.selected {
  border-color: var(--accent); border-left-color: var(--accent);
  background: var(--accent-dim); box-shadow: 0 1px 8px rgba(0,0,0,0.12);
}
.wb-screen.has-error { border-left-color: var(--warn); }
.wb-name { font-weight: 600; }
.wb-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.type-chip {
  font-size: 11px; font-weight: 600; padding: 1px 7px;
  border-radius: var(--radius-sm);
}
.type-chip.standard { background: var(--accent-dim); color: var(--accent); }
.type-chip.package { background: var(--purple-dim); color: var(--purple); }
.type-chip.nonstandard { background: var(--warn-dim); color: var(--warn-text); }
.wb-badge { font-size: 11.5px; }
.wb-badge.needs { color: var(--warn-text); }
.wb-badge.err { color: var(--warn); font-weight: 600; }
.wb-add {
  flex-wrap: wrap; gap: 6px; margin-top: 6px;
  padding-top: 12px; border-top: 1px solid var(--border);
}
.wb-pane { min-width: 0; }
/* The configurator reads top-to-bottom: one column at every width, so the
   cards never reflow side-by-side inside the pane. Scoped — grid-2/dim-layout
   elsewhere (project options, review) keep their two columns. */
.wb-pane .grid-2, .wb-pane .dim-layout { grid-template-columns: 1fr; }
/* Pane header: the selected screen's name + its actions. Top padding matches
   the sidebar panel's 14px so the header and the "Screens on this quote"
   label start on the same plane. */
.pane-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 14px 0 10px; border-bottom: 2px solid var(--accent);
}
.pane-head .spacer { flex: 1; }
.pane-title { font-size: 14px; color: var(--text-2); }
.pane-title b { color: var(--text); }
.included-note { font-style: italic; }

/* Calculator-style section headers: a colored left bar + faint gradient wash on
   each config area's <h2>, mirroring the calculator's out-card headers so the
   distinct areas of configuration read as distinct. Scoped to the workbench so
   other pages' panels are untouched. Color comes from the .sec-* modifier. */
.workbench .panel > h2:first-child {
  margin: -18px -18px 14px; padding: 9px 15px;
  border-bottom: 1px solid var(--border);
  border-left: 5px solid var(--border-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--bg-3), transparent 70%);
  font-size: 13px;
}
/* These carry a higher specificity than the base `.workbench .panel > h2`
   rule above (extra .panel.sec-* class) so the per-section colour actually
   wins — otherwise the base grey bar overrides them and nothing shows. */
.workbench .panel.sec-name   > h2:first-child { border-left-color: var(--col-tech);   background: linear-gradient(90deg, var(--col-tech-dim), transparent 70%); }
.workbench .panel.sec-series > h2:first-child { border-left-color: var(--accent);     background: linear-gradient(90deg, var(--accent-dim), transparent 70%); }
.workbench .panel.sec-size   > h2:first-child { border-left-color: var(--col-tech);   background: linear-gradient(90deg, var(--col-tech-dim), transparent 70%); }
.workbench .panel.sec-render > h2:first-child { border-left-color: var(--col-tech);   background: linear-gradient(90deg, var(--col-tech-dim), transparent 70%); }
.workbench .panel.sec-mount  > h2:first-child { border-left-color: var(--danger);     background: linear-gradient(90deg, var(--red-dim), transparent 70%); }
.workbench .panel.sec-spares > h2:first-child { border-left-color: var(--col-spares); background: linear-gradient(90deg, var(--col-spares-dim), transparent 70%); }
.workbench .panel.sec-video  > h2:first-child { border-left-color: var(--col-tech);   background: linear-gradient(90deg, var(--col-tech-dim), transparent 70%); }
.workbench .panel.sec-comm   > h2:first-child { border-left-color: var(--col-comm);   background: linear-gradient(90deg, var(--col-comm-dim), transparent 70%); }
.workbench .panel.sec-proc   > h2:first-child { border-left-color: var(--col-proc);   background: linear-gradient(90deg, var(--col-proc-dim), transparent 70%); }
@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; }
  .wb-left { position: static; max-height: none; }
}

/* Per-screen sign-off state: loud until someone reviews, quiet once done. */
.sc-review {
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  border-radius: var(--radius-sm); padding: 1px 7px; margin-left: 8px; vertical-align: 1px;
}
.sc-review.needs { color: var(--warn); background: var(--warn-dim); border: 1px solid var(--warn); }
.sc-review.ok { color: var(--success); background: var(--success-dim); border: 1px solid transparent; }
/* Requested-vs-Selected contrast: the dealer's verbatim ask (muted — text-2,
   never text-3, which fails AA) over the builder's live state (bold). */
.req-line { color: var(--text-2); font-size: 13px; }
.req-line.req-alt { padding-left: 14px; }
.sel-line { color: var(--text); font-weight: 600; font-size: 13.5px; }
.req-block { margin-bottom: 14px; }
/* The Requested/Selected rows as a compact table — one column per attribute
   so the two reads line up vertically. Same weight contrast as the old
   lines: the ask muted, the live state bold. */
.reqsel-table { border-collapse: collapse; margin-bottom: 6px; }
.reqsel-table th, .reqsel-table td {
  text-align: left; padding: 2px 14px 2px 0; font-size: 12.5px;
}
.reqsel-table thead th {
  color: var(--text-3); font-weight: 600; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.reqsel-table tbody th { color: var(--text-3); font-weight: 500; }
.reqsel-table .rs-req td { color: var(--text-2); }
.reqsel-table .rs-sel td { color: var(--text); font-weight: 600; }
.sc-error { color: var(--warn); font-size: 13px; }
/* A value we guessed, not one the dealer gave — badge, not plain text. */
.sc-guess {
  display: inline-block; width: fit-content; margin-top: 2px; padding: 2px 6px;
  background: var(--warn-dim); color: var(--warn-text);
  border-radius: var(--radius-sm); font-size: 13px;
}
/* Counterpart to .sc-guess: the dealer's own answer from the intake form —
   an informational tag, never a lock. Blue like .from-form so every
   "from the form" note reads the same (accent/accent-dim hold up in both
   themes). */
.ff-tag {
  display: inline-block; width: fit-content; margin-top: 2px; padding: 2px 6px;
  background: var(--accent-dim); color: var(--accent);
  border-radius: var(--radius-sm); font-size: 13px;
}
/* Screen-details card: the environment row — the form's answer on the left,
   the picklist on the right, one line. */
.env-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.env-row label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--text-2); }
/* The processor recommendation sits between the video inputs and the choice
   radios on the Video & LED processor card — mirrors the calculator's
   .proc-rec treatment. */
.proc-lead {
  background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 12px;
}
.proc-lead .pl-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-2); margin-bottom: 3px;
}
.proc-lead .pl-name { font-weight: 600; font-size: 15px; }
.proc-lead .pl-note { font-size: 11.5px; color: var(--text-2); margin-top: 4px; }
/* Modular pick: the chassis name heads the box, its cards list below it. */
.proc-lead .pl-cards { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.proc-lead .pl-cards li { margin: 2px 0; }
/* Fixed pick: the opposite-platform (VX↔MX) alternate, one quiet line. */
.proc-lead .pl-alt { font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
/* "Also quote as an option" checkboxes — indented so they don't read as part
   of the mount radio group above them. */
.checkbox-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 4px 18px;
  font-size: 13.5px; color: var(--text-2);
}
.btn.danger { color: var(--danger); }
.add-row { display: flex; gap: 10px; margin-top: 6px; }
.pb-group {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-2); margin: 14px 0 8px;
}
.pb-card { cursor: pointer; }
.pb-card .pb-radio { position: absolute; opacity: 0; pointer-events: none; }
.panel-muted { opacity: 0.65; }

/* ===== Manual processor picker (project options) ===== */
.proc-panel .radio-row { font-size: 14px; }
.proc-sub {
  margin: 4px 0 10px 26px; padding: 12px; background: var(--bg-3);
  border-radius: var(--radius); display: flex; flex-direction: column; gap: 10px;
}
.proc-sub select { max-width: 100%; }
.card-list { display: flex; flex-direction: column; gap: 8px; }
.card-row { display: flex; gap: 8px; align-items: center; }
.card-row select { flex: 1; min-width: 0; }
.card-row .num-input { width: 64px; }

/* ===== Quotient-lookalike quote sheet (step-3 review) =====
   The preview prints as the transcription guide for keying into Quotient, so
   it mirrors Quotient's customer-facing document: a white sheet, thin gray
   rules between line items, bold titles, small uppercase field labels, and
   right-aligned price stacks. Colors are hard-coded (not theme vars) so the
   sheet stays white-paper in dark mode too. */
.qsheet {
  background: #fff; color: #16181d; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 44px 30px;
}
/* Contacts header — small uppercase labels, one stacked field per row. */
.qs-contacts { margin-bottom: 28px; }
.qs-field { margin-bottom: 10px; }
.qs-label {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; color: #8a8f98;
}
.qs-value { font-size: 14.5px; }
.qs-strong { font-weight: 700; }
.qs-line { display: block; }
.qs-title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; }
.qs-section { padding-top: 12px; }
/* Section headings read distinct from row titles: bigger, heavier, a light
   bottom rule and extra top margin (D5) — deliberately NOT the workbench's
   colored bars; this printable sheet stays uncolored. */
.qs-head {
  font-size: 17.5px; font-weight: 800; margin: 26px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid #e7e9ee;
}
.qs-body { font-size: 13.5px; color: #3c414b; margin: 0 0 10px; }
.qs-spec {
  font-family: var(--font); font-size: 13px; line-height: 1.55;
  color: #3c414b; white-space: pre-wrap; margin: 8px 0 4px;
}
/* Alternate size/pitch asks from the intake form — attention style, same
   treatment as the roster's .sc-guess badges. Screen-only (hidden in print). */
.qalt-note {
  display: inline-block; width: fit-content; margin: 0 0 6px; padding: 2px 6px;
  background: var(--warn-dim); color: var(--warn-text);
  border-radius: var(--radius-sm); font-size: 13px;
}
.qrender { text-align: center; margin: 10px 0; }
.qrender svg { max-width: 100%; max-height: 260px; height: auto; }
/* Line items — glyph + bold title left, Quotient's price stack right. */
.qs-row { display: flex; gap: 18px; padding: 12px 0; border-top: 1px solid #e7e9ee; }
.qs-row-main { flex: 1; min-width: 0; }
.qs-row-title { display: flex; align-items: baseline; font-size: 14.5px; font-weight: 700; }
/* Notes align with their own row's title: indented only under glyphed rows. */
.qs-note { color: #6b7280; font-size: 12.5px; margin-top: 2px; }
.qs-note.indent { padding-left: 24px; }
.qs-row.muted .qs-row-title, .qs-row.muted .qs-price { color: #8a8f98; }
.qs-row.muted .qs-total { color: #8a8f98; }
/* PandaDoc-catalog SKU chip under the row title (transcription aid). The
   missing-marker color is hard-coded like the rest of the white sheet. */
.qs-sku { font-size: 11.5px; color: #6b7280; margin-top: 3px; }
.qs-sku.qs-sku-missing { color: #b45309; }
/* Clipboard buttons (SKU chips, tech-summary block) — screen-only helpers on
   the white sheet, so colors are hard-coded; hidden in the print block. */
.copy-btn {
  font: inherit; font-size: 11px; padding: 1px 7px; margin-left: 6px;
  border: 1px solid #d6d9e0; border-radius: var(--radius-sm);
  background: #fff; color: #6b7280; cursor: pointer;
}
.copy-btn:hover { color: #16181d; border-color: #b6bac2; }
.copy-btn.copied { color: #1a7f37; border-color: #1a7f37; }
.qs-spec-wrap .copy-btn { float: right; margin: 8px 0 0; }
/* Checkbox / radio glyphs — pure CSS, never form controls. */
.qglyph {
  display: inline-block; flex: none; width: 15px; height: 15px;
  margin-right: 9px; position: relative; top: 2px; border: 1.5px solid #b6bac2;
}
.qglyph.check { border-radius: 3px; }
.qglyph.check.on { background: #2f6fed; border-color: #2f6fed; }
.qglyph.check.on::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.qglyph.radio { border-radius: 50%; }
.qglyph.radio.on { border-color: #2f6fed; }
.qglyph.radio.on::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #2f6fed;
}
/* The right-aligned price stack: unit → x qty → line total (bolder). */
.qs-price {
  text-align: right; font-size: 13px; color: #3c414b;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.qs-total { font-size: 14.5px; font-weight: 600; color: #16181d; }
/* Catalog lines: the quantity is what gets keyed into Quotient, so it's the
   headline element of the price stack (no price, no placeholder). */
.qs-qty-big { font-size: 16px; font-weight: 700; color: #16181d; }
/* Mount/hang lines: the Quotient COST-field figure is prominent (D3);
   the computed net rides along small. */
.qs-cost { font-size: 15px; font-weight: 700; color: #16181d; }
.qs-cost-label { font-size: 11px; color: #6b7280; max-width: 220px; white-space: normal; }
.qs-total-sm { font-size: 12px; color: #6b7280; margin-top: 2px; }
.qs-notsel { font-size: 12px; color: #8a8f98; margin-top: 2px; }
/* Warranty calculator — the calculator tab's manual tool, ported. Lives on
   the white sheet, so colors are hard-coded like its neighbours. Screen-only
   (hidden in print with the other interactive bits). */
.warr-calc {
  border: 1px dashed #b6bac2; border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 4px 0 10px;
}
.wc-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.wc-field { display: block; font-size: 11.5px; color: #6b7280; margin-bottom: 3px; }
.warr-calc input {
  width: 180px; font: inherit; font-size: 14px; padding: 5px 8px;
  border: 1px solid #d6d9e0; border-radius: var(--radius-sm);
  background: #fff; color: #16181d; font-variant-numeric: tabular-nums;
}
.wc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.wc-opt { border: 1px solid #e7e9ee; border-radius: var(--radius-sm); padding: 8px 10px; text-align: center; }
.wc-label { font-size: 12px; color: #6b7280; }
.wc-price { font-size: 15px; font-weight: 700; color: #16181d; font-variant-numeric: tabular-nums; }
.wc-sub { font-size: 11px; color: #8a8f98; font-variant-numeric: tabular-nums; }
.wc-note { font-size: 11.5px; color: #8a8f98; margin-top: 8px; }
/* Subtotal / grand-total blocks — Quotient's right-aligned label + amount. */
.qs-subtotal { border-top: 1px solid #e7e9ee; padding: 12px 0; margin-top: 12px; }
.qs-subline { display: flex; justify-content: flex-end; gap: 28px; font-size: 13.5px; }
/* "Options selected" line inside a tail section (no subtotal block follows). */
.qs-optline { margin-top: 12px; color: #3c414b; }
.qs-amt { min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
/* Blank subtotal placeholder — an empty ruled box the quoter fills in after
   subtotalling in Quotient (no app-computed sums on the sheet). */
.qs-amt-blank { border-bottom: 1px solid #b6bac2; height: 17px; }
.qs-sub-note { font-size: 11px; color: #8a8f98; font-weight: 400; }
.qs-grand { border-top: 1px solid #e7e9ee; margin-top: 20px; padding-top: 14px; }
.qs-grand-total { font-weight: 700; font-size: 15.5px; margin-top: 4px; }
.qs-fineprint { text-align: right; font-size: 11.5px; color: #8a8f98; margin: 8px 0 0; }

/* ===== Quotient screenplay dry run ===== */
.sp-summary {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text-2);
}
.sp-summary .sp-net { margin-left: auto; }
.sp-list { list-style: none; counter-reset: sp; padding: 0; margin: 0; }
.sp-row {
  counter-increment: sp; display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 10px; border-bottom: 1px solid var(--border);
}
.sp-row::before {
  content: counter(sp); flex: 0 0 26px; text-align: right; color: var(--text-3);
  font-family: var(--mono); font-size: 11px; padding-top: 3px;
}
.sp-text { background: var(--bg-3); }
.sp-sub { background: var(--accent-dim); }
.sp-verb {
  flex: 0 0 78px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 6px; border-radius: var(--radius-sm); text-align: center;
  background: var(--border); color: var(--text-2);
}
.sp-verb.sp-catalog { background: var(--accent-dim); color: var(--accent); }
.sp-verb.sp-custom { background: var(--success-dim); color: var(--success); }
.sp-body { flex: 1; min-width: 0; }
.sp-head { font-weight: 500; font-size: 13.5px; }
.sp-head .mono { color: var(--text-2); margin-left: 8px; }
.sp-note { background: var(--bg); border-radius: var(--radius); padding: 8px 10px;
  font-family: var(--mono); font-size: 11px; color: var(--text-2); white-space: pre-wrap; margin: 6px 0 0; }
.sp-note-inline { color: var(--text-3); font-size: 12px; font-weight: 400; margin-left: 8px; }
.sp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.sp-tag {
  font-size: 11px; color: var(--text-3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 1px 6px;
}
.sp-tag.sp-field { color: var(--success); border-color: var(--success); }
.sp-tag.sp-exp { color: var(--text-2); font-family: var(--mono); margin-left: auto; }

/* ============================================================================
   Rep-facing intake form (public) — /intake
   ========================================================================== */
.intake-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 22px; background: var(--bg-2);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.intake-header .brand { font-weight: 600; font-size: 16px; }
.intake-header .brand span { color: var(--accent); }
.intake-header .spacer { flex: 1; }
.intake-tag {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
}
.intake-main { max-width: 760px; margin: 0 auto; padding: 26px 22px 60px; }

/* Full-page install-collage backdrop. Overlay keeps the form legible; the
   fixed pseudo-element avoids background-attachment:fixed jank on iOS. */
body.intake-page { --intake-overlay: rgba(244,245,247,0.90); }
body.dark.intake-page { --intake-overlay: rgba(10,12,16,0.86); }
body.intake-page::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(var(--intake-overlay), var(--intake-overlay)),
    url('img/intake-bg.jpg') center / cover no-repeat,
    var(--bg);
}
body.intake-page .intake-form { box-shadow: 0 8px 30px rgba(0,0,0,0.18); }

.ns-link { font-size: 13px; color: var(--text-2); margin: -6px 0 12px; }
/* Non-standard screen: a real, visible secondary button beside "Add screen"
   (was fine-print text a dealer would skim past), with a plain-language hint. */
.screen-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn.ns { border-color: var(--accent); color: var(--accent); background: transparent; font-weight: 600; }
.btn.ns:hover { background: var(--accent-dim); border-color: var(--accent); }
.ns-hint { font-size: 12.5px; color: var(--text-3); margin: 7px 0 0; }
.empty-screens .screen-add-row { justify-content: center; }
.sr-badge-ns {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--warn-text); background: var(--warn-dim);
  border: 1px solid var(--warn); border-radius: var(--radius-sm);
  padding: 1px 6px; margin-left: 8px; vertical-align: 1px;
}
.sr-badge-std {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  padding: 1px 6px; margin-left: 8px; vertical-align: 1px;
}
.sr-badge-pkg {
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--good); background: var(--good-dim);
  border: 1px solid var(--good); border-radius: var(--radius-sm);
  padding: 1px 6px; margin-left: 8px; vertical-align: 1px;
}
/* Pitch pills (screen-editor modal) — one button per stocked pitch; the
   suggested pill for the viewing distance gets an outline + tag, selection
   only on click. */
.pitch-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.pitch-pill {
  position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text); font-family: var(--font);
  font-size: 13px; font-weight: 500; padding: 8px 15px; cursor: pointer;
}
.pitch-pill:hover { border-color: var(--border-2); }
.pitch-pill.suggested { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.pitch-pill.selected { background: var(--accent); border-color: var(--accent); color: #fff; }
.pitch-pill .pp-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 1px 7px;
  border-radius: 999px; white-space: nowrap;
}
.distance-row { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.distance-row label { flex: none; margin: 0; }
.modal .distance-row input[type=range] {
  flex: 1; width: auto; padding: 0; border: none; accent-color: var(--accent);
}
.modal .distance-row input[type=range]:focus {
  box-shadow: none; outline: 2px solid var(--accent); outline-offset: 3px;
  border-radius: 2px;
}
.distance-row .dr-val { font-size: 13px; color: var(--text); min-width: 46px; text-align: right; }

/* 3-way units segmented control */
.seg-control {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin: 4px 0 12px;
}
.seg-control button {
  background: var(--bg); border: none; border-right: 1px solid var(--border);
  color: var(--text-2); font-family: var(--font); font-size: 13px;
  font-weight: 500; padding: 8px 18px; cursor: pointer;
}
.seg-control button:last-child { border-right: none; }
.seg-control button:hover { background: var(--bg-3); }
.seg-control button.selected { background: var(--accent); color: #fff; }

/* Live size preview: aspect rectangle + width-driven 16:9 helper */
.dim-preview {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--bg-3); border-radius: var(--radius);
  padding: 12px 14px; margin: 12px 0 4px;
}
.dim-preview svg { display: block; max-width: 100%; height: auto; }
.dim-preview rect { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 2; }
.dim-preview text { fill: var(--text-2); font-family: var(--font); font-size: 12px; }

/* Additional-option rows (unlimited; cloned from the alt-row template) */
.alt-row {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 10px;
}
.alt-row-head { display: flex; align-items: center; gap: 10px; }
.alt-row-head .alt-row-title { font-size: 13px; margin: 0; flex: 1; }
.seg-control.mini { margin: 0; }
.seg-control.mini button { padding: 5px 11px; font-size: 12px; }
/* "Same size/pitch as main screen" greys the controls it overrides. */
.opt-muted { opacity: 0.45; }
.opt-muted input:disabled, .opt-muted select:disabled, .opt-muted button:disabled {
  cursor: not-allowed;
}

.sr-name-text { cursor: text; }
.sr-rename {
  background: var(--bg); border: 1px solid var(--accent); border-radius: var(--radius);
  color: var(--text); font: inherit; padding: 2px 6px; width: 220px; max-width: 100%;
}

.field-link {
  display: inline-block; margin-top: 5px;
  font-size: 12px; font-weight: 400; color: var(--accent);
}

/* Anniversary logo in the header */
.intake-header .brand img {
  height: 46px; width: auto; display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

/* Stepper */
.intake-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.intake-steps li {
  display: flex; align-items: center; gap: 7px; flex: 1;
  color: var(--text-3); font-size: 13px; font-weight: 500;
  padding: 8px 12px; background: var(--bg-3); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.intake-steps li .num {
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-4); color: var(--text-2); font-size: 12px; font-weight: 600;
}
.intake-steps li a {
  display: flex; align-items: center; gap: 7px; flex: 1;
  color: inherit; text-decoration: none;
}
.intake-steps li.done:hover { border-color: var(--border-2); }
.intake-steps li a:hover { text-decoration: none; }
.intake-steps li.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.intake-steps li.active .num { background: var(--accent); color: #fff; }
.intake-steps li.done { color: var(--success); }
.intake-steps li.done .num { background: var(--success); color: #fff; }

/* Form shell */
.intake-form {
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 18px;
}
.intake-form h1 { font-size: 22px; font-weight: 600; margin: 0 0 18px; letter-spacing: -0.01em; }
.intake-form h2 { font-size: 14px; font-weight: 600; margin: 22px 0 12px; }
.intake-form .hint { color: var(--text-2); font-size: 13px; margin: -6px 0 12px; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid .span-2 { grid-column: 1 / -1; }
/* The screen-editor / non-standard modals are SIBLINGS of .intake-form, so
   these field rules cover both (a label's control always stacks below it). */
.intake-form label, .modal label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 500; color: var(--text-2);
}
/* h3/legend aren't flex-column, so an inline marker sits right after the text. */
.modal h3.req::after,
.radio-block.req > legend::after { content: " *"; color: var(--danger); }
/* Labels ARE flex-column (control stacks under the text), so an ::after would
   drop the marker onto its own line below the input — pin it to the label's
   top-right corner instead so it reads as "this field is required". */
.intake-form label.req, .modal label.req { position: relative; }
.intake-form label.req::after, .modal label.req::after {
  content: "*"; color: var(--danger); position: absolute; top: 0; right: 2px;
}
.intake-form label .opt, .intake-form h2 .opt {
  font-weight: 400; color: var(--text-2); font-size: 12px;
}
.intake-form input, .intake-form select, .intake-form textarea,
.modal input, .modal select, .modal textarea {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-family: var(--font); font-size: 14px; padding: 9px 11px; width: 100%;
}
.intake-form input:focus, .intake-form select:focus, .intake-form textarea:focus,
.modal input:focus, .modal select:focus, .modal textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.intake-form textarea, .modal textarea { resize: vertical; }
/* --text-3 on this modal fails AA in dark theme (~2.66:1) — same fix as
   .intake-form .hint. */
.modal .hint { color: var(--text-2); font-size: 13px; margin: 6px 0 10px; }

/* Radio / check blocks */
.radio-block { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 16px 0; }
.radio-block legend { font-size: 13px; font-weight: 600; color: var(--text-2); padding: 0 6px; }
/* The whole row is the tap target, not just the 13px dot — these stack in
   fieldsets and get used on tablets in the field. Deliberately NOT scoped to
   `.intake-form`: the screen-editor modal is a sibling of it, so a scoped rule
   left the modal's Mounting/Use radios as bare inline labels. */
label.radio, label.check {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  font-weight: 400; color: var(--text); margin: 2px 0; padding: 8px 6px;
  min-height: 40px; border-radius: var(--radius-sm); cursor: pointer;
}
label.radio:hover, label.check:hover { background: var(--bg-3); }
label.radio input, label.check input { width: 18px; height: 18px; flex: none; margin: 0; }
@media (pointer: coarse) {
  label.radio, label.check { min-height: 44px; }
  .intake-form input:not([type=radio]):not([type=checkbox]),
  .intake-form select, .intake-form textarea,
  #editor-form input:not([type=radio]):not([type=checkbox]),
  #editor-form select, #editor-form textarea { min-height: 44px; }
  .pitch-pill, .seg-control button, #ed-ratio-btn { min-height: 44px; }
  /* Screen-row actions include destructive Clone/Remove — keep them tappable. */
  .sr-actions .btn { min-height: 44px; }
}
.sub-block { border-top: 1px dashed var(--border); margin-top: 16px; padding-top: 6px; }
.notsure { background: var(--bg-3); border-radius: var(--radius); padding: 12px 14px; margin: 8px 0 4px; }

.placeholder-note { font-size: 12px; color: var(--warn); margin-top: 8px; }

/* Actions row */
.intake-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.intake-actions .spacer { flex: 1; }
.btn.danger { color: var(--danger); border-color: var(--border); background: transparent; }
.btn.danger:hover { border-color: var(--danger); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Errors */
.intake-errors {
  background: var(--red-dim); border: 1px solid var(--danger); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 18px; color: var(--text); font-size: 13px;
}
.intake-errors ul { margin: 6px 0 0; padding-left: 18px; }
.intake-warn {
  background: var(--warn-dim); border: 1px solid var(--warn); border-radius: var(--radius);
  padding: 10px 14px; margin: 12px 0; color: var(--text); font-size: 13px;
}

/* Screens list */
.intake-form h2 .count {
  background: var(--bg-4); border-radius: var(--radius-sm); padding: 1px 9px;
  font-size: 12px; color: var(--text-2); font-weight: 500; margin-left: 6px;
}
.empty-screens {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 20px; text-align: center; color: var(--text-3); font-size: 13px;
}
.screen-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.screen-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
}
.screen-row.incomplete { border-color: var(--warn); }
.sr-main { flex: 1; }
.sr-name { font-weight: 600; font-size: 14px; }
.sr-flag {
  font-size: 11px; font-weight: 600; margin-left: 6px;
  color: var(--warn-text); background: var(--warn-dim);
  border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 1px 6px;
}
.sr-sum { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.sr-actions { display: flex; gap: 6px; }

.add-screen {
  display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-top: 8px;
}
.add-screen label { flex: 1; min-width: 220px; }
.add-buttons { display: flex; gap: 8px; }

.attach-block { margin-top: 0; }
.attach-list { list-style: none; margin: 0 0 12px; padding: 0; }
.attach-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 13px; }
.attach-list .att-name { flex: 1; }
.attach-form { display: flex; gap: 10px; align-items: center; }
.attach-form input[type=file] { flex: 1; }

.builder-top .back-link { font-size: 13px; }
.builder-top h1 { margin-top: 6px; }

/* Review */
.review-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 16px 14px; margin-bottom: 14px; }
.rp-head { display: flex; align-items: center; justify-content: space-between; }
.review-dl { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; margin: 6px 0; }
.review-dl dt { color: var(--text-3); }
.review-dl dd { margin: 0; color: var(--text); }
.review-screen-table {
  width: 100%; border-collapse: collapse; font-size: 13px; margin: 10px 0 0;
}
.review-screen-table th {
  color: var(--text-3); font-weight: 500; text-align: left;
  padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.review-screen-table td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.review-screen-table .sr-badge-std, .review-screen-table .sr-badge-pkg,
.review-screen-table .sr-badge-ns { margin-left: 0; }

/* Done */
.intake-done { text-align: center; padding: 50px 20px; }
.done-check {
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--success); color: #fff; font-size: 34px; display: grid; place-items: center;
}
.intake-done h1 { font-size: 24px; margin-bottom: 10px; }
.intake-done p { color: var(--text-2); margin: 6px 0; }

@media (max-width: 620px) {
  .field-grid { grid-template-columns: 1fr; }
  .intake-steps li .lbl { display: none; }
}

.board-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.board-top-note { color: var(--text-2); font-size: 13.5px; }

/* Screen-editor modal (in-page popup) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; overflow-y: auto;
}
.modal {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  width: 100%; max-width: 640px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px);
}
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { font-size: 17px; font-weight: 600; margin: 0; flex: 1; }
/* The form sits between .modal and .modal-body in the flex column; without
   min-height:0 it refuses to shrink, so the body never scrolls and content
   spills past the modal's max-height. */
.modal > form { display: flex; flex-direction: column; min-height: 0; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-body h3 { font-size: 13px; font-weight: 600; margin: 20px 0 10px; color: var(--text-2); }
.modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
}
.modal-foot .spacer { flex: 1; }
/* Save-time "you still need X" banner in the screen editor. Text colour is
   deepened past the tinted background for AA contrast (var(--danger) on
   --red-dim falls just short at 13px). */
.modal-err {
  margin: 0 20px; padding: 9px 12px;
  background: rgba(220,38,38,0.12); border: 1px solid var(--danger);
  border-radius: var(--radius); color: #b91c1c;
  font-size: 13px; font-weight: 600;
}
body.dark .modal-err { background: rgba(239,68,68,0.16); color: #fca5a5; }
.suggest-line { margin: 4px 0 8px; }
.suggest-line b { color: var(--accent); }

/* `hidden` must win over the overlay's display:flex */
.modal-overlay[hidden] { display: none; }

/* Additional-contact rows on the contact page */
.addl-row { align-items: end; margin-bottom: 10px; }
.addl-row .addl-remove { height: 38px; }
#addl-contacts:empty { display: none; }
.dim-group { margin-bottom: 4px; }

/* The `hidden` attribute must always win over display:grid/flex on the same
   element (dimension groups, gated sections, the modal overlay all rely on it). */
[hidden] { display: none !important; }

/* Keep the modal header/footer pinned and let only the body scroll, so Save/Cancel
   always sit inside the card. */
.modal-head, .modal-foot { flex: 0 0 auto; }
.modal-body { flex: 1 1 auto; min-height: 0; }

/* Dashboard data-sources sync panel */
.sync-panel {
  margin-top: 10px; padding: 14px 18px; max-width: 620px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.sync-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 8px;
}
.sync-row { padding: 6px 0; font-size: 13.5px; border-top: 1px solid var(--border); }
.sync-row b { margin-right: 8px; }
.sync-badge {
  font-size: 11px; padding: 2px 8px; border-radius: var(--radius-sm); margin-right: 8px;
}
.sync-badge.ok { color: var(--success); background: var(--success-dim); }
.sync-badge.warn { color: var(--warn); background: var(--warn-dim); }
.sync-note { color: var(--text-2); font-size: 12.5px; }
.sync-problems {
  margin-top: 5px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--warn); background: var(--warn-dim); border-radius: var(--radius);
}

/* Data-sources page: per-source upload row + flashed result banners. */
.sync-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 9px;
}
.sync-actions input[type=file] { font-size: 12.5px; max-width: 100%; }
.sync-actions input[type=file]::file-selector-button {
  font: inherit; font-size: 12px; margin-right: 10px; padding: 4px 10px;
  color: var(--text); background: var(--bg-3); cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sync-download { font-size: 12.5px; color: var(--accent); }
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.flash {
  padding: 9px 13px; font-size: 13.5px; border-radius: var(--radius);
  border: 1px solid var(--border);
}
.flash-ok { color: var(--success); background: var(--success-dim); border-color: transparent; }
.flash-error { color: var(--warn); background: var(--warn-dim); border-color: transparent; }

/* ── Login + users ──────────────────────────────────────────────────────── */
.login-wrap { display: flex; justify-content: center; padding-top: 6vh; }
.login-card {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; width: 100%; max-width: 440px;
}
.login-card h1 { font-size: 21px; font-weight: 600; margin-bottom: 6px; }
.login-users { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.login-user {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius); padding: 10px 12px;
  font-weight: 500;
}
.login-user:hover { border-color: var(--border-2); }
.login-user:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.login-user input { accent-color: var(--accent); }
.login-row { display: flex; gap: 8px; margin-bottom: 10px; }
.login-row .text-input { flex: 1; max-width: none; }
/* Google's sign-in button keeps its own white-and-Roboto-ish look on purpose —
   it's the mark people scan for, so it shouldn't be restyled into the theme. */
.google-btn {
  width: 100%; justify-content: center; gap: 10px; margin-top: 14px;
  background: #fff; border-color: #dadce0; color: #3c4043;
  font-size: 14px; font-weight: 500; padding: 11px 13px;
}
.google-btn:hover { background: #f7f8f8; border-color: #d2d5d9; }
.new-user { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.new-user summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.who-avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 600;
  display: inline-grid; place-items: center;
}
.who-name { color: var(--text); font-weight: 500; }
.req-star { color: var(--danger); }
.manual-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px;
  font-weight: 500; color: var(--text-2); margin-bottom: 14px; }
.manual-form .text-input { max-width: none; }
.manual-form textarea { resize: vertical; font-family: var(--font); }
.manual-form label .opt { font-weight: 400; color: var(--text-2); font-size: 12px; }

/* ── Assignment on cards + untouched indicator ──────────────────────────── */
.assign-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.assign-row select {
  flex: 1; min-width: 0; font-size: 12px; padding: 4px 7px; max-width: 200px;
}
.card .untouched-note { color: var(--accent); font-weight: 500; }
.card.untouched { border-left: 3px solid var(--accent); }

/* ── Complete column (slim "out the door" list) ─────────────────────────── */
.board-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.col-complete .dot { background: var(--text-3); }
.done-row { padding: 8px 4px; border-top: 1px solid var(--border); font-size: 14px; }
.done-row:first-of-type { border-top: none; }
.done-title a { color: var(--text); font-weight: 500; }
.done-meta { color: var(--text-2); font-size: 12.5px; margin-top: 1px; }
.done-status { color: var(--success); text-transform: capitalize; }
.done-more { display: block; margin-top: 10px; font-size: 12.5px; }

/* Quotient link paste row on the detail page */
.qlink-form { display: flex; gap: 8px; margin-top: 10px; }
.qlink-form .text-input { flex: 1; max-width: none; font-size: 12.5px; }

@media (max-width: 1300px) { .board-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .board-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .board-5 { grid-template-columns: 1fr; } }

/* Intake: project-step tier feasibility cards + screens-page date banner */
.date-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; margin-bottom: 18px; font-size: 14px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
}
.tier-panel { margin: 22px 0 6px; }
.tier-panel h2 { margin-bottom: 4px; }
.tier-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tier-card {
  padding: 12px 16px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-2);
}
.tier-card.t-ok   { border-color: var(--success); }
.tier-card.t-air  { border-color: var(--warn); }
.tier-card.t-no   { opacity: .75; }
.tier-card.t-na   { opacity: .55; }
.tier-top { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.tier-badge {
  font-size: 11px; padding: 2px 9px; border-radius: var(--radius-sm); white-space: nowrap;
}
.tier-badge.b-ok  { color: var(--success); background: var(--success-dim); }
.tier-badge.b-air { color: var(--warn); background: var(--warn-dim); }
.tier-badge.b-no  { color: var(--danger); background: var(--red-dim); }
.tier-blurb { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.tier-detail { font-size: 13.5px; margin-top: 6px; }
.tier-note { font-size: 12px; color: var(--text-3); margin-top: 4px; font-style: italic; }
.tier-break { font-size: 12px; color: var(--text-3); margin-top: 5px; }
/* Selectable tier cards (required pick once a date is set) */
.tier-card.selectable { cursor: pointer; }
.tier-card.selectable:hover { background: var(--bg-3); }
.tier-card.selectable.selected {
  border-color: var(--accent); background: var(--accent-dim);
}
/* label.* keeps these level with .intake-form label so row direction wins */
label.tier-pick {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  flex: 1; min-width: 0; cursor: pointer;
}
/* Undo the form-wide input width:100% — same escape as label.radio input */
label.tier-pick input, label.tier-ack-row input[type=checkbox] {
  width: 18px; height: 18px; flex: none; margin: 0; padding: 0;
  accent-color: var(--accent);
}
.tier-ack { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
label.tier-ack-row {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.tier-ack-row input[type=checkbox] { margin-top: 2px; accent-color: var(--accent); }

/* ---- Quote options — alternate quotes nested under their parent ---------- */
/* The card's nested option list: visually light, this is a shared to-do list. */
.opt-list {
  margin-bottom: 8px; padding: 6px 8px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.opt-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); margin-bottom: 3px; }
.opt-row { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px;
  overflow: hidden; }
.opt-row a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.opt-status { flex: none; color: var(--text-3); font-size: 11.5px; }
/* Detail-head badge for a request that IS an option. */
.badge.option { background: var(--purple-dim); color: var(--purple);
  text-transform: none; letter-spacing: 0; }
.badge.option a { color: inherit; text-decoration: underline; }
/* Archive rows: an option must never read as its own top-level request. */
.opt-tag { margin-left: 6px; font-size: 11.5px; color: var(--text-3); }
/* A complete parent promoted into a live lane by an in-flight option. */
.card .opt-live { color: var(--success); font-size: 12.5px; margin-bottom: 8px; }
/* Complete option nested under its parent's done-row. */
.done-opt { padding: 2px 0 0 14px; font-size: 12.5px; color: var(--text-2); }
/* The step-3 editable quote title. */
.title-input { width: 100%; }
/* Detail-page helpers: quiet h2 annotation + a badge sitting inside a row. */
.panel h2 .h2-note { text-transform: none; font-weight: 400; color: var(--text-3); }
.badge.inrow { margin-left: 6px; }

/* ── Print: the step-3 review prints as just the Quotient-lookalike sheet ──
   Scoped to body.print-quote-sheet (set by wizard_3.html) so other pages
   print untouched. Everything that isn't the sheet — app chrome, the wizard
   header strip, warnings, the title form and actions — drops out. */
@media print {
  body.print-quote-sheet { background: #fff !important; }
  body.print-quote-sheet header,
  body.print-quote-sheet .wiz-top,
  body.print-quote-sheet .wiz-tabs,
  body.print-quote-sheet .form-summary,
  body.print-quote-sheet .review-head,
  body.print-quote-sheet .warn-panel,
  body.print-quote-sheet .flagmsg,
  body.print-quote-sheet .hint,
  body.print-quote-sheet form,
  body.print-quote-sheet .qalt-note,
  body.print-quote-sheet .copy-btn,
  body.print-quote-sheet .warr-calc,
  body.print-quote-sheet .qflag { display: none !important; }
  body.print-quote-sheet main { padding: 0; max-width: none; }
  body.print-quote-sheet .qsheet {
    border: none; border-radius: 0; padding: 0; color: #000;
  }
  /* Never split a line item, contact block or total block across pages. */
  body.print-quote-sheet .qs-row,
  body.print-quote-sheet .qs-contacts,
  body.print-quote-sheet .qs-subtotal,
  body.print-quote-sheet .qs-grand,
  body.print-quote-sheet .qrender { break-inside: avoid; page-break-inside: avoid; }
}


/* ── Intake public issue reporter (footer + standalone page) ─────────────── */
.intake-foot { max-width: 720px; margin: 32px auto 44px; padding: 0 4px; }
details.report-issue { border-top: 1px solid var(--border); padding-top: 14px; }
details.report-issue > summary {
  cursor: pointer; color: var(--text-2); font-size: 13.5px; list-style: none;
  user-select: none;
}
details.report-issue > summary::-webkit-details-marker { display: none; }
details.report-issue > summary::before { content: "\2691\00a0"; }
details.report-issue[open] > summary { margin-bottom: 14px; color: var(--text); }
.report-issue-form { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.ri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .ri-grid { grid-template-columns: 1fr; } }
/* Honeypot: off-screen for people and screen-readers; bots still fill it. */
.ri-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.intake-card {
  max-width: 560px; margin: 28px auto; padding: 24px 26px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-lg);
}