/* Solar Split design system: components.
   Section 1 is the Modernist component layer from the approved mockup (verbatim values).
   Section 2 is the app-level components the prototype builds on top (nav, bottom tab bar,
   More sheet, segmented buttons, switch, slider, toast, statement dialog, meters).
   Class names are the public API: see docs/architecture/design-system.md. */

/* ── 1. Modernist layer ─────────────────────────────────────────────── */
.hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: var(--fs-2); line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-sm);
  transition: transform var(--dur-press) ease-out, background var(--dur-switch), color var(--dur-switch);
}
.btn:active { transform: scale(0.97); }
.btn svg { display: block; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } /* aria-disabled keeps keyboard focus on a button that is busy */
.btn-primary { background: var(--color-accent); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); } }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
@media (hover: hover) and (pointer: fine) { .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); } }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
@media (hover: hover) and (pointer: fine) { .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

.field > label {
  display: block; font-size: var(--fs-1); margin-bottom: 5px;
  color: var(--ink-2);
}
.input {
  width: 100%; min-height: 44px; padding: 6px 12px; font: inherit;
  font-size: var(--fs-3); color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border); border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* ── Menus and selects (founder rule 2026-10-21: every select, combobox and menu is themed, light and dark) ──
   Tokens: --menu-radius, --menu-shadow, --menu-mark (sun family: --sun-line on light, 3:1 on paper; --sun on dark), --menu-check and --menu-chevron.
   The chevron is a same-origin SVG file (chevron-light.svg, chevron-dark.svg): the strict CSP has no data: in img-src.
   Every <select> takes this with no class; combobox lists and menus in the apps use the same radius, shadow and 48px rows. */
:root {
  --menu-radius: 16px;
  --menu-shadow: 0 18px 40px -24px rgb(29 59 53 / 0.45);
  --menu-mark: var(--sun-line);
  --menu-check: var(--sun); /* the tick on the eucalyptus fill: a glyph, never text */
  --menu-chevron: url("chevron-light.svg");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --menu-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.75);
    --menu-mark: var(--sun);
    --menu-chevron: url("chevron-dark.svg");
  }
}
:root[data-theme="dark"] {
  --menu-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.75);
  --menu-mark: var(--sun);
  --menu-chevron: url("chevron-dark.svg");
}

/* closed control: the text input's height, radius, border and focus ring, a sun chevron, no native look (color-scheme is inherited from the theme) */
select, select.input {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 6px 48px 6px 12px; font: inherit; font-size: max(1rem, var(--fs-3)); cursor: pointer;
  color: var(--color-text); background-color: var(--color-surface);
  background-image: var(--menu-chevron); background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px;
  border: 1px solid var(--color-control-border); border-radius: var(--radius-sm);
}
@media (hover: hover) and (pointer: fine) { select:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } }
select:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
select:disabled { cursor: not-allowed; opacity: 0.6; }
/* fallback (no customizable select): the native list still takes the theme's colours, the checked option is eucalyptus */
select option { background: var(--color-surface); color: var(--color-text); }
select option:checked { background: var(--color-accent); color: var(--paper); }
/* open list: customizable select (appearance: base-select) is progressive enhancement */
@supports (appearance: base-select) {
  select, select.input, select::picker(select) { appearance: base-select; }
  select, select.input { background-image: none; padding-right: 14px; gap: var(--space-3); }
  select::picker-icon { content: ""; flex: none; width: 14px; height: 9px; color: var(--menu-mark); background: var(--menu-chevron) no-repeat center / 14px 9px; transition: rotate 0.2s ease-out; }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    margin-top: 6px; padding: 6px; color: var(--color-text); background: var(--color-surface);
    border: 2px solid var(--color-divider); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow);
  }
  select option {
    display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-size: var(--fs-3);
    background: transparent; border-radius: 10px;
  }
  select option:focus-visible { background: color-mix(in srgb, var(--color-text) 10%, transparent); outline: 2px solid var(--color-accent); outline-offset: -2px; }
  select option:checked { background: var(--color-accent); color: var(--paper); font-weight: 600; }
  select option::checkmark { color: var(--menu-check); }
  @media (hover: hover) and (pointer: fine) { select option:hover:not(:checked) { background: color-mix(in srgb, var(--color-text) 8%, transparent); } }
  @media (prefers-reduced-motion: reduce) {
    select::picker-icon { transition: none; }
    select:open::picker-icon { rotate: none; }
  }
}

