/* BatteryReclaim Lab — Phase 8 frontend styles, v1.3 (IF-D010 palette; IF-D011 usability revision; IF-D012 final polish).
   Palette: deep navy, warm ivory, white surfaces, teal actions, slate secondary text, sparse champagne-gold
   decoration (decorative only — never text, focus, boundaries or state). System fonts only; body and inputs ≥ 16 px.
   Type scale (≈1.25): 13 / 15 / 16 / 18 / 22 / 28 / 36 / fluid display. Labels sit directly above their controls;
   hints follow the control so fields line up across columns. */

:root {
  --navy: #12233A;
  --ivory: #F7F5F0;
  --white: #FFFFFF;
  --teal: #14786D;
  --teal-hover: #0F6158;
  --teal-tint: #E7F2F0;
  --slate: #5F6E7B;
  --gold: #B99A62;
  --control: #7A8794;
  --line: #E4DFD4;          /* decorative card border on ivory/white */
  --line-soft: #EEEAE2;
  --error: #A6383C;  --error-bg: #FDECEE;
  --warning: #805B1A; --warning-bg: #FFF4DC;
  --info: #305A84;   --info-bg: #ECF2F9;
  --success: #176B55; --success-bg: #EAF5EF;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(18, 35, 58, .05), 0 4px 16px rgba(18, 35, 58, .04);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --t: 180ms;              /* interaction transitions: 180–280 ms */
  --dur-fast: 180ms; --dur: 240ms; --dur-slow: 420ms;  /* decorative entries: 300–450 ms */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --teal-soft: #8FD3C7;      /* light teal used only on navy (logo, focus on dark) */
  --panel: #FAF8F3;          /* quiet inset panel on white */
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem;
  --wrap: 1280px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }  /* the hidden attribute must win over component display rules */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ivory); color: var(--navy);
  font: 1rem/1.55 var(--font); overflow-wrap: anywhere;  /* rem so text-only zoom also scales body text */
}
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 var(--s3); font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.016em; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
p { margin: 0 0 var(--s3); }
a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-hover); }
code, pre { font-family: var(--mono); font-size: .9em; }
.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(--slate); }

/* ---------- focus ---------- */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.app-header :focus-visible { outline-color: var(--teal-soft); }
[tabindex="-1"]:focus { outline: none; }
[tabindex="-1"]:focus-visible { outline: 3px solid var(--teal); }
#step-heading:focus, #step-heading:focus-visible { outline: none; }

.skip-link { position: absolute; left: var(--s4); top: -100px; background: var(--white); color: var(--navy); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); z-index: 100; font-weight: 600; }
.skip-link:focus { top: var(--s3); }

/* ---------- header ---------- */
.app-header { background: var(--navy); color: var(--white); position: relative; z-index: 5; }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 10px var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); }
.brand { display: flex; align-items: center; gap: var(--s3); color: var(--white); text-decoration: none; min-height: 44px; margin-right: auto; }
.brand:hover { color: var(--white); }
.brand-svg { flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; }
.brand-sub { font-size: .8125rem; color: #C9D2DD; }
.top-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.top-link { color: #E8EDF3; text-decoration: none; padding: 10px var(--s3); border-radius: var(--radius-sm); min-height: 44px; display: inline-flex; align-items: center; font-weight: 500; }
.top-link:hover { background: rgba(255, 255, 255, .08); color: var(--white); }
.top-link[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--teal-soft); border-radius: 0; }
.menu-toggle { display: none; font: inherit; font-weight: 600; color: var(--white); background: transparent; border: 1.5px solid #8A98A8; border-radius: var(--radius-sm); min-height: 44px; padding: 0 var(--s4); cursor: pointer; }
.menu-toggle:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 1179px) {
  .menu-toggle { display: inline-flex; align-items: center; order: 3; }
  .svc-status { order: 2; }
  .top-nav { order: 4; width: 100%; display: none; flex-direction: column; padding: var(--s2) 0 var(--s3); border-top: 1px solid rgba(255, 255, 255, .14); }
  body.menu-open .top-nav { display: flex; }
  .top-link { width: 100%; }
  .top-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--teal-soft); padding-left: var(--s4); }
}
.lbl-short { display: none; }
.route-code { white-space: nowrap; }
.nav-svc { display: none; margin: var(--s2) 0 0; padding: var(--s3) var(--s4) 0; border-top: 1px solid rgba(255, 255, 255, .14); color: #C9D3DE; font-size: .9375rem; }
@media (max-width: 479px) { body.menu-open .nav-svc { display: block; } }
.svc-status { display: flex; align-items: center; gap: var(--s2); font-size: .9375rem; color: #E8EDF3; min-height: 44px; }
.svc-dot { width: 10px; height: 10px; border-radius: 50%; background: #9AA6B2; flex: none; }
.svc-ready { background: #5CC8A6; }
.svc-unavailable { background: transparent; border: 2px solid #F2B8B5; }
.svc-ver { color: #C4CDD8; }
.btn-on-dark { background: transparent; color: var(--white); border: 1.5px solid #C4CDD8; border-radius: var(--radius-sm); min-height: 44px; padding: 0 var(--s4); font: inherit; font-weight: 600; cursor: pointer; }
.btn-on-dark:hover { background: rgba(255, 255, 255, .1); }

/* ---------- case strip & steps ---------- */
.case-strip { background: var(--white); border-bottom: 1px solid var(--line); }
.strip-inner { max-width: 1280px; margin: 0 auto; padding: var(--s3) var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; font-size: .9375rem; }
.strip-item { display: inline-flex; gap: var(--s2); align-items: center; }
.strip-k { color: var(--slate); }
.strip-case { font-weight: 650; }
.strip-demo { max-width: 1280px; margin: 0 auto; padding: var(--s2) var(--s4) var(--s3); color: var(--warning); font-size: .9375rem; }
.step-nav { max-width: 1280px; margin: 0 auto; padding: var(--s4) var(--s4) 0; }
.step-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-items: center; }
.step-help { justify-self: end; font-size: var(--fs-sm); font-weight: 600; color: var(--teal-hover); min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s1); }
@media (min-width: 1100px) { .step-nav-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s4); } }
@media (max-width: 1099px) { .step-help { display: none; } .strip-demo-more { display: none; } }  /* the guide stays in the header menu */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.step-link { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s2) var(--s3); border-radius: var(--radius); background: transparent; border: 1px solid var(--line); color: var(--navy); text-decoration: none; transition: background var(--t), border-color var(--t); }
.step-link:hover { background: var(--white); color: var(--navy); }
.step-num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--control); display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: .9375rem; flex: none; font-variant-numeric: tabular-nums; }
.step-label { font-weight: 600; }
.step-state { margin-left: auto; font-size: .8125rem; color: var(--slate); }
.step-link[aria-current="step"] { background: var(--white); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.step-link[aria-current="step"] .step-num { background: var(--teal); border-color: var(--teal); color: var(--white); }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- layout ---------- */
.layout { max-width: 1280px; margin: 0 auto; padding: var(--s4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.main { min-width: 0; }
.main:focus { outline: none; }
.context { min-width: 0; order: -1; }
@media (min-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; padding: var(--s5) var(--s4) var(--s7); }
  .context { order: 0; position: sticky; top: var(--s4); align-self: start; max-height: calc(100vh - 32px); overflow: auto; }
  .ctx-summary { display: none; }
  .layout.no-context { grid-template-columns: minmax(0, 1fr); }
}
.layout.no-context .main { max-width: 1120px; }
.app-footer { max-width: 1280px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); color: var(--slate); font-size: .875rem; border-top: 1px solid var(--line); }
.app-footer p { margin: 0 0 var(--s2); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-hover); font-weight: 600; }

/* ---------- cards ---------- */
.step-intro { margin: var(--s2) 0 var(--s5); max-width: 68ch; }
.step-intro h1, .step-intro h2 { margin-bottom: var(--s2); }
.step-intro p { color: var(--slate); font-size: 1.0625rem; }
.step-intro .step-intro-link { font-size: var(--fs-sm); margin: 0; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: var(--s4); margin-bottom: var(--s4); }
@media (min-width: 600px) { .card { padding: var(--s5); } }
.card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.card-head h2, .card-head h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; }
.card-intro { color: var(--slate); max-width: 72ch; }
.group-head { margin: var(--s6) 0 var(--s3); }
.group-head h2, .group-head h3 { margin-bottom: var(--s1); font-size: var(--fs-lg); }
.details-card > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-height: 44px; }
.details-card > summary::-webkit-details-marker { display: none; }
.details-card > summary::before { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); transition: transform var(--t); margin-right: var(--s1); }
.details-card[open] > summary::before { transform: rotate(45deg); }
.summary-title { font-weight: 650; font-size: 1.125rem; }
.count { color: var(--slate); font-size: .9375rem; }

