:root {
  color-scheme: light;
  --navy: #f3f6f5; --navy-2: #edf2f0; --panel: #fff; --panel-2: #edf4f1;
  --line: #cedbd5; --line-soft: #e0e7e3; --text: #182e29; --muted: #52675f;
  --teal: #086c57; --teal-dark: #16826c; --amber: #8a5200; --red: #b82939;
  --tint: #eaf5f0; --warning: #fff7e8; --primary-text: #fff;
  --shadow: 0 8px 30px rgb(26 58 44 / 5%);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}
[data-theme="dark"] {
  color-scheme: dark;
  --navy: #07131f; --navy-2: #0b1b2a; --panel: #0d2131; --panel-2: #102a3d;
  --line: #29495c; --line-soft: #193649; --text: #e9f2f3; --muted: #a0b8bf;
  --teal: #49d5c5; --teal-dark: #1b958e; --amber: #ffbd59; --red: #ff747a;
  --tint: #102e38; --warning: #30291e; --primary-text: #03241f;
  --shadow: 0 8px 30px rgb(0 0 0 / 12%);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--navy); color: var(--text); line-height: 1.45; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
button { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.app-shell { max-width: 880px; margin: auto; padding: 0 24px 16px; }
.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-size: 14px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--teal); color: var(--teal); border-radius: 8px; position: relative; }
.brand-mark span { position: absolute; font-size: 11px; right: -3px; bottom: -5px; color: var(--teal); background: var(--navy); }
.brand-dim { color: var(--muted); font-weight: 500; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.session-chip { color: var(--muted); font-size: 11px; }
.icon-button, .ghost { min-height: 44px; min-width: 44px; padding: 9px 12px; border: 1px solid transparent; color: var(--muted); background: transparent; border-radius: 10px; }
#themeToggle { border-color: var(--line); background: var(--panel); font-size: 23px; line-height: 1; color: var(--text); }
.icon-button:hover, .ghost:hover { background: var(--panel-2); color: var(--text); }
.hero { padding: 19px 0 16px; }
.hero-heading { display: flex; gap: 16px; align-items: baseline; }
h1 { font-size: 23px; line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.hero-heading > span { color: var(--muted); font-size: 12px; }
.safety-note { color: var(--amber); font-size: 11px; margin: 6px 0 0; }
.stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 4px; gap: 3px; }
.step { border: 0; border-radius: 8px; color: var(--muted); background: transparent; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 4px; min-height: 44px; }
.step b { font-size: 10px; font-weight: 500; }
.step span { font-size: 12px; font-weight: 700; }
.step.active { color: var(--teal); background: var(--tint); }
.step:hover { background: var(--panel-2); }
.progress-track { height: 2px; margin: 8px 4px 17px; background: var(--line-soft); }
.progress-track span { display: block; width: 20%; height: 100%; background: var(--teal); transition: width .2s; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.section-heading { margin: 0 0 14px; }
h2 { font-size: 22px; letter-spacing: -.035em; margin: 0; line-height: 1.25; }
h3 { font-size: 16px; margin: 6px 0 10px; }
.eyebrow { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.card-grid, .subgrid { display: grid; gap: 10px; }
.vehicle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 12px; }
.choice-card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; min-height: 76px; padding: 12px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; cursor: pointer; }
.choice-card.selected { border-color: var(--teal); background: var(--tint); box-shadow: inset 0 0 0 1px var(--teal); }
.choice-card:has(:focus-visible) { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-card strong { font-size: 14px; }
small, .field-help { color: var(--muted); font-size: 11px; line-height: 1.4; }
.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-card, .symptom-card, .tree-card, .detail-card, .source-card { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.field-card legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 650; }
.field-help { margin: 3px 0 0; }
.radio-stack { display: grid; grid-template-columns: .75fr 1.35fr 1fr; gap: 5px; }
.radio-stack label { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.radio-stack label:has(:checked), .type-choice:has(:checked) { background: var(--tint); border-color: var(--teal); color: var(--teal); }
input[type="radio"], input[type="checkbox"] { accent-color: var(--teal); width: 17px; height: 17px; margin: 0; flex-shrink: 0; }
.danger-card, .alcohol-context-card { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 8px 12px; margin-top: 12px; }
.danger-card { background: var(--warning); }
.toggle-line { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; position: relative; }
.toggle-line > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-box { display: block; width: 21px; height: 21px; flex-shrink: 0; border: 1px solid var(--muted); border-radius: 6px; background: var(--panel); }
.toggle-line input:checked + .toggle-box { background: var(--teal); border-color: var(--teal); }
.toggle-line input:checked + .toggle-box::after { content: '✓'; display: block; text-align: center; color: var(--primary-text); font-weight: 900; }
.toggle-line input:focus-visible + .toggle-box { outline: 3px solid var(--teal-dark); outline-offset: 3px; }
.toggle-line strong { font-size: 13px; font-weight: 650; }
.hidden { display: none !important; }
#dangerDetails { padding: 8px 0; }
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; }
.field input, .field select, .input-unit input { min-width: 0; width: 100%; min-height: 44px; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font-size: 16px; }
.field select { max-width: 100%; }
.panel-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 0 0; border-top: 1px solid var(--line-soft); }
.panel-actions .primary { margin-left: auto; }
.primary, .secondary { min-height: 46px; border-radius: 10px; padding: 11px 15px; font-size: 13px; font-weight: 700; }
.primary { border: 1px solid var(--teal); color: var(--primary-text); background: var(--teal); }
.primary:hover { filter: brightness(1.1); }
.secondary { border: 1px solid var(--line); color: var(--text); background: var(--panel); }
.secondary:hover { border-color: var(--teal); }
.measurement-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); padding: 16px; border-radius: 14px; margin-bottom: 14px; }
.measurement-readout { display: grid; grid-template-columns: 1fr 180px; gap: 6px 16px; align-items: center; }
.measurement-readout > label { color: var(--muted); font-size: 13px; font-weight: 600; }
.measurement-readout .field-help { grid-column: 1 / -1; }
.input-unit { display: flex; align-items: center; gap: 8px; }
.input-unit input { font-size: 29px; font-weight: 750; text-align: right; border-color: var(--teal-dark); }
.input-unit > span { color: var(--teal); font-size: 13px; white-space: nowrap; }
.slider-wrap { margin-top: 8px; }
input[type="range"] { width: 100%; min-height: 36px; margin: 0; accent-color: var(--teal); }
.preset-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.preset { min-height: 44px; border: 1px solid var(--line); color: var(--teal); background: var(--panel-2); border-radius: 8px; padding: 6px; font-size: 12px; }
.preset:last-child { grid-column: 1 / -1; color: var(--muted); }
.measurement-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.type-choice { display: flex; align-items: center; gap: 8px; padding: 10px; min-height: 44px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; cursor: pointer; }
.type-choice strong { font-weight: 600; }
.disclosure { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin-top: 8px; overflow-wrap: anywhere; }
summary { min-height: 44px; padding: 11px 12px; color: var(--text); font-size: 13px; font-weight: 600; }
summary::marker { color: var(--muted); font-size: 10px; }
details[open] > summary { border-bottom: 1px solid var(--line-soft); }
.disclosure > :not(summary) { margin: 10px; }
.inline-help { font-size: 12px; color: var(--muted); }
.inline-help summary { font-size: 11px; min-height: 36px; padding: 8px 0; color: var(--muted); font-weight: 500; }
.inline-help p { margin: 8px 0; }
.legal-callout { display: grid; gap: 8px; font-size: 13px; color: var(--muted); padding: 6px; }
.legal-callout b { color: var(--amber); }
.age-line { display: flex; justify-content: space-between; align-items: center; gap: 5px; color: var(--teal); font-size: 12px; margin-top: 4px; }
.tiny-button { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); color: var(--teal); padding: 5px 9px; font-size: 11px; }
.symptom-layout { display: grid; gap: 8px; margin-top: 12px; }
.symptom-layout .disclosure, .symptom-layout .alcohol-context-card { margin-top: 0; }
.symptom-intro { display: none; }
.selection-count { float: right; border-radius: 5px; padding: 0 6px; background: var(--panel-2); color: var(--teal); font-size: 12px; }
.symptom-card { border: 0; }
.symptom-card h4 { font-size: 11px; color: var(--muted); margin: 10px 0 4px; text-transform: uppercase; }
.symptom-card h4 span { float: right; text-transform: none; }
.check-grid { display: grid; gap: 4px; }
.check-grid label { display: flex; gap: 9px; align-items: center; min-height: 44px; font-size: 13px; cursor: pointer; }
.summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.summary-card { border: 1px solid var(--line-soft); border-radius: 8px; padding: 10px; min-width: 0; }
.summary-label { font-size: 11px; color: var(--muted); }
.summary-card strong { display: block; font-size: 13px; color: var(--teal); margin: 4px 0; }
.summary-card p { font-size: 12px; color: var(--muted); margin: 0; }
.pathway-grid { display: grid; gap: 7px; margin-top: 10px; }
.pathway-card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.pathway-card.active { border-left: 4px solid var(--teal); }
.pathway-card summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 3px 10px; padding: 10px 12px; list-style: none; }
.pathway-card summary::-webkit-details-marker { display: none; }
.pathway-card summary::after { content: '+'; color: var(--muted); font-weight: 400; }
.pathway-card[open] summary::after { content: '−'; }
.pathway-card summary > span { font-size: 12px; flex: 1 1 160px; }
.pathway-card strong { color: var(--teal); font-size: 11px; font-weight: 650; }
.pathway-card p { padding: 0 12px; font-size: 13px; color: var(--muted); }
.assessment-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.tree-card { padding: 0; overflow: hidden; }
.tree-toolbar { display: flex; justify-content: space-between; gap: 8px; padding: 12px; }
.tree-toolbar .eyebrow { display: none; }
.tree-toolbar h3 { margin: 0; font-size: 12px; }
.zoom-controls { display: flex; }
.zoom-controls button { min-height: 44px; min-width: 36px; padding: 5px; background: var(--panel-2); color: var(--teal); border: 1px solid var(--line); }
.tree-viewport { height: 280px; background: var(--navy-2); overflow: hidden; cursor: grab; }
.tree-viewport svg { width: 100%; height: 100%; display: block; }
.tree-edge { stroke: var(--line); stroke-width: 2; fill: none; }
.tree-edge.active { stroke: var(--teal); }
.tree-node { cursor: pointer; }
.tree-node rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; rx: 8; }
.tree-node.active rect, .tree-node.selected rect { fill: var(--tint); stroke: var(--teal); }
.tree-node.possible rect { fill: var(--warning); stroke: var(--amber); }
.tree-node text { fill: var(--text); font-size: 13px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.tree-node .node-sub { fill: var(--muted); font-size: 9px; font-weight: 500; }
.tree-tip { font-size: 10px; color: var(--muted); padding: 8px; }
.detail-card p { color: var(--muted); font-size: 13px; }
.source-pill { display: inline-block; min-height: 44px; padding: 10px 0; font-size: 12px; }
.personalized-actions { padding: 12px; background: var(--tint); border-radius: 12px; margin: 0 0 12px; }
.personalized-actions > div:empty { display: none; }
.personalized-actions ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; font-size: 13px; }
.action-deck { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.action-deck .primary, .action-deck .secondary { flex: 1; white-space: nowrap; }
.action-deck .ghost { font-size: 12px; }
.print-report pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 ui-monospace, monospace; }
.matrix-head, .matrix-row { display: grid; grid-template-columns: 1fr 1.8fr 1.5fr; gap: 12px; padding: 12px; font-size: 12px; }
.matrix-head { color: var(--teal); font-weight: 700; }
.matrix-row { border-top: 1px solid var(--line-soft); color: var(--muted); }
.matrix-row strong { color: var(--text); }
.sources-grid { display: grid; gap: 10px; }
.source-card li, .source-card dd { font-size: 13px; color: var(--muted); }
.source-card li a { display: inline-block; padding: 9px 0; }
.source-card dt { font-size: 13px; font-weight: 700; color: var(--teal); margin-top: 10px; }
.source-card dd { margin-left: 0; }
.final-disclaimer { color: var(--muted); font-size: 13px; padding: 4px; }
footer { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
@media (max-width: 640px) {
  .app-shell { padding: 0 14px 12px; }
  .topbar { height: 58px; }
  .brand { font-size: 12px; gap: 7px; letter-spacing: .04em; }
  .session-chip { display: none; }
  .topbar-actions { gap: 2px; }
  .icon-button { padding: 8px; }
  .hero { padding: 13px 0 12px; }
  .hero-heading > span { display: none; }
  h1 { font-size: 21px; }
  .safety-note { font-size: 10px; line-height: 1.4; }
  .stepper { gap: 1px; padding: 3px; }
  .step { gap: 3px; flex-direction: column; padding: 5px 0; }
  .step b { font-size: 9px; }
  .step span { font-size: 10px; }
  .progress-track { margin-bottom: 13px; }
  h2 { font-size: 21px; }
  .section-heading { margin-bottom: 12px; }
  .two-col { grid-template-columns: 1fr; gap: 10px; }
  .choice-card { min-height: 67px; padding: 10px 8px; }
  .choice-card strong { font-size: 13px; }
  .choice-card small { font-size: 9px; }
  .field-card { padding: 9px; }
  .vehicle-grid { gap: 7px; }
  .measurement-card { padding: 12px; }
  .measurement-readout { grid-template-columns: 1fr 165px; gap: 7px; }
  .measurement-types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .type-choice { flex-direction: column; justify-content: center; text-align: center; padding: 9px 4px; min-height: 66px; font-size: 11px; }
  .panel-actions { gap: 8px; margin-top: 12px; }
  .panel-actions .primary { flex: 1; }
  .primary, .secondary { padding: 10px 12px; font-size: 12px; }
  .field-help { font-size: 10px; }
  [data-step-section="3"] .two-col > .field-card:first-child { position: relative; padding-right: 145px; }
  [data-step-section="3"] .age-line { position: absolute; right: 10px; top: 14px; width: 125px; flex-direction: column; align-items: stretch; text-align: center; font-size: 11px; }
  #dobHint { min-height: 14px; }
  .tiny-button { margin-top: 3px; }
  .symptom-layout { margin-top: 10px; gap: 6px; }
  .summary-grid { grid-template-columns: 1fr; }
  .assessment-layout { grid-template-columns: 1fr; }
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: 1fr; gap: 5px; }
  .action-deck .ghost { flex-basis: 100%; min-height: 36px; padding: 6px; }
  footer { font-size: 9px; margin-top: 14px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media print {
  :root, [data-theme="dark"] { color-scheme: light; --text: #111; --muted: #333; --panel: #fff; }
  body { background: #fff; }
  body * { visibility: hidden !important; }
  .wizard-panel { display: none !important; }
  .wizard-panel[data-step-section="5"], .wizard-panel[data-step-section="5"] details:has(.print-report) { display: block !important; }
  .print-report, .print-report * { visibility: visible !important; }
  .print-report { display: block !important; position: absolute; inset: 0; padding: 0; margin: 0 !important; border: 0; color: #111; background: #fff; }
  .print-report pre { color: #111; font-size: 10pt; }
}