.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-2); }
.radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); }
@media (hover: hover) and (pointer: fine) { .radio:hover .dot { border-color: var(--color-accent); } }
.radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.radio input:focus-visible + .dot { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: var(--fs-1); cursor: pointer; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--paper); }
.seg-opt:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.seg-opt:has(input:checked):active { background: var(--color-accent-700); }
@media (hover: hover) and (pointer: fine) { .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }

.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); }
.card-kicker { font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-3); line-height: 1.2; }
.card-body { margin: 0; font-size: var(--fs-1); color: var(--ink-2); flex: 1; }
.card-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--ink-3); }
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag { display: inline-flex; align-items: center; font-size: var(--fs-1); letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-outline-strong { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }
.tag-ink { background: var(--color-text); color: var(--color-bg); }
.tag-battery { background: var(--color-accent-800); color: var(--color-bg); }

.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-3); margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: var(--fs-2); }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.table th {
  text-align: left; font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
@media (hover: hover) and (pointer: fine) { .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); }
.dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: var(--fs-4); }
.dialog-body { font-size: var(--fs-2); color: var(--ink-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ── 2. App components ──────────────────────────────────────────────── */
/* skip link */
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--color-text); color: var(--color-bg); font-weight: 600; }
.skip-link:focus { top: 8px; }

/* brand mark + wordmark */
.brand { display: flex; align-items: center; gap: 10px; }
.brand svg { display: block; flex: none; }

/* pulse square ("live") */
.pulse-dot { display: block; flex: none; background: var(--color-accent); width: 8px; height: 8px; }
.pulse-dot--sm { width: 6px; height: 6px; }

/* desktop top navigation */
.appnav { position: sticky; top: 0; z-index: 20; background: var(--color-bg); padding: 0 var(--space-6); min-height: 64px; gap: var(--space-6); flex-wrap: wrap; --tab-h: 64px; }
.appnav .nav-brand { gap: 10px; margin-right: var(--space-2); }
.appnav-tabs { display: flex; gap: var(--space-4); align-self: stretch; margin-right: auto; flex-wrap: wrap; }
.nav a.appnav-tab {
  display: flex; align-items: center; min-height: var(--tab-h);
  font-size: var(--fs-2); font-weight: 400; color: var(--color-text);
  box-shadow: inset 0 -3px 0 transparent; text-decoration: none; white-space: nowrap;
}
.nav a.appnav-tab:active { color: var(--color-accent-700); }
@media (hover: hover) and (pointer: fine) { .nav a.appnav-tab:hover { color: var(--color-text); } }
.nav a.appnav-tab[aria-current='page'] { font-weight: 800; color: var(--color-accent-700); box-shadow: inset 0 -3px 0 var(--color-accent); }
.appnav--wrap { --tab-h: 48px; }
.appnav--wrap .appnav-tabs { order: 3; flex-basis: 100%; border-top: 1px solid var(--color-divider); }
.appnav-tag { margin-left: auto; }
.avatar-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* mobile top bar */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--color-bg); padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--color-divider); }
.topbar-title { font: 800 1.0625rem var(--font-heading); }
.topbar-status { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); }

/* bottom tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--color-divider); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--color-bg); }
.tabbar-item {
  appearance: none; border: 0; margin: 0; font: inherit; text-align: inherit; cursor: pointer;
  background: var(--color-bg); color: var(--color-text);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 10px; min-height: 48px; font-size: var(--fs-1);
  box-shadow: inset 0 3px 0 transparent; text-decoration: none;
}
.tabbar-item[aria-current='page'], .tabbar-item.is-active { color: var(--color-accent-700); box-shadow: inset 0 3px 0 var(--color-accent); }
@media (hover: hover) and (pointer: fine) { a.tabbar-item:hover { color: var(--color-text); } }
.tabbar-item:active { background: color-mix(in srgb, var(--color-text) 8%, var(--color-bg)); }
@media (hover: hover) and (pointer: fine) { a.tabbar-item[aria-current='page']:hover { color: var(--color-accent-700); } }

/* More sheet */
.scrim { position: fixed; inset: 0; z-index: 35; background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); overscroll-behavior: contain; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 36; background: var(--color-bg); box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--color-divider); }
.sheet-head { display: flex; align-items: center; margin-bottom: var(--space-2); }
.sheet-title { font: 800 1.0625rem var(--font-heading); }
.sheet-close { margin-left: auto; min-height: 44px; }
.sheet-row {
  appearance: none; border: 0; margin: 0; padding: 0; font: inherit; text-align: inherit; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: var(--space-3); min-height: 52px;
  border-top: 1px solid var(--color-divider); width: 100%; font-size: var(--fs-3); color: var(--color-text); text-decoration: none;
}
.sheet-row .arrow { margin-left: auto; }
.sheet-row[aria-current='page'] { color: var(--color-accent-700); }
@media (hover: hover) and (pointer: fine) { a.sheet-row:hover { color: var(--color-text); } }
.sheet-row:active { background: color-mix(in srgb, var(--color-text) 8%, transparent); }

