/*
 * Harbour UI layer (2026-10-30)
 * Apple-inspired calm planning surface for 友诚国际 · 香港家庭择校规划.
 * Loaded after styles.css and workspace.css; it only restyles, never changes behaviour.
 * Sources (see design/README.md):
 *   - design/references/apple/DESIGN.md  (VoltAgent/awesome-design-md, MIT)
 *   - design/skills/emil-kowalski/*      (emilkowalski/skills, MIT)
 * Brand rule kept from DESIGN.md: one accent only — 友诚红 #c51212 stands in for Apple's Action Blue.
 */
:root{
 /* colour */
 --brand:#c51212;--brand-hover:#a50f0f;--brand-active:#8e0c0c;--brand-soft:#fdf1f1;--brand-ring:rgba(197,18,18,.28);
 --ink:#1d1d1f;--ink-2:#424245;--muted:#6e6e73;--faint:#86868b;
 --canvas:#f5f5f7;--surface:#fff;--pearl:#fafafc;--fill:#f0f0f2;--fill-strong:#e8e8ed;
 --line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.14);--control-line:#d2d2d7;
 --ok:#1f7a3a;--ok-soft:#eef7f0;--warn:#8a5a00;--warn-soft:#fdf5e6;--bad:#b42318;--bad-soft:#fdf0ee;
 /* type */
 --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
 --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;
 /* shape */
 --radius:18px;--radius-md:14px;--control-radius:11px;--radius-sm:8px;--pill:980px;
 /* depth: resting surfaces are flat; only floating layers get shadow */
 --shadow-float:0 1px 2px rgba(0,0,0,.06),0 10px 32px rgba(0,0,0,.12);
 --shadow-sheet:0 24px 80px rgba(0,0,0,.22);
 /* motion (Emil Kowalski: strong custom curves, UI under 300ms; drawer may run longer) */
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
 --dur-press:120ms;--dur-hover:160ms;--dur-pop:200ms;--dur-modal:240ms;--dur-drawer:380ms;
 --topbar-h:64px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 16px)}
body{background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;letter-spacing:0;font-feature-settings:"palt" 0}
::selection{background:rgba(197,18,18,.16)}
button,a,summary,label{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink)}
.cny-amount,.metric-number,.compact-metrics strong,.price-main strong,.money-cell strong,.cost-table,.compare-table,output{font-variant-numeric:tabular-nums}

