/* mockup.css -- Levels Sub-A mockup deltas. Class-only; every color, font and radius
   resolves to a token already in assets/levels-app-styles.css (origin/main b8e96d7).
   No new hex values except the GIS placeholder (third-party, not restyled in the build). */
.brandmark{margin:0 0 2px;font-family:var(--font-display);font-weight:600;font-size:var(--text-page);color:var(--ink)}
.auth-card .eyebrow{display:block;margin-bottom:6px}
.statement{background:var(--paper-alt);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 18px;max-width:65ch}
.statement h2{font-family:var(--font-body);font-size:var(--text-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
.statement h2:first-child{margin-top:0}
.statement p{margin:0;font-size:var(--text-meta);line-height:1.55;color:var(--ink-2)}
.statement-links{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 18px;font-size:var(--text-meta)}
/* UX pass 3, finding 15: brand row on sign-in; links centred under the button, statement below */
.signin-brand{display:flex;align-items:center;gap:12px;margin:0 0 6px}
.signin-brand .brandmark{margin:0}
.auth-card h1.brandmark{font-size:var(--text-page);margin:0} /* a11y L2: the sign-in h1 keeps the wordmark look */
.brand-mark.brand-mark-lg{width:40px;height:40px;font-size:var(--text-section)}
.signin-card .statement-links{justify-content:center;margin:var(--space-md) 0 var(--space-lg)}
.signin-card .statement{margin-bottom:0}
.gis{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border-radius:999px;border:1px solid #dadce0;background:#fff;color:#3c4043;font:500 14px/1 Roboto,Arial,sans-serif;cursor:pointer}
[data-theme="dark"] .gis{background:#131314;border-color:#8e918f;color:#e3e3e3}
.gis svg{width:18px;height:18px;flex:none}
.gis-note{font-family:var(--font-body);font-size:var(--text-caption);color:var(--muted);text-align:center;margin:6px 0 0;letter-spacing:.03em}
.notice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line-strong);border-left:3px solid var(--derived);background:var(--derived-bg);border-radius:10px;padding:14px 16px;margin:0 0 16px}
.notice .glyph{flex:none;width:20px;height:20px;border-radius:50%;background:var(--derived);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-weight:700;font-size:var(--text-caption)}
.notice p{margin:0;font-size:var(--text-meta);line-height:1.5;color:var(--ink-2)}
.notice strong{color:var(--ink)}
.small{font-size:var(--text-meta);color:var(--muted);line-height:1.5;margin:10px 0 0}
.center{text-align:center}
.consent-list{display:flex;flex-direction:column;gap:12px;margin:18px 0 6px}
.consent-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.consent-row.checked{border-color:var(--accent);background:var(--accent-bg)}
.consent-row .box{flex:none;width:20px;height:20px;border:2px solid var(--field-border);border-radius:5px;background:var(--paper);margin-top:1px;display:flex;align-items:center;justify-content:center;font-size:var(--text-meta);font-weight:700;color:var(--accent-ink)}
.consent-row.checked .box{background:var(--accent);border-color:var(--accent)}
.consent-row p{margin:0;font-size:var(--text-dense);line-height:1.5;color:var(--ink)}
.person-card{border:1px solid var(--line);border-radius:10px;padding:18px 20px;background:var(--paper-alt);margin:0 0 18px}
.person-card .who{font-family:var(--font-display);font-size:var(--text-card);font-weight:600;color:var(--ink);margin:0 0 6px}
.person-card p{margin:0;font-size:var(--text-dense);color:var(--ink-2);line-height:1.5}
.linkbox{width:100%;box-sizing:border-box;font-family:var(--font-mono);font-size:var(--text-caption);border:1px dashed var(--line-strong);border-radius:8px;padding:10px 12px;background:var(--paper-alt);color:var(--ink);word-break:break-all}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rows li:last-child{border-bottom:none}
.rows .main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rows .t{font-size:var(--text-dense);font-weight:600;color:var(--ink)}
.rows .m{font-family:var(--font-body);font-size:var(--text-meta);color:var(--muted)}
.rows .end{display:flex;gap:8px;align-items:center;flex:none}
.chip.warn{background:var(--assume-bg);color:var(--assume)}
.card.stripe-danger{border-left:3px solid var(--danger)}
.card h3{font-family:var(--font-display);font-size:var(--text-card);font-weight:600;margin:0 0 4px;color:var(--ink)}
/* Polish 1 (re-walk 2026-11-14): an eyebrow that is a real h3 inside a card keeps the eyebrow face; this beats .card h3 */
.card h3.eyebrow-heading{font-family:var(--font-body);font-size:var(--text-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.card .sub{font-size:var(--text-meta);color:var(--muted);margin:0 0 12px;max-width:70ch}
.col{max-width:760px;margin:0 auto}
.disclaimer{font-size:var(--text-caption);line-height:1.5;color:var(--muted);border-top:1px solid var(--line);margin:16px 0 0;padding-top:12px}
.inline-err{border:1px solid var(--assume);background:var(--assume-bg);border-radius:8px;padding:10px 12px;font-size:var(--text-meta);color:var(--ink-2);margin-top:8px;line-height:1.5}
.inline-err strong{color:var(--assume)}
.search-result{border:1px solid var(--line-strong);border-radius:10px;padding:16px 18px;background:var(--paper-alt);margin-top:10px}
.search-result .t{font-weight:700;font-size:var(--text-dense);color:var(--ink);margin:0 0 4px}
.search-result p{margin:0 0 12px;font-size:var(--text-meta);color:var(--ink-2);line-height:1.5}
.chip.action{background:var(--danger-bg);color:var(--danger)}
.chip.ok{background:var(--confirmed-bg);color:var(--confirmed)}
.owner-only{margin-left:6px}
.result-list{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.result-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:var(--text-dense);font-weight:700;color:var(--ink)}
.result-list li:last-child{border-bottom:none}
.result-list li.picked{background:var(--accent-bg);box-shadow:inset 3px 0 0 var(--accent)}
.path-box{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-top:14px;background:var(--paper-alt)}
.path-box p{margin:0 0 10px;font-size:var(--text-meta);line-height:1.5;color:var(--ink-2)}
.path-box .auth-actions{margin-top:12px}
.conn-card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 20px;margin:14px 0;box-shadow:var(--shadow-sm)}
.conn-card.s-late{border-left:3px solid var(--assume)}
.conn-card.s-action{border-left:3px solid var(--danger)}
.conn-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.conn-head h3{margin:0}
.conn-head .via{font-family:var(--font-body);font-size:var(--text-caption);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.conn-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.conn-actions:empty{display:none}
.conn-confirm{border:1px solid var(--danger);background:var(--danger-bg);border-radius:8px;padding:12px 14px;margin-top:14px}
.conn-confirm p{margin:0 0 10px;font-size:var(--text-meta);line-height:1.5;color:var(--ink-2)}
.fill-14{width:14%}
.sync-chip{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:var(--text-meta);color:var(--ink);text-decoration:none;flex-wrap:wrap}
.sync-chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.sync-chip .go{margin-left:auto;font-family:var(--font-body);font-size:var(--text-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sync-chip.ok{background:var(--confirmed-bg);border-color:var(--confirmed)}.sync-chip.ok .dot{background:var(--confirmed)}
.sync-chip.late{background:var(--assume-bg);border-color:var(--assume)}.sync-chip.late .dot{background:var(--assume)}
.sync-chip.action{background:var(--danger-bg);border-color:var(--danger)}.sync-chip.action .dot{background:var(--danger)}
.frame-note{margin:26px 0 10px}
.result-list li.picked .chip{background:var(--paper)}
.path-box .btn:not(.primary):not(.ghost){background:var(--paper)}
.conn-card .rows li{padding:8px 0}
.conn-card .rows .main{flex-direction:row;justify-content:space-between;align-items:baseline;width:100%}
.sync-chip > span:nth-child(2){flex:1 1 200px}
.nw{white-space:nowrap}
.sync-now{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 4px}
.sync-now .left{font-family:var(--font-body);font-size:var(--text-caption);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.sync-now-copy{font-size:var(--text-meta);color:var(--muted);line-height:1.5;margin:8px 0 0}
.pwa-hint{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pwa-hint p{flex:1}

/* ---- additions for the built screens (class-only, existing tokens) ---- */
.consent-row{position:relative;cursor:pointer}
.consent-input{position:absolute;opacity:0;width:20px;height:20px;margin:0;left:14px;top:14px}
.consent-input:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.result-list button.pick{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;flex:1}
.result-list button.pick:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sync-chip.never{background:var(--paper-alt);border-color:var(--line-strong)}
.sync-chip.never .dot{background:var(--muted)}
a.sync-chip:focus-visible,.gis:focus-visible,.conn-card button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.error-msg.center{text-align:center}
.gis-slot{display:flex;justify-content:center}
.gis-slot > .gis{flex:1}
.linkbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

[tabindex="-1"]:focus{outline:none}
nav.tabnav{scroll-snap-type:x proximity;scroll-padding:0 28px}
nav.tabnav button,nav.tabnav a{scroll-snap-align:start}

/* tab strip overflow cue: a fade on each side that has more tabs */
nav.tabnav[data-fade=""]{-webkit-mask-image:none;mask-image:none}
nav.tabnav[data-fade="r"]{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 52px),transparent 100%)}
nav.tabnav[data-fade="l"]{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 52px),transparent 100%)}
nav.tabnav[data-fade="lr"]{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 52px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 52px,#000 calc(100% - 52px),transparent 100%)}
.full-statement{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.full-statement summary{cursor:pointer;font-size:var(--text-meta);font-weight:700;color:var(--accent)}
.full-statement summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.full-statement p{margin:0 0 4px}

.fill-10{width:10%}.fill-20{width:20%}.fill-30{width:30%}.fill-40{width:40%}.fill-50{width:50%}.fill-60{width:60%}.fill-70{width:70%}.fill-80{width:80%}.fill-90{width:90%}.fill-100{width:100%}

/* Overview: shell chip + next step sit flush on the planner's Overview panel, same width (CP-P3). */
.col-wide{max-width:none}
main.wrap.with-planner{padding-bottom:0}
#planner-host.under-shell{padding-top:12px}
.next-step{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:12px}
.next-step .eyebrow{flex-basis:100%;margin:0}
.next-step p:not(.eyebrow){flex:1 1 260px;margin:0}
.next-step .btn{width:auto}

/* ============================================================
   UX pass 1 (2026-11-13): app bar, account menu, toast, Overview first-run, Ask placement.
   Tokens only; every value aliases styles.css :root.
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- app bar: one 56px row at every width ---- */
header.appbar{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.appbar-inner{max-width:1180px;height:var(--appbar-h);margin:0 auto;padding:0 var(--space-md);display:flex;align-items:center;gap:var(--space-md)}
.appbar-brand{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.brand-mark{flex:none;width:32px;height:32px;border-radius:var(--radius-md);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font:600 18px/1 var(--font-display)}
.brand-text{display:flex;flex-direction:column;min-width:0}
.appbar .wordmark{margin:0;font:600 18px/1.15 var(--font-display);color:var(--ink);letter-spacing:0}
.appbar .hh{margin:0;font-size:var(--text-meta);line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-actions{display:flex;align-items:center;gap:var(--space-sm);flex:none}
@media (min-width:601px){.appbar-inner{padding:0 var(--space-lg)}}

/* ---- account menu (disclosure: button + panel) ---- */
.acct{position:relative}
.acct-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);background:var(--accent-bg);color:var(--accent);font:600 13px/1 var(--font-body);letter-spacing:0;text-transform:none;padding:0;display:grid;place-items:center;cursor:pointer}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{background:var(--accent-bg-strong);color:var(--ink)} /* a11y M5 */
.acct-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.acct-menu{position:absolute;right:0;top:calc(100% + var(--space-sm));z-index:45;width:264px;max-width:calc(100vw - 24px);background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px}
.acct-who{display:flex;flex-direction:column;gap:2px;padding:10px 12px 8px;min-width:0}
.acct-who .t{font-size:var(--text-dense);font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-who .m{font-size:var(--text-meta);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-theme{padding:6px 12px 10px}
.acct-theme .eyebrow{display:block;margin-bottom:6px}
.seg{display:flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-alt)}
.seg-opt{flex:1;min-height:var(--control-h-sm);border:none;border-radius:6px;background:transparent;color:var(--ink-2);font:500 13px var(--font-body);cursor:pointer}
.seg-opt[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--field-border)}
.seg-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.acct-sep{height:1px;background:var(--line);margin:6px 0}
.acct-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:100%;min-height:var(--control-h);padding:0 12px;border:none;border-radius:6px;background:transparent;color:var(--ink);font:400 14px var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.acct-item:hover{background:var(--paper-alt)}
.acct-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.acct-item[aria-disabled="true"]{color:var(--muted);cursor:default}
.acct-item[aria-disabled="true"]:hover{background:transparent}
.acct-item .m{font-size:var(--text-caption);color:var(--muted)}

/* ---- tab strip: full-bleed bar, content aligned with the app bar ---- */
nav.tabnav{max-width:none;padding:0 max(var(--space-md),calc((100% - 1180px) / 2 + var(--space-md)));gap:0}
nav.tabnav button,nav.tabnav a{font-size:var(--text-dense);font-weight:600;padding:14px 14px 12px}
@media (min-width:601px){nav.tabnav{padding:0 max(var(--space-lg),calc((100% - 1180px) / 2 + var(--space-lg)))}}

/* ---- toast (save state): bottom-left, 3 s, clear of the Ask button ---- */
.toast{position:fixed;left:var(--space-md);bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:var(--space-sm);max-width:calc(100vw - 120px);padding:10px 14px;border-radius:var(--radius-md);background:var(--ink);color:var(--paper);font:500 14px var(--font-body);box-shadow:var(--shadow-md)}
.toast .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--muted)}
.toast[data-tone="ok"] .dot{background:var(--confirmed)}
.toast[data-tone="info"] .dot{background:var(--derived)}
.toast[data-tone="warn"] .dot{background:var(--assume)}
.toast[data-tone="danger"] .dot{background:var(--danger)}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:toast-in .18s ease-out}}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Overview first run: one setup card (finding 1) ---- */
.first-run{border-left:3px solid var(--accent);margin-top:var(--space-sm)}
.first-run h3{font-size:var(--text-section);margin:6px 0 4px}
.first-run .sub{margin-bottom:var(--space-md)}
.fr-steps{list-style:none;margin:0;padding:0}
.fr-step{display:flex;align-items:center;gap:var(--space-md);padding:14px 0;border-top:1px solid var(--line)}
.fr-dot{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--line-strong);color:var(--muted);font:600 13px var(--font-body)}
.fr-step[data-done="true"] .fr-dot{background:var(--confirmed);border-color:var(--confirmed);color:var(--paper)}
.fr-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.fr-body .t{font-size:var(--text-dense);font-weight:600;color:var(--ink)}
.fr-body .m{font-size:var(--text-meta);color:var(--muted);line-height:1.45}
.fr-step[data-done="true"] .fr-body .t{color:var(--ink-2)}
.fr-step .btn{flex:none;min-width:132px}
@media (max-width:600px){.fr-step{flex-wrap:wrap}.fr-step .btn{flex:1 1 calc(100% - 44px);margin-left:44px}}

/* ---- Ask placement (finding 8): app bar button + right panel from 900px, round FAB below ---- */
.appbar-ask{display:none}
.appbar-ask .ask-fab-mark{width:18px;height:18px;font-size:var(--text-caption);background:var(--accent);color:var(--accent-ink);border-radius:50%;display:grid;place-items:center}
.ask-fab{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;bottom:calc(var(--space-lg) + env(safe-area-inset-bottom,0px))}
.ask-fab .ask-fab-mark{width:26px;height:26px;font-size:var(--text-dense)}
.ask-fab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.ask-mounted{padding-bottom:104px}
html:has(body.ask-mounted){scroll-padding-bottom:104px}
@media (min-width:900px){
  .appbar-ask{display:inline-flex}
  .ask-fab{display:none}
  body.ask-mounted{padding-bottom:0}
  html:has(body.ask-mounted){scroll-padding-bottom:0}
  .ask-scrim{background:transparent}
  body.ask-open{overflow:auto}
  .ask-sheet{left:auto;right:0;top:0;bottom:0;width:420px;max-width:420px;margin:0;border-radius:0;border-left:1px solid var(--line);box-shadow:var(--shadow-md)}
  .ask-sheet:before{display:none}
  .ask-head{padding:16px 18px 12px}
}

/* ---------- UX pass 2, finding 9: Settings grouping ---------- */
.seg-nav{display:inline-flex;margin-top:var(--space-sm);margin-bottom:var(--space-md)} /* QA-2 item 4 */
.seg-nav .seg-opt{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--space-md);text-decoration:none}
.seg-nav .seg-opt[aria-current="page"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--field-border)}
.seg-nav .seg-opt:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.set-sub{margin:var(--space-md) 0 0;font-family:var(--font-body);font-size:var(--text-meta);font-weight:600;color:var(--muted)}
details.advanced > summary{cursor:pointer;font-weight:600;font-size:var(--text-dense);color:var(--ink)}
details.advanced[open] > summary{margin-bottom:var(--space-md)}

