/* ============================================================================================
   The bridge: the app pages (login, dashboard, admin, cart, the research console, the payment test)
   keep their bodies and scripts, and wear the new shell. The old stylesheet loads first, then the new
   one, then this: the old tokens are re-pointed at the new ones, so every old component takes the new
   colours in both themes, and the old header, footer and band are gone.
   ============================================================================================ */
:root {
  --mist: var(--paper-top); --line-soft: var(--line);
  --accent: var(--lime); --accent-hover: #C2E61F; --accent-tint: color-mix(in srgb, var(--lime) 14%, var(--paper)); --on-accent: var(--on-lime); --accent-ink: var(--ink);
  --surface: var(--paper); --surface-raised: var(--card); --surface-alt: var(--paper-top);
  --charcoal: var(--ink-2); --gray: var(--ink-3); --text: var(--ink); --text-soft: var(--ink-2); --text-muted: var(--ink-3);
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --shadow-soft: none;
  --font-disp: var(--sans); --font-body: var(--sans); --container: 1200px;
}
:root[data-theme="dark"] { --accent-ink: var(--lime); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent-ink: var(--lime); } }
body { font-family: var(--sans); background: var(--paper); color: var(--ink); }
/* the old shell is replaced, not restyled */
.site-header, .site-footer, .brand-band, .research-footer, .market-picker, .theme-toggle { display: none !important; }
/* the old page head sits under the new masthead */
main > .section:first-child, main > .section-tight:first-child { padding-top: clamp(28px, 4vw, 56px); }
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section-tight { padding: clamp(36px, 5vw, 72px) 0; }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.02; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.card, .login-card, .dash-panel, .wiz-panel, .rp-card, .memo, .credit-pill { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
.btn { border-radius: 999px; font-family: var(--sans); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.btn-primary { background: var(--lime); color: var(--on-lime); border: 1px solid var(--lime); }
.btn-primary:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-secondary:hover { border-color: var(--ink); }
input, select, textarea { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-family: var(--sans); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--lime); outline-offset: 1px; border-color: var(--ink); }
.dash-tab { border-radius: 999px; font-family: var(--sans); font-weight: 500; color: var(--ink-2); }
.dash-tab.active, .dash-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.hint { color: var(--ink-3); }
table { border-color: var(--line); } th, td { border-color: var(--line); }
a { color: inherit; }
/* the research console's own footer, if any, gives way to the site footer */
.rp-footer, .research-nav { display: none !important; }
/* the old sheet's .split is a two-column grid; the new shell uses .split for word animation on headings */
h1.split, h2.split, h3.split, .foot .split, .mast .split { display: block; grid-template-columns: none; gap: 0; }
/* the shell's own buttons keep the shell's shape */
.mast .btn, .foot .btn, .callbar .btn { border-radius: 8px; min-height: 48px; padding: 0 22px; font-size: 15px; font-weight: 500; width: auto; margin-top: 0; }
/* tap targets in the old bodies */
.btn-mini { min-height: 40px; padding: 0 16px; }
.disclosure { min-height: 44px; display: inline-flex; align-items: center; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }