/* micro-LEAN · "Drafting sheet" (2026-10-06). Spec: docs/redesign-2026-10-06/DESIGN-SPEC.md
   Order: tokens → fonts → base → layout → components → screens → print → reduced motion.
   Phone first: base rules are for <760px, then (min-width:760px) and (min-width:1180px). */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --sheet: #F2F3EF; --sheet-deep: #E6E9E3; --grid: #D5DAD2; --rule: #C3CAC0;
  --paper: #FBFBF9; --ink: #17201D; --ink-2: #44524C; --ink-3: #5E6A64;
  --pen: #0E5B49; --pen-hover: #0C5040; --pen-2: #1F9D7A; --pen-wash: #DDEFE8; --pen-edge: #0A4537;
  --flag: #D9542B; --flag-ink: #8E3417; --flag-wash: #FBE4DB; --flag-wash-2: #F6D3C5;
  --amber: #B9831A; --amber-ink: #7A5410; --amber-wash: #F8ECCF;
  --sys: #3B4F8C; --sys-wash: #E2E7F5; --sys-paper: #F5F7FC;
  --info: #2563EB; --on-info: #FFFFFF;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ui: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px;
  --press: 0 1.5px 0 var(--rule);
  --edge: 0 0 0 1px var(--sheet-deep);
  --lift: 0 10px 24px -14px rgba(23,32,29,.35);
  --scrim: rgba(23,32,29,.38);
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.3,.4,1);
  --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms;
  --strip-h: 52px; --spine-w: 216px; --spine-rail-w: 60px; --inspector-w: 372px;
  --gutter: 16px; --gutter-l: 24px; --bar-h: 56px;
  --z-sticky: 10; --z-menu: 20; --z-dialog: 30; --z-toast: 40; --z-tip: 50;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 8 4.5 4.5L14.5 8' fill='none' stroke='%2344524C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10.5 3.2 3.2L15 6.5' fill='none' stroke='%23FBFBF9' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
@media (prefers-contrast: more) { :root { --rule: var(--ink-2); --grid: var(--ink-3); --ink-3: var(--ink-2); } }

/* ── 2. Fonts (self-hosted, SIL OFL: public/fonts/LICENSE.txt) ─────────── */
@font-face { font-family: "Bricolage Grotesque"; src: url(/fonts/BricolageGrotesque-normal.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-normal.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/InstrumentSans-italic.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-stretch: 75% 100%; font-display: swap; }

/* ── 3. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--strip-h) + 12px); background: var(--sheet); -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule) transparent; }
body { margin: 0; min-height: 100dvh; background: var(--sheet); color: var(--ink); font: 400 15px/1.5 var(--ui); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; font-variation-settings: "opsz" 24; text-wrap: balance; color: var(--ink); }
h2 { font-size: 24px; line-height: 1.1; }
h3 { font-size: 18px; line-height: 1.25; }
h4 { font-size: 15px; line-height: 1.3; }
p { margin: 0 0 10px; text-wrap: pretty; }
a { color: var(--pen); text-underline-offset: 2px; }
a:hover { color: var(--pen-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
code { font-size: 13px; background: var(--sheet-deep); padding: 1px 5px; border-radius: var(--r-1); }
hr { border: 0; border-top: 1px solid var(--grid); margin: 8px 0; }
:focus-visible { outline: 2px solid var(--pen-2); outline-offset: 2px; }
::selection { background: var(--pen-wash); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-3); }
.spacer { flex: 1 1 auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 16px; height: 16px; }
@media (min-width: 760px) { h2 { font-size: 28px; } * { scrollbar-width: thin; } }

/* ── 4. Layout: shell ──────────────────────────────────────────────────── */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: var(--z-tip); padding: 10px 16px; border-radius: 999px; background: var(--pen); color: var(--paper); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; color: var(--paper); }
.app-shell { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 100dvh; overflow-x: clip; padding-bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)); }
body[data-intent=""] .app-shell { padding-bottom: 0; }

/* Command strip */
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--strip-h); display: flex; align-items: center; gap: 8px; padding: 0 var(--gutter); background: var(--sheet-deep); border-bottom: 1px solid var(--grid); min-width: 0; }
.brand { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.lockup { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 20px; line-height: 1; white-space: nowrap; }
.lockup .mark { width: 28px; height: 28px; align-self: center; display: block; }
.lockup-name, .lockup-tag { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lockup-name { font: 600 20px/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.lockup-tag { font: 500 12px/1 var(--ui); letter-spacing: 0; color: var(--ink-3); }
.strip-process { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.project-select { appearance: none; min-width: 80px; max-width: 340px; flex: 0 1 auto; width: auto; height: 36px; padding: 0 26px 0 6px; border: 0; border-radius: var(--r-2); background: transparent var(--chevron) no-repeat right 4px center / 18px; font: 600 16px/1 var(--display); letter-spacing: -0.01em; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.project-select:hover { background-color: var(--paper); }
.path-chip { display: none; flex: 0 0 auto; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 12px/1 var(--ui); color: var(--ink-2); white-space: nowrap; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.path-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pen); }
.path-chip[data-intent="create"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pen); }
.path-chip:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--pen-2), var(--lift); color: var(--ink); }

/* Strip tools: an overflow "…" menu on phones, an always-open row from 760px (app.js keeps it open). */
.strip-more { position: relative; flex: 0 0 auto; }
.strip-more > summary { list-style: none; }
.strip-more > summary::-webkit-details-marker { display: none; }
.strip-tools { position: absolute; right: 0; top: calc(100% + 8px); z-index: var(--z-menu); width: min(320px, calc(100vw - 32px)); display: grid; gap: 10px; padding: 12px; background: var(--paper); border-radius: var(--r-3); box-shadow: var(--lift), var(--edge); animation: pop-in 120ms var(--ease-out); }
.strip-tools .history { display: flex; gap: 6px; }
.strip-tools .menu-list { position: static; box-shadow: none; padding: 4px 0 0; animation: none; min-width: 0; }
.header-status { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-status::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--pen-2); }
.header-status.pending::before { background: var(--amber); }
.header-status.problem::before { background: var(--flag); }
.account-box { display: inline-flex; align-items: center; gap: 8px; }
.storage-note { font-size: 13px; color: var(--ink-2); }
.next-slot:empty { display: none; }