/* ---------- tags ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; line-height: 1.2; border-radius: 999px; padding: 3px 10px; white-space: nowrap; border: 1px solid transparent; }
.tag-req { background: var(--white); color: var(--navy); border: 1.5px solid var(--navy); }
.tag-cond { background: var(--teal-tint); color: var(--teal-hover); border-color: var(--teal); }
.tag-opt { color: var(--slate); border-color: var(--line); background: var(--white); }
.tag-ok { background: var(--success-bg); color: var(--success); border-color: #B9DCCB; }
.tag-warn { background: var(--warning-bg); color: var(--warning); border-color: #EAD3A2; }
.tag-err { background: var(--error-bg); color: var(--error); border-color: #EFC2C5; }
.tag-muted { background: #F1EFEA; color: var(--slate); }
.tag-demo { background: var(--warning-bg); color: var(--warning); border-color: #EAD3A2; }
.tag-fixed { background: #F1EFEA; color: var(--slate); }
.inline-tag { white-space: normal; }
.field-id { font-family: var(--font); letter-spacing: .02em; font-size: .8125rem; font-weight: 600; color: var(--slate); }  /* sans keeps the letter O distinct from zero in output IDs such as O01 */
.qnum { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 var(--s2); border-radius: 8px; background: var(--navy); color: var(--white); font-size: .875rem; font-weight: 700; vertical-align: middle; }

/* ---------- form controls ---------- */
.field-stack { display: grid; gap: var(--s4); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.span-2 { grid-column: 1 / -1; }
@media (min-width: 900px) { .grid-3 > .span-2 { grid-column: span 2; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s2); font-weight: 600; color: var(--navy); line-height: 1.35; }
.field-hint { margin-top: 2px; }
.opt-mark { color: var(--slate); font-weight: 400; }
.tag-sm { font-size: .75rem; padding: 2px 8px; }
.field-label-text { overflow-wrap: anywhere; }
.mini-label { display: block; font-size: .9375rem; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.hint { color: var(--slate); font-size: .9375rem; margin: 0; }
.hint-inline { color: var(--slate); font-weight: 400; }
.hint-lock { color: var(--warning); }
.hint-units { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.input { font: inherit; font-size: 1rem; color: var(--navy); background: var(--white); border: 1px solid var(--control); border-radius: var(--radius-sm); min-height: 44px; padding: 9px var(--s3); width: 100%; transition: border-color var(--t), box-shadow var(--t); }
.input:hover { border-color: var(--navy); }
.input:focus-visible { outline: 3px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.input[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }
textarea.input { min-height: 72px; resize: vertical; line-height: 1.45; }
.input-num { font-variant-numeric: tabular-nums; }
.input-readonly { background: #F3F1EC; }
.select { appearance: none; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; height: 44px; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 8 5 5 5-5' fill='none' stroke='%2312233A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; accent-color: var(--teal); margin: 0; flex: none; }
.field-error { color: var(--error); font-weight: 600; font-size: .9375rem; margin: 0; }
.field-error::before { content: "Error: "; }
.const-value { margin: 0; padding: 10px var(--s3); background: #F6F4EF; border: 1px dashed var(--line); border-radius: var(--radius-sm); }
.field-const { gap: 6px; }
.req-dot { color: var(--error); }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 650; padding: 0; margin-bottom: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.subgroup { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); margin: var(--s3) 0 0; background: #FCFBF8; }
.subgroup > legend { float: left; width: 100%; margin-bottom: var(--s3); }
.subgroup > legend + * { clear: both; }
.coverage { background: var(--white); }

/* quantity */
.qty { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); background: var(--white); display: grid; gap: var(--s2); }
.qty-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2); }
.qty-row { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .qty-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.qty-cell { min-width: 0; }
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); border-top: 1px solid var(--line-soft); padding-top: var(--s2); margin-top: var(--s1); }
.ev-summary { margin: 0; font-size: .9375rem; color: var(--navy); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ev-label { color: var(--slate); }
.ev-panel { border-top: 1px dashed var(--line); padding-top: var(--s3); display: grid; gap: var(--s3); }
.unc { margin-top: var(--s2); }
.copy-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); align-items: center; }
.copy-row .btn { justify-self: start; }
@media (min-width: 560px) { .copy-row { grid-template-columns: minmax(0, 1fr) auto; } }
.copy-row .hint { grid-column: 1 / -1; }
.qty-actions { display: flex; justify-content: flex-end; margin-top: -6px; }

/* alternatives */
.alt-block { border-top: 1px solid var(--line-soft); padding-top: var(--s4); margin-top: var(--s4); display: grid; gap: var(--s3); }
.alt-choice { display: grid; gap: var(--s2); }
.radio-row, .check-row { display: flex; gap: var(--s3); align-items: flex-start; min-height: 44px; padding: var(--s2) 0; }
.radio-row label, .check-row label { cursor: pointer; padding-top: 1px; }
.alt-body { display: grid; gap: var(--s3); }
.check-title { font-weight: 600; display: block; }
.check-hint { display: block; color: var(--slate); font-size: .9375rem; }
.outputs-groups { display: grid; gap: var(--s4); margin-bottom: var(--s4); }
@media (min-width: 900px) {
  /* Two balanced columns that keep reading order Q1 → Q4 and avoid tall empty boxes. */
  .outputs-groups { display: block; columns: 2; column-gap: var(--s4); }
  .outputs-groups > .out-group { break-inside: avoid; margin: 0 0 var(--s4); display: block; width: 100%; }
}
.out-group { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.out-group > legend { float: left; width: 100%; font-weight: 600; }
.out-group > legend + * { clear: both; }

/* route */
.route-list { display: grid; gap: var(--s3); margin: var(--s3) 0 var(--s4); }
.route-option { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--white); }
.route-option.is-selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.route-radio { display: flex; gap: var(--s3); align-items: flex-start; min-height: 44px; }
.route-radio label { display: flex; flex-direction: column; cursor: pointer; }
.route-name { font-weight: 650; }
.route-id, .route-sub { font-size: var(--fs-sm); color: var(--slate); }
details.route-more { margin: var(--s1) 0 0 34px; border-top: 0; padding-top: 0; }
details.route-more > summary { min-height: 44px; font-size: var(--fs-sm); }
.route-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s3); margin: var(--s1) 0 var(--s2); font-size: .9375rem; }
.route-facts dt { color: var(--slate); }
.route-facts dd { margin: 0 0 var(--s2); }
@media (min-width: 640px) { .route-facts { grid-template-columns: 160px minmax(0, 1fr); } .route-facts dd { margin: 0; } }

/* modes */
.mode-grid { display: grid; gap: var(--s3); }
@media (min-width: 900px) { .mode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mode-option { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.mode-option h3 { margin: 0; font-size: 1rem; }
.mode-option p { color: var(--slate); font-size: .9375rem; margin: 0; }
.mode-option .btn { margin-top: auto; align-self: flex-start; }
.current-mode { margin-bottom: var(--s3); }
.root-banner { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin-bottom: var(--s4); display: grid; gap: var(--s2); }
.root-banner-alt { border-color: var(--warning); background: var(--warning-bg); }
.member-case { background: #FCFBF8; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--s3); display: grid; gap: var(--s2); }

/* details */
details.more { border-top: 1px solid var(--line-soft); padding-top: var(--s2); }
details.more > summary, details.audit > summary, details.issues > summary, details.more-results > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--s2); font-weight: 600; color: var(--teal-hover); list-style: none; }
details.more > summary::-webkit-details-marker, details.audit > summary::-webkit-details-marker, details.issues > summary::-webkit-details-marker, details.more-results > summary::-webkit-details-marker { display: none; }
details.more > summary::before, details.audit > summary::before, details.issues > summary::before, details.more-results > summary::before { content: "+"; display: inline-flex; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid currentColor; align-items: center; justify-content: center; font-weight: 700; flex: none; }
details.more[open] > summary::before, details.audit[open] > summary::before, details.issues[open] > summary::before, details.more-results[open] > summary::before { content: "−"; }
details.more > .field-stack { margin-top: var(--s3); }
.array-items { display: grid; gap: var(--s3); margin-bottom: var(--s3); }
.array-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.array-item > summary { cursor: pointer; min-height: 48px; padding: var(--s2) var(--s4); display: flex; align-items: center; font-weight: 650; list-style: none; }
.array-item > summary::-webkit-details-marker { display: none; }
.array-item > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); margin-right: var(--s3); transition: transform var(--t); flex: none; }
.array-item[open] > summary::before { transform: rotate(45deg); }
.array-item-body { padding: 0 var(--s4) var(--s4); display: grid; gap: var(--s3); }
.remove-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.confirm-text { font-weight: 600; color: var(--error); }

