/* ──────────────────────────────────────────────────────────────────────────
   App surfaces: onboarding, Command Center, status, quick input, timelines,
   quote check, mechanic & negotiation modes, deal workspace, landings.
   Hairlines and spatial hierarchy, not cards inside cards.
   ────────────────────────────────────────────────────────────────────────── */

/* ---------- technical primitives ---------- */
.rule { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-4) 0; }
.hair { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); }
.hair-section { padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
.hair-section:last-child { border-bottom: 0; }
.ticks { display: flex; justify-content: space-between; color: var(--text-3); font-size: 0.62rem; font-family: var(--font-mono); letter-spacing: 0.08em; }
.ticks span { position: relative; padding-top: 8px; }
.ticks span::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 5px; background: var(--hairline-strong); }
.label-tech { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.num-xl { font-size: clamp(2rem, 6vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.num-lg { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kind-tag { display: inline-flex; align-items: center; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--hairline-strong); color: var(--text-2); }
.kind-tag.kind-fact { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.kind-tag.kind-interpretation { color: var(--blue-deep); border-color: color-mix(in srgb, var(--blue) 40%, transparent); }
.kind-tag.kind-recommendation { color: var(--warn-text); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.src-badge { display: inline-flex; gap: 4px; align-items: baseline; font-size: var(--fs-xs); color: var(--text-2); }
.src-badge .k { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.62rem; color: var(--text); }
.evidence-drawer { border-top: 1px solid var(--hairline); padding-top: 6px; margin-top: 10px; }
.evidence-drawer summary { color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.evidence-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-xs); color: var(--text-2); }
.evidence-list li { padding-left: 10px; border-left: 2px solid var(--hairline); }
.evidence-list .ev-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text); margin-bottom: 2px; }
.evidence-list .ev-src .k { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.62rem; color: var(--text); }
.evidence-list .ev-note { margin-top: 2px; }
.conf-missing { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.demo-banner { border-radius: 0; text-align: center; font-size: var(--fs-xs); letter-spacing: 0.04em; padding: 6px 12px; }
.unavailable { border: 1px dashed var(--hairline-strong); border-radius: var(--radius); padding: 12px 14px; color: var(--text-2); font-size: var(--fs-sm); background: var(--surface); }
.unavailable b { color: var(--text); display: block; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }

/* ---------- onboarding (/start) ---------- */
.start { max-width: 560px; margin: 0 auto; padding: clamp(24px, 6vh, 64px) 0 40px; }
.start .brandline { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 28px; }
.start h1 { font-size: clamp(2rem, 6vw, 2.75rem); letter-spacing: -0.03em; margin-bottom: 10px; }
.start .lead { color: var(--text-2); font-size: var(--fs-lg); margin: 0 0 28px; max-width: 46ch; }
.start-actions { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 480px) { .start-actions { grid-template-columns: 1fr 1fr; } }
.start-actions .btn { min-height: 52px; font-size: var(--fs-md); }
.start-alt { margin-top: 22px; color: var(--text-2); font-size: var(--fs-sm); }
.start-alt a, .start-alt button { font: inherit; background: none; border: 0; padding: 0; color: var(--blue-deep); text-decoration: underline; cursor: pointer; }
.vin-entry { margin-top: 20px; }
.vin-entry .input-vin { font-size: 1.35rem; letter-spacing: 0.2em; min-height: 56px; text-align: center; font-family: var(--font-mono); }
.vin-progress { display: grid; grid-template-columns: repeat(17, 1fr); gap: 3px; margin-top: 8px; }
.vin-progress span { height: 3px; background: var(--hairline); border-radius: 2px; }
.vin-progress span.on { background: var(--blue); }
.vin-progress span.bad { background: var(--crit); }
.vin-where { margin-top: 28px; border-top: 1px solid var(--hairline); padding-top: 18px; }
.vin-where svg { width: 100%; height: auto; display: block; margin-top: 8px; }
.vin-where .cap { color: var(--text-2); font-size: var(--fs-xs); margin-top: 6px; }
.identified { text-align: center; padding: 20px 0 8px; }
.identified .eyebrow { justify-content: center; display: block; }
.identified .ymm { font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: -0.03em; font-weight: 600; margin: 6px 0 4px; }
.identified .spec { color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .identified.reveal-id { animation: id-in 700ms var(--ease-out) both; }
  @keyframes id-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .id-line { height: 1px; background: var(--hairline-strong); margin: 14px auto; width: 0; animation: id-line 900ms var(--ease-out) 200ms forwards; }
  @keyframes id-line { to { width: 72px; } }
}
.scan-stage { margin-top: 16px; }

/* ---------- Command Center ---------- */
.cc { display: grid; gap: 28px; }
.cc-head { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; justify-content: space-between; }
.cc-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: -0.025em; margin: 0 0 4px; }
.cc-head .spec { color: var(--text-2); font-size: var(--fs-md); font-variant-numeric: tabular-nums; line-height: 1.6; }
.cc-head .spec span + span::before { content: "•"; margin: 0 8px; color: var(--text-3); }
.cc-head .mileage { font-variant-numeric: tabular-nums; font-size: var(--fs-md); color: var(--text); font-weight: 500; }
.cc-head .vin { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); letter-spacing: 0.08em; }
.cc-status { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cc-status { grid-template-columns: 1.1fr 1fr 1fr 1fr; } }
@media (min-width: 720px) and (max-width: 1100px) { .cc-status { grid-template-columns: 1fr 1fr; } }
.cc-stat { padding: 16px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--text); display: block; }
@media (min-width: 720px) { .cc-stat { border-bottom: 0; border-right: 1px solid var(--hairline); padding: 18px 20px 18px 0; } .cc-stat + .cc-stat { padding-left: 20px; } .cc-stat:last-child { border-right: 0; } }
.cc-stat:last-child { border-bottom: 0; }
.cc-stat .k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.cc-stat .v { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.cc-stat .v .pip { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.cc-stat .d { color: var(--text-2); font-size: var(--fs-sm); margin-top: 6px; }
.cc-stat .d b { color: var(--text); font-weight: 600; }
.cc-stat.ok .pip { background: var(--ok); } .cc-stat.warn .pip { background: var(--warn); } .cc-stat.crit .pip { background: var(--crit); } .cc-stat.none .pip { background: var(--hairline-strong); } .cc-stat.info .pip { background: var(--blue); }
.cc-stat:hover .v { color: var(--blue-deep); }
.cc-health { display: grid; gap: 4px; }
.cc-health .headline { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.025em; display: flex; align-items: center; gap: 10px; }
.cc-health .headline .pip { width: 12px; height: 12px; border-radius: 50%; }
.cc-health .headline.ok .pip { background: var(--ok); } .cc-health .headline.warn .pip { background: var(--warn); } .cc-health .headline.crit .pip { background: var(--crit); }
.cc-health .sub { color: var(--text-2); }
.cc-attn { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cc-attn li a { display: flex; gap: 10px; align-items: center; color: var(--text); text-decoration: none; padding: 8px 0; border-top: 1px solid var(--hairline); font-size: var(--fs-sm); }
.cc-attn li a:hover { color: var(--blue-deep); }
.cc-attn .pip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cc-attn .pip.crit { background: var(--crit); } .cc-attn .pip.warn { background: var(--warn); } .cc-attn .pip.info { background: var(--blue); }
.cc-attn .why { color: var(--text-2); margin-left: auto; font-size: var(--fs-xs); white-space: nowrap; }
.cc-viewer { position: relative; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.cc-viewer .vv { height: clamp(360px, 52vw, 560px); }
.mk-stage .vv { height: clamp(320px, 38vw, 520px); }
.cc-ask { display: grid; gap: 12px; }
.cc-ask h2 { font-size: clamp(1.3rem, 2.6vw, 1.6rem); letter-spacing: -0.02em; margin: 0; }
.cc-ask form { display: grid; gap: 10px; }
.cc-ask textarea { min-height: 88px; font-size: 1.1rem; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid var(--hairline-strong); background: var(--surface); resize: vertical; }
.cc-ask textarea:focus { border-color: var(--blue); box-shadow: var(--focus); outline: none; }
.cc-ask .examples { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-ask .examples button { border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface); padding: 6px 12px; font: inherit; font-size: var(--fs-xs); color: var(--text-2); cursor: pointer; }
.cc-ask .examples button:hover { border-color: var(--blue); color: var(--blue-deep); }
.cc-ask .route { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 14px; background: var(--blue-soft); font-size: var(--fs-sm); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cc-ask .route b { color: var(--blue-deep); }
.cc-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .cc-quick { grid-template-columns: repeat(3, 1fr); } }
.cc-quick a { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--fs-sm); min-height: 84px; }
.cc-quick a svg { width: 20px; height: 20px; color: var(--blue); }
.cc-quick a:hover { background: var(--surface-2); }
.cc-quick a .d { font-weight: 400; color: var(--text-2); font-size: var(--fs-xs); }
.cc-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .cc-grid { grid-template-columns: 1fr 1fr; } }
.cc-block h3 { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; }
.cc-block h3 a { font-size: var(--fs-xs); letter-spacing: 0; text-transform: none; font-weight: 500; }
.cc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.cc-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.cc-list .when { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); min-width: 72px; }
.cc-list .amt { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ---------- 3D viewer chrome ---------- */
.vv { position: relative; background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #f1f4f7 55%, #e6ebf0 100%); min-height: 320px; overflow: hidden; }
.vv canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; cursor: grab; }
.vv canvas:active { cursor: grabbing; }
.vv-hud { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: space-between; pointer-events: none; }
.vv-hud > * { pointer-events: auto; }
.vv-modes { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: var(--radius); overflow: hidden; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); }
.vv-modes button { border: 0; background: transparent; padding: 8px 12px; min-height: 36px; font: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); cursor: pointer; }
.vv-modes button + button { border-left: 1px solid var(--hairline); }
.vv-modes button[aria-pressed="true"] { background: var(--text); color: #fff; }
.vv-systems { display: flex; gap: 4px; flex-wrap: wrap; }
.vv-systems button { border: 1px solid var(--hairline-strong); border-radius: 999px; background: rgba(255,255,255,0.92); padding: 6px 10px; min-height: 32px; font: inherit; font-size: 0.7rem; font-weight: 600; color: var(--text-2); cursor: pointer; }
.vv-systems button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.vv-status { position: absolute; left: 12px; top: 12px; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: rgba(255,255,255,0.85); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--hairline); }
.vv-slider { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.92); border: 1px solid var(--hairline-strong); border-radius: var(--radius); padding: 4px 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.vv-slider input { width: 110px; accent-color: var(--blue); }
.vv-load { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(247,248,250,0.9); }
.vv-load .box { width: min(320px, 80%); }
.vv-load .t { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 12px; }
.vv-load ol { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--text-3); }
.vv-load li { display: flex; gap: 10px; align-items: center; }
.vv-load li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--hairline-strong); }
.vv-load li.done { color: var(--text); } .vv-load li.done::before { background: var(--blue); border-color: var(--blue); }
.vv-load .bar { height: 2px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.vv-load .bar span { display: block; height: 100%; background: var(--blue); width: 0; transition: width 240ms var(--ease-out); }
.vv-fallback { padding: 20px; }
.vv-fallback .note { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.vv-label { position: absolute; transform: translate(-50%, -100%); pointer-events: none; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); background: rgba(255,255,255,0.95); border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); padding: 4px 8px; white-space: nowrap; }
.vv-label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--lead, 28px); background: var(--text); }
.vv-panel { border-top: 1px solid var(--hairline); padding: 16px 18px; display: grid; gap: 10px; background: var(--surface); }
.vv-panel h3 { margin: 0; font-size: var(--fs-lg); letter-spacing: -0.015em; }
.vv-panel .sys { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.vv-panel dl { margin: 0; display: grid; gap: 8px; }
.vv-panel dt { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.vv-panel dd { margin: 0 0 4px; font-size: var(--fs-sm); }
.schematic-note { position: absolute; right: 12px; top: 12px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: rgba(255,255,255,0.85); border: 1px solid var(--hairline); padding: 4px 8px; border-radius: 4px; max-width: 46%; text-align: right; }

/* ---------- marketing home ---------- */
.mk { display: grid; gap: 0; }
.mk-hero { display: grid; gap: 24px; padding: clamp(24px, 5vw, 56px) 0 24px; align-items: center; }
@media (min-width: 960px) { .mk-hero { grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.3fr); gap: 32px; } }
.mk-hero .brandline { color: var(--text-2); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.mk-hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.035em; line-height: 1.02; margin: 14px 0 12px; }
.mk-hero .tag { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--text-2); margin: 0 0 22px; line-height: 1.4; }
.mk-hero .tag b { color: var(--text); font-weight: 600; }
.mk-vin { display: grid; gap: 8px; max-width: 460px; }
.mk-vin .input-row { gap: 8px; }
.mk-vin .input-vin { min-height: 52px; font-size: 1.1rem; }
.mk-vin .btn { min-height: 52px; }
.mk-vin .sub { color: var(--text-2); font-size: var(--fs-xs); }
.mk-stage { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); min-height: 320px; position: relative; }
.mk-stage .vv { min-height: 360px; }
.mk-story { position: relative; }
.mk-step { display: grid; gap: 14px; padding: 48px 0; border-top: 1px solid var(--hairline); align-items: start; }
@media (min-width: 900px) { .mk-step { grid-template-columns: 0.8fr 1.2fr; gap: 40px; } }
.mk-step .n { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--text-3); margin-bottom: 8px; }
.mk-step h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -0.03em; margin: 0 0 10px; }
.mk-step p { color: var(--text-2); font-size: var(--fs-lg); margin: 0 0 14px; max-width: 46ch; }
.mk-step .btn-row { margin-top: 4px; }
.mk-demo { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.mk-demo .cap { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); padding: 8px 14px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; }
.mk-demo .body { padding: 16px; display: grid; gap: 10px; }
.mk-phone { max-width: 320px; margin: 0 auto; border: 1px solid var(--hairline-strong); border-radius: 28px; padding: 14px; background: var(--surface); box-shadow: var(--shadow-lift); }
.mk-phone .screen { border-radius: 18px; background: var(--canvas); padding: 16px; display: grid; gap: 12px; min-height: 420px; }
.mk-final { text-align: center; padding: 56px 0 32px; border-top: 1px solid var(--hairline); }
.mk-final h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; }
.mk-story-words { position: sticky; top: calc(var(--topbar-h) + 12px); }
.mk-chapters { display: grid; gap: 6px; }
.mk-chapter { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--text-3); transition: color 300ms var(--ease); }
.mk-chapter.on { color: var(--text); }