/* UX pass 3, finding 16: boot screen (brand, 1 s fade) and the planner skeleton */
.boot-brand{display:flex;align-items:center;gap:12px;animation:boot-fade 1s ease both}
.boot-brand .brandmark{margin:0}
@keyframes boot-fade{from{opacity:0}to{opacity:1}}
.sk-card{display:flex;flex-direction:column;gap:12px;min-height:120px}
.sk-bar{display:block;height:12px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--paper-alt) 0%,var(--line) 50%,var(--paper-alt) 100%);background-size:200% 100%;animation:sk-shimmer 1.2s ease-in-out infinite}
.sk-bar:first-child{height:10px}
@keyframes sk-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.boot-brand,.sk-bar{animation:none}}

/* UX pass 3, finding 19: 20px icons in the tab strip; under 600px a five-item bottom bar replaces the strip */
nav.tabnav a{display:inline-flex;align-items:center;gap:var(--space-sm)}
nav.tabnav a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bb-item,.more-item{text-decoration:none}
nav.tabnav .tab-icon{flex:none;opacity:.85}
.bottombar{display:none}
@media (max-width:600px){
  nav.tabnav{display:none}
  .bottombar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bb-row{display:grid;grid-template-columns:repeat(5,1fr)}
  .bb-item{appearance:none;background:none;border:none;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:600 12px/1.2 var(--font-body);color:var(--muted);cursor:pointer;padding:6px 2px}
  .bb-item[aria-current="page"]{color:var(--accent)}
  .bb-item:focus-visible,.more-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .more-sheet{position:absolute;right:8px;bottom:calc(100% + 8px);min-width:200px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;display:flex;flex-direction:column}
  .more-sheet[hidden]{display:none}
  .more-item{appearance:none;background:none;border:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--radius-md);font:600 14px/1.2 var(--font-body);color:var(--ink);cursor:pointer;text-align:left}
  .more-item[aria-current="page"]{color:var(--accent);background:var(--accent-bg)}
  body.has-bottombar{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body.has-bottombar .ask-fab{bottom:calc(76px + env(safe-area-inset-bottom))}
  body.has-bottombar.ask-mounted{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
}

/* Ask lives in the signed-in shell only; never over consent or onboarding screens */
body:not(.has-bottombar) .ask-fab{display:none}
/* a11y M7d: skip link, visible on focus */
.skip-link{position:absolute;left:var(--space-md);top:-48px;z-index:60;background:var(--paper);color:var(--accent);border:2px solid var(--accent);border-radius:var(--radius-md);padding:8px 14px;font:600 14px var(--font-body);text-decoration:none}
.skip-link:focus{top:var(--space-sm)}

/* Click-through #7 and a11y L8: no tap target under 24px. Inline text links in hints, notes and the legal pages
   grow their hit area without moving the text; bank picks and sliders get real height. */
.statement-links a,.full-statement summary,.hint a,.small a,.field-note a,p.small > a{display:inline-flex;align-items:center;min-height:24px}
.result-list li:has(button.pick){padding-top:0;padding-bottom:0}
.result-list button.pick{min-height:var(--control-h)}
input[type="range"]{min-height:24px}
@media (max-width:600px){.result-list button.pick{min-height:var(--control-h-touch)}}

/* Net-worth check (b): one select per synced account */
.acct-types li{flex-wrap:wrap}
.acct-type-pick{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.acct-type-pick select{min-height:var(--control-h);border:1px solid var(--field-border);border-radius:6px;padding:0 10px;background:var(--paper);color:var(--ink);font:14px var(--font-body)}
@media (max-width:600px){.acct-type-pick{align-items:stretch;width:100%}}

/* finding 17: Copy link matches every other auth button */
.btn.btn-block{display:flex;width:100%}

/* Vesta ruling 1 (2026-11-13): final mark. Tile = --accent, glyph = --accent-ink; corner 25% of the side. */
.brand-mark{border-radius:25%}
.brand-mark .brand-glyph{width:100%;height:100%;display:block;color:var(--accent-ink)}
/* Vesta ruling 6: empty-state icons, 32px, --muted, no circle */
.empty-state .empty-icon,.empty-line .empty-icon{display:block;color:var(--muted);margin:0 auto 12px}
.empty-line{display:flex;align-items:center;gap:var(--space-sm)}
.empty-line .empty-icon{margin:0;flex:none}

/* Finding 24: intro video dialog (sheet radius 24, ruling 2) */
.intro-backdrop{position:fixed;inset:0;z-index:70;background:rgba(10,14,16,.55);display:grid;place-items:center;padding:var(--space-md)}
.intro-dialog{width:min(680px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-lg)}
.intro-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
.intro-head h2{margin:0;font-family:var(--font-display);font-size:var(--text-section);font-weight:600}
.intro-head h2:focus{outline:none}
.intro-head h2:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.intro-dialog .sub{margin:var(--space-sm) 0 var(--space-md);color:var(--muted);font-size:var(--text-dense)}
.intro-frame{background:var(--paper-alt);border-radius:var(--radius-md);overflow:hidden}
.intro-video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.intro-dialog[data-cut="phone"] .intro-video{aspect-ratio:9/16;max-height:calc(100vh - 320px);margin:0 auto;width:auto;max-width:100%}
.intro-video:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.intro-chapters ol{list-style:none;margin:var(--space-md) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:2px var(--space-sm)}
.intro-chapter{appearance:none;background:none;border:none;display:flex;gap:var(--space-sm);align-items:baseline;width:100%;min-height:var(--control-h-sm);padding:4px 6px;border-radius:var(--radius-sm);font:14px/1.3 var(--font-body);color:var(--ink);text-align:left;cursor:pointer}
.intro-chapter .num{color:var(--muted);font-size:var(--text-meta)}
@media (hover:hover){.intro-chapter:hover{background:var(--paper-alt)}}
.intro-chapter:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.intro-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-md)}
.intro-foot .intro-switch{margin-right:auto}
body.intro-open{overflow:hidden}
@media (max-width:600px){.intro-backdrop{padding:0;place-items:stretch}.intro-dialog{width:100%;max-height:100vh;border-radius:0;padding:var(--space-md)}.intro-chapter{min-height:var(--control-h-touch)}}