/* ---------- buttons ---------- */
.btn { font: inherit; font-weight: 600; min-height: 44px; padding: 10px var(--s5); border-radius: 10px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-decoration: none; transition: background var(--t), border-color var(--t), color var(--t); line-height: 1.2; text-align: center; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-hover); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--teal-hover); border-color: var(--teal); }
.btn-secondary:hover { background: var(--teal-tint); }
.btn-danger { background: var(--error); color: var(--white); }
.btn-quiet-solid { background: #F1EFEA; color: var(--navy); }
.btn-sm { min-height: 44px; padding: 8px var(--s4); }
.btn-block { width: 100%; }
.btn[disabled] { background: #E9E6DF; color: var(--slate); border-color: #E9E6DF; cursor: not-allowed; }
.btn-link { font: inherit; background: none; border: 0; padding: 10px 2px; min-height: 44px; color: var(--teal-hover); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-weight: 600; }
.btn-link-muted { color: var(--slate); font-weight: 500; }
.btn-link-danger { color: var(--error); }
.btn-quiet { font: inherit; font-weight: 600; background: none; border: 1.5px solid var(--line); color: var(--teal-hover); border-radius: var(--radius-sm); min-height: 44px; padding: 8px var(--s4); cursor: pointer; }
.btn-quiet:hover { border-color: var(--teal); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.btn-row.tight { gap: var(--s2); }
.file-label { cursor: pointer; }
.step-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); padding: var(--s4) 0 var(--s6); }
.step-actions .btn-primary { margin-left: auto; }

/* ---------- notices & banners ---------- */
.notice, .banner { border-radius: var(--radius); padding: var(--s3) var(--s4); border: 1px solid; margin: var(--s3) 0; }
.notice p:last-child, .banner p:last-child { margin-bottom: 0; }
.notice-info, .banner-info { background: var(--info-bg); border-color: #C6D6E8; color: var(--navy); }
.notice-warn, .banner-warn { background: var(--warning-bg); border-color: #EAD3A2; color: var(--navy); }
.notice-error, .banner-error { background: var(--error-bg); border-color: #EFC2C5; color: var(--navy); }
.banner-demo { background: var(--warning-bg); border-color: #EAD3A2; border-left: 5px solid var(--warning); }
.banner-fixture { background: var(--info-bg); border-color: #C6D6E8; border-left: 5px solid var(--info); }
.banner-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: var(--s2); }
.banner-warn .banner-title, .banner-demo .banner-title { color: var(--warning); }
.banner-error .banner-title, .notice-error .banner-title { color: var(--error); }
.banner-info .banner-title { color: var(--info); }
.fresh-line { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; color: var(--slate); font-size: .9375rem; }
.status-stack { display: grid; gap: 0; }
.error-summary { border: 2px solid var(--error); background: var(--white); border-radius: var(--radius); padding: var(--s4) var(--s5); margin-bottom: var(--s5); }
.error-summary h2 { font-size: 1.25rem; color: var(--error); }
.error-summary ul { margin: 0 0 var(--s2); padding-left: var(--s5); }
.error-summary li { margin-bottom: var(--s1); }
.error-summary a { color: var(--error); font-weight: 600; }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #C6D6E8; border-top-color: var(--info); animation: spin 900ms linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- context panel ---------- */
.ctx-details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.ctx-summary { cursor: pointer; min-height: 48px; padding: var(--s3) var(--s4); font-weight: 650; display: flex; align-items: center; list-style: none; }
.ctx-summary::-webkit-details-marker { display: none; }
.ctx-summary::after { content: "+"; margin-left: auto; font-weight: 700; }
.ctx-details[open] .ctx-summary::after { content: "−"; }
.ctx-body { padding: var(--s4); display: grid; gap: var(--s2); }
.ctx-title { font-size: 1rem; text-transform: none; margin: var(--s3) 0 0; color: var(--slate); font-weight: 650; }
.ctx-title:first-child { margin-top: 0; }
.ctx-msg { margin: 0; }
.ready-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ready-list li { display: flex; gap: var(--s2); align-items: flex-start; }
.ready-icon { flex: none; width: 18px; color: var(--success); font-size: 1rem; line-height: 1.5; }
.is-missing .ready-icon { color: var(--warning); }
.ready-title { display: block; font-weight: 600; font-size: .9375rem; }
.ready-sub { display: block; color: var(--slate); font-size: .9375rem; }
.is-missing .ready-sub { color: var(--warning); }
.issue-list { margin: var(--s2) 0 0; padding-left: var(--s4); font-size: .9375rem; display: grid; gap: var(--s1); max-height: 40vh; overflow: auto; }
.ok-line { margin: var(--s2) 0 0; }
.precheck .readiness { display: grid; gap: var(--s2); }

/* ---------- results ---------- */
.results-body.is-historical .headline, .results-body.is-historical .result-section { opacity: 1; border-style: dashed; }
.headline { border-top: 4px solid var(--navy); }
.headline-grid { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .headline-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.hl-kicker { color: var(--slate); font-weight: 600; font-size: .9375rem; margin-bottom: var(--s1); }
.hl-conclusion { font-size: 1.5rem; font-weight: 700; line-height: 1.2; margin-bottom: var(--s2); }
.hl-muted { color: var(--slate); }
.hl-value { font-size: 2rem; font-weight: 700; line-height: 1.1; margin-bottom: var(--s1); font-variant-numeric: tabular-nums; }
.hl-unit { font-size: 1.125rem; font-weight: 600; color: var(--slate); margin-left: 6px; }
.hl-meta { color: var(--navy); margin-bottom: var(--s1); font-size: .9375rem; }
.hl-reason { color: var(--warning); font-size: .9375rem; }
.hl-classification { color: var(--slate); font-size: .9375rem; }
.result-section { scroll-margin-top: 16px; }
.result-sub { border-top: 1px solid var(--line-soft); padding-top: var(--s4); margin-top: var(--s4); }
.result-sub:first-of-type { border-top: 0; padding-top: 0; }
.result-sub > h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); font-size: 1.125rem; }
.decision-head { margin-bottom: var(--s2); }
.decision-conclusion { font-size: 1.375rem; font-weight: 700; margin-bottom: var(--s1); }
.interp { color: var(--slate); font-size: .9375rem; font-style: italic; max-width: 80ch; }
.plain-list { margin: 0 0 var(--s2); padding-left: var(--s5); }
.plain-list li { margin-bottom: 4px; }
.plain-list.small { font-size: .9375rem; color: var(--slate); }
.plain-list.notes { color: var(--slate); font-size: .9375rem; }
.scroll-list { max-height: 260px; overflow: auto; }
.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s4); margin: 0 0 var(--s3); }
.kv dt { color: var(--slate); font-size: .9375rem; }
.kv dd { margin: 0 0 var(--s2); }
.kv-note { display: block; color: var(--slate); font-size: .875rem; }
@media (min-width: 640px) { .kv { grid-template-columns: minmax(180px, 34%) minmax(0, 1fr); } .kv dd { margin: 0; } .kv dt, .kv dd { padding: 6px 0; border-bottom: 1px solid var(--line-soft); } }
.money { font-variant-numeric: tabular-nums; white-space: normal; }
.cur-tag { display: inline-block; margin-left: 6px; font-size: .75rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.cur-conv { background: var(--info-bg); color: var(--info); }
.cur-native { background: var(--warning-bg); color: var(--warning); }
.cur-bar { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s3) 0 var(--s4); display: grid; gap: var(--s2); }
.cur-bar-none { background: transparent; border-style: dashed; }
.cur-bar-none p { margin: 0; }
.cur-compact { margin: 0; font-size: .9375rem; }
.seg-group { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.seg-group > legend { float: left; margin: 0 var(--s2) 0 0; font-weight: 600; }
.seg { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--control); border-radius: 999px; padding: 0 var(--s4) 0 var(--s3); min-height: 44px; }
.seg label { cursor: pointer; }
.empty-card h3 { margin-bottom: var(--s2); }
.residual-line { margin-top: var(--s2); }

/* charts */
.chart { margin: var(--s4) 0; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); background: var(--white); }
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
.chart-head figcaption { display: flex; flex-direction: column; }
.chart-title { font-weight: 650; }
.chart-caption { color: var(--slate); font-size: .9375rem; }
.chart-body { width: 100%; }
.svg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.svg-chart text { font-family: var(--font); }
.bar-label { font-size: 15px; fill: var(--navy); font-weight: 500; }
.bar-label, .bar-value, .tick-label { paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }  /* halo keeps text legible over axis lines */
.bar-value, .tick-label { font-size: 14px; fill: var(--navy); font-variant-numeric: tabular-nums; }
.bar-missing { fill: var(--slate); font-style: italic; }
.axis-label { font-size: 13px; fill: var(--slate); }
.axis-zero { stroke: var(--slate); stroke-width: 1.5; }
.axis-target { stroke: var(--navy); stroke-width: 2; stroke-dasharray: 5 4; }
.axis-central { stroke: var(--slate); stroke-width: 1.25; stroke-dasharray: 2 3; }
.bar-solid { fill: var(--slate); }
.bar-input { fill: var(--navy); }
.bar-product { fill: var(--teal); }
.bar-stock { stroke: var(--slate); stroke-width: 1; }
.bar-assumed { stroke: var(--teal); stroke-width: 1; }
.bar-sens { fill: var(--slate); }
.bar-crossing { fill: var(--warning); }
.pat-assumed-bg { fill: #DCEDEA; }
.pat-assumed-line { stroke: var(--teal); stroke-width: 2.4; }
.pat-stock-bg { fill: #ECEFF2; }
.pat-stock-line { stroke: var(--slate); stroke-width: 2.4; }
.whisker { stroke: var(--navy); stroke-width: 1.5; }
.interval { fill: var(--navy); }
.interval-meets { fill: var(--success); }
.interval-fails { fill: var(--error); }
.interval-cross { fill: var(--warning); }
.central-dot { fill: var(--white); stroke: var(--navy); stroke-width: 2.5; }
.chart-notes { font-size: .9375rem; color: var(--navy); margin-top: var(--s2); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; color: var(--navy); font-size: .9375rem; }
.lg { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.lg-input { background: var(--navy); }
.lg-product { background: var(--teal); }
.lg-solid { background: var(--slate); }
.lg-stock { background: repeating-linear-gradient(135deg, var(--slate) 0 2px, #ECEFF2 2px 5px); border: 1px solid var(--slate); }

/* tables */
.table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: var(--s2) 0 var(--s3); background: var(--white); }
.table-wrap:focus-visible { outline: 3px solid var(--teal); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table caption { text-align: left; padding: var(--s2) var(--s3); font-weight: 600; }
.data-table th, .data-table td { text-align: left; padding: 10px var(--s3); border-bottom: 1px solid var(--line-soft); vertical-align: top; min-width: 7ch; }
.data-table thead th { background: #F5F2EB; font-weight: 650; color: var(--navy); }  /* headers wrap between words so wide tables fit before scrolling */
.data-table tbody th { font-weight: 600; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }  /* tabular figures only in number columns: some fonts widen hyphens in text under tnum */
.data-table.compact th, .data-table.compact td { padding: 6px var(--s2); }
.audit-pre { max-height: 360px; overflow: auto; background: #F6F4EF; border-radius: var(--radius-sm); padding: var(--s3); font-size: .8125rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }

/* import review & dialog */
.import-review { border: 2px solid var(--teal); }
.import-review:focus { outline: none; }
.dialog { border: 0; border-radius: var(--radius-lg); padding: 0; max-width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(18, 35, 58, .3); color: var(--navy); }
.dialog::backdrop { background: rgba(18, 35, 58, .45); }
.dialog-body { padding: var(--s5); }
.dialog-body h2 { font-size: 1.25rem; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .spinner { border-top-color: #C6D6E8; }
}
@media (forced-colors: active) {
  .tag, .btn, .step-link, .seg { border: 1px solid CanvasText; }
  .bar, .interval { forced-color-adjust: none; }
  .bar-label, .bar-value, .tick-label { stroke: Canvas; fill: CanvasText; }
}
@media print {
  .app-header, .step-nav, .context, .btn, .btn-link, .table-toggle { display: none !important; }
  .table-wrap[hidden] { display: block !important; }
  body { background: #fff; }
}

/* ---------- result folds ---------- */
.result-fold { border-top: 1px solid var(--line-soft); }
.result-fold:first-of-type { border-top: 0; }
.result-fold > summary { cursor: pointer; list-style: none; min-height: 52px; padding: var(--s3) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.result-fold > summary::-webkit-details-marker { display: none; }
.result-fold > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); transition: transform var(--t); flex: none; margin-right: 2px; }
.result-fold[open] > summary::before { transform: rotate(45deg); }
.fold-title { font-weight: 650; font-size: 1.0625rem; }
.fold-key { color: var(--slate); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.fold-body { padding: 0 0 var(--s4); }
.data-table th, .data-table td { overflow-wrap: normal; word-break: normal; }
.data-table td { overflow-wrap: break-word; }  /* no mid-word breaks; wide tables scroll inside their region */
.data-table .audit-cell { font-family: var(--mono); font-size: .8125rem; overflow-wrap: anywhere; min-width: 10ch; max-width: 22ch; color: var(--slate); }

/* ---------- narrow-screen refinements ---------- */
.step-label, .step-state, .top-link, .btn, .tag, legend, .fold-title, .chart-title { overflow-wrap: normal; word-break: normal; }
@media (max-width: 479px) {
  .brand-sub { display: none; }
  .header-inner { gap: var(--s2) var(--s3); padding-top: var(--s2); padding-bottom: var(--s2); }
  .svc-status { font-size: .875rem; }
  .svc-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* dot + Retry stay visible; text stays readable by screen readers */
  .step-state { display: none; }
  .strip-inner { gap: var(--s1) var(--s4); }
  .strip-demo { font-size: .9375rem; }
}
@media (max-width: 399px) {
  .step-num { display: none; }
  .step-link { justify-content: center; text-align: center; padding: var(--s2); }
}
.hl-conclusion, .decision-conclusion { overflow-wrap: normal; word-break: normal; }
@media (max-width: 479px) {
  .card { padding: var(--s3); }
  .subgroup { padding: var(--s2) var(--s3) var(--s3); }
  .array-item > summary { padding: var(--s2) var(--s3); }
  .array-item-body { padding: 0 var(--s2) var(--s3); }
  .qty { padding: var(--s3); }
  .hl-conclusion { font-size: 1.375rem; }
}

/* Integration v1.1: compact mobile context; essential verdict and warnings stay visible. */
@media (max-width: 720px) {
  .strip-revision, .svc-ver { display: none; }
  .strip-demo { margin-block: 8px; }
  .fresh-line { margin-block: 10px; }
  .step-intro { margin-bottom: 16px; }
}


/* =====================================================================
   v1.2 (IF-D011) — home, guide, Setup goals, status panel, motion
   ===================================================================== */

/* ---------- page areas ---------- */
body[data-view="home"] .layout, body[data-view="home"] .layout.no-context { max-width: none; padding: 0; display: block; }
body[data-view="home"] .layout.no-context .main, body[data-view="home"] .main { max-width: none; }
[data-view="guide"] .layout.no-context .main { max-width: 880px; }
@media (min-width: 1100px) { [data-area="lab"] .layout:not(.no-context) .main { max-width: 900px; } }
.view-enter { animation: view-in 240ms cubic-bezier(.2, .7, .2, 1); }
@keyframes view-in { from { transform: translateY(6px); } to { transform: none; } }

.btn-lg { min-height: 52px; padding: 14px 26px; font-size: 1.0625rem; border-radius: 12px; }

/* ---------- home ---------- */
.home-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4); }
@media (max-width: 479px) { .home-wrap { padding: 0 var(--s4); } }
.home-hero { padding: clamp(40px, 7vw, 96px) 0 var(--s5); }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }
.hero-title { font-size: clamp(2.375rem, 1.35rem + 3.3vw, 4.125rem); line-height: 1.03; letter-spacing: -0.034em; font-weight: 700; max-width: 13ch; margin-bottom: var(--s5); }
.hero-lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.6; color: #3F5164; max-width: 34em; margin-bottom: var(--s5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero-note { margin: var(--s4) 0 0; color: var(--slate); font-size: var(--fs-sm); max-width: 34em; }
.hero-figure { margin: 0; }
.hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; border-radius: 20px; background: #DCE2E6; box-shadow: 0 1px 2px rgba(18, 35, 58, .08), 0 18px 48px rgba(18, 35, 58, .12); }
.hero-figure figcaption { margin-top: var(--s3); color: var(--slate); font-size: var(--fs-xs); line-height: 1.45; max-width: 60ch; }
.scroll-cue { display: inline-flex; align-items: center; gap: var(--s3); margin-top: clamp(28px, 5vw, 56px); min-height: 44px; color: var(--navy); font-weight: 600; text-decoration: none; }
.scroll-cue:hover { color: var(--teal-hover); text-decoration: underline; }
.scroll-cue-line { width: 2px; height: 28px; background: var(--gold); border-radius: 2px; }

.home-section { padding: clamp(56px, 8vw, 104px) 0; }
.home-section h2 { font-size: clamp(1.75rem, 1.25rem + 1.6vw, 2.625rem); line-height: 1.12; letter-spacing: -0.026em; font-weight: 700; max-width: 22ch; margin-bottom: var(--s5); }
.home-section h3 { font-size: 1.1875rem; letter-spacing: -0.01em; }
.section-lead { color: #3F5164; font-size: var(--fs-md); max-width: 60ch; }
.home-why { background: var(--white); border-top: 1px solid var(--line); }
.why-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .why-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; } }
.why-copy p { font-size: var(--fs-md); line-height: 1.65; color: #33465C; max-width: 36em; }
.why-questions { align-self: end; }
.why-questions h3 { color: var(--slate); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--s2); }
.question-list { list-style: none; margin: 0; padding: 0; }
.question-list li { padding: var(--s3) 0; border-top: 1px solid var(--line); font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.question-list li:last-child { border-bottom: 1px solid var(--line); }

/* lithium path schematic */
.li-explanation { margin-top: var(--s6); border-top: 1px solid var(--line); padding-top: var(--s6); }
.li-explanation > p { max-width: 82ch; color: var(--slate); }
.li-path-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); }
.li-path-hint { margin: 0; font-size: var(--fs-sm); color: var(--slate); }
.li-path-toolbar .btn { min-height: 44px; }
.li-path { margin: clamp(40px, 6vw, 72px) 0 0; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 40px); }
.li-path figcaption { margin-top: var(--s4); color: var(--slate); font-size: var(--fs-sm); max-width: 80ch; }
.li-path-svg { display: none; width: 100%; height: auto; overflow: visible; }
.li-path-svg text { font-family: var(--font); }
.li-main { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.li-node circle { fill: var(--white); stroke: var(--teal); stroke-width: 3; }
.li-node-end circle { fill: var(--teal); }
.li-node { cursor: pointer; outline: none; }
.li-node .li-node-hit { fill: transparent; stroke: none; pointer-events: all; }
.li-node .li-node-halo { fill: #e1f1ed; stroke: transparent; opacity: 0; pointer-events: none; }
.li-node-core { transform-box: fill-box; transform-origin: center; transition: transform 220ms var(--ease); pointer-events: none; }
.li-node:is(:hover, :focus-visible, .is-active) .li-node-core { transform: scale(1.45); }
.li-node:is(:hover, :focus-visible, .is-active) .li-node-halo { opacity: 1; }
.li-node:focus-visible .li-node-halo { stroke: var(--navy); stroke-width: 2; }
.li-flow-dot { fill: var(--white); stroke: var(--teal); stroke-width: 2; pointer-events: none; visibility: hidden; animation: li-flow 6.5s linear infinite paused; }
.is-flowing .li-flow-dot, .is-flowing .li-flow-mobile { animation-play-state: running; visibility: visible; }
@keyframes li-flow { from { transform: translateX(0); } to { transform: translateX(820px); } }
.li-node-label { font-size: 15px; font-weight: 650; fill: var(--navy); }
.li-branch-line { fill: none; stroke: var(--slate); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; }
.li-branch path:last-of-type { stroke-dasharray: none; }
.li-branch-label { font-size: 14px; fill: var(--slate); }
.li-bracket path { fill: none; stroke: var(--navy); stroke-width: 1.4; }
.li-bracket text { font-size: 14px; font-weight: 650; fill: var(--navy); }
.li-bracket-leach path { stroke: var(--slate); }
.li-bracket-leach text { fill: var(--slate); }
.li-path-scale { display: grid; gap: var(--s1); margin-bottom: var(--s4); }
.li-scale-line { margin: 0; font-size: var(--fs-sm); color: var(--navy); }
.li-path-list { list-style: none; margin: 0; padding: 0 0 0 var(--s5); position: relative; display: grid; gap: var(--s2); }
.li-path-list::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 3px; background: var(--teal); border-radius: 2px; }
.li-step { position: relative; display: grid; gap: 0; padding: 2px 0; }
.li-step::before { content: ""; position: absolute; left: calc(-1 * var(--s5) + 1px); top: 5px; width: 15px; height: 15px; border-radius: 50%; background: var(--white); border: 3px solid var(--teal); box-sizing: border-box; }
.li-step-end::before { background: var(--teal); }
.li-step-name { font-weight: 650; }
.li-step-sub { color: var(--slate); font-size: var(--fs-sm); }
.li-mobile-path { position: relative; }
.li-stage-button { font: inherit; text-align: left; color: var(--navy); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 12px; display: grid; gap: 2px; min-height: 48px; width: 100%; cursor: pointer; }
.li-stage-button:is(:hover, :focus-visible, .is-active) { background: #eaf5f1; border-color: var(--teal); }
.li-stage-button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.li-step::before { top: 17px; transform-origin: center; transition: transform 220ms var(--ease); }
.li-step.is-active::before { transform: scale(1.4); }
.li-flow-mobile { position: absolute; top: 10px; left: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 2px solid var(--teal); pointer-events: none; visibility: hidden; animation: li-flow-vertical 6.5s linear infinite paused; }
@keyframes li-flow-vertical { from { transform: translateY(0); } to { transform: translateY(var(--li-travel, 350px)); } }
.li-stage-detail { margin-top: var(--s4); padding: var(--s4); background: #eaf5f1; border-left: 3px solid var(--teal); border-radius: 0 12px 12px 0; }
.li-stage-detail h4 { margin: 0 0 var(--s2); font-size: var(--fs-md); }
.li-stage-detail p { margin: 0; color: var(--navy); max-width: 80ch; }
.li-out { position: relative; margin-left: var(--s5); color: var(--slate); font-size: var(--fs-sm); padding-left: var(--s4); }
.li-out::before { content: ""; position: absolute; left: calc(-1 * var(--s5) - var(--s5) + 9px); top: 50%; width: calc(var(--s5) + var(--s4) - 4px); border-top: 1.6px dashed var(--slate); }
@media (min-width: 760px) {
  .li-path-svg { display: block; }
  .li-mobile-path { display: none; }
  .li-path-scale { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.home-audience { background: var(--ivory); }
.audience-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); } }
.audience-item { border-top: 2px solid var(--navy); padding-top: var(--s4); }
.audience-item p { color: #3F5164; margin: 0; }

.home-capabilities { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cap-grid { display: grid; gap: var(--s6); grid-template-columns: minmax(0, 1fr); margin-top: var(--s5); }
@media (min-width: 900px) { .cap-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; } }
.cap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.cap-list li { position: relative; padding-left: 28px; line-height: 1.5; }
.cap-yes li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2.5px solid var(--teal); border-bottom: 2.5px solid var(--teal); transform: rotate(-45deg); }
.cap-no li { color: #3F5164; }
.cap-no li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 12px; border-top: 2.5px solid var(--slate); }

.home-aim { background: var(--navy); color: var(--white); }
.aim-wrap { display: grid; gap: var(--s4); }
.home-section .aim-label { color: #C9D2DD; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; margin: 0; padding-left: var(--s3); border-left: 2px solid var(--gold); }
.aim-statement { color: var(--white); font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.375rem); line-height: 1.28; letter-spacing: -0.018em; font-weight: 600; max-width: 30ch; margin: 0; }
.home-cta { background: var(--ivory); }
.cta-wrap { display: grid; gap: var(--s5); align-items: center; }
.cta-wrap h2 { margin-bottom: var(--s3); }
.cta-wrap p { color: #3F5164; max-width: 52ch; margin: 0; }
@media (min-width: 900px) { .cta-wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.home-credits { padding: var(--s4) 0 var(--s6); }
.home-credits p { color: var(--slate); font-size: var(--fs-xs); max-width: 90ch; margin: 0; }

/* ---------- guide ---------- */
.guide-head { margin: var(--s4) 0 var(--s6); }
.guide-head h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); letter-spacing: -0.028em; }
.guide-steps { list-style: none; margin: 0 0 var(--s7); padding: 0; display: grid; gap: 0; }
.guide-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); position: relative; padding-bottom: var(--s6); }
.guide-step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px; background: var(--line); }
.guide-num { width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.guide-body h2 { font-size: var(--fs-lg); margin: 8px 0 var(--s2); }
.guide-body p { max-width: 62ch; }
.guide-need-h { font-weight: 600; font-size: var(--fs-sm); color: var(--slate); margin: var(--s3) 0 var(--s1); }
.guide-need { margin: 0; padding-left: var(--s5); color: #33465C; }
.guide-need li { margin-bottom: 2px; }
.guide-terms, .guide-prepare { margin-bottom: var(--s7); }
.guide-terms h2, .guide-prepare h2 { font-size: var(--fs-xl); }
.terms { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.terms dt { font-weight: 650; padding: var(--s4) 0 var(--s1); }
.terms dd { margin: 0; padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); color: #33465C; }
@media (min-width: 760px) {
  .terms { grid-template-columns: 244px minmax(0, 1fr); column-gap: 0; }
  .terms dt { padding: var(--s4) var(--s5) var(--s4) 0; border-bottom: 1px solid var(--line); }
  .terms dd { padding: var(--s4) 0; }
}
.prepare-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--s4); }
@media (min-width: 760px) { .prepare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prepare-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
.prepare-col h3 { font-size: var(--fs-md); }
.prepare-col ul { margin: 0; padding-left: var(--s5); }
.prepare-col li { margin-bottom: var(--s1); }
.guide-actions { margin-bottom: var(--s7); }

/* ---------- Setup ---------- */
.card-num { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--navy); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; flex: none; align-self: center; font-variant-numeric: tabular-nums; }
.setup-card .card-head { align-items: center; }
.start-card { padding-top: var(--s4); padding-bottom: var(--s4); }
.start-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); margin-bottom: var(--s3); }
.start-head h2 { margin: 0; font-size: 1.25rem; }
.start-head .current-mode { margin: 0; font-size: var(--fs-sm); }
.start-card .mode-option { padding: var(--s3) var(--s4); gap: 6px; background: var(--panel); border-color: var(--line-soft); }
.example-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: auto; }
.example-row .select { flex: 1 1 100%; min-width: 0; }
.example-row .btn { margin-top: 0; flex: none; }
.start-card .mode-option > .hint:empty { margin-top: -6px; }
.goal-list { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin: var(--s3) 0 var(--s4); }
@media (min-width: 900px) { .goal-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.goal-option { display: flex; gap: var(--s3); align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); background: var(--white); transition: border-color var(--t), box-shadow var(--t); }
.goal-option:hover { border-color: var(--control); }
.goal-option.is-selected { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: #FBFDFC; }
.goal-option input { margin-top: 2px; }
.goal-option label { display: grid; gap: 4px; cursor: pointer; }
.goal-title { font-weight: 650; font-size: 1.0625rem; }
.goal-desc { color: #3F5164; font-size: var(--fs-sm); }
.goal-ids { color: var(--slate); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.goal-note { margin: 0 0 var(--s4); }
.goal-summary { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--s4); display: grid; gap: var(--s2) var(--s5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .goal-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .goal-summary > .hint { grid-column: 1 / -1; } .goal-summary > h3:nth-of-type(1) { grid-column: 1; grid-row: 1; } .goal-summary > .goal-selected { grid-column: 1; grid-row: 2; } .goal-summary > h3:nth-of-type(2) { grid-column: 2; grid-row: 1; } .goal-summary > .goal-needs { grid-column: 2; grid-row: 2; } }
.goal-summary h3 { font-size: var(--fs-sm); color: var(--slate); font-weight: 600; margin: 0; }
.goal-summary ul { margin: 0; padding-left: var(--s5); }
.goal-summary li { margin-bottom: 2px; }
.custom-outputs { margin-top: var(--s4); }
.custom-outputs > .hint { margin-bottom: var(--s3); }
.acc-mode { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.acc-mode > legend { font-size: 1.0625rem; float: left; width: 100%; margin-bottom: var(--s2); }
.acc-mode > legend + * { clear: both; }
.acc-mode .radio-row label { display: grid; gap: 2px; }

/* ---------- Measurements index ---------- */
.page-index { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s5); }
.page-index-k { color: var(--slate); font-size: var(--fs-sm); font-weight: 600; }
.page-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.page-index a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--navy); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.page-index a:hover { border-color: var(--teal); color: var(--teal-hover); }
@media (max-width: 719px) {
  /* One swipeable row on phones instead of five rows of chips; focus scrolls a chip into view. */
  .page-index { display: block; }
  .page-index ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: var(--s1) var(--s4) var(--s2) 0; margin-top: var(--s1); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .page-index li { flex: none; scroll-snap-align: start; }
  .page-index a { white-space: nowrap; }
}
.anchor { scroll-margin-top: 16px; }
.card, .group-head { scroll-margin-top: 16px; }

/* ---------- concise status panel ---------- */
.ctx-summary { gap: var(--s3); }
.ctx-summary-key { color: var(--slate); font-weight: 500; font-size: var(--fs-sm); min-width: 0; text-align: right; }
.ctx-summary-title { flex: none; white-space: nowrap; }
.ctx-block { display: grid; gap: var(--s2); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); }
.ctx-block:last-child { border-bottom: 0; padding-bottom: 0; }
.ctx-count { margin: 0; }
.ctx-count strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; margin-right: 4px; }
.ctx-next { margin: 0; font-size: var(--fs-sm); color: var(--warning); }
.ctx-next-k { font-weight: 650; }
.ctx-next a { color: var(--teal-hover); font-weight: 600; }
.ctx-more > summary, .ctx-issues > summary { min-height: 44px; font-size: var(--fs-sm); }
.ctx-more .ready-list { margin-top: var(--s2); }
@media (min-width: 1100px) { .ctx-summary-key { display: none; } }
@media (max-width: 1099px) { .ctx-summary { justify-content: space-between; } .ctx-summary::after { margin-left: var(--s2); } }

/* ---------- forms: bounded and aligned ---------- */
.grid-2 > .field, .grid-3 > .field, .grid-4 > .field { align-self: start; }
.precheck { border-color: #D7E6E2; }

/* vertical rhythm between rows of fields inside a card (labels never touch the previous row's hint) */
.section-card > :is(.grid-2, .grid-3, .grid-4, .field, .field-const, .qty, .obj-fields) + :is(.grid-2, .grid-3, .grid-4, .field, .field-const, .qty, .obj-fields, .subgroup, .btn-row) { margin-top: var(--s5); }
.subgroup > :is(.grid-2, .grid-3, .grid-4, .field) + :is(.grid-2, .grid-3, .grid-4, .field) { margin-top: var(--s4); }

/* compact coverage statements */
.coverage-compact { padding-top: var(--s3); padding-bottom: var(--s3); }
.coverage-compact > legend { margin-bottom: var(--s1); }
.cov-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s3); }
.cov-sum { margin: 0; display: flex; flex-wrap: wrap; gap: 4px var(--s2); align-items: center; font-size: var(--fs-sm); min-width: 0; flex: 1 1 18rem; }
.cov-src { font-weight: 600; }
.cov-note { color: var(--slate); }
.reveal-panel { margin-top: var(--s3); }

