/*
 * MyNetWorth shared theme — single source of truth for the colour
 * palette and the body background fade. Linked by every page in the
 * product (the SPA shell at index.html, plus the legal/contact static
 * pages). Edits here propagate everywhere; nothing should redefine
 * :root tokens or body { background } in individual pages.
 *
 * Page-specific layout (.app width, .container width, .section
 * styling, etc.) stays in the per-page <style> block — only the
 * cross-cutting theme lives here.
 */

:root {
    /* No-pin / "Follow system" default: let the browser render native
       form controls (text inputs, selects, checkboxes, the OTP digit
       boxes, the broker-search field) per the OS preference. The
       :root[data-theme=...] blocks below PIN this to a single scheme
       so a user who picks Light/Dark gets matching native controls —
       without that pin, color-scheme stays OS-driven and inputs keep
       the system dark styling even when the app is pinned Light. */
    color-scheme: light dark;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --accent: #00a2e8;
    --accent-hover: #0082ba;
    --accent-soft: rgba(0, 162, 232, 0.08);
    --positive: #047857;
    --negative: #b91c1c;

    /* Aliases for shared-CSS variable names (supercala-app-tokens.css
       and supercala-topbar.css use --bg-elev-2 / --fg-dim / etc.).
       MyNetWorth has its own naming for historical reasons; pointing
       the shared names at MyNetWorth's surface/text tokens makes the
       apps-grid popover, shared topbar styles, and any future shared
       widget honour the user's theme instead of falling back to the
       hex defaults baked into the shared CSS. */
    --bg-elev: var(--surface);
    --bg-elev-2: var(--surface);
    --bg-elev-3: var(--border);
    --fg: var(--text);
    --fg-dim: var(--muted);
    --fg-faint: var(--muted);
    --accent-strong: var(--accent-hover);
    --accent-fg: #ffffff;
    /* Page fade — top-down SuperCala blue → muted → transparent,
       beginning at the very top of the viewport (the topbar panel's
       --surface fill sits on top of it, so the fade reads only in the
       gutter beside the column and below the topbar). Same shape as
       the editor apps' ``--bg-fade``. */
    --bg-fade: linear-gradient(
        to bottom,
        rgba(0, 162, 232, 0.24),
        rgba(195, 195, 195, 0.16) 400px,
        transparent 800px
    );
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --surface: #1e293b;
        --text: #f1f5f9;
        --muted: #94a3b8;
        --border: #334155;
        --bg-fade: linear-gradient(
            to bottom,
            rgba(0, 162, 232, 0.16),
            rgba(48, 54, 61, 0.06) 400px,
            transparent 800px
        );
        /* Shared-CSS aliases (see :root block for rationale). */
        --bg-elev: var(--surface);
        --bg-elev-2: var(--surface);
        --bg-elev-3: var(--border);
        --fg: var(--text);
        --fg-dim: var(--muted);
        --fg-faint: var(--muted);
    }
}
/* Explicit data-theme overrides — let the user pin a choice from the
   Settings modal. localStorage drives ``html.dataset.theme`` (the
   :root element); OS preference is the default when no choice is
   saved. :root[data-theme=...] beats the :root + @media defaults on
   specificity AT THE SAME ELEMENT, so the user's pick wins cleanly
   regardless of OS-level changes.

   Previously these rules targeted ``body[data-theme=...]``, which
   set vars on the body element while @media (prefers-color-scheme:
   dark) :root set them on html. The two rules targeted different
   elements, so they didn't compete on specificity — only on
   inheritance. In practice that meant "switch to Light while OS is
   Dark" left html's --bg dark, and any surface that fell back through
   html (canvas backdrop visible past body's min-height, scroll
   overscroll regions, some browser quirks with CSS-var inheritance
   into descendants) kept the dark colors. Targeting :root means the
   user's pin overrides the @media block on the same element, full
   stop. See app.js / index.html inline-script: both now set
   ``document.documentElement.dataset.theme``. */