/* Finding 24: the player's own controls (labelled, keyboard-safe) */
.intro-frame{position:relative}
.iv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm);padding:var(--space-sm);background:var(--paper-alt);border-top:1px solid var(--line)}
.iv-btn{appearance:none;min-height:var(--control-h-sm);padding:0 10px;border:1px solid var(--field-border);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);font:600 13px/1 var(--font-body);cursor:pointer}
.iv-btn[aria-pressed="true"]{background:var(--accent-bg);border-color:var(--accent)}
.iv-play{min-width:72px}
.iv-btn:focus-visible,.iv-seek:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.iv-seek{flex:1 1 160px;min-width:120px;min-height:24px;accent-color:var(--accent)}
.iv-time{font-size:var(--text-meta);color:var(--ink-2)}
.intro-frame:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#000}
.intro-frame:fullscreen .intro-video{flex:1;max-height:none;aspect-ratio:auto}
@media (max-width:600px){.iv-btn{min-height:var(--control-h-touch)}}

/* final walk small fix: the decline confirmation on sign-in */
.signin-done{margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);background:var(--confirmed-bg);color:var(--ink);font-size:var(--text-dense)}

/* Redesign spec 1.3: the tour step, a page (auth card) holding the same player as the replay dialog. Existing tokens only. */
.tour-card{max-width:680px}
.tour-card .intro-chapters,.tour-card .intro-switch{margin-top:var(--space-sm)}
.tour-card[data-cut="phone"] .intro-video{aspect-ratio:9/16;max-height:60vh;margin:0 auto;width:auto;max-width:100%}
.iv-btn:disabled{background:var(--disabled-bg);color:var(--disabled-fg);border-color:var(--disabled-border);cursor:default}