/* ---------- phone chrome: keep the header, study strip and steps short so content starts early ---------- */
@media (max-width: 719px) {
  .step-help { display: none; }  /* "How to use it" stays in the menu */
  .strip-demo-more { display: none; }
  .strip-inner { font-size: .875rem; padding-top: var(--s2); padding-bottom: var(--s2); }
  .strip-demo { padding-top: 0; padding-bottom: var(--s2); }
  .step-nav { padding-top: var(--s3); }
  .steps { gap: 6px; }
  .step-link { min-height: 44px; padding: 6px var(--s2); }
  .layout { padding-top: var(--s3); gap: var(--s3); }
  .ctx-summary { min-height: 44px; padding: var(--s2) var(--s4); }
}
@media (max-width: 479px) {
  .header-inner { flex-wrap: nowrap; gap: var(--s2); padding-left: var(--s3); padding-right: var(--s3); }
  .brand { gap: var(--s2); min-width: 0; }
  .brand-svg { width: 28px; height: 28px; }
  .brand-name { font-size: .9375rem; white-space: nowrap; }
  .menu-toggle { padding: 0 var(--s3); }
  body.menu-open .header-inner { flex-wrap: wrap; }
  .strip-inner { gap: 2px var(--s3); }
}

/* ---------- home: about the developer (user-requested addition, 2026-10-03) ---------- */
.home-about { background: var(--white); }
.about-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 900px) { .about-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.home-section .about-intro h2 { margin-bottom: var(--s4); }
.about-name { font-size: 1.375rem; font-weight: 700; color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.about-role { color: var(--slate); margin: 2px 0 var(--s4); }
.about-text { color: #33465C; max-width: 62ch; }
.about-link { margin: var(--s4) 0 0; }
.about-link a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--teal-hover); }
.about-facts { margin: 0; border-top: 1px solid var(--line); }
.about-facts dt { font-weight: 650; color: var(--navy); padding: var(--s4) 0 var(--s1); }
.about-facts dd { margin: 0; padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); color: #33465C; }
@media (min-width: 600px) {
  .about-facts { display: grid; grid-template-columns: 128px minmax(0, 1fr); }
  .about-facts dt { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); }
  .about-facts dd { padding: var(--s4) 0; }
}