/* buttons: app variants */
.btn-cta { background: var(--color-accent-700); color: var(--paper); min-height: 44px; min-width: 180px; justify-content: flex-start; }
@media (hover: hover) and (pointer: fine) { .btn-cta:hover { background: var(--color-accent-800); color: var(--paper); } }
.btn-cta:active { background: var(--color-accent-900); }
.btn-cta .arrow, .btn-lg .arrow { margin-left: auto; }
.btn-lg { min-height: 44px; }
.btn-ghost-strong { color: var(--color-accent-700); }
.btn-square { width: 40px; height: 40px; padding: 0; justify-content: center; }

/* segmented control built from buttons */
.seg button.seg-opt {
  border: 0; font: inherit; font-size: var(--fs-1); font-weight: 400; min-height: 40px; cursor: pointer;
  background: transparent; color: var(--color-text);
}
.seg button.seg-opt[aria-pressed='true'] { background: var(--color-text); color: var(--color-bg); font-weight: 800; }
@media (hover: hover) and (pointer: fine) { .seg button.seg-opt:hover { box-shadow: inset 0 -2px 0 var(--color-accent); } }
.seg button.seg-opt:focus-visible { outline-offset: -4px; }

/* inputs at touch size (16px stops iOS zoom) */
.input-touch { font-size: var(--fs-3); min-height: 44px; }
.input-num { text-align: right; }

/* range slider and switch */
.range { flex: 1; accent-color: var(--color-accent); min-height: 32px; }
.switch { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; align-self: flex-start; }
.switch-track { position: relative; width: 44px; height: 24px; background: var(--color-neutral-400); transition: background-color var(--dur-switch) ease; flex: none; }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--color-bg); transform: translateX(0); transition: transform var(--dur-switch) var(--ease-switch); }
.switch[aria-checked='true'] .switch-track { background: var(--color-accent-700); }
.switch[aria-checked='true'] .switch-knob { transform: translateX(20px); }
.switch-text { font: 800 0.9375rem var(--font-heading); }

/* toast */
.toast-region { position: fixed; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); z-index: 40; }
.toast { background: var(--color-text); color: var(--color-bg); padding: 12px 16px; font-size: var(--fs-2); box-shadow: var(--shadow-lg); display: flex; gap: 8px; align-items: center; white-space: nowrap; }

/* modal (statement) */
.modal-scrim { z-index: 60; overscroll-behavior: contain; }
.modal { position: fixed; z-index: 61; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; background: var(--color-bg); box-shadow: var(--shadow-lg); }
.modal-bar { display: flex; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); position: sticky; top: 0; background: var(--color-bg); }

/* chips, swatches and meters */
.swatch { display: block; flex: none; width: 10px; height: 10px; background: var(--sw, currentColor); }
.swatch--12 { width: 12px; height: 12px; }
.swatch--8 { width: 8px; height: 8px; }
.meter { display: flex; }
.meter > * { min-width: 0; transform-origin: left; }
.meter--split { gap: 2px; }
.meter > .meter-right { transform-origin: right; }
.meter-seg { flex: var(--flex, 1) 1 0%; background: var(--sw); }

/* labels */
.label-caps { font-size: var(--fs-1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-800); }
.label-caps--tight { letter-spacing: 0.06em; }
.note { font-size: var(--fs-1); color: var(--color-neutral-800); }
.note-13 { font-size: var(--fs-1); color: var(--color-neutral-800); }
.num { font-variant-numeric: tabular-nums; }
.kicker-accent { color: var(--color-accent-700); }