/* ---------- quote check ---------- */
.qc-summary { display: grid; gap: 0; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); grid-template-columns: 1fr; }
@media (min-width: 640px) { .qc-summary { grid-template-columns: 1fr 1fr 1fr; } }
.qc-cell { padding: 18px 20px; border-bottom: 1px solid var(--hairline); }
@media (min-width: 640px) { .qc-cell { border-bottom: 0; border-right: 1px solid var(--hairline); } .qc-cell:last-child { border-right: 0; } }
.qc-cell:last-child { border-bottom: 0; }
.qc-cell .k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 8px; }
.qc-cell .v { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.qc-cell .d { color: var(--text-2); font-size: var(--fs-xs); margin-top: 8px; }
.qc-line { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.qc-line + .qc-line { margin-top: 10px; }
.qc-line-head { display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.qc-line-head h3 { margin: 0; font-size: var(--fs-md); letter-spacing: -0.01em; flex: 1 1 auto; }
.qc-line-head .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.qc-cols { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .qc-cols { grid-template-columns: 1fr 1fr 1fr; } }
.qc-col { padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
@media (min-width: 560px) { .qc-col { border-bottom: 0; border-right: 1px solid var(--hairline); } .qc-col:last-child { border-right: 0; } }
.qc-col .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.qc-col .row2 { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; }
.qc-col .row2 span:first-child { color: var(--text-2); }
.qc-assess { padding: 12px 16px; display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); border-top: 1px solid var(--hairline); }
.qc-assess .pill { flex: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.qc-assess .pill.ok { background: var(--ok-soft); color: var(--ok); } .qc-assess .pill.warn { background: var(--warn-soft); color: var(--warn-text); } .qc-assess .pill.ask { background: var(--blue-soft); color: var(--blue-deep); } .qc-assess .pill.crit { background: var(--crit-soft); color: var(--crit); }
.qc-body { padding: 12px 16px; font-size: var(--fs-sm); color: var(--text-2); border-top: 1px solid var(--hairline); }
.qc-body b { color: var(--text); }
.qc-upload { border: 1px dashed var(--hairline-strong); border-radius: var(--radius-lg); padding: 24px; text-align: center; background: var(--surface); }
.qc-upload h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -0.025em; margin: 0 0 6px; }
.qc-upload p { color: var(--text-2); margin: 0 0 14px; }
.qc-upload input[type=file] { display: none; }
.qc-upload .btn { min-height: 48px; }

/* ---------- urgency scale (5 levels; symbol + words, never color alone) ---------- */
.urg { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-sm); padding: 4px 10px 4px 6px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--surface); }
.urg .sym { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; color: #fff; }
.urg.stop .sym { background: var(--crit); } .urg.stop { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 45%, transparent); }
.urg.immediate .sym { background: var(--crit); } .urg.immediate { color: var(--crit); }
.urg.soon .sym { background: var(--warn); } .urg.soon { color: var(--warn-text); }
.urg.monitor .sym { background: var(--blue); } .urg.monitor { color: var(--blue-deep); }
.urg.maintenance .sym { background: var(--ok); } .urg.maintenance { color: var(--ok); }
.urg.unknown .sym { background: var(--text-3); } .urg.unknown { color: var(--text-2); }
.safety-override { border: 2px solid var(--crit); background: var(--crit-soft); border-radius: var(--radius-lg); padding: 18px 20px; }
.safety-override h2 { color: var(--crit); margin: 0 0 6px; font-size: var(--fs-xl); }

/* ---------- Diagnose flow ---------- */
.dx-q { display: grid; gap: 10px; }
.dx-q h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; margin: 0; }
.dx-opts { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .dx-opts { grid-template-columns: repeat(3, 1fr); } }
.dx-opts button { min-height: 52px; border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--surface); font: inherit; font-weight: 600; font-size: var(--fs-sm); color: var(--text); cursor: pointer; padding: 10px 12px; text-align: left; }
.dx-opts button:hover { border-color: var(--blue); background: var(--blue-soft); }
.dx-opts button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.dx-steps { display: flex; gap: 6px; }
.dx-steps span { height: 3px; flex: 1; background: var(--hairline); border-radius: 2px; }
.dx-steps span.on { background: var(--blue); }
.dx-rank { list-style: none; margin: 0; padding: 0; counter-reset: r; border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.dx-rank li { counter-increment: r; display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); align-items: start; }
.dx-rank li:last-child { border-bottom: 0; }
.dx-rank li::before { content: counter(r); font-family: var(--font-mono); color: var(--text-3); font-size: var(--fs-sm); padding-top: 2px; }
.dx-rank .t { font-weight: 600; } .dx-rank .d { color: var(--text-2); font-size: var(--fs-sm); margin-top: 2px; }
.dx-rank .lk { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; white-space: nowrap; }
.dx-rank .lk.likely { background: var(--blue-soft); color: var(--blue-deep); } .dx-rank .lk.possible { background: var(--surface-2); color: var(--text-2); } .dx-rank .lk.less { background: var(--surface-2); color: var(--text-3); }