/* Spine (≥1180) · rail (760–1179) · bottom stage bar (<760): one nav.tabs */
.spine { display: contents; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 2px; height: calc(var(--bar-h) + env(safe-area-inset-bottom)); padding: 6px 156px env(safe-area-inset-bottom) 8px; background: var(--sheet-deep); border-top: 1px solid var(--grid); }
.tab { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink-2); text-align: left; }
.tab .stage-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 12px/1 var(--display); color: var(--ink-2); transition: background var(--t-base) var(--ease-spring), box-shadow var(--t-base); }
.tab:hover .stage-n { box-shadow: inset 0 0 0 1.5px var(--pen-2); }
.tab.done .stage-n { background: var(--pen) var(--check) no-repeat center / 16px; box-shadow: none; color: transparent; }
.tab.active .stage-n { background: var(--paper); box-shadow: inset 0 0 0 2px var(--pen); color: var(--pen); }
.tab.active { background: var(--paper); box-shadow: var(--press); }
.stage-name { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; color: inherit; }
.stage-sub { display: block; font-size: 12px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spine-next { position: fixed; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: calc(var(--z-sticky) + 1); max-width: 144px; }
.spine-next:empty { display: none; }
.spine-next .btn { max-width: 144px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.spine-foot { order: 2; display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 8px var(--gutter) 16px; font-size: 13px; }
.spine-foot a, .spine-foot .link-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none; }
.spine-foot a:hover, .spine-foot .link-button:hover { color: var(--pen); text-decoration: underline; }
.app-banners { display: grid; gap: 6px; padding: 10px var(--gutter) 0; }
/* Phone: the work area itself clears the fixed bottom bar (OBS-e), whatever follows it. */
.content { order: 1; min-width: 0; padding: 16px var(--gutter) calc(var(--bar-h, 56px) + 16px); }
body[data-intent=""] .content { padding-bottom: 24px; }

@media (min-width: 760px) {
  .app-shell { grid-template-columns: var(--spine-rail-w) minmax(0, 1fr); padding-bottom: 0; }
  body[data-intent=""] .app-shell { grid-template-columns: minmax(0, 1fr); }
  .topbar, .app-banners { grid-column: 1 / -1; }
  .topbar { padding: 0 var(--gutter-l); gap: 10px; }
  .app-banners { padding: 10px var(--gutter-l) 0; }
  .path-chip { display: inline-flex; }
  .strip-more > summary { display: none; }
  .strip-more { display: flex; flex: 0 1 auto; min-width: 0; }
  .strip-tools { position: static; width: auto; display: flex; align-items: center; gap: 8px; padding: 0; background: none; box-shadow: none; border-radius: 0; animation: none; min-width: 0; }
  .strip-tools .history { gap: 0; }
  .strip-tools .menu-list { position: absolute; padding: 6px; box-shadow: var(--lift), var(--edge); min-width: 220px; }
  .storage-note.signed-out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-status { font-size: 0; gap: 0; }
  .spine { display: flex; flex-direction: column; grid-column: 1; grid-row: 3; position: sticky; top: var(--strip-h); align-self: start; height: calc(100dvh - var(--strip-h)); padding: 12px 8px; gap: 12px; overflow-y: auto; background: var(--sheet-deep); border-right: 1px solid var(--grid); }
  body[data-intent=""] .spine { display: none; }
  .tabs { position: static; display: grid; gap: 4px; height: auto; padding: 0; background: none; border: 0; justify-items: center; }
  .spine-next { position: static; max-width: none; }
  .spine-foot { order: 0; margin-top: auto; flex-direction: column; align-items: center; gap: 0; padding: 0; }
  .spine-foot .foot-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .content { grid-column: 2; grid-row: 3; order: 0; padding: 24px var(--gutter-l) 40px; }
  body[data-intent=""] .content { grid-column: 1 / -1; }
}
@media (min-width: 1180px) {
  .app-shell { grid-template-columns: var(--spine-w) minmax(0, 1fr); }
  .lockup-name, .lockup-tag { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .spine { padding: 16px 10px; }
  .tabs { justify-items: stretch; gap: 2px; }
  .tab { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; place-items: center start; width: auto; height: auto; min-height: 52px; padding: 8px 10px; }
  .tab .stage-text { position: static; width: auto; height: auto; overflow: hidden; clip: auto; white-space: normal; min-width: 0; }
  .tab:hover:not(.active) { background: color-mix(in srgb, var(--paper) 55%, transparent); }
  .tab.active .stage-name { color: var(--ink); }
  /* The full label fits the spine (216 − 20 px); a longer one wraps rather than clipping. */
  .spine-next .btn { width: 100%; max-width: none; justify-content: center; white-space: normal; overflow: visible; text-overflow: clip; }
  .spine-foot { align-items: flex-start; padding: 0 10px; }
  .spine-foot a, .spine-foot .link-button { min-height: 32px; }
  .spine-foot .foot-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
@media (min-width: 1440px) { .header-status { font-size: 13px; gap: 8px; max-width: 240px; } }

/* ── 5. Components ─────────────────────────────────────────────────────── */
/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 18px; border: 0; border-radius: 999px; font: 600 14px/1 var(--ui); text-decoration: none; white-space: nowrap; color: var(--ink); background: transparent; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast), box-shadow var(--t-fast); }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--pen); color: var(--paper); box-shadow: 0 1px 0 var(--pen-edge); }
.btn-primary:hover:not(:disabled) { background: var(--pen-hover); color: var(--paper); }
.btn-secondary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn-secondary:hover:not(:disabled) { background: var(--sheet-deep); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not(:disabled) { background: var(--sheet-deep); color: var(--ink); }
.btn-danger-soft { background: var(--flag-wash); color: var(--flag-ink); }
.btn-danger-soft:hover:not(:disabled) { background: var(--flag-wash-2); }
.btn-small { min-height: 32px; padding: 6px 12px; font-size: 12px; }
.btn-icon { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
.link-button { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: var(--pen); font: inherit; font-weight: 600; text-align: left; text-decoration: none; }
.link-button:hover { text-decoration: underline; }
.chip-button { border: 0; cursor: pointer; font-family: inherit; }
.menu > summary::after, .actions-more > summary::after { content: ""; width: 16px; height: 16px; margin-right: -4px; background: var(--chevron) no-repeat center / 16px; }
@media (max-width: 759.98px) {
  .btn, .project-select, .input, .select { min-height: 44px; }
  .btn-icon { width: 44px; min-width: 44px; height: 44px; }
  .btn-small { min-height: 44px; }
}

/* Inputs */
.input, .select, .textarea { display: block; width: 100%; min-height: 40px; padding: 10px 12px; border: 1.5px solid var(--rule); border-radius: var(--r-2); background: var(--paper); color: var(--ink); font: 400 15px/1.35 var(--ui); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.select { appearance: none; padding-right: 36px; background: var(--paper) var(--chevron) no-repeat right 10px center / 18px; cursor: pointer; }
.textarea { min-height: 84px; line-height: 1.45; resize: vertical; }
.textarea.compact { min-height: 60px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--pen-2); box-shadow: 0 0 0 3px var(--pen-wash); }
.input:user-invalid, .select:user-invalid, .textarea:user-invalid { border-color: var(--flag); }
.input[readonly] { background: var(--sheet); }
.field { display: grid; gap: 6px; margin-bottom: 14px; min-width: 0; }
.field:last-child { margin-bottom: 0; }
.field > label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.field-help { display: block; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.field-warn { margin: 6px 0 8px; font-size: 13px; font-weight: 500; color: var(--amber-ink); }
.field-warn:empty { margin: 0; }
.code-input { text-align: center; font: 600 28px/1 var(--display); letter-spacing: .35em; padding: 14px 0 14px .35em; background: var(--paper) repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), var(--grid) calc(16.66% - 1px) 16.66%); }
.form-grid, .triple-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 14px; align-items: start; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inline-form .field { flex: 1 1 160px; margin: 0; }
.compact-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.compact-entry .field { margin: 0; }
@media (min-width: 560px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .triple-form { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .compact-entry { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Checks */
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; font-weight: 400; color: var(--ink); cursor: pointer; }
.check input, input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--pen); flex: 0 0 auto; }
.check-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0 0 12px; }

/* Chips */
.chip, .eff-chip, .eff-status, .eff-kind { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font: 600 12px/1.25 var(--ui); white-space: nowrap; background: var(--sheet-deep); color: var(--ink-2); vertical-align: middle; }
.chip-ok, .eff-chip.good, .eff-status.s-eliminated, .eff-status.s-faster { background: var(--pen-wash); color: var(--pen); }
.chip-warn, .eff-status.s-new { background: var(--amber-wash); color: var(--amber-ink); }
.chip-flag, .chip-bad, .eff-chip.bad, .eff-status.s-slower { background: var(--flag-wash); color: var(--flag-ink); }
.chip-sys, .eff-chip.auto, .eff-status.s-automated { background: var(--sys-wash); color: var(--sys); }
.eff-kind { padding: 1px 6px; margin-left: 4px; }

/* Panels and sheets */
.editor-panel, .proposal-panel, .build-card, .rc-card, .requirements, .impact-summary, .impact-card, .problem-builder, .eff-card, .eff-kpi, .cost-card, .about-section, #requirementsPanel > section, .wizard-card, .eff-hero, .eff-empty {
  background: var(--paper); border-radius: var(--r-3); box-shadow: var(--press), var(--edge); padding: 16px; min-width: 0;
}
.build-head, .proposal-head, .impact-card-head, .problem-builder-head, .eff-card-head, .rc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 12px; }
.build-head h3, .proposal-head h3, .impact-card-head h3, .problem-builder-head h3, .eff-card h3 { margin: 0; }
@media (min-width: 760px) {
  .editor-panel, .proposal-panel, .build-card, .rc-card, .requirements, .impact-summary, .impact-card, .problem-builder, .eff-card, .cost-card, .about-section, #requirementsPanel > section, .eff-hero, .eff-empty { padding: 20px; }
}