/* chart tooltip: a blurred paper pane that follows the pointer (behaviour in charts.js attachChartTooltip) */
.chart-tip {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; width: max-content; max-width: min(300px, calc(100vw - 24px));
  padding: 14px 16px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 14%, transparent), 0 18px 48px color-mix(in srgb, var(--color-text) 22%, transparent), 0 2px 8px color-mix(in srgb, var(--color-text) 8%, transparent);
  font: 0.875rem/1.35 var(--font-body); color: var(--color-text); opacity: 0; visibility: hidden; will-change: transform, opacity;
}
.tip-title { font: 800 0.9375rem var(--font-heading); letter-spacing: -0.01em; }
.tip-sub { color: var(--color-neutral-700); font-size: var(--fs-1); margin-top: 1px; }
.tip-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent); }
.tip-group + .tip-group { margin-top: 12px; }
.tip-gh { display: flex; justify-content: space-between; gap: 24px; font-weight: 600; font-size: var(--fs-1); margin-bottom: 6px; }
.tip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.tip-sw { width: 10px; height: 10px; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 20%, transparent); }
.tip-label { color: var(--color-neutral-800); flex: 1; }
.tip-num { font-variant-numeric: tabular-nums; }
.tip-val { font-weight: 600; padding-left: 12px; }

/* ── 2b. App shell (redesign B2 S1) ──────────────────────────────────────
   Mockup C chrome for the signed-in app and its gates, taken from the B1 previews (docs/mockups/redesign-c/app-previews).
   Scoped to .app-shell, and inside it to the chrome (header, top bar, tab bar, sheet) and the gates only: the marketing demo shares the
   .appnav, .tabbar and .sheet classes and keeps its look until it opts in, and the screens between the chrome are rebuilt slice by slice.
   Tokens only: --sky is the page, --paper the raised surface, --ink the strong fill, --line the hairline. */
.app-shell { --fill: color-mix(in srgb, var(--ink) 9%, var(--paper)); } /* a quiet fill that reads on the page and on a card in both themes */
.gate .btn { border-radius: 999px; min-height: 44px; font: 600 var(--fs-2) / 1.2 var(--font-body); }
.gate .btn-primary, .gate .btn-cta { background: var(--ink); color: var(--sky); }
.gate .btn-secondary { background: var(--paper); border-color: var(--color-control-border); }
.gate .btn-primary, .gate .btn-secondary, .gate .btn-cta { padding-inline: var(--space-4); }
.gate .btn-primary:active, .gate .btn-cta:active { background: var(--ink-2); }
.gate .btn-secondary:active { background: var(--fill); }
.app-shell .sheet .btn-ghost-strong { color: var(--ink); }
.app-shell .appnav .tag, .app-shell .sheet .tag, .gate .tag { border-radius: 999px; padding: 4px 12px; font-weight: 600; }
.app-shell .appnav .tag-neutral, .app-shell .sheet .tag-neutral { background: var(--fill); color: var(--ink-2); }
.app-shell .appnav-status .pulse-dot, .app-shell .topbar-status .pulse-dot { border-radius: 50%; background: var(--c-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 22%, transparent); }
@media (hover: hover) and (pointer: fine) {
  .gate .btn-primary:hover, .gate .btn-cta:hover { background: var(--ink-2); color: var(--sky); }
  .gate .btn-secondary:hover { background: var(--fill); color: var(--ink); }
}

/* header (desktop): brand, one pill of tabs, hub status, account */
.app-shell .appnav { gap: var(--space-4); flex-wrap: nowrap; min-height: 0; padding: var(--space-3) max(var(--gut), var(--safe-right)) var(--space-3) max(var(--gut), var(--safe-left)); border-bottom: 0; --tab-h: 44px; }
.app-shell .appnav .nav-brand { gap: 10px; margin-right: var(--space-2); font: 700 var(--fs-4) var(--font-heading); letter-spacing: -0.015em; white-space: nowrap; }
.app-shell .appnav-tabs { flex: 0 1 auto; align-self: auto; gap: 2px; padding: 4px; flex-wrap: nowrap; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
.app-shell .nav a.appnav-tab { min-height: 44px; padding: 0 11px; border-radius: 999px; font-size: var(--fs-2); font-weight: 600; color: var(--ink-2); box-shadow: none; }
.app-shell .nav a.appnav-tab[aria-current='page'] { background: var(--ink); color: var(--sky); font-weight: 600; box-shadow: none; }
.app-shell .nav a.appnav-tab:active { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); transform: scale(0.97); }
.app-shell .nav a.appnav-tab[aria-current='page']:active { background: var(--ink-2); color: var(--sky); }
.app-shell .appnav-tag { margin-left: 0; }
.app-shell .appnav-status, .app-shell .topbar-status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.app-shell .appnav-status { min-height: 44px; }
.app-shell .avatar-btn { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--paper); border-color: var(--line); color: var(--ink); font: 700 var(--fs-2) var(--font-heading); }
.app-shell .appnav--wrap { flex-wrap: wrap; }
.app-shell .appnav--wrap .appnav-tabs { order: 3; flex-basis: auto; margin-right: auto; }
@media (max-width: 899.98px) { .app-shell .appnav--wrap .appnav-tabs { flex-wrap: wrap; border-radius: var(--radius-md); } } /* a tablet: the tabs may take two lines, so the pill becomes a card */
.app-shell .appnav--wrap .nav-brand { margin-right: auto; }
@media (hover: hover) and (pointer: fine) {
  .app-shell .nav a.appnav-tab:not([aria-current='page']):hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
  .app-shell .avatar-btn:hover { background: var(--fill); }
}