/* ---------- chrome: utility bar + frosted top bar ---------- */
.brand-utility{height:30px;background:var(--canvas);border-bottom:0;color:var(--muted);font-size:12px;padding:0 32px}
.brand-utility a{color:var(--muted)}
.topbar{position:sticky;top:0;z-index:1200;height:var(--topbar-h);gap:28px;padding:0 32px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.brand img{width:164px}
.brand-product{font-size:15px;font-weight:600;letter-spacing:-.01em;border-left-color:var(--line-strong);padding-left:16px}
.topbar nav{gap:6px;align-items:center}
.nav-item{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:var(--pill);color:var(--ink-2);font-size:14px;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease}
.nav-item.active{color:var(--ink);background:var(--fill);font-weight:600;text-decoration:none}
.nav-item.active:after{display:none}
.top-actions{margin-left:4px}
.sidebar{top:var(--topbar-h);max-height:calc(100dvh - var(--topbar-h))}

/* ---------- buttons: pills, instant press feedback ---------- */
.btn{border-radius:var(--pill);min-height:44px;padding:10px 20px;font-size:15px;font-weight:500;letter-spacing:-.01em;gap:8px;
 transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease,border-color var(--dur-hover) ease,color var(--dur-hover) ease}
.btn-small{min-height:36px;padding:7px 16px;font-size:14px}
.btn-dark{background:var(--brand);color:#fff;border-color:transparent}
.btn-dark:active{background:var(--brand-active)}
.btn-outline{background:var(--surface);border:1px solid var(--control-line);color:var(--ink)}
.btn-soft{background:var(--fill);border-color:transparent;color:var(--ink)}
.detail-btn{background:var(--ink);color:#fff;border:0;min-height:40px;padding:8px 18px}
.btn:active,.question-option:active,.wizard-option:active,.mobile-bottom button:active,.constraint-badge:active,.answered-summary>button:active,.budget-presets button:active,.close-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){
 .btn-dark:hover{background:var(--brand-hover)}
 .btn-outline:hover{background:var(--pearl);border-color:#b8b8be}
 .btn-soft:hover{background:var(--fill-strong)}
 .detail-btn:hover{background:#000;text-decoration:none}
 .nav-item:hover{background:var(--fill);color:var(--ink)}
}
.text-btn{color:var(--brand);font-size:14px;min-height:36px;transition:color var(--dur-hover) ease}
.close-btn{width:36px;height:36px;border:0;border-radius:50%;background:var(--fill);color:var(--ink-2);font-size:22px;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
@media(hover:hover) and (pointer:fine){.close-btn:hover{background:var(--fill-strong)}}

/* ---------- form controls ---------- */
.field label,.field legend{font-size:13px;font-weight:500;color:var(--ink-2)}
.field-hint{font-size:12.5px;color:var(--muted)}
.field select,.form-select,.sort-select,.form-input,.field>.form-input,.wizard-birth,.inline-number{border:1px solid var(--control-line);border-radius:var(--control-radius);background-color:var(--surface);min-height:44px;font-size:15px;color:var(--ink);transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
.field select:focus-visible,.form-select:focus-visible,.sort-select:focus-visible,.form-input:focus-visible{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.sort-select{width:200px;font-size:14px}
.segmented{display:grid;background:var(--fill);padding:3px;border-radius:10px;gap:2px;border:0}
.segmented button{border-radius:8px;min-height:36px;color:var(--ink-2);font-size:13px;transition:background-color var(--dur-hover) ease,color var(--dur-hover) ease}
.segmented button.selected{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.06)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--brand)}

/* ---------- layout + page header ---------- */
.app-shell{grid-template-columns:300px minmax(0,1fr);max-width:1440px}
.sidebar{background:var(--canvas);border-right:0;padding:28px 20px 40px}
main{max-width:1120px;padding:40px 40px 0}
.hero{margin-bottom:20px}
.hero h1,.section-title h1{font-family:var(--display);font-size:34px;line-height:1.12;font-weight:700;letter-spacing:-.022em;margin:0 0 8px}
.hero p{font-size:15px;color:var(--muted);line-height:1.5;margin-top:0}
.hero-actions>.text-btn{color:var(--brand);text-decoration:none;font-size:14px}
.demo-note{background:none;border:0;padding:0;margin:0 0 6px;font-size:13px;color:var(--muted);border-bottom:0}
.demo-note strong{color:var(--ink-2);font-weight:600}
.demo-note button{font-size:13px;color:var(--brand)}
.fx-toolbar{margin:0 0 28px;font-size:13px;color:var(--muted)}
.fx-toolbar button{font-size:13px}
.section-head{margin-bottom:16px}
.section-title h2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0 0 6px}
.section-title p{font-size:14px;color:var(--muted)}
.results-count{font-size:13px;color:var(--muted)}

/* profile chips */
.profile-tags{gap:8px;margin:0 0 16px;font-size:13px}
.profile-tags .tag,.tag.outline{background:var(--surface);border:1px solid var(--line);border-radius:var(--pill);padding:5px 12px;color:var(--ink-2);font-size:13px}
.school-tags .tag{background:var(--fill);border-radius:var(--pill);padding:3px 10px;color:var(--ink-2)}

/* grouped notices: inset groups instead of loose hairlines */
.change-note,.results-list>.change-note,.nearby-notice,.results-list>.nearby-notice{background:var(--surface);border:0;border-radius:var(--radius-md);padding:12px 16px;margin:0 0 10px;font-size:14px;color:var(--ink-2);line-height:1.6}
.change-note .text-btn{font-size:14px;min-height:28px;margin-left:4px}
.compact-context{background:var(--surface);border-radius:var(--radius-md);padding:4px 16px;margin:0 0 10px;font-size:14px}
.compact-context>summary{display:list-item;min-height:44px;padding:11px 0;line-height:22px;color:var(--ink-2)}
.compact-context[open]{padding-bottom:12px}
.compact-context p{font-size:13px;line-height:1.75;color:var(--muted)}
.rank-group{border:0;padding:20px 4px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.sort-note{font-size:13px}

/* consecutive notices read as one inset group (iOS grouped list) */
.results-list>:is(.change-note,.nearby-notice,.compact-context,.mobile-family-summary){margin:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--line)}
.results-list>.profile-tags+:is(.change-note,.nearby-notice,.compact-context,.mobile-family-summary){border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}
.results-list>:is(.change-note,.nearby-notice,.compact-context,.mobile-family-summary):has(+ :not(.change-note,.nearby-notice,.compact-context,.mobile-family-summary)){border-bottom-left-radius:var(--radius-md);border-bottom-right-radius:var(--radius-md);box-shadow:none;margin-bottom:8px}
@media(min-width:821px){.results-list>.mobile-family-summary{display:none}}

/* ---------- plan cards: white tiles on parchment, flat at rest ---------- */
.plans-grid{display:grid;gap:16px;border-top:0;margin-top:16px}
.plan-card,.compact-plan{background:var(--surface);border:0;border-radius:var(--radius);padding:24px 28px 20px;box-shadow:none;transition:box-shadow var(--dur-hover) ease}
.plan-card.selected-card{background:var(--surface);border:0;box-shadow:0 0 0 2px var(--brand)}
.compact-heading h3,.school-heading h3{font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.012em;margin:0}
.compact-school-meta{font-size:13px;color:var(--muted);margin-top:4px}
.school-logo{width:44px;height:44px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.compare-check{font-size:13px;color:var(--ink-2);min-height:36px;padding:0 12px;border-radius:var(--pill);background:var(--fill);gap:6px}
.compare-check input{width:16px;height:16px}
.school-card-intro{margin:12px 0 6px}
.compact-admission.text-btn{display:block;font-size:13px;line-height:1.6;color:var(--ink-2);padding:4px 0;text-decoration:underline;text-decoration-color:rgba(0,0,0,.22);text-underline-offset:4px}
.compact-admission span{color:var(--muted)}
.school-campus-preview img{width:88px;height:56px;border-radius:10px}
.school-campus-preview span{font-size:12px}

/* constraint badges: pills, status never colour-only (text carries meaning) */
.constraint-badges{gap:6px;margin:10px 0 4px}
.constraint-badge{border-radius:var(--pill);padding:4px 12px;font-size:13px;font-weight:500;border:0;transition:transform var(--dur-press) var(--ease-out)}
.constraint-badge.over{color:var(--bad);background:var(--bad-soft)}
.constraint-badge.pending{color:var(--warn);background:var(--warn-soft)}
.constraint-badge.fits{color:var(--ok);background:var(--ok-soft)}

/* the numbers: one hero figure per card (首年家庭花费) */
.compact-metrics{gap:0;margin:18px 0 16px;border-radius:var(--radius-md);background:var(--pearl);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.compact-metrics>div{padding:14px 16px;min-width:0}
.compact-metrics>div+div{box-shadow:inset 1px 0 0 var(--line)}
.compact-metrics>div>span{font-size:12px;color:var(--muted);margin-bottom:4px;line-height:1.4}
.compact-metrics strong,.metric-number{font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;min-height:0}
.compact-metrics em,.metric-number em{font-size:13px;font-weight:500;color:var(--muted)}
.compact-metrics small{font-size:12px;color:var(--muted);margin-top:4px}
.compact-metrics .compact-total{padding-left:16px;border-left:0;background:transparent}
.compact-metrics .compact-total strong{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.compact-metrics .compact-total .cny-amount{color:var(--brand)}
@media(hover:hover) and (pointer:fine){.metric-number:hover{text-decoration:none;color:var(--brand)}}
.compact-footer{border-top:0;padding-top:4px;gap:16px}
.compact-footer>p{font-size:14px;color:var(--ink-2)}
.compact-footer>p>span{color:var(--muted)}
.compact-actions{gap:12px}
.compact-actions .text-btn{color:var(--brand);font-size:14px;font-weight:500}
.show-more{margin:8px 0 0;padding:14px 0;border:0;border-radius:var(--pill);background:var(--surface);font-size:14px;color:var(--brand);transition:transform var(--dur-press) var(--ease-out)}
.show-more:active{transform:scale(.98)}

/* no decorative arrows (owner decision 2026-10-29): links and text buttons are recognisable by the single accent colour */
.text-btn,.source-button,.panel-link,.side-source,.identity-entry,.question-early,.academic-link,.indicator-method,.demo-note button,.fx-toolbar button,.school-campus-preview span{color:var(--brand)}
.academic-link,.indicator-method{text-decoration:none}
.text-btn:disabled,.text-btn[disabled]{color:var(--faint)}
@media(hover:hover) and (pointer:fine){.text-btn:hover,.source-button:hover,.panel-link:hover,.academic-link:hover,.indicator-method:hover{color:var(--brand-hover);text-decoration:underline;text-underline-offset:4px}}

/* disclosure triangles stay: they are the only cue that a <details> row opens */
:is(.compact-context,.detail-fold,.mobile-family-summary)>summary::marker{color:var(--brand)}

/* side column panels / stories / consult */
.panel,.story-card,.lead-card,.rental-card,.directory-card,.shopping-basket,.empty{background:var(--surface);border:0;border-radius:var(--radius);box-shadow:none}
.story-card,.lead-card,.directory-card{padding:22px 24px;margin-bottom:12px;border-top:0}
.consult-band{background:var(--surface);border:0;border-radius:var(--radius);padding:28px;margin-top:24px}
.consult-band h3{font-size:21px;letter-spacing:-.01em}
.page-footer{color:var(--muted);font-size:12px;padding:32px 0 40px}
.page-footer button{font-size:12px}

/* catalogue views (schools / products) */
.catalog-filters,.rental-filters{background:var(--surface);border:0;border-radius:var(--radius);padding:20px}
.school-directory-grid,.consumer-product-grid{gap:12px}
.consumer-product-grid .product-price{background:var(--surface);border:0;border-radius:var(--radius-md);padding:18px 20px}
.shopping-basket{padding:20px 24px}
.rental-card{padding:18px 20px;margin-bottom:10px;border-bottom:0}
.rental-card.is-selected{background:var(--surface);box-shadow:0 0 0 2px var(--brand)}

/* ---------- sidebar: iOS-style inset grouped list ---------- */
.family-overview .eyebrow,.question-page .eyebrow{font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--muted);margin:0 0 6px;font-weight:500}
.family-overview h2{font-family:var(--display);font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0 0 16px}
.family-overview>.btn-wide{width:100%}
.answered-summary{margin:16px 0;border:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden}
.answered-summary>button{padding:11px 16px;border-top:0;box-shadow:inset 0 -1px 0 var(--line);background:var(--surface);transition:background-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.answered-summary>button:last-child{box-shadow:none}
.answered-summary span{font-size:12px;color:var(--muted)}
.answered-summary strong{font-size:15px;color:var(--ink)}
.answered-summary i{font-size:0;color:var(--faint)}
.answered-summary i:after{content:"\203A";font-size:20px;font-style:normal;line-height:1;color:#c7c7cc}
@media(hover:hover) and (pointer:fine){.answered-summary>button:hover{background:var(--pearl)}.answered-summary>button:hover strong{text-decoration:none}}
.family-overview>.text-btn{font-size:14px;min-height:40px}
.question-chapters{border:0;background:var(--surface);border-radius:var(--radius-md);padding:8px 16px;margin:24px 0;line-height:2.4;font-size:13px}

/* ---------- questionnaire: one calm question per screen ---------- */
.question-page{max-width:640px;margin:24px auto 96px}
.question-topline{font-size:13px}
.question-page progress{height:4px;border-radius:4px;overflow:hidden;margin-bottom:40px;background:var(--fill-strong)}
.question-page progress::-webkit-progress-bar{background:var(--fill-strong);border-radius:4px}
.question-page progress::-webkit-progress-value{background:var(--brand);border-radius:4px;transition:width var(--dur-modal) var(--ease-out)}
.question-page progress::-moz-progress-bar{background:var(--brand);border-radius:4px}
.question-page h1{font-family:var(--display);font-size:34px;line-height:1.18;font-weight:700;letter-spacing:-.022em;margin:0 0 12px}
.question-hint{font-size:15px;line-height:1.6;color:var(--muted)}
.question-options{gap:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.question-option{border:0;border-radius:0;box-shadow:inset 0 -1px 0 var(--line);min-height:56px;padding:14px 16px;font-size:16px;background:var(--surface);transition:background-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-out)}
.question-option:last-child{box-shadow:none}
.question-option.selected{background:var(--brand-soft);color:var(--ink);font-weight:500}
@media(hover:hover) and (pointer:fine){.question-option:hover{background:var(--pearl)}.question-option.selected:hover{background:var(--brand-soft)}}
.answer-key{border:0;border-radius:7px;background:var(--fill);color:var(--muted);font-weight:500}
.question-option.selected .answer-key{background:var(--brand);color:#fff}
.question-number,.question-page .form-input{max-width:420px;font-size:20px;min-height:52px;border-radius:var(--radius-md)}
.budget-presets button{border:1px solid var(--control-line);border-radius:var(--pill);background:var(--surface);transition:transform var(--dur-press) var(--ease-out),border-color var(--dur-hover) ease}
.budget-presets button[aria-pressed=true]{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.question-footer{border-top:0;padding-top:8px;margin-top:32px}
.question-footer .btn{min-width:140px;min-height:50px}
/* new question slides in gently (enter only: ease-out, under 300ms) */
.question-page h1,.question-page .question-hint,.question-page .question-options,.question-page .question-number{animation:hs-rise var(--dur-modal) var(--ease-out) both}
.question-page .question-options{animation-delay:30ms}
@keyframes hs-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* wizard (legacy modal steps) */
.wizard-options{gap:0;background:var(--surface);border-radius:var(--radius-md);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.wizard-option{border:0;box-shadow:inset 0 -1px 0 var(--line);padding:14px 16px}
.wizard-option.selected{background:var(--brand-soft);color:var(--ink)}
.wizard-footer{border-top:0}

/* ---------- dialogs: sheet + drawer with real enter/exit motion ---------- */
dialog{color:var(--ink);background:var(--surface);box-shadow:var(--shadow-sheet)}
dialog::backdrop{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal{border-radius:22px;width:620px}
.modal.wide{width:1080px}
.modal-inner{padding:28px 32px 32px}
.dialog-head h2{font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.018em}
.modal p{font-size:15px;line-height:1.7}
.drawer{border-radius:22px 0 0 22px;width:700px}
.drawer-inner{padding:28px 32px 48px}
.money-grid{border:0;background:var(--pearl);border-radius:var(--radius-md);padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.money-cell strong{font-size:22px;font-weight:700;letter-spacing:-.015em}
.detail-callout{background:var(--canvas);border:0;border-radius:var(--radius-md);padding:12px 16px;font-size:13px}
.detail-fold{border-top:1px solid var(--line)}
.detail-fold>summary{display:list-item;font-size:16px;font-weight:600;min-height:44px;padding:11px 0;line-height:22px}
.consent-box,.share-preview{background:var(--canvas);border:0;border-radius:var(--radius-md)}
.compare-table th{background:var(--canvas);font-weight:600}
.compare-table th:first-child{border-radius:12px 0 0 0}
.source-list li{border-bottom-color:var(--line)}

/* motion: modal = centred scale+fade (no transform-origin trick for modals); drawer = slide from the edge it lives on */
.modal,.drawer,dialog::backdrop{transition:opacity var(--dur-modal) var(--ease-out),transform var(--dur-modal) var(--ease-out),overlay var(--dur-modal) allow-discrete,display var(--dur-modal) allow-discrete}
.modal{opacity:0;transform:scale(.96)}
.modal[open]{opacity:1;transform:none}
.drawer{transform:translateX(100%);transition-duration:var(--dur-drawer);transition-timing-function:var(--ease-drawer)}
.drawer[open]{transform:none}
dialog::backdrop{opacity:0}
dialog[open]::backdrop{opacity:1}
@starting-style{.modal[open]{opacity:0;transform:scale(.96)}.drawer[open]{transform:translateX(100%)}dialog[open]::backdrop{opacity:0}}

/* ---------- floating layers: frosted, origin-aware ---------- */
.compare-tray{background:rgba(29,29,31,.88);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-radius:var(--pill);padding:8px 8px 8px 22px;box-shadow:var(--shadow-float);
 transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out)}
@starting-style{.compare-tray{opacity:0;transform:translate(-50%,12px)}}
.compare-tray .btn{background:#fff;color:var(--ink);min-height:36px;border-radius:var(--pill)}
.toast{background:rgba(29,29,31,.9);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:var(--pill);padding:10px 20px;box-shadow:var(--shadow-float);font-size:14px;
 transition:opacity var(--dur-pop) var(--ease-out),transform var(--dur-pop) var(--ease-out)}
.mobile-bottom{background:rgba(255,255,255,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--line)}
.mobile-bottom button{border:0;border-radius:var(--pill);background:var(--fill);color:var(--ink);font-weight:500;transition:transform var(--dur-press) var(--ease-out),background-color var(--dur-hover) ease}
.mobile-bottom .mobile-consult{background:var(--brand);color:#fff}
.mobile-bottom #mobile-compare-count{background:var(--surface);border-radius:var(--pill);min-width:20px;height:20px;padding:0 6px}

/* details disclosure "+" turns smoothly */
.more-conditions summary span,.summary-toggle{transition:transform var(--dur-pop) var(--ease-out)}

/* ---------- responsive ---------- */
@media(max-width:1200px){main{padding:32px 28px 0}.app-shell{grid-template-columns:270px minmax(0,1fr)}}
@media(max-width:1100px){.compact-metrics>div{padding:12px 14px}.compact-metrics .compact-total strong{font-size:24px}}
@media(max-width:820px){
 .topbar{position:relative;height:auto;background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
 .sidebar{top:0;max-height:100dvh}
 main{padding:24px 20px 0}
 .mobile-family-summary{background:var(--surface);border-radius:var(--radius-md);padding:0 16px;margin:0 0 10px}
 .mobile-family-summary>summary{font-size:14px;color:var(--ink-2)}
 .mobile-family-summary[open]{border-bottom:0;padding-bottom:16px}
 .mobile-family-summary .answered-summary{box-shadow:inset 0 0 0 1px var(--line);display:block}
 .question-page h1{font-size:28px}
}
@media(max-width:700px){
 .compact-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
 .compact-metrics>div+div{box-shadow:none}
 .compact-metrics>div:nth-child(even){box-shadow:inset 1px 0 0 var(--line)}
 .compact-metrics>div:nth-child(n+3){box-shadow:inset 0 1px 0 var(--line)}
 .compact-metrics>div:nth-child(4){box-shadow:inset 1px 1px 0 var(--line)}
 .compact-metrics.without-outcome .compact-total{grid-column:1/-1;box-shadow:inset 0 1px 0 var(--line)}
 .compact-metrics .compact-total strong{font-size:28px}
 .compact-actions{margin-top:12px;border:0}
 .compact-actions .detail-btn{min-height:44px;flex:1}
}
@media(max-width:600px){
 body{font-size:15px}
 .brand-utility{padding:0 16px}
 .topbar{padding:10px 16px 0;gap:6px}
 .brand img{width:150px}
 .topbar nav{gap:4px;padding:6px 0 10px}
 .nav-item{min-height:36px;padding:0 14px}
 main{padding:20px 16px 0}
 .hero h1,.section-title h1{font-size:28px}
 .section-title h2{font-size:22px}
 .sort-select{width:auto;min-width:168px}
 .plans-grid{gap:12px}
 .plan-card,.compact-plan{padding:20px 18px 16px;border-radius:var(--radius)}
 .compact-heading{gap:12px}
 .compact-heading h3{font-size:19px}
 .compare-check{padding:0 10px;font-size:12px}
 .school-logo{width:38px;height:38px;border-radius:9px}
 .profile-tags{gap:6px}
 .profile-tags .tag{font-size:12px;padding:4px 10px}
 /* iOS: inputs under 16px zoom the page (mobile-native) */
 .field select,.form-select,.sort-select,.form-input,.wizard-birth,input,select,textarea{font-size:16px}
 .drawer{border-radius:0}
 .drawer-inner{padding:20px 18px 40px}
 .modal{border-radius:22px 22px 0 0;margin:auto 0 0;width:100vw;max-width:100vw;max-height:92dvh}
 .modal{transform:translateY(100%);opacity:1;transition-duration:var(--dur-drawer);transition-timing-function:var(--ease-drawer)}
 .modal[open]{transform:none}
 @starting-style{.modal[open]{transform:translateY(100%)}}
 .modal-inner{padding:22px 18px 28px}
 .dialog-head h2{font-size:22px}
 .question-page h1{font-size:26px}
 .question-option{font-size:15px}
 .mobile-bottom{padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:8px}
 .mobile-bottom button{font-size:14px}
 .consult-band{padding:22px 20px}
}
@media(max-width:360px){.brand img{width:132px}.hero h1{font-size:24px}}

/* ---------- accessibility preferences ---------- */
@media(prefers-reduced-motion:reduce){
 /* Apple: reduced motion is a gentler equivalent, not no feedback — cross-fade only, no slides or scale. */
 .modal,.drawer,.modal[open],.drawer[open],.compare-tray,.toast,.toast.show{transform:none!important}
 .modal,.drawer,dialog::backdrop,.compare-tray,.toast{transition:opacity 150ms ease,overlay 150ms allow-discrete,display 150ms allow-discrete!important}
 .btn:active,.question-option:active,.wizard-option:active,.mobile-bottom button:active,.constraint-badge:active,.answered-summary>button:active,.budget-presets button:active,.close-btn:active,.show-more:active{transform:none}
 .question-page h1,.question-page .question-hint,.question-page .question-options,.question-page .question-number{animation:none}
}
@media(prefers-reduced-transparency:reduce){
 .topbar,.mobile-bottom{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
 .compare-tray,.toast{background:#1d1d1f;-webkit-backdrop-filter:none;backdrop-filter:none}
 dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.45)}
}
@media(prefers-contrast:more){
 :root{--line:rgba(0,0,0,.24);--muted:#515154}
 .plan-card,.compact-plan,.answered-summary,.question-options{box-shadow:0 0 0 1px #1d1d1f}
}