:root[data-theme="light"] {
    /* Pin native form controls to light. Without this, color-scheme
       stays "light dark" (OS-driven) and the browser keeps painting
       the OTP digit boxes, the SnapTrade broker-search input, native
       <select>s and checkboxes with the system dark styling even
       though the app is pinned Light. */
    color-scheme: light;
    --bg: #f8fafc;
    --surface: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --bg-fade: linear-gradient(
        to bottom,
        rgba(0, 162, 232, 0.24),
        rgba(195, 195, 195, 0.16) 400px,
        transparent 800px
    );
    /* Re-pin shared-CSS aliases at this scope so the apps-grid popover
       and any other shared widget pick them up regardless of dynamic
       var() resolution edge cases. The :root definitions DO cascade
       dynamically per spec, but explicitly setting them at the
       body[data-theme] level beats every browser quirk. */
    --bg-elev: #ffffff;
    --bg-elev-2: #ffffff;
    --bg-elev-3: #eef2f6;
    --fg: #0f172a;
    --fg-dim: #64748b;
    --fg-faint: #94a3b8;
}
:root[data-theme="dark"] {
    /* Pin native form controls to dark — mirror of the light block.
       Keeps inputs / selects / checkboxes dark even when the user's
       OS preference is light. */
    color-scheme: dark;
    --bg: #0f172a;
    --surface: #1e293b;
    --text: #f1f5f9;
    --muted: #94a3b8;
    --border: #334155;
    --bg-fade: linear-gradient(
        to bottom,
        rgba(0, 162, 232, 0.16),
        rgba(48, 54, 61, 0.06) 400px,
        transparent 800px
    );
    /* See light block — explicit shared aliases at :root scope so the
       apps-grid popover honours the user's dark-mode pick. */
    --bg-elev: #1e293b;
    --bg-elev-2: #1e293b;
    --bg-elev-3: #334155;
    --fg: #f1f5f9;
    --fg-dim: #94a3b8;
    --fg-faint: #94a3b8;
}

* { box-sizing: border-box; }

/* Apply the fade + base color to BOTH html and body so the canvas
   under body (visible during overscroll, past body's min-height, and
   under any transparent regions) inherits the theme. Without this,
   "Light pinned while OS is Dark" left the html canvas dark and any
   surface that fell through body (mobile overscroll, modal backdrop
   transparent edges, sub-100vh content) read as dark even though
   body itself was light. */
html {
    background: var(--bg);
    background-attachment: fixed;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    /* Top-down fade beginning at the very top of the viewport. The
       topbar panel's surface fill sits on top of it; the fade shows
       in the column gutter and below the topbar. Fixed-attachment so
       long pages (terms, privacy) don't tile it on scroll. */
    background: var(--bg-fade), var(--bg);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Topbar — visually a sibling of the dashboard's other panels
   (.section, .breakdown, .hero): same --surface background, same
   1px --border, same 16px radius. The brand mark + stacked product
   name sit on the left and the theme toggle + account controls
   anchor far right via ``margin-left: auto`` on .topbar-right —
   matching the JsonEditor / PdfFiller / ChartLab layout, just
   wrapped in a card instead of a rule-divided strip. */
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
}
.brand {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--text);
}
.brand-mark { width: 28px; height: 28px; display: block; border-radius: 6px; }
.brand-stack { display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-text { font-weight: 700; font-size: 15px; }
.brand-studio {
    font-weight: 400; font-size: 9.5px; letter-spacing: 0.4px;
    color: var(--muted); text-transform: uppercase; margin-top: 1px;
}
.topbar-right {
    display: flex; gap: 8px; align-items: center;
    margin-left: auto;
}
/* Wrapper for the logged-out icon pair (sign-in + sign-up). The
   render() function applies class="hidden" to this when state.user
   exists. The class is the SAME contract the shared topbar CSS uses
   in fragilistic_shared/static/css/supercala-topbar.css — but
   MyNetWorth doesn't load that shared file, so the rule has to live
   here too. Without it, signed-in users saw the sign-in / sign-up
   icons rendered next to their settings + sign-out icons. */
#signed-out-controls.hidden { display: none; }

/* Demo speech-bubble entry animation. Used by the logged-out demo
   dashboard to introduce each category on first expand. */
@keyframes demoBubbleIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Demo tour: highlight the section the audio narrator is currently
   talking about. Soft accent glow + 1px border lift, no layout shift. */
.section.demo-tour-highlight {
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.45), 0 8px 24px rgba(14, 165, 233, 0.15);
    transition: box-shadow 240ms ease-out;
}

/* Tiered upgrade panel. Currently one card (MyNetWorth Pro) — the
   Financial Tools bundle tier is hidden while it's in beta. The
   .upgrade-tier--featured accent style is kept for when it returns. */
.upgrade-tiers {
    display: grid;
    /* auto-fit collapses empty tracks, so this lays out cleanly with
       either one tier (bundle hidden in beta) or two side-by-side. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.upgrade-tier {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}
.upgrade-tier--featured {
    border-color: rgba(14, 165, 233, 0.55);
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.25);
}
.upgrade-tier-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.upgrade-tier-name { font-weight: 600; font-size: 15px; }
.upgrade-tier-tag { color: var(--muted); font-size: 12px; }
.upgrade-tier-perks {
    margin: 0 0 12px;
    padding-left: 18px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.55;
}