/* top bar (phone) */
.app-shell .topbar { gap: 10px; padding: calc(var(--safe-top) + var(--space-3)) max(var(--gut), var(--safe-right)) var(--space-2) max(var(--gut), var(--safe-left)); border-bottom: 0; }
.app-shell .topbar-title { font: 700 var(--fs-4) var(--font-heading); letter-spacing: -0.015em; }
.app-shell .topbar-status { margin-left: auto; }

/* tab bar (phone): a floating card above the safe area */
.app-shell .tabbar { left: max(var(--space-3), var(--safe-left)); right: max(var(--space-3), var(--safe-right)); bottom: max(var(--space-3), var(--safe-bottom)); grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 5px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.app-shell .tabbar-item { min-height: 52px; padding: 6px 0; justify-content: center; gap: 2px; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font-size: var(--fs-1); font-weight: 600; box-shadow: none; }
.app-shell .tabbar-item svg { width: 22px; height: 22px; }
.app-shell .tabbar-item[aria-current='page'], .app-shell .tabbar-item.is-active { background: var(--ink); color: var(--sky); box-shadow: none; }
.app-shell .tabbar-item:active { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.app-shell .tabbar-item[aria-current='page']:active, .app-shell .tabbar-item.is-active:active { background: var(--ink-2); }
.app-shell.app--tabbed { padding-bottom: calc(var(--space-16) + var(--space-8) + var(--safe-bottom)); }
.app-shell.app--tabbed .toast-region { bottom: calc(var(--space-16) + var(--space-8) + var(--safe-bottom)); }

/* More sheet (phone): a rounded sheet over a scrim; the scrim is dark in both themes */
.app-shell .scrim { background: color-mix(in srgb, var(--ink) 45%, transparent); background: light-dark(color-mix(in srgb, var(--ink) 45%, transparent), color-mix(in srgb, var(--sky) 70%, transparent)); }
.app-shell .sheet { max-height: 85dvh; overflow-y: auto; padding: var(--space-4) max(var(--space-4), var(--safe-right)) calc(var(--space-4) + var(--safe-bottom)) max(var(--space-4), var(--safe-left)); background: var(--paper); border-top: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.app-shell .sheet-head { margin-bottom: var(--space-1); }
.app-shell .sheet-title { font: 700 var(--fs-5) var(--font-heading); letter-spacing: -0.015em; }
.app-shell .sheet-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); font-size: var(--fs-2); color: var(--ink-2); overflow-wrap: anywhere; }
.app-shell .sheet-who b { color: var(--ink); font-weight: 600; }
.app-shell .sheet-row { min-height: 56px; padding: 0 var(--space-3); gap: var(--space-4); border-top: 0; border-radius: var(--radius-sm); font-weight: 600; color: var(--ink); }
.app-shell .sheet-row svg { flex: none; width: 22px; height: 22px; color: var(--ink-2); }
.app-shell .sheet-row .arrow { color: var(--ink-3); }
.app-shell .sheet-row[aria-current='page'] { background: var(--fill); color: var(--ink); }
.app-shell .sheet-row[aria-current='page'] .arrow { color: var(--ink-2); }
.app-shell .sheet-row:active { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* More sheet (phone): a grabber to drag, and the page behind stays put while a sheet is open */
.app-shell .sheet-grab { display: flex; justify-content: center; padding: var(--space-1) 0 var(--space-3); margin-top: calc(var(--space-2) * -1); touch-action: none; cursor: grab; }
.app-shell .sheet-grab::before { content: ''; width: 40px; height: 5px; border-radius: 999px; background: var(--ink-3); opacity: 0.5; }
.app-shell .sheet [data-drag] { touch-action: none; }
@media (max-width: 759.98px) { :root:has(.app-shell .sheet), :root:has(.app-shell .sheet) body { overflow: hidden; } }

/* ── Question and help patterns (first-sign-in setup; built only from the tokens above) ── */
/* a list of exclusive answers: each row is a native radio inside a label, so keyboard and screen readers behave */
.choices { display: flex; flex-direction: column; gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.choices > legend { padding: 0; margin-bottom: var(--space-2); }
.choice { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); min-height: 52px; padding: var(--space-3) var(--space-4); cursor: pointer; background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choice-mark { flex: none; width: 18px; height: 18px; margin-top: 2px; border: 1.5px solid var(--color-divider); background: var(--color-bg); }
.choice:has(input[type='radio']) .choice-mark { border-radius: 50%; } /* the same round dot as .radio; a tick box stays square */
@media (hover: hover) and (pointer: fine) { .choice:hover { border-color: var(--color-accent); } }
.choice:has(input:checked) { border-color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-text); }
.choice:has(input:checked) .choice-mark { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-title { font-weight: 600; font-size: var(--fs-2); }
.choice-desc { font-size: var(--fs-1); color: var(--color-neutral-800); }
.choice--unsure { background: var(--color-surface); }
.choice--check { align-items: center; }
.choice--check:has(input:checked) .choice-mark { box-shadow: inset 0 0 0 4px var(--color-bg); }

/* the help panel: a bottom sheet on a phone, a side drawer from 760px */
.sheet--help { max-height: 88dvh; overflow: auto; overscroll-behavior: contain; }
@media (min-width: 760px) {
  .sheet--help { left: auto; top: 0; bottom: 0; width: min(480px, 100vw); max-height: none; border-top: 0; border-left: 2px solid var(--color-divider); padding-bottom: var(--space-6); }
}
.help-h { font: 800 1rem var(--font-heading); margin: var(--space-6) 0 var(--space-2); }
.help-p { margin: 0 0 var(--space-3); font-size: var(--fs-2); line-height: 1.5; }
.help-list { margin: 0 0 var(--space-3); padding-left: var(--space-6); font-size: var(--fs-2); line-height: 1.5; }
.help-list li + li { margin-top: var(--space-2); }
.help-fig { margin: var(--space-3) 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-divider); }
.help-fig figcaption { margin-top: var(--space-2); font-size: var(--fs-1); color: var(--color-neutral-800); }
.help-diagram { display: block; width: 100%; height: auto; max-height: 220px; color: var(--color-text); }
.help-diagram .d-line { fill: none; stroke: var(--color-text); stroke-width: 1.5; }
.help-diagram .d-fill { fill: var(--color-neutral-200); stroke: var(--color-text); stroke-width: 1.5; }
.help-diagram .d-accent { fill: var(--color-accent); stroke: var(--color-text); stroke-width: 1.5; }
.help-diagram .d-hatch { fill: var(--color-neutral-300); stroke: var(--color-text); stroke-width: 1; }
.help-diagram .d-text { fill: var(--color-text); font-family: var(--font-body); }
.help-checked { font-size: var(--fs-1); color: var(--color-neutral-800); }
.help-default { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-divider); background: var(--color-surface); }

/* ── 3. Mobile-native base (redesign A1) ───────────────────────────────
   Taps are instant and never select text; fixed bars pad by the safe areas (tokens --safe-*). */
button, .btn, [role="tab"], [role="button"], .seg-opt, .tabbar-item, .sheet-row, .appnav-tab { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tabbar { padding-left: var(--safe-left); padding-right: var(--safe-right); }

/* Theme toggle (theme.js): one 44px button that cycles System, Light, Dark. It sits in the slot a page provides (the marketing nav today). */
.theme-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: transparent; color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--dur-switch); }
@media (hover: hover) and (pointer: fine) { .theme-toggle:hover { background: var(--color-neutral-200); } }
.theme-toggle:active { background: var(--color-neutral-300); transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } .theme-toggle:active { transform: none; } }
@media (min-width: 760px) and (max-width: 1239.98px) { .appnav { gap: var(--space-4); } } /* room for the theme toggle: the bar still fits on one row from 1100px */

/* Touch: on a phone, or with any coarse pointer, every control is at least 44px each way (mobile-native rule, redesign brief). Links inside a sentence stay inline. Scoped to the app so the marketing pages keep their sizes. */
@media (max-width: 759.98px), (pointer: coarse) {
  .app-shell .btn, .app-shell .seg-opt, .app-shell .seg button.seg-opt, .app-shell .range { min-height: 44px; }
  .app-shell .btn-square { width: 44px; height: 44px; }
  .app-shell .check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; }
}