/* Info tip (Chris's ⓘ rule) + popover */
.info-tip { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; min-height: 0; padding: 0; margin: 0 0 0 2px; border: 0; border-radius: 50%; background: var(--info); color: var(--on-info); font: normal 600 11px/1 var(--display); letter-spacing: 0; vertical-align: 2px; cursor: help; }
.info-tip::before { content: ""; position: absolute; inset: -11px; }
.info-tip:hover { filter: brightness(1.1); }
.info-tip[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent); }
@media (max-width: 759.98px) { .info-tip { width: 22px; height: 22px; font-size: 12px; } }
.wizard-help-popover, .ho-tip { position: relative; display: block; max-width: 36ch; margin: 8px 0; padding: 12px 14px; background: var(--paper); border-radius: var(--r-2); box-shadow: var(--lift), var(--edge); font: 400 14px/1.45 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink-2); text-align: left; white-space: normal; animation: pop-in 120ms var(--ease-out); }
.wizard-help-popover::before { content: ""; position: absolute; left: 14px; top: -4px; width: 8px; height: 8px; background: var(--paper); transform: rotate(45deg); box-shadow: -1px -1px 0 var(--sheet-deep); }
.wizard-help-popover.is-anchored { position: fixed; z-index: var(--z-tip); margin: 8px 0 0 -6px; width: max-content; max-width: min(36ch, calc(100vw - 24px)); position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; }

.tip-lead { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.field-chip { justify-self: start; }
.issue-block { color: var(--flag-ink); }
.issue-warn { color: var(--amber-ink); }

/* Menus */
.menu, .actions-more { position: relative; }
.menu > summary, .actions-more > summary { list-style: none; }
.menu > summary::-webkit-details-marker, .actions-more > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); display: grid; min-width: 220px; padding: 6px; background: var(--paper); border-radius: var(--r-2); box-shadow: var(--lift), var(--edge); animation: pop-in 120ms var(--ease-out); }
.menu-list button, .menu-list a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--ink); font: 500 14px/1.3 var(--ui); text-align: left; text-decoration: none; }
.menu-list button:hover, .menu-list button:focus-visible, .menu-list a:hover { background: var(--sheet-deep); }
.menu-list .danger { color: var(--flag-ink); }
.menu-list hr { margin: 4px 6px; }
.menu-meta { padding: 6px 10px 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-note { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--grid); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.avatar::after { display: none; }
.avatar span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pen); color: var(--paper); font: 600 13px/1 var(--display); text-transform: uppercase; }
.avatar:hover span { box-shadow: 0 0 0 3px var(--pen-wash); }
@media (max-width: 759.98px) { .avatar { width: 44px; height: 44px; } .menu-list button { min-height: 44px; } }

/* Callouts, notes, banners, toast */
.callout, .dialog-note, .selection-panel { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-2); background: var(--sheet); box-shadow: inset 3px 0 0 var(--pen); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.callout strong { color: var(--ink); font-weight: 600; }
.callout.warning { box-shadow: inset 3px 0 0 var(--amber); background: var(--amber-wash); color: var(--amber-ink); }
.callout.flag { box-shadow: inset 3px 0 0 var(--flag); background: var(--flag-wash); color: var(--flag-ink); }
.callout.success { box-shadow: inset 3px 0 0 var(--pen); background: var(--pen-wash); color: var(--pen); }
.callout.warning strong, .callout.flag strong, .callout.success strong { color: inherit; }
.app-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; border-radius: var(--r-2); background: var(--amber-wash); color: var(--amber-ink); font-size: 14px; font-weight: 500; }
.app-banner + .app-banner { display: none; }
.app-banner > span { flex: 1 1 260px; }
.app-banner.tone-pen { background: var(--pen-wash); color: var(--pen); }
.app-banner.tone-flag { background: var(--flag-wash); color: var(--flag-ink); }
.banner-dismiss { color: inherit; }
.share-signin { margin: 4px 0 0; }
.toast { position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: var(--r-2); background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4; box-shadow: var(--lift); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; transition-duration: var(--t-base); }
.toast-action { margin-left: 6px; padding: 4px 8px; border: 0; border-radius: var(--r-1); background: transparent; color: var(--pen-wash); font-weight: 600; }
.toast-action:hover { background: rgba(251,251,249,.12); }
/* UX-15: from 760 px the toast sits bottom-centre of the work area (#main); app.js sets the
   centre, the width cap and the lift above any action it would cover. */
@media (min-width: 760px) { .toast { left: var(--toast-x, 50%); right: auto; bottom: var(--toast-bottom, 16px); max-width: var(--toast-max, min(420px, calc(100vw - 48px))); } }
.auth-error { display: none; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-2); background: var(--flag-wash); color: var(--flag-ink); font-size: 14px; }
.auth-error.show { display: block; }
#accountStatus.auth-error.show:empty { display: none; }

/* Tables */
.table-scroll, .eff-table-wrap { position: relative; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-2); box-shadow: var(--edge); background: var(--paper); }
.table, .impact-table, .options-table, .outline-table, .eff-table, .cost-table, .bb-grid { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--paper); }
.table th, .impact-table th, .options-table th, .outline-table th, .eff-table th, .cost-table th, .bb-grid th { padding: 10px 12px; background: var(--sheet-deep); color: var(--ink-2); font-size: 13px; font-weight: 600; text-align: left; vertical-align: bottom; text-transform: none; letter-spacing: 0; }
.table td, .impact-table td, .options-table td, .outline-table td, .eff-table td, .cost-table td, .bb-grid td { padding: 10px 12px; border-bottom: 1px solid var(--grid); vertical-align: top; color: var(--ink); }
.table .num, .eff-table .num, .cost-table .num, td.num { text-align: right; white-space: nowrap; }
.outline-table td .input, .outline-table td .select, .options-table .input, .options-table .select { min-width: 110px; min-height: 36px; padding: 6px 8px; font-size: 14px; }
.outline-table td.narrow .input, .outline-table td.narrow .select { min-width: 70px; width: 84px; }



.eff-table td.good { color: var(--pen); font-weight: 600; }
.eff-table td.bad { color: var(--flag-ink); font-weight: 600; }
.eff-table .lane { color: var(--ink-3); }
.eff-table tbody tr:hover td { background: var(--sheet); }
.bb-grid { font-size: 13px; width: auto; }
.bb-grid th, .bb-grid td { padding: 6px 8px; text-align: center; }
.bb-grid th:first-child, .bb-grid td:first-child { text-align: left; }
.bb { font-weight: 700; }
.bb-known { color: var(--pen); } .bb-none { color: var(--ink-3); } .bb-unknown { color: var(--amber-ink); }
.score { display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: var(--r-1); font-weight: 600; }
.score.shigh { background: var(--flag-wash); color: var(--flag-ink); } .score.smid { background: var(--amber-wash); color: var(--amber-ink); } .score.slow { background: var(--sheet-deep); color: var(--ink-2); }
@media (min-width: 760px) { .table-scroll .table th:first-child, .table-scroll .table td:first-child, .table-scroll .outline-table td:first-child, .table-scroll .outline-table th:first-child { position: sticky; left: 0; z-index: 1; background: inherit; } .table-scroll .table td:first-child, .table-scroll .outline-table td:first-child { background: var(--paper); } }

/* Lists */
.item-list, .micro-list, .tool-list, .selection-list, .branch-detail-list { display: grid; gap: 0; margin-top: 8px; border-radius: var(--r-2); overflow: hidden; }
.micro-list:empty { margin: 0; }
.list-item, .micro-row, .branch-detail-row, .selection-item, .receipt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 10px 12px; background: var(--paper); border-bottom: 1px solid var(--grid); min-width: 0; }
.list-item:last-child, .micro-row:last-child, .branch-detail-row:last-child { border-bottom: 0; }
.micro-row { display: flex; justify-content: space-between; }
.micro-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.list-item-main { min-width: 0; }
.list-item-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item-meta { margin-top: 2px; font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-actions { display: flex; gap: 4px; align-items: center; }
.branch-detail-row { display: block; }
.branch-detail-row strong { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }



.stage-section-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin: 16px 0 6px; font-size: 13px; }
.stage-section-title strong { font-weight: 600; color: var(--ink-2); }