/* =====================================================================
   v1.3 (IF-D012) — final polish: Home preview, answer-first results,
   plain disclosures and one restrained motion system
   ===================================================================== */

/* ---------- shared disclosure (Home, Setup, guide) ---------- */
details.disclose { border-top: 1px solid var(--line); margin-top: var(--s5); }
details.disclose > summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; gap: var(--s3); font-weight: 650; color: var(--navy); padding: var(--s2) 0; }
details.disclose > summary::-webkit-details-marker { display: none; }
details.disclose > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); transition: transform var(--t) var(--ease); flex: none; margin: 0 4px 0 2px; }
details.disclose[open] > summary::before { transform: rotate(45deg); }
details.disclose > summary:hover { color: var(--teal-hover); }
.disclose-body { padding: var(--s2) 0 var(--s4); }
details.tech { margin-top: var(--s3); }
details.tech > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--slate); }
details.tech > summary::-webkit-details-marker { display: none; }
details.tech > summary::before { content: "+"; display: inline-flex; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid currentColor; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; flex: none; }
details.tech[open] > summary::before { content: "−"; }
details.tech > summary:hover { color: var(--navy); }
details.tech .kv { font-size: var(--fs-sm); margin-top: var(--s1); }
details.tech code, .field-id-line code { overflow-wrap: anywhere; }
details.tech-inline { margin-top: 0; }
.field-id-line { font-size: var(--fs-xs); }