/* ---------- dashboard lights ---------- */
.lights { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .lights { grid-template-columns: repeat(4, 1fr); } }
.lights button { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; min-height: 96px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-lg); background: var(--surface); font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text); cursor: pointer; text-align: center; }
.lights button:hover { border-color: var(--blue); }
.lights button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.lights svg { width: 36px; height: 36px; }
.lights .amber svg { color: var(--warn); } .lights .red svg { color: var(--crit); } .lights .blue svg { color: var(--blue); } .lights .green svg { color: var(--ok); }
.light-answer { display: grid; gap: 14px; }
.light-answer .first { border: 1px solid var(--hairline); border-left: 4px solid var(--blue); border-radius: var(--radius-lg); padding: 16px 18px; background: var(--surface); }
.light-answer .first.crit { border-left-color: var(--crit); background: var(--crit-soft); }
.light-answer .first.warn { border-left-color: var(--warn); }
.light-answer .first .k { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.light-answer .first .v { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }

/* ---------- Mechanic Mode / Negotiation Mode (focus modes) ---------- */
.fm { min-height: 100dvh; background: var(--canvas); display: grid; grid-template-rows: auto 1fr auto; }
.fm-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--hairline); background: var(--surface); position: sticky; top: 0; z-index: 5; }
.fm-top .who { font-size: var(--fs-sm); color: var(--text-2); }
.fm-top .who b { display: block; color: var(--text); font-size: var(--fs-md); letter-spacing: -0.01em; }
.fm-top .mode { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); border: 1px solid var(--blue); padding: 4px 8px; border-radius: 4px; }
.fm-body { padding: 20px 16px 120px; display: grid; gap: 22px; max-width: 640px; width: 100%; margin: 0 auto; }
.fm-k { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 700; margin: 0 0 8px; }
.fm-goal { font-size: clamp(1.25rem, 3.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.fm-say { border-left: 4px solid var(--blue); background: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 16px 18px; box-shadow: var(--shadow); }
.fm-say blockquote { margin: 0 0 12px; font-size: clamp(1.15rem, 3.4vw, 1.4rem); line-height: 1.45; letter-spacing: -0.01em; }
.fm-say .btn { min-height: 48px; }
.fm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fm-list li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-md); padding: 10px 12px; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--surface); }
.fm-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--crit); flex: none; margin-top: 8px; }
.fm-ifsay { border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.fm-ifsay > div { padding: 14px 16px; border-bottom: 1px solid var(--hairline); }
.fm-ifsay > div:last-child { border-bottom: 0; }
.fm-ifsay .they { font-weight: 600; font-size: var(--fs-md); }
.fm-ifsay .they::before { content: "They say: "; color: var(--text-2); font-weight: 500; }
.fm-ifsay .you { margin-top: 8px; font-size: var(--fs-md); color: var(--text); padding-left: 12px; border-left: 2px solid var(--blue); }
.fm-ifsay .you::before { content: "You say: "; color: var(--blue-deep); font-weight: 600; }
.fm-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,0.96); backdrop-filter: blur(8px); border-top: 1px solid var(--hairline); display: flex; gap: 10px; z-index: 6; }
.fm-bar .btn { flex: 1; min-height: 52px; font-size: var(--fs-md); }
.fm-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.fm-numbers > div { background: var(--surface); padding: 14px 16px; }
.fm-numbers .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.fm-numbers .v { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.fm-numbers .v.pos { color: var(--crit); } .fm-numbers .v.neg { color: var(--ok); }
.fm-numbers .edit { font-size: var(--fs-xs); color: var(--blue-deep); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; }
.fm-numbers .wide { grid-column: 1 / -1; }

/* ---------- OTD / deal workspace ---------- */
.otd-hero { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); padding: 22px 24px; display: grid; gap: 6px; }
.otd-hero .k { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.otd-hero .v { font-size: clamp(2.4rem, 8vw, 3.6rem); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.otd-hero .sub { color: var(--text-2); font-size: var(--fs-sm); }
.otd-grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .otd-grid { grid-template-columns: repeat(4, 1fr); } }
.otd-grid > div { background: var(--surface); padding: 14px 16px; }
.otd-grid .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.otd-grid .v { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.deal-cols { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .deal-cols { grid-template-columns: 1fr 1fr 1fr; } }
.deal-col { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.deal-col h3 { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--hairline); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 700; display: flex; justify-content: space-between; }
.deal-col .body { padding: 12px 16px; display: grid; gap: 8px; }
.deal-col .field { margin: 0; }
.deal-col .field label { font-weight: 500; font-size: var(--fs-xs); color: var(--text-2); }
.deal-col input { min-height: 40px; font-variant-numeric: tabular-nums; }
.audit { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.audit-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.audit-row:last-child { border-bottom: 0; }
.audit-row .k { font-weight: 600; } .audit-row .d { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-sm); }
.audit-row .v { font-variant-numeric: tabular-nums; font-weight: 600; }
.audit-row.review { background: var(--warn-soft); }
.audit-row.review .k::after { content: " · review"; color: var(--warn-text); font-weight: 600; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- maintenance timeline ---------- */
.mt { position: relative; padding-left: 28px; }
.mt::before { content: ""; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--hairline-strong); }
.mt-now { position: relative; margin: 0 0 18px; }
.mt-now::before { content: ""; position: absolute; left: -26px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.mt-now .k { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-deep); font-weight: 700; }
.mt-now .v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mt-item { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.mt-item::before { content: ""; position: absolute; left: -23px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 2px solid var(--hairline-strong); }
.mt-item.due::before { border-color: var(--warn); background: var(--warn); } .mt-item.soon::before { border-color: var(--warn); } .mt-item.done::before { border-color: var(--ok); background: var(--ok); } .mt-item.cond::before { border-color: var(--blue); }
.mt-item .t { font-weight: 600; } .mt-item .d { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-xs); }
.mt-item .s { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mt-item.due .s { color: var(--warn-text); } .mt-item.soon .s { color: var(--warn-text); } .mt-item.done .s { color: var(--ok); } .mt-item.cond .s { color: var(--blue-deep); } .mt-item.ok .s { color: var(--text-3); }
.mt-milestone { position: relative; margin: 18px 0 10px; font-weight: 600; letter-spacing: -0.01em; }
.mt-milestone::before { content: ""; position: absolute; left: -26px; top: 5px; width: 14px; height: 14px; border-radius: 3px; background: var(--surface); border: 2px solid var(--text); }
.mt-milestone .dist { color: var(--text-2); font-weight: 400; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---------- PPI ---------- */
.ppi-sec { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.ppi-sec + .ppi-sec { margin-top: 10px; }
.ppi-sec summary { padding: 14px 16px; display: flex; gap: 10px; align-items: center; font-size: var(--fs-md); color: var(--text); }
.ppi-sec summary .prog { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-2); }
.ppi-sec .body { padding: 0 16px 12px; display: grid; gap: 4px; }
.ppi-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--hairline); align-items: center; }
.ppi-item .t { font-weight: 500; font-size: var(--fs-sm); } .ppi-item .g { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-xs); }
.ppi-item .seg { display: inline-flex; border: 1px solid var(--hairline-strong); border-radius: 6px; overflow: hidden; }
.ppi-item .seg button { border: 0; background: var(--surface); font: inherit; font-size: 0.7rem; font-weight: 600; padding: 6px 9px; min-height: 32px; color: var(--text-2); cursor: pointer; }
.ppi-item .seg button + button { border-left: 1px solid var(--hairline); }
.ppi-item .seg button[aria-pressed="true"].ok { background: var(--ok); color: #fff; } .ppi-item .seg button[aria-pressed="true"].warn { background: var(--warn); color: #fff; } .ppi-item .seg button[aria-pressed="true"].bad { background: var(--crit); color: #fff; } .ppi-item .seg button[aria-pressed="true"].na { background: var(--text-3); color: #fff; }
.risk { border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px 22px; background: var(--surface); display: grid; gap: 6px; }
.risk .k { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 700; }
.risk .v { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 600; letter-spacing: -0.03em; }
.risk.low .v { color: var(--ok); } .risk.moderate .v { color: var(--warn-text); } .risk.high .v { color: var(--crit); } .risk.insufficient .v { color: var(--text-2); }

/* ---------- scripts (five-part) ---------- */
.script5 { border: 1px solid var(--hairline); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.script5 > div { padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.script5 > div:last-child { border-bottom: 0; }
.script5 .k { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); font-weight: 700; margin-bottom: 4px; }
.script5 .say { border-left: 4px solid var(--blue); padding-left: 14px; }
.script5 .say blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.script5 .withhold { background: var(--warn-soft); }

/* ---------- spec table ---------- */
.spec-table { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
@media (min-width: 640px) { .spec-table { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.spec-row { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-sm); }
.spec-row .k { color: var(--text-2); } .spec-row .v { font-weight: 500; font-variant-numeric: tabular-nums; }
.spec-row .v.na { color: var(--text-3); font-weight: 400; font-style: italic; }

/* ---------- costs ---------- */
.cost-grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; grid-template-columns: repeat(3, 1fr); }
.cost-grid > div { background: var(--surface); padding: 14px 16px; }
.cost-grid .k { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); font-weight: 600; margin-bottom: 4px; }
.cost-grid .v { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cost-grid .v.na { color: var(--text-3); font-size: var(--fs-sm); font-weight: 400; }

/* ---------- glossary ---------- */
.glossary { margin: 0; }
.glossary dt { font-weight: 600; margin-top: 14px; letter-spacing: -0.01em; }
.glossary dt.g-letter { font-family: var(--font-mono); color: var(--text-3); font-size: var(--fs-xs); letter-spacing: 0.14em; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 24px; }
.glossary dd { margin: 2px 0 0; color: var(--text); font-size: var(--fs-sm); }
.glossary dd .muted { display: block; margin-top: 2px; }

.vv.vv-is-fallback { min-height: 0; height: auto !important; background: var(--surface); }