/* Empty states */
.empty-state, .eff-none { display: grid; justify-items: center; gap: 6px; padding: 18px 14px; border-radius: var(--r-2); background: var(--sheet); color: var(--ink-2); font-size: 14px; text-align: center; }
.empty-state svg { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.empty-title { font: 600 18px/1.25 var(--display); color: var(--ink); }

/* Segmented control */
.segmented, .subnav, .problem-mode-toggle { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--sheet-deep); }
.segmented > button, .subnav > button, .problem-mode-toggle > button { min-height: 32px; padding: 6px 14px; border: 0; border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink-2); font: 600 13px/1 var(--ui); transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out), color 160ms; }
.segmented > button:hover, .subnav > button:hover, .problem-mode-toggle > button:hover { background: color-mix(in srgb, var(--paper) 50%, transparent); }
.segmented > [aria-pressed="true"], .subnav > [aria-pressed="true"], .problem-mode-toggle > [aria-pressed="true"], .problem-mode-toggle > .btn-primary { background: var(--paper); color: var(--ink); box-shadow: var(--press), var(--edge); }
.subnav { margin: 0 0 16px; }
@media (max-width: 759.98px) { .segmented > button, .subnav > button, .problem-mode-toggle > button { min-height: 40px; } }
/* §8: a real thumb slides under the pressed segment (app.js sets its box; 160 ms ease-out). */
.segmented.has-thumb { position: relative; isolation: isolate; }
.segmented.has-thumb > button { position: relative; z-index: 1; }
.segmented.has-thumb > [aria-pressed="true"] { background: transparent; box-shadow: none; }
.seg-thumb { position: absolute; left: 0; top: 0; z-index: 0; width: var(--thumb-w, 0); height: var(--thumb-h, 0); border-radius: 999px; background: var(--paper); box-shadow: var(--press), var(--edge); transform: translate(var(--thumb-x, 0), var(--thumb-y, 0)); transition: transform 160ms var(--ease-out), width 160ms var(--ease-out); pointer-events: none; }
.segmented.thumb-still > .seg-thumb { transition: none; }

/* Dialogs */
dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--paper); color: var(--ink); box-shadow: var(--lift), var(--edge), 0 24px 60px -24px rgba(23,32,29,.35); overflow: hidden; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), overlay var(--t-fast) allow-discrete, display var(--t-fast) allow-discrete; }
dialog[open] { display: flex; flex-direction: column; opacity: 1; transform: none; transition-duration: var(--t-base); transition-timing-function: var(--ease-spring); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(2px); }
dialog > form { display: contents; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; flex: 0 0 auto; }
.dialog-head h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dialog-head .btn-icon { margin: -4px -4px -4px 0; }
.dialog-head.centered { flex-direction: column; text-align: center; padding-top: 24px; position: relative; }
.dialog-head.centered .btn-icon { position: absolute; right: 16px; top: 16px; margin: 0; }
.dialog-mark { width: 44px; height: 44px; display: block; }
.dialog-body { flex: 1 1 auto; min-height: 0; max-height: 70dvh; overflow: auto; padding: 4px 20px 20px; overscroll-behavior: contain; }
.dialog-body > p { color: var(--ink-2); }
.dialog-actions { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; background: var(--paper); border-top: 1px solid var(--grid); }
.dialog-subsection { margin: 14px 0 0; padding: 14px; border-radius: var(--r-2); background: var(--sheet); }
.dialog-body > .dialog-subsection:first-child, .dialog-body > input[type="hidden"] + .dialog-subsection { margin-top: 0; }
.dialog-subsection > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; }
.dialog-subsection > summary::-webkit-details-marker { display: none; }
.dialog-subsection > summary::after { content: ""; width: 16px; height: 16px; background: var(--chevron) no-repeat center / 16px; transition: transform var(--t-fast); }
.dialog-subsection[open] > summary::after { transform: rotate(180deg); }
.dialog-subsection-head, .dialog-subsection > summary { margin: 0 0 10px; }
details.dialog-subsection:not([open]) > summary { margin: 0; }
.dialog-subsection-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.dialog-subsection-head strong, .dialog-subsection > summary strong { font-weight: 600; color: var(--ink-2); }
.dialog-subsection .input, .dialog-subsection .select, .dialog-subsection .textarea { background-color: var(--paper); }
.dialog-subsection.danger-zone { background: var(--flag-wash); }
.dialog-subsection.danger-zone .dialog-subsection-head strong { color: var(--flag-ink); }
.dialog-subsection .micro-list { box-shadow: var(--edge); }
.link-row { position: relative; }
.link-row .input { padding-right: 112px; }
.link-row .btn { position: absolute; right: 5px; top: 5px; bottom: 5px; min-height: 0; }
.share-link-block { margin-bottom: 14px; padding: 14px; border-radius: var(--r-2); background: var(--sheet); }
.intent-choice { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 16px; padding: 0; border: 0; }
.intent-card { position: relative; display: grid; gap: 4px; padding: 14px; border-radius: var(--r-3); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: pointer; transition: box-shadow var(--t-fast), background var(--t-fast); }
.intent-card input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.intent-card svg { height: 44px; width: auto; justify-self: start; }
.intent-card strong { font: 600 16px/1.25 var(--display); letter-spacing: -0.01em; }
.intent-card span { font-size: 13px; color: var(--ink-2); }
.intent-card:hover { box-shadow: inset 0 0 0 1.5px var(--pen-2); }
.intent-card:has(:checked) { background: var(--pen-wash); box-shadow: inset 0 0 0 2px var(--pen); }
.intent-card:has(:focus-visible) { outline: 2px solid var(--pen-2); outline-offset: 2px; }
@media (min-width: 560px) { .intent-choice { grid-template-columns: 1fr 1fr; } }
@media (max-width: 759.98px) {
  dialog { width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r-3) var(--r-3) 0 0; transform: translateY(40px); }
  @starting-style { dialog[open] { opacity: 0; transform: translateY(40px); } }
  .dialog-body { max-height: none; padding-bottom: 16px; }
  .dialog-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* Hand-off picker (connection dialog) */
.ho-pick { position: relative; }
.ho-trigger { position: relative; width: 100%; text-align: left; cursor: pointer; }
.ho-menu { position: fixed; z-index: var(--z-tip); overflow-y: auto; padding: 6px; background: var(--paper); border-radius: var(--r-2); box-shadow: var(--lift), var(--edge); animation: pop-in 120ms var(--ease-out); }
.ho-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.ho-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-2); font-size: 14px; color: var(--ink); cursor: pointer; outline: none; }
.ho-opt:hover, .ho-opt:focus { background: var(--sheet-deep); }
.ho-opt.sel { background: var(--pen-wash); color: var(--pen); font-weight: 600; }
.ho-info { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--info); color: var(--on-info); font: normal 600 11px/1 var(--display); cursor: help; }
.ho-tip { position: fixed; z-index: calc(var(--z-tip) + 1); margin: 0; max-width: 260px; pointer-events: none; }
.ho-tip::before { display: none; }