/* Opening a disclosure by hand: the new content settles 4 px into place (transform only; text never fades).
   motion.js adds .is-opening only for a person's click on a summary, so re-renders never replay it. */
@keyframes settle-in { from { transform: translateY(-4px); } to { transform: none; } }
details.is-opening[open] > :not(summary) { animation: settle-in var(--dur) var(--ease); }

/* ---------- buttons: tertiary text action ---------- */
.btn-text { font: inherit; font-weight: 600; background: none; border: 0; color: var(--teal-hover); min-height: 44px; padding: 10px var(--s2); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; border-radius: var(--radius-sm); }
.btn-text:hover { color: var(--navy); }
.hero-actions { align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }

/* ---------- Home hero: fixed frame, zoomable image inside ---------- */
.hero-frame { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 1672 / 941; background: #DCE2E6; box-shadow: 0 1px 2px rgba(18, 35, 58, .08), 0 18px 48px rgba(18, 35, 58, .12); contain: paint; }
.hero-frame img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; aspect-ratio: auto; transform-origin: 50% 55%; will-change: transform; }
.hero-figure .hero-frame img { background: transparent; }
.home-hero { padding-bottom: clamp(24px, 4vw, 48px); }
.hero-title { margin-bottom: var(--s4); }
.hero-lead { margin-bottom: var(--s5); max-width: 32em; }