/* Redesign spec section 2: the Get started checklist (reuses .first-run / .fr-*) and the module tiles. Existing tokens only. */
.gs-head{display:flex;align-items:center;gap:var(--space-sm) var(--space-md);flex-wrap:wrap}
.gs-head .eyebrow{margin:0;margin-right:auto}
.gs-progress{font-size:var(--text-meta);color:var(--ink-2)}
.gs-done{color:var(--muted)}
.get-started .fr-step[data-done="true"] .btn{min-width:0}
@media (max-width:600px){.get-started .fr-step[data-done="true"] .btn{flex:none;margin-left:auto}}

/* Redesign spec sections 3 to 5: Add accounts hub, SimpleFIN wizard, manual form. Existing tokens only. */
.hub-grid{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-top:var(--space-md)}
@media (min-width:900px){.hub-grid{grid-template-columns:1fr 1fr}}
.hub-card{display:flex;flex-direction:column;gap:6px;margin:0}
.hub-card h3{font-size:var(--text-section);margin:0}
.hub-card h3:focus{outline:none}
.hub-card h3:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hub-card .m{margin:0;font-size:var(--text-meta);color:var(--muted);line-height:1.45}
.hub-actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:auto;padding-top:var(--space-sm)}
.hub-actions .btn{width:auto}
.hub-added{margin-top:var(--space-md)}
.back-link{display:inline-flex;align-items:center;min-height:var(--control-h-sm);font-size:var(--text-dense);color:var(--accent);font-weight:600} /* WCAG 2.5.8 target size */
.back-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sf-wizard{max-width:680px;margin:var(--space-md) auto 0}
.sf-wizard h2{font-family:var(--font-display);font-size:var(--text-section);margin:6px 0 4px}
.sf-wizard h2:focus{outline:none}
.sf-wizard h2:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sf-where{color:var(--muted)}
.sf-list{margin:var(--space-sm) 0;padding-left:1.4em;display:flex;flex-direction:column;gap:6px}
.sf-next{font-weight:600;margin-bottom:0}
.sf-open{margin:var(--space-sm) 0}
.sf-request{display:flex;flex-direction:column;gap:var(--space-sm);align-items:flex-start;margin-bottom:var(--space-md)}
.sf-request .field{width:100%;margin:0}
.sf-done-head{display:flex;align-items:center;gap:var(--space-sm)}
.sf-done-dot{background:var(--confirmed);border-color:var(--confirmed);color:var(--paper)}
.safe-panel{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--paper-alt);padding:12px 14px;margin:var(--space-sm) 0}
.safe-panel .safe-h{margin:0 0 6px;font-weight:600;font-size:var(--text-dense);color:var(--ink)}
.safe-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.safe-panel li{display:flex;gap:8px;align-items:baseline;font-size:var(--text-dense);color:var(--ink-2)}
.safe-panel.compact li{font-size:var(--text-meta)}
.safe-check{color:var(--confirmed);font-weight:700;flex:none}
.ma-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;margin-bottom:var(--space-md)}
.chip-btn{appearance:none;min-height:var(--control-h-sm);padding:0 12px;border:1px solid var(--field-border);border-radius:var(--radius-lg);background:var(--paper);color:var(--ink);font:500 13px/1 var(--font-body);cursor:pointer}
@media (hover:hover){.chip-btn:hover{background:var(--paper-alt)}}
.chip-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:600px){.chip-btn{min-height:var(--control-h-touch)}}
.ma-form h2{font-family:var(--font-display);font-size:var(--text-section);margin:0 0 4px}
.safe-panel p{margin:0 0 6px;font-size:var(--text-dense);color:var(--ink-2)}
.safe-panel p:last-child{margin-bottom:0}
.safe-panel a{display:inline-flex;align-items:center;min-height:var(--control-h-sm);color:var(--accent);font-weight:600}