/* ── 6. Screens ────────────────────────────────────────────────────────── */
/* Stage head */
.page { display: none; }
.page.active { display: block; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head > div:first-child { min-width: 0; }
.page-head h2 { display: block; }
.page-head .title-end { white-space: nowrap; }
.page-head h2 .info-tip { vertical-align: middle; margin: -2px 0 0 2px; }
.page-head .view-switch { margin-left: auto; }
/* Phone stage head ≤ 72 px: the title (24 px, one line) on its own row; the view switch and Actions
   share the second row (44 px tap targets, no track padding). */
@media (max-width: 759.98px) {
  .page-head { row-gap: 4px; }
  .page-head h2 { line-height: 1; }
  .page-head:has(> .view-switch) > .page-title { flex: 1 0 100%; }
  .page-head .view-switch { margin-left: 0; padding: 0; }
  .page-head .actions-more { margin-left: auto; }
}
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.page-actions .btn-primary { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); }
.page-actions .btn-primary:hover:not(:disabled) { background: var(--sheet-deep); color: var(--ink); }
.page-actions .btn-secondary:not([aria-pressed="true"]) { background: transparent; box-shadow: none; color: var(--ink-2); }
.page-actions .btn-secondary:hover:not(:disabled) { background: var(--sheet-deep); color: var(--ink); }
.page-actions .btn-secondary[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pen); color: var(--pen); }
.actions-more:has(> .page-actions[hidden]) { display: none; }
.actions-more:not([open]) > .page-actions { display: none; }
.actions-more[open] > .page-actions { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); display: grid; min-width: 240px; padding: 6px; background: var(--paper); border-radius: var(--r-2); box-shadow: var(--lift), var(--edge); animation: pop-in 120ms var(--ease-out); }
.actions-more[open] > .page-actions .btn { justify-content: flex-start; border-radius: var(--r-2); }
.actions-more[open] > .page-actions .problem-mode-toggle { margin: 4px 0; }
@media (min-width: 1180px) {
  .actions-more > summary { display: none; }
  .actions-more[open] > .page-actions { position: static; display: flex; min-width: 0; padding: 0; background: none; box-shadow: none; animation: none; }
}

/* Map screens (§6.2, §7) */
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.map-panel { position: relative; min-width: 0; border-radius: var(--r-3); box-shadow: var(--press), var(--edge); background: var(--paper); overflow: hidden; }
.map-status { min-height: 30px; padding: 9px 14px 0; font-size: 12px; line-height: 1.4; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-scroll { overflow: auto; min-height: 46dvh; padding: 6px 8px 60px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.map-panel.is-outline .map-scroll { padding: 0 0 8px; min-height: 0; }
.map-canvas { display: grid; width: max-content; }
.map-canvas > * { grid-area: 1 / 1; }
.map-canvas > svg { display: block; height: auto; max-width: none; }
.lane-pin { position: sticky; left: -8px; z-index: 1; align-self: start; justify-self: start; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); filter: drop-shadow(3px 0 4px rgba(23,32,29,.16)); }
.lane-pin svg { display: block; height: auto; max-width: none; }
.map-panel.is-scrolled .lane-pin { opacity: 1; pointer-events: auto; }
.map-panel::after { content: ""; position: absolute; top: 30px; right: 0; bottom: 0; width: 24px; background: linear-gradient(90deg, rgba(251,251,249,0), var(--paper)); pointer-events: none; opacity: 0; transition: opacity var(--t-fast); z-index: 2; }
.map-panel.fade-right::after { opacity: 1; }
.zoom-tools { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: var(--lift), var(--edge); }
.zoom-label { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.zoom-tools .zoom-fit { padding: 6px 12px; }
.map-panel.is-outline .zoom-tools { display: none; }
.map-scroll [data-svg-bounds], .map-scroll [data-svg-stage], .map-scroll [data-svg-role], .map-scroll [data-svg-activity], .map-scroll [data-svg-decision], .map-scroll [data-svg-connection], .map-scroll [data-svg-pain], .map-scroll [data-svg-sipoc] { cursor: pointer; }
.map-scroll [data-svg-activity]:hover > .ml-box, .map-scroll [data-svg-decision]:hover > .ml-box { stroke-width: 2.25; }
.map-scroll [data-svg-connection]:hover > .ml-line { stroke: var(--pen-2); stroke-width: 2; }
.map-scroll svg [role="button"]:focus { outline: none; }
.map-scroll svg [role="button"]:focus-visible > .ml-halo { visibility: visible; }
.map-scroll svg [role="button"]:focus-visible > .ml-box { stroke: var(--pen-2); stroke-width: 2.5; }
.map-scroll svg [data-svg-connection][role="button"]:focus-visible > .ml-line { stroke: var(--pen-2); stroke-width: 2.5; }
.map-scroll svg [data-svg-role][role="button"]:focus-visible > rect, .map-scroll svg [data-svg-stage][role="button"]:focus-visible > rect, .map-scroll svg [data-svg-bounds][role="button"]:focus-visible > rect, .map-scroll svg [data-svg-pain][role="button"]:focus-visible > circle { stroke: var(--pen-2); stroke-width: 2.5; }
.outline { padding: 12px; background: var(--paper); }
@media (max-width: 759.98px) {
  .outline-table thead, .outline-table colgroup { display: none; }
  .outline-table, .outline-table tbody { display: block; }
  .outline-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--grid); }
  .outline-table td { display: grid; gap: 4px; padding: 0; border: 0; }
  .outline-table td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .outline-table td.outline-step { grid-column: 1 / -1; order: -1; }
  .outline-table td .input, .outline-table td .select, .outline-table td.narrow .input, .outline-table td.narrow .select { min-width: 0; width: 100%; }
  .outline-table td.empty-state { grid-column: 1 / -1; }
  .outline-table td.empty-state::before { display: none; }
}
@media (min-width: 760px) { .map-scroll { min-height: 560px; } }
@media (min-width: 1180px) {
  .workflow-layout { grid-template-columns: minmax(0, 1fr) var(--inspector-w); gap: 20px; }
  .workflow-layout > .editor-panel { position: sticky; top: calc(var(--strip-h) + 16px); max-height: calc(100dvh - var(--strip-h) - 32px); overflow: auto; }
}

/* Builder (§6.2): overview, stepper of seven numerals, the current step, one verb pair */
.wizard-shell { display: grid; gap: 14px; }
.wizard-overview { display: grid; gap: 6px; }
.wizard-overview-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); }
.wizard-pct { font-weight: 600; color: var(--ink-2); }
.progress-track, .eff-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--sheet-deep); }
.progress-fill { height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--pen); }
.wizard-chips, .validation-row:not(.callout) { display: flex; flex-wrap: wrap; gap: 6px; }
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.stepper li { display: flex; align-items: center; }
.stepper li + li::before { content: ""; width: 6px; height: 1.5px; margin-right: 6px; background: var(--rule); }
.step-dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink-2); font: 600 12px/1 var(--display); transition: background var(--t-base) var(--ease-spring), box-shadow var(--t-base); }
.step-dot .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.step-dot:hover { box-shadow: inset 0 0 0 1.5px var(--pen-2); }
.step-dot.done { background: var(--pen); box-shadow: none; color: var(--paper); }
.step-dot.current { background: var(--paper); box-shadow: inset 0 0 0 2px var(--pen); color: var(--pen); }
.stepper-fold .chip { min-height: 28px; }
.validation-row.callout { margin: 0; }
.validation-row.callout strong { display: block; margin-bottom: 4px; }
.issue-list { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; }
.issue-more summary { cursor: pointer; font-size: 13px; font-weight: 600; margin-top: 4px; }
.wizard-card { padding: 0; box-shadow: none; background: transparent; }
.wizard-card-head { padding: 0 0 12px; }
.wizard-title-row { display: flex; align-items: center; gap: 6px; }
.wizard-title-row h3 { font-size: 18px; }
.wizard-flow { font-weight: 500; color: var(--ink-2); }
.wizard-sub { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.wizard-card-body { padding: 0; }
.wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--grid); }
.wizard-actions .spacer { flex: 1; }
.button-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bb-grid td:first-child, .bb-grid th:first-child { min-width: 150px; }
.field-error { display: block; font-size: 13px; font-weight: 500; color: var(--flag-ink); }
[aria-invalid="true"].input, [aria-invalid="true"].select, [aria-invalid="true"].textarea { border-color: var(--flag); }
.page-title-process { display: none; }
.link-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tool-choice { display: grid; gap: 2px; min-height: 60px; padding: 12px; border: 0; border-radius: var(--r-2); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink); text-align: left; }
.tool-choice:hover { box-shadow: inset 0 0 0 1.5px var(--pen-2); }
.tool-choice.active { background: var(--pen-wash); box-shadow: inset 0 0 0 2px var(--pen); color: var(--pen); }
.tool-choice strong { font-size: 14px; }
.selection-panel p { margin: 4px 0 10px; font-size: 13px; }
.selection-item { display: block; font-size: 13px; }
.selection-actions { display: flex; flex-wrap: wrap; gap: 8px; }