/* ---------- Home sections ---------- */
.section-head { max-width: 62ch; margin-bottom: var(--s5); }
.section-head h2 { margin-bottom: var(--s2); }
.section-head .section-lead { margin: 0; }
.home-section { padding: clamp(48px, 7vw, 88px) 0; }
.home-preview { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.home-how { background: var(--ivory); }
.home-scope { background: var(--white); border-top: 1px solid var(--line); }
.home-scope .cap-grid { margin-top: 0; }
.home-scope .cap-col h3 { margin-bottom: var(--s3); }
.home-about { border-top: 1px solid var(--line); }

/* result preview: same component language as the Results answer card */
.preview-grid { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .preview-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s6); } }
.preview-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); display: grid; gap: var(--s3); min-width: 0; }
@media (min-width: 600px) { .preview-card { padding: var(--s5); } }
.preview-main { border-top: 3px solid var(--teal); }
.preview-side { background: var(--panel); border-top: 3px solid var(--navy); }
.preview-top { display: grid; gap: var(--s2); }
.home-section .preview-title { font-size: 1.125rem; margin: 0; letter-spacing: -0.005em; }
.preview-notice { margin: 0; justify-self: start; font-size: var(--fs-sm); font-weight: 600; color: var(--warning); background: var(--warning-bg); border: 1px solid #EAD3A2; border-radius: var(--radius-sm); padding: 4px 10px; }
.preview-kpi, .preview-verdict { display: grid; gap: 2px; }
.kpi-label { margin: 0; color: var(--slate); font-size: var(--fs-sm); font-weight: 600; }
.kpi-value { margin: 0; font-size: clamp(2.5rem, 2rem + 1.8vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--navy); }
.kpi-value-sm { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); letter-spacing: -0.02em; }
.kpi-unit { font-size: .45em; font-weight: 600; color: var(--slate); margin-left: .3em; letter-spacing: 0; }
.kpi-value-sm .kpi-unit { font-size: .55em; }
.kpi-sub { margin: 0; color: #3F5164; font-size: var(--fs-sm); }
.verdict-label { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.2; overflow-wrap: normal; }
.verdict-reason { margin: var(--s1) 0 0; font-size: var(--fs-sm); color: var(--warning); }
.preview-card .chart { margin: 0; }
.preview-numbers { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; font-size: var(--fs-sm); border-top: 1px solid var(--line-soft); }
.preview-numbers dt, .preview-numbers dd { padding: 6px 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.preview-numbers dd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; padding-left: var(--s4); }
.preview-scope { margin: 0; color: var(--slate); font-size: var(--fs-sm); }
.preview-card details.disclose { margin-top: 0; }

/* four-step guide on Home: a real sequence, so numbered */
.home-steps { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.home-steps .guide-step { padding-bottom: var(--s5); }
.home-steps .guide-body h3 { margin: 9px 0 var(--s1); font-size: 1.125rem; }
.home-steps .guide-body p { margin: 0; color: #3F5164; max-width: 46ch; }
@media (min-width: 960px) {
  .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  .home-steps .guide-step { grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding-bottom: 0; }
  .home-steps .guide-step:not(:last-child)::before { left: 56px; right: calc(-1 * var(--s5) + 8px); top: 21px; bottom: auto; width: auto; height: 2px; }
  .home-steps .guide-body h3 { margin-top: 0; }
}

/* ---------- Setup ---------- */
.card-question { font-size: 1.0625rem; font-weight: 600; color: var(--navy); margin: 0 0 var(--s1); }
.start-card .mode-option-key { background: var(--white); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.more-examples { margin-top: var(--s3); }
.start-card details.disclose { border-top-color: var(--line-soft); }
.more-examples .example-row { max-width: 560px; margin-top: var(--s2); }
.more-examples .example-row .select { flex: 1 1 260px; }
@media (min-width: 600px) { .more-examples .example-row { flex-wrap: nowrap; } }

/* ---------- Measurements: simple example banner ---------- */
.simple-banner { border: 1px solid #BFDCD6; border-left: 5px solid var(--teal); background: #F6FBFA; }
.simple-banner h2 { font-size: 1.25rem; margin-bottom: var(--s2); }
.simple-banner p { max-width: 70ch; }
.sb-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: 0; max-width: 520px; border-top: 1px solid #D4E8E3; }
.sb-list li { display: flex; justify-content: space-between; gap: var(--s4); padding: 8px 0; border-bottom: 1px solid #D4E8E3; }
.sb-v { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.simple-banner .btn-row { margin-bottom: var(--s2); }

/* ---------- Results: answer first ---------- */
.answer-card { border-top: 4px solid var(--teal); padding-top: var(--s5); }
.answer-card.answer-economic { border-top-color: var(--navy); }
.answer-kicker { margin: 0 0 var(--s1); color: var(--slate); font-weight: 600; font-size: var(--fs-sm); }
.answer-title { font-size: 1.375rem; margin: 0 0 var(--s4); max-width: 40ch; }
.answer-main { display: grid; gap: var(--s3) var(--s6); grid-template-columns: minmax(0, 1fr); align-items: start; margin-bottom: var(--s4); }
@media (min-width: 760px) { .answer-main { grid-template-columns: auto minmax(0, 1fr); } }
.answer-value { margin: 0; font-size: clamp(2.75rem, 2.1rem + 2.4vw, 4rem); font-weight: 700; line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; }
.answer-value-sm { font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; white-space: normal; }
.answer-unit { font-size: .42em; font-weight: 600; color: var(--slate); margin-left: .3em; letter-spacing: 0; }
.answer-verdict { margin: 0; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; max-width: 14ch; overflow-wrap: normal; }
.answer-muted { color: var(--slate); }
.answer-facts { display: grid; gap: var(--s2); padding-top: 4px; }
.answer-facts p { margin: 0; font-size: .96875rem; line-height: 1.5; }
.fact-k { display: block; color: var(--slate); font-size: var(--fs-xs); font-weight: 600; margin-bottom: 1px; }
.fact-note { color: var(--slate); }
.answer-conds { border-top: 1px solid var(--line-soft); padding-top: var(--s3); margin-bottom: var(--s3); }
.answer-conds-h { margin: 0 0 var(--s2); font-weight: 650; font-size: var(--fs-sm); color: var(--warning); }
.cond-list { margin: 0; padding-left: var(--s5); font-size: var(--fs-sm); color: var(--navy); display: grid; gap: 4px; max-width: 80ch; }
.answer-card .chart { margin: var(--s3) 0 var(--s2); }
.answer-alerts { margin-top: 0; }
.also-row { display: grid; gap: var(--s3); grid-template-columns: minmax(0, 1fr); margin: 0 0 var(--s4); }
@media (min-width: 760px) { .also-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.also-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.also-k { margin: 0 0 2px; color: var(--slate); font-size: var(--fs-sm); font-weight: 600; }
.also-v { margin: 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.also-sub, .also-text { margin: 0; font-size: var(--fs-sm); }
.also-next { border-color: #EAD3A2; background: #FFFCF4; }
.detail-head { font-size: var(--fs-lg); margin: var(--s6) 0 var(--s3); }
details.result-detail { padding-top: var(--s3); padding-bottom: var(--s3); }
details.result-detail > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 48px; }
details.result-detail > summary::-webkit-details-marker { display: none; }
details.result-detail > summary::before { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); transition: transform var(--t) var(--ease); flex: none; margin: 0 4px 0 2px; }
details.result-detail[open] > summary::before { transform: rotate(45deg); }
details.result-detail > summary h2 { font-size: 1.125rem; margin: 0; letter-spacing: -0.005em; flex: 1 1 auto; }
.detail-hint { color: var(--slate); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
details.result-detail[open] .detail-hint { display: none; }
.detail-body { padding-top: var(--s3); }
.results-body.is-historical .answer-card, .results-body.is-historical .result-section { border-style: dashed; }
.banner-stale .banner-title .tag { margin-right: 2px; }
.banner-pending .banner-title { color: var(--info); }
.fresh-line details.tech { flex-basis: 100%; margin-top: 0; }

/* ---------- section entry (Home only): transform only, content always readable ---------- */
/* Only the content moves, inside its own section, so a section never overlaps its neighbour. */
.will-reveal > .home-wrap { transform: translateY(14px); transition: transform var(--dur-slow) var(--ease); }
.will-reveal.is-in > .home-wrap { transform: none; }

/* ---------- hover feedback only where hover exists ---------- */
@media (hover: hover) {
  .preview-card details.disclose > summary:hover, .also-item:hover { border-color: var(--control); }
}
@media (hover: none) {
  .btn-primary:hover { background: var(--teal); }
  .btn-secondary:hover { background: var(--white); }
}

/* ---------- reduced motion: nothing moves; everything stays in place ---------- */
@media (prefers-reduced-motion: reduce) {
  .li-flow-dot, .li-flow-mobile { animation: none !important; visibility: hidden !important; }
  .li-node-core, .li-step::before { transform: none !important; transition: none !important; }
  .will-reveal > .home-wrap, .will-reveal.is-in > .home-wrap { transform: none !important; transition: none !important; }
  .hero-frame img { transform: none !important; will-change: auto; }
  details.is-opening > *, .view-enter { animation: none !important; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 479px) {
  .answer-value { font-size: 2.75rem; }
  .answer-title { font-size: 1.25rem; }
  .kpi-value { font-size: 2.5rem; }
  .hero-actions .btn-lg { width: 100%; }
  .hero-actions .btn-text { padding-left: 0; }
  .sb-list li { flex-direction: column; gap: 0; }
}
@media print {
  .will-reveal > .home-wrap { transform: none !important; }
  details.result-detail > .detail-body { display: block; }
}

/* "Other results" container matches the collapsed detail sections */
details.more-results { padding-top: var(--s3); padding-bottom: var(--s3); }
details.more-results > summary { color: var(--navy); font-size: 1.125rem; font-weight: 650; min-height: 48px; }
details.more-results > summary::before { content: ""; width: 10px; height: 10px; border: 0; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); border-radius: 0; transform: rotate(-45deg); transition: transform var(--t) var(--ease); margin: 0 4px 0 2px; }
details.more-results[open] > summary::before { content: ""; transform: rotate(45deg); }
details.more-results > .result-section { box-shadow: none; }

.lg-item { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
/* Short landscape screens (phones on their side): keep the chrome compact so the page content starts sooner.
   Touch targets stay at 44 px. */
@media (max-height: 480px) and (orientation: landscape) {
  .brand-sub { display: none; }
  .header-inner { padding-top: 4px; padding-bottom: 4px; }
  .strip-inner { padding-top: 6px; padding-bottom: 6px; font-size: .875rem; gap: 2px var(--s4); }
  .strip-revision { display: none; }
  .strip-demo { padding-top: 0; padding-bottom: 6px; }
  .step-nav { padding-top: var(--s2); }
  .layout { padding-top: var(--s2); gap: var(--s2); }
  .step-intro { margin-bottom: var(--s3); }
  .step-intro h1 { font-size: var(--fs-xl); }
}
@media (max-height: 480px) and (orientation: landscape) and (min-width: 640px) {
  /* Home on a phone held sideways: text beside the image so the purpose and the three actions fit the first screen. */
  .home-hero { padding: var(--s4) 0 var(--s4); }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .hero-title { font-size: 1.75rem; margin-bottom: var(--s2); max-width: none; }
  .hero-lead { font-size: 1rem; line-height: 1.5; margin-bottom: var(--s3); }
  .hero-actions { gap: var(--s2); }
  .hero-actions .btn-lg { min-height: 44px; padding: 10px var(--s4); font-size: 1rem; }
  .hero-note { margin-top: var(--s2); }
}

/* Phase 10: enlarged text must stay readable inside the mobile form and step bar. */
.tag { max-width: 100%; white-space: normal; overflow-wrap: normal; word-break: normal; }
.step-link, .step-label { min-width: 0; }
.step-label { overflow-wrap: normal; word-break: normal; }

/* CL-04: tablet navigation keeps whole labels; audit paths wrap at separators. */
@media (min-width: 720px) and (max-width: 1049px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.data-table .tag { max-width: none; white-space: nowrap; }
.audit-path { overflow-wrap: normal; word-break: normal; }
.results-download-jump { margin-bottom: var(--s3); }