/* Plain sign-in page (Alex legal 2026-11-13): plain summary above the button; the statement in one closed native
   expander whose label reads as a control (chevron + body-weight ink text, full-width 44px target). Tokens only. */
.plain-summary{margin:var(--space-md) 0 var(--space-lg);max-width:65ch}
.plain-summary p{margin:0 0 8px;font-size:var(--text-dense);line-height:1.55;color:var(--ink)}
.plain-summary p:last-child{margin-bottom:0}
.statement-expander{padding:0}
.statement-expander > summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;cursor:pointer;list-style:none;font-size:var(--text-dense);font-weight:600;color:var(--ink);border-radius:10px}
.statement-expander > summary::-webkit-details-marker{display:none}
.statement-expander > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.statement-expander > summary:hover{color:var(--accent)}
.statement-expander .chev{flex:none;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s ease}
.statement-expander[open] .chev{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.statement-expander .chev{transition:none}}
.statement-expander > section{padding:4px 18px 16px}
.statement-expander[open] > summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.statement-expander h2.st-part{font-family:var(--font-display);font-size:var(--text-dense);letter-spacing:0;text-transform:none;color:var(--ink);margin:12px 0 6px}
.statement-expander h3{font-family:var(--font-body);font-size:var(--text-caption);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.statement-expander .full-statement{margin-top:4px}
[data-statement-error]{margin:0 0 var(--space-md)}
/* Consent: the "In short:" note under each binding statement, smaller and muted. */
.consent-row .consent-gloss{margin:6px 0 0;font-size:var(--text-meta);line-height:1.5;color:var(--muted)}

/* Walk finding 6: the calm first-sync card and the "What you've entered" list (pre-sync Overview). */
.first-sync{border-left:1px solid var(--line)}
.first-sync h3,.entered h3{margin:2px 0 6px}
.first-sync p{margin:0}
.first-sync .small{margin-top:8px}
.en-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.en-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}
.en-row .t{flex:1 1 auto;font-weight:600;color:var(--ink)}
.en-row .v{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.en-row .en-go{display:inline-flex;align-items:center;min-height:24px;font-size:var(--text-meta)}

/* Design review 2026-11-13 (Daedalus): MUST-FIX 1, polish 7, 11, 12, 13, 16. Tokens only. */
.tour-card[data-cut="phone"] .intro-video,.intro-dialog[data-cut="phone"] .intro-video{background:var(--paper-alt)}
.hub-safe{grid-column:1/-1}
.hub-safe .safe-panel{margin:0}
@media (max-width:600px){.hub-actions .btn.primary{width:100%}}
@media (max-width:600px){.iv-time{display:none}}
.btn.ghost.consent-decline{font-weight:500}
.sf-cant{margin:var(--space-md) 0 0;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.sf-cant > summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;cursor:pointer;list-style:none;font-size:var(--text-dense);font-weight:600;color:var(--ink)}
.sf-cant > summary::-webkit-details-marker{display:none}
.sf-cant > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sf-cant .chev{flex:none;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s ease}
.sf-cant[open] .chev{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.sf-cant .chev{transition:none}}
.sf-cant > :not(summary){margin-left:14px;margin-right:14px}
.sf-cant > :last-child{margin-bottom:14px}
.sf-cant > p.small{margin-top:4px}

/* Re-walk 2026-11-13: Explore tiles and invite More options, closed expanders with the same chevron control. */
.invite-more > summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:var(--text-dense);font-weight:600;color:var(--ink)}
.invite-more > summary::-webkit-details-marker{display:none}
.invite-more > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.invite-more .chev{flex:none;width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s ease}
.invite-more[open] .chev{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.invite-more .chev{transition:none}}
.invite-more{margin:0 0 var(--space-md)}
.ma-form .auth-actions{align-items:stretch}
/* Gemini review 2 F2: Settings > Machine access, "Allow exporting data" beside Mint migration token */
.mig-export{display:flex;gap:8px;align-items:center;font-size:var(--text-dense);color:var(--ink);cursor:pointer}