.bb-list { display: grid; gap: 8px; margin-top: 10px; }
.bb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.bb-row > label:first-child { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--ink-2); }
@media (min-width: 600px) { .bb-row { grid-template-columns: 140px minmax(0, 1fr) auto; } .bb-row > label:first-child { grid-column: auto; } .link-tools { grid-template-columns: 1fr 1fr; } }

/* Start (§6.1) */
.start-panel { max-width: 880px; padding: 24px 0 8px; }
.start-head { display: flex; align-items: flex-start; gap: 8px; }
.start-title { font-size: 34px; line-height: 1; font-variation-settings: "opsz" 96; max-width: 18ch; }
.start-title .w { display: inline-block; }
.start-title .info-tip { vertical-align: 0.5em; margin-left: 4px; }
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 24px 0 20px; }
.start-card { display: grid; align-content: start; gap: 10px; padding: 22px; border: 0; border-radius: var(--r-4); background: var(--paper); box-shadow: var(--press), var(--edge); color: var(--ink); text-align: left; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); }
.start-card:hover { transform: translateY(-2px); box-shadow: var(--lift), 0 0 0 1.5px var(--pen-2); }
.start-card svg { height: 56px; width: auto; justify-self: start; }
.start-card strong { font: 600 20px/1.2 var(--display); letter-spacing: -0.01em; }
.start-card span { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.ill { fill: none; stroke-width: 1.5; }
.ill-lane { stroke: var(--rule); }
.ill-box { fill: var(--paper); stroke: var(--ink); }
.ill-link { stroke: var(--ink); }
.ill-flag { fill: var(--flag); stroke: none; }
.ill-draft { fill: var(--paper); stroke: var(--pen); stroke-dasharray: 3 3; }
.ill-draft-link { stroke: var(--pen); }
.start-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.start-secondary .link-button { min-height: 44px; }
.paste-intake { flex: 1 1 260px; border-radius: var(--r-3); }
.paste-intake > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--pen); font-weight: 600; cursor: pointer; list-style: none; }
.paste-intake > summary::-webkit-details-marker { display: none; }
.paste-intake > summary::after { content: ""; width: 16px; height: 16px; background: var(--chevron) no-repeat center / 16px; transition: transform var(--t-fast); }
.paste-intake[open] { flex-basis: 100%; padding: 4px 16px 16px; background: var(--paper); box-shadow: var(--press), var(--edge); }
.paste-intake[open] > summary::after { transform: rotate(180deg); }
#pastePreview { display: grid; gap: 12px; margin-top: 12px; overflow-x: auto; }
@media (min-width: 640px) { .start-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 760px) { .start-panel { padding-top: 48px; } .start-title { font-size: 44px; } }

/* UX-02: before a process exists the strip shows only the lockup and Sign in. */
body[data-intent=""] #projectSelect, body[data-intent=""] .strip-tools .history, body[data-intent=""] .strip-tools > .menu, body[data-intent=""] .header-status, body[data-intent=""] .strip-more > summary { display: none !important; }
body[data-intent=""] .strip-tools { position: static; display: flex; width: auto; padding: 0; background: none; box-shadow: none; animation: none; }
body[data-intent=""] .strip-tools .storage-note { display: none; }
body[data-intent=""] .strip-process { flex: 1 1 auto; }
/* UX-30: the About section belongs to the start screen (it stays in the HTML for search engines). */
body[data-intent="improve"] .about-section, body[data-intent="create"] .about-section { display: none; }
.start-outputs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -6px 0 22px; }
.start-outputs-label { font-size: 13px; font-weight: 600; color: var(--ink-3); margin-right: 4px; }
.out-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: var(--r-2); background: var(--paper); box-shadow: var(--press), var(--edge); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.out-chip .icon { color: var(--pen); }
.start-notice { margin-bottom: 18px; max-width: 62ch; }

/* Requirements (create path) */
.requirements { display: grid; gap: 16px; }
.req-name { max-width: 520px; margin: 0; }
.req-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.req-group { padding: 16px; border-radius: var(--r-2); background: var(--sheet); }
.req-group h3 { margin-bottom: 12px; }
.req-group .textarea { background-color: var(--paper); }
.req-nav { position: sticky; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); z-index: 2; margin: 0 -16px -16px; padding: 12px 16px; background: var(--paper); border-top: 1px solid var(--grid); border-radius: 0 0 var(--r-3) var(--r-3); }
@media (min-width: 760px) { .req-nav { position: static; margin: 0; padding: 0; border: 0; background: none; } }
@media (min-width: 900px) { .req-groups { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Diagnose (§6.4) */
.root-wrap, .delivery-view { min-width: 0; }
.root-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 20px; }
.problem-builder { margin-bottom: 16px; }
.problem-builder .textarea { min-height: 128px; font-size: 17px; line-height: 1.5; }
.problem-builder-status { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.problem-builder-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.problem-stale { margin: 0 0 10px; }
.problem-stale details { margin: 8px 0; }
.impact-summary { margin: 16px 0; }
.impact-summary:empty { display: none; }
.impact-card { margin-top: 16px; }
.kpi-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpi-tile { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-2); background: var(--sheet); }
.metric { font: 600 32px/1 var(--display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; color: var(--ink); }
.metric small { font-size: 18px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.kpi-label { font-size: 13px; color: var(--ink-2); }
.wrap { white-space: normal; }
@media (min-width: 760px) { .metric { font-size: 40px; } .metric small { font-size: 22px; } }
.impact-grid, .compare-grid, .cost-grid, .controls-grid, .eff-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.compare-grid h4 { margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.compare-grid p { margin: 0; font-size: 14px; }
.rc-cards { display: grid; gap: 16px; margin: 16px 0; }
.rc-card { scroll-margin-top: calc(var(--strip-h) + 16px); }
.rc-head { display: grid; gap: 8px; margin-bottom: 14px; }
.rc-title-row { display: flex; align-items: center; gap: 10px; }
.rc-title-row h3 { font-size: 18px; }
.flag-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--flag); }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-steps { margin-bottom: 14px; flex-wrap: wrap; }
.rc-steps .is-done { color: var(--pen); }
.rc-step-nav { display: flex; justify-content: flex-end; margin-top: 12px; }
.rc-grid h4, .cost-grid h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
.rc-grid details { margin-top: 6px; }
.rc-grid summary, .rc-card summary { cursor: pointer; color: var(--pen); font-weight: 600; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.outcomes { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 14px; padding: 0; border: 0; }
.outcomes legend { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.outcomes .check { font-size: 14px; min-height: 32px; }
.options-table tr.is-chosen td, .table-scroll .options-table tr.is-chosen td:first-child { background: var(--pen-wash); }
.options-table .option-cell { display: grid; gap: 6px; min-width: 220px; }
.choose-cell { text-align: center; }
.intervention-cell .field-help { margin-top: 4px; }
.pain-target { display: block; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.big-empty { padding: 32px 16px; }
.big-empty .btn { margin-top: 6px; }
@media (max-width: 759.98px) { .outcomes .check, .check-row .check { min-height: 44px; } }
.draft-history { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grid); }
.draft-history label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.draft-history .select { width: auto; max-width: 340px; }
@media (min-width: 900px) { .compare-grid, .cost-grid, .eff-grid { grid-template-columns: 1fr 1fr; } .controls-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .impact-grid { grid-template-columns: .8fr 1.4fr 1fr; } }


/* Design proposals */
.proposal-panel { margin: 0 0 16px; }
.proposal-list { display: grid; gap: 8px; margin: 12px 0 8px; padding: 0; list-style: none; }
.proposal { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 12px 18px; border-radius: var(--r-2); background: var(--sheet); box-shadow: inset 4px 0 0 var(--amber); transition: box-shadow 160ms var(--ease-out); }
.proposal.is-accepted { box-shadow: inset 4px 0 0 var(--pen); }
.proposal.is-rejected { box-shadow: inset 4px 0 0 var(--rule); }
.proposal.is-rejected .proposal-title { color: var(--ink-2); }
.proposal.is-blocked { box-shadow: inset 4px 0 0 var(--flag); }
.proposal .chip { transition: background 160ms var(--ease-out), color 160ms var(--ease-out); }
.proposal-review { margin-top: 6px; font-size: 13px; }
.proposal-head .chip { margin-right: auto; }
.proposal-main { min-width: 0; }
.proposal-title { font: 600 15px/1.3 var(--display); }
.proposal-meta { margin-top: 3px; font-size: 13px; color: var(--ink-2); }
.proposal-blocker { margin: 6px 0 0; padding: 8px 10px; font-size: 13px; }
.proposal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (min-width: 700px) { .proposal { flex-direction: row; justify-content: space-between; } .proposal-actions { justify-content: flex-end; } }

/* Validate value: neutral styling until Phase B */
.eff { display: grid; gap: 16px; }
.eff-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--ink-2); }
.eff-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.eff-legend i.asis, .eff-bar.asis, .eff-wf-bar.asis, .eff-vbar.asis { background: var(--ink-3); }
.eff-legend i.tobe, .eff-bar.tobe, .eff-wf-bar.tobe, .eff-vbar.tobe { background: var(--pen); }
.eff-legend i.down, .eff-wf-bar.down { background: var(--pen); }
.eff-legend i.up, .eff-wf-bar.up { background: var(--flag); }
.eff-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.eff-kicker { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.eff-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 8px; }
.metric-num { font: 600 32px/1 var(--display); letter-spacing: -0.03em; font-variation-settings: "opsz" 96; font-variant-numeric: tabular-nums; color: var(--ink); }
.metric-unit { font: 500 18px/1 var(--display); color: var(--ink-3); }
.metric-arrow { font: 500 22px/1 var(--display); color: var(--ink-3); padding: 0 4px; }
.eff-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.eff-sub { font-size: 14px; font-weight: 600; color: var(--pen); }
.eff-hero.worse .eff-sub { color: var(--flag-ink); }
.eff-hero-bars { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; margin-top: 16px; font-size: 12px; color: var(--ink-2); }
.eff-hero-bars b { text-align: right; font-weight: 600; color: var(--ink); }
.eff-hero-bars .eff-track { margin: 0; height: 10px; }
.eff-hero .eff-bar { height: 10px; }
.eff-hero-side { display: grid; gap: 8px; }
.eff-stat { padding: 12px 14px; border-radius: var(--r-2); background: var(--sheet); }
.eff-stat strong { display: block; font: 600 22px/1.1 var(--display); letter-spacing: -0.02em; }
.eff-stat span { font-size: 12px; color: var(--ink-2); }
.eff-empty { display: grid; gap: 8px; justify-items: start; }
.eff-empty svg { width: 48px; height: 48px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; }
.eff-empty strong { font: 600 18px/1.25 var(--display); }
.eff-empty span { color: var(--ink-2); }
.eff-empty .muted { font-size: 14px; }
.eff-assume { margin: 0; }
.eff-assume summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; list-style: none; }
.eff-assume summary::-webkit-details-marker { display: none; }
.eff-assume summary::after { content: ""; width: 16px; height: 16px; background: var(--chevron) no-repeat center / 16px; }
.eff-assume[open] summary::after { transform: rotate(180deg); }
.eff-assume .eff-assume-list { margin-top: 8px; }
.cost-scroll { margin-top: 14px; max-width: 640px; }
.cost-table th[scope="row"] { background: transparent; font-size: 14px; font-weight: 500; color: var(--ink-2); vertical-align: middle; }
.cost-table .row-total th, .cost-table .row-total td { font: 600 18px/1.25 var(--display); color: var(--ink); }
.review-missing .link-button { font-size: 14px; }
@media (min-width: 760px) { .metric-num { font-size: 40px; } .metric-unit { font-size: 22px; } }
@media (min-width: 1000px) { .eff-hero { grid-template-columns: minmax(0, 1fr) minmax(210px, 280px); } }
/* UX-43: tables become stacked rows on small phones; nothing is clipped. */
@media (max-width: 479.98px) {
  .stack-480 thead { display: none; }
  .stack-480, .stack-480 tbody, .stack-480 tfoot, .stack-480 tr { display: block; }
  .stack-480 tr { padding: 10px 12px; border-bottom: 1px solid var(--grid); }
  .stack-480 td, .stack-480 th { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border: 0; text-align: right; }
  .stack-480 td::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: left; }
  .stack-480 td:first-child { font-weight: 600; text-align: left; }
  .stack-480 td .input, .stack-480 td .select { width: 60%; min-width: 0; }
  .stack-480 .table-scroll, .table-scroll:has(> .stack-480) { overflow: visible; }
  .eff-table-wrap { overflow: visible; }
}
.eff-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.eff-kpi { display: grid; gap: 8px; align-content: start; padding: 14px 16px; }
.eff-kpi-label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.eff-kpi-values { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font: 600 24px/1 var(--display); letter-spacing: -0.02em; }
.eff-kpi-values .from { font-size: 18px; color: var(--ink-3); }
.eff-kpi-values .arrow { color: var(--ink-3); }
.eff-kpi .eff-chip { justify-self: start; }
.eff-note { margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.eff-volume { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.eff-volume .input { width: 130px; }
.eff-assume-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }
.eff-pair { display: grid; gap: 3px; min-width: 0; }
.eff-bar { height: 7px; width: var(--w, 0%); min-width: 0; border-radius: 4px; }
.eff-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--grid); font-size: 14px; }
.eff-row .eff-pair { grid-column: 1 / -1; grid-row: 2; }
.eff-card-head + .eff-row { border-top: 0; }
.eff-row-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.eff-row-vals { display: none; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.eff-row-vals b { color: var(--ink); }
.eff-row .eff-chip { justify-self: end; }
.eff-wf { display: flex; gap: 4px; align-items: stretch; height: 250px; margin-top: 6px; }
.eff-wf-col { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; }
.eff-wf-plot { position: relative; border-bottom: 1px solid var(--rule); }
.eff-wf-bar { position: absolute; left: 12%; right: 12%; bottom: var(--b, 0%); height: var(--h, 0%); border-radius: 4px; }
.eff-wf-bar.asis, .eff-wf-bar.tobe { background: var(--ink-2); }
.eff-wf-bar span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.eff-wf-name { overflow: hidden; font-size: 12px; color: var(--ink-2); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.eff-cols { display: flex; gap: 10px; padding-bottom: 4px; }
.eff-col { flex: 1 1 0; min-width: 0; display: grid; gap: 6px; justify-items: center; }
.eff-col-plot { display: flex; align-items: flex-end; justify-content: center; gap: 6%; width: 100%; height: 170px; border-bottom: 1px solid var(--rule); }
.eff-vbar { position: relative; width: min(40px, 40%); height: var(--h, 0%); border-radius: 4px 4px 0 0; }
.eff-vbar span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; white-space: nowrap; }
.eff-col-name { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.eff-tally { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
@media (min-width: 640px) { .eff-row { grid-template-columns: minmax(90px, 150px) minmax(60px, 1fr) auto 70px; } .eff-row .eff-pair { grid-column: auto; grid-row: auto; } .eff-row-vals { display: block; } }

/* Share & build: neutral styling until Phase B */
.build { display: grid; gap: 16px; margin-top: 12px; }
.readiness.discovery, .readiness.build-ready-pending { box-shadow: var(--press), var(--edge), inset 4px 0 0 var(--amber); }
.readiness.build-ready { box-shadow: var(--press), var(--edge), inset 4px 0 0 var(--pen); }
.blocker-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.build, .build-card, .blocker-list li, .check-list li, .callout { overflow-wrap: anywhere; }
.readiness-chip { margin: 0 0 12px; }
.download-block { display: grid; gap: 12px; padding: 14px; border-radius: var(--r-2); background: var(--sheet); }
.file-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-2); }
.file-list li { display: inline-flex; align-items: center; gap: 5px; }
.file-list .icon { color: var(--pen); }
.download-block .prompt-actions { margin: 0; }
#briefPreview { margin-top: 10px; }
#briefPreview summary { cursor: pointer; color: var(--pen); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.tool-list { gap: 10px; overflow: visible; }
.tool-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; padding: 14px; border-radius: var(--r-2); background: var(--sheet); }
.tool-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; align-self: end; }
.check-list { display: grid; gap: 4px; margin: 6px 0 12px; padding: 0; list-style: none; font-size: 14px; }
.check-list .ok { color: var(--pen); } .check-list .fail { color: var(--flag-ink); }
.sim-trace { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 22px; font-size: 14px; }
.receipt { display: block; margin-top: 8px; border-radius: var(--r-2); border: 1px solid var(--grid); }
.receipt.stale { border-style: dashed; }
.measured { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-2); background: var(--pen-wash); }
.markdown-output { width: 100%; min-height: 420px; padding: 16px; border: 0; border-radius: var(--r-2); background: var(--ink); color: var(--paper); font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; resize: vertical; }