/* Experience gate 2026-11-13 F1: the staff sign-in order, first instruction above the Google button */
.signin-staff-order{margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);border-left:3px solid var(--accent);background:var(--accent-bg);border-radius:var(--radius-md);font-size:var(--text-meta);line-height:1.5;color:var(--ink)}
.notice > div > p + p{margin-top:var(--space-sm)}
/* F4: on phone the round Ask button never sits on the More sheet's rows; it steps aside while the sheet is open */
@media (max-width:600px){ body:has(.more-sheet:not([hidden])) .ask-fab{display:none} }

/* ---- Front door 2026-11-14 (Brendan, V2 first-run test): intro first, then a calm one-column sign-in card.
   One alignment (left) for every line; existing tokens only. */
.front-card{text-align:left}
/* the h1 takes focus on mount only so screen readers start at the top; it is not interactive, so no ring */
.front-card h1[tabindex="-1"]:focus,.front-card h1[tabindex="-1"]:focus-visible{outline:none}
.front-intro .sub{margin:var(--space-sm) 0 var(--space-md)}
.front-intro .intro-frame{margin:0}
.front-intro[data-cut="phone"] .intro-video{aspect-ratio:9/16;max-height:min(60vh,calc(100svh - 400px));min-height:240px;margin:0 auto;width:auto;max-width:100%;background:var(--paper-alt)}
/* phone: the title stays on one line and Skip stays in the first screen */
@media (max-width:600px){.front-intro h1.brandmark{font-size:var(--text-section);line-height:1.2}.front-intro{padding-top:20px;padding-bottom:20px}.front-intro .front-foot{margin-top:var(--space-sm)}}
.front-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--space-sm);margin-top:var(--space-md)}
.front-foot .intro-switch{margin-right:auto}
.front-foot .intro-switch[hidden]{display:none}
.signin-card .plain-summary{margin:var(--space-md) 0}
.signin-card .signin-hint{margin:0 0 var(--space-sm);font-size:var(--text-dense);color:var(--ink-2);line-height:1.5}
.signin-card .small{margin:var(--space-sm) 0 0}
.signin-card .statement-links{justify-content:flex-start;align-items:center;gap:4px var(--space-md);margin:var(--space-md) 0}
.signin-card .statement-links .front-replay{min-height:24px;padding:0;font-size:var(--text-meta);font-weight:inherit;text-decoration:underline;text-underline-offset:2px}
@media (hover:hover){.signin-card .statement-links .front-replay:hover{background:transparent}}
.signin-card .error-msg{text-align:left}
/* ---- V3 "Ask for access" on the not-open notice (2026-11-14): one left-aligned block, button then one status line. */
.signin-card .ask-access{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);margin:var(--space-md) 0}
.signin-card .ask-access p{margin:0;line-height:1.5}
.signin-card .ask-access .ask-status{margin:0}
.signin-card .ask-access .ask-status:focus{outline:none}
.signin-card .ask-access .ask-status:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.signin-card .notice .link-btn{padding-left:0;padding-right:0}