.prompt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.cost-table { margin-top: 12px; max-width: 640px; }





.deck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 13px; color: var(--ink-2); }
.deck-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.deck-thumb { margin: 0; overflow: hidden; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--press), var(--edge); }
.deck-svg svg, .deck-map svg { display: block; width: 100%; height: auto; }
.deck-open { display: block; width: 100%; padding: 0; border: 0; background: var(--paper); cursor: zoom-in; }
.deck-open img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.deck-open:hover img { opacity: .92; }
.deck-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; margin-right: 6px; padding: 0 6px; border-radius: 999px; background: var(--sheet-deep); font: 600 13px/1 var(--display); }
.deck-meta { font-size: 13px; color: var(--ink-2); }
dialog.slide-viewer { width: min(1240px, calc(100vw - 32px)); }
.slide-viewer-body { max-height: none; padding: 0 20px 12px; }
.slide-viewer-body img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-2); box-shadow: var(--edge); background: var(--paper); }
.slide-count { font-size: 13px; color: var(--ink-2); min-width: 64px; text-align: center; }
.deck-thumb figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--grid); }
.deck-print { display: none; }
@media (min-width: 900px) { .tool-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tool-row .wide { grid-column: span 3; } .sub-row { grid-template-columns: minmax(0, 2fr) 110px auto 80px auto; } .deck-grid { grid-template-columns: 1fr 1fr; } }

/* About (§6.9) */
.about-section { margin: 40px 0 8px; max-width: 1040px; }
.about-section h2 { margin-bottom: 12px; font-variation-settings: "opsz" 96; }
.about-section h3 { margin: 28px 0 0; }
.about-section h4 { margin: 0 0 12px; }
.about-section p { max-width: 62ch; color: var(--ink-2); }
.about-how { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 14px 0 24px; }
.about-how ol { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.about-how li { position: relative; padding-left: 36px; max-width: 62ch; color: var(--ink-2); counter-increment: step; }
.about-how li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--rule); font: 600 12px/1 var(--display); color: var(--ink-2); }
.about-how li strong { color: var(--ink); font-weight: 600; }
@media (min-width: 900px) { .about-how { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Standalone pages: privacy, 404 */
.page-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--strip-h); padding: 0 var(--gutter); background: var(--sheet-deep); border-bottom: 1px solid var(--grid); }
.page-strip .lockup-name, .page-strip .lockup-tag { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.page-strip .lockup-tag { display: none; }
.page-strip a.brand { text-decoration: none; }
.article { max-width: calc(62ch + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 64px; }
.article h1 { font-size: 34px; line-height: 1.05; margin: 0 0 8px; font-variation-settings: "opsz" 96; }
.article h2 { font-size: 22px; margin: 32px 0 10px; }
.article p, .article li { color: var(--ink); }
.article .table { margin: 8px 0; border-radius: var(--r-2); overflow: hidden; box-shadow: var(--edge); }
.article .table th { width: 34%; vertical-align: top; background: var(--sheet-deep); border-bottom: 1px solid var(--grid); }
.notfound { display: grid; place-items: center; min-height: calc(100dvh - var(--strip-h)); padding: 24px var(--gutter); }
.notfound-card { max-width: 420px; padding: 28px; border-radius: var(--r-3); background: var(--paper); box-shadow: var(--press), var(--edge); }
.notfound-card h1 { font-size: 28px; line-height: 1.1; margin: 12px 0 8px; }
.notfound-card p { color: var(--ink-2); }
@media (min-width: 760px) { .page-strip { padding: 0 var(--gutter-l); } .page-strip .lockup-tag { display: inline; } .article h1 { font-size: 44px; } }

/* Motion keyframes */
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.wizard-help-popover.is-anchored, .menu-list, .strip-tools, .ho-menu { animation-fill-mode: both; }

/* ── 7. Print ──────────────────────────────────────────────────────────── */
@media print {
  @page { size: landscape; margin: 0.4in; }
  body, .app-shell, .content, .page, .map-panel { background: #fff !important; box-shadow: none !important; padding: 0 !important; }
  .topbar, .spine, .tabs, .spine-next, .spine-foot, .app-banners, .editor-panel, .page-head, .map-status, .zoom-tools, .lane-pin, .about-section, .toast, .skip-link, .proposal-panel { display: none !important; }
  .app-shell { display: block; }
  .workflow-layout { display: block; }
  .map-scroll { overflow: visible; min-height: 0; padding: 0 !important; }
  .map-panel { overflow: visible; }
  .map-panel::after { display: none; }
  .map-canvas { width: auto; display: block; }
  .map-canvas > svg { width: 100% !important; height: auto; }
  body.printing-deck .app-shell, body.printing-deck dialog, body.printing-deck .toast { display: none !important; }
  body.printing-deck .deck-print { display: block; }
  body.printing-deck .deck-page { margin: 0; break-after: page; break-inside: avoid; }
  body.printing-deck .deck-page:last-child { break-after: auto; }
  body.printing-deck .deck-page svg, body.printing-deck .deck-page img { display: block; width: 100%; height: auto; }
}

/* ── 8. Reduced motion, forced colours ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .btn:active:not(:disabled), .start-card:hover, .path-chip:hover { transform: none; }
  dialog { transform: none !important; }
  .toast { transform: translateX(-50%) !important; }
  .seg-thumb { transition: none !important; }
  @starting-style { dialog[open] { transform: none; } }
}
@media (forced-colors: active) {
  .btn, .chip, .tab, .start-card, .intent-card, .eff-chip, .eff-status, .score, .info-tip { border: 1px solid CanvasText; forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .tab.active, .btn-primary { background: Highlight; color: HighlightText; }
}

/* Account deletion confirm (UX-05) */
#accountDeleteDialog .callout ul { margin: 6px 0 0; padding-left: 18px; }
#accountDeleteDialog .callout li { margin: 2px 0; }

/* UX-44: no focusable text field under 16 px on small phones, so iOS never zooms on focus (last, so it wins). */
@media (max-width: 479.98px) { .input, .select, .textarea, .outline-table td .input, .outline-table td .select, .options-table .input, .options-table .select, .eff-volume .input, .markdown-output { font-size: 16px; } :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]), select, textarea) { font-size: 16px; } }
.eff-card-head .chip, .proposal-head .chip { white-space: normal; }

/* §9 / UX-33, UX-36: focused controls clear the sticky strip; 44 px hit areas on phones. */
:is(button, input, select, textarea, a, summary, [tabindex]) { scroll-margin-top: calc(var(--strip-h) + 12px); }
.step-dot { position: relative; }
@media (max-width: 759.98px) {
  .step-dot::after { content: ""; position: absolute; inset: -8px; }
  .check { min-height: 44px; }
  .tool-choice, .deck-open { min-height: 44px; }
  .link-button { min-height: 44px; display: inline-flex; align-items: center; }
  .list-item-title .link-button, .impact-table .link-button { min-height: 0; display: inline; }
}
@media (max-width: 759.98px) {
  .segmented > button, .subnav > button, .problem-mode-toggle > button { min-height: 44px; }
  details > summary, .skip-link { min-height: 44px; }
  .zoom-tools .zoom-fit { min-width: 44px; }
  .outline-table td .input, .outline-table td .select, .options-table .input, .options-table .select { min-height: 44px; }
}
details > summary { min-height: 28px; }
@media (max-width: 759.98px) {
  .rc-card summary, .eff-assume summary, #briefPreview summary, .build-card details > summary, .cost-card details > summary, .stepper-fold .chip { min-height: 44px; }
}