/* Strict walk fix 5 (2026-11-14): every card after sign-in is one left-aligned column, like the sign-in card.
   Notes sit left; the primary and its secondary ghost button sit side by side (wrapping under on a phone), left. */
.auth-card .center,.auth-card .error-msg.center,.auth-card p.center{text-align:left}
.auth-card .auth-actions,.ma-form .auth-actions{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
.auth-card .auth-divider::before{display:none}

/* Strict walk fix 11 (2026-11-14): one content width on every tab (the planner's), so the left edge never jumps.
   Shell pages keep their reading measure by capping what sits inside the column, not the column itself. */
.col{max-width:none}
.col:not(.col-wide) > *{max-width:760px}

/* Strict walk fix 23 (2026-11-14): on a phone the round Ask button never sits on the last row. The page's main region
   reserves the button's height plus its gap, so the last row always scrolls clear of it. */
@media (max-width:899px){
  body.ask-mounted main.wrap:not(.with-planner),body.ask-mounted #planner-host{padding-bottom:calc(48px + var(--space-lg) + 16px)}
}

/* Strict walk fix 19 (2026-11-14): the seek bar gives way first, so all six controls fit one row in the 500px card. */
.iv-seek{flex:1 1 80px;min-width:0}
.iv-play{min-width:0}

/* Strict walk fix 3: the one SimpleFIN card spans the grid, like the trust panel under it. */
.hub-grid > #hub-banks{grid-column:1 / -1}

/* Polish 2 (re-walk 2026-11-14): on a phone the seek bar takes its own row above the four buttons,
   so Play, Mute, Captions and Full screen sit on one row (front card and Help dialog alike). The buttons share
   that row evenly; a smaller base padding keeps all four on it in the 285px front card, down to a 360px phone. */
@media (max-width:600px){.iv-seek{flex:1 1 100%;order:-1}.iv-btn{flex:1 1 auto;padding:0 var(--space-xs)}}

/* Polish 3 (re-walk 2026-11-14): the phone cut's poster fills its frame. The video box takes the frame's width
   (the height cap still keeps Skip in the first screen); the side space is inside the video, so it carries the
   poster's own title-card green until the first play, then the beige the phone cut is filmed on.
   --media-poster-bg is the colour baked into intro-poster-phone.png (= manifest theme_color), the same in both themes. */
.front-intro[data-cut="phone"] .intro-video,.intro-dialog[data-cut="phone"] .intro-video,.tour-card[data-cut="phone"] .intro-video{width:100%;object-fit:contain}
[data-cut="phone"] .intro-frame:not([data-started]) .intro-video{background:var(--media-poster-bg)}