/* =============================================================================
   THEME TOKENS — the single source of truth for all page colors.
   Dark is the default (:root). Each other theme is ONE block that only remaps
   these tokens. Every component elsewhere uses var(--token), never a raw hex,
   so adding a theme = add one block below (see the commented PINK example), and
   retinting (e.g. work-mode accent orange -> blue) is a one-line change here.
   Included by home / collect / stats before their inline <style>.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --bg:            #0f0f0f;                 /* page background */
  --grid:          rgba(74,222,128,0.06);   /* faint grid overlay on the bg */
  --surface:       rgba(0,0,0,0.6);         /* cards / tables */
  --surface-2:     rgba(0,0,0,0.4);         /* zebra / sub-rows / insets */
  --surface-raise: #0d1117;                 /* modals, plan cards (solid raised) */
  --header-bg:     rgba(0,0,0,0.6);         /* table header row */
  --hover:         rgba(74,222,128,0.08);   /* row hover */

  /* ---- borders ---- */
  --border:        rgba(74,222,128,0.25);   /* default hairline */
  --border-strong: rgba(74,222,128,0.4);    /* inputs, emphasised edges */
  --shadow:        rgba(0,0,0,0.45);         /* drop shadow color */

  /* ---- text ---- */
  --text:          #e0e0e0;                 /* body text */
  --text-strong:   #ffffff;                 /* headings / key numbers */
  --text-muted:    #888888;                 /* labels, secondary */
  --text-faint:    #666666;                 /* tertiary / placeholders */

  /* ---- brand + accent ---- */
  --accent:        #ff9f43;                 /* orange accent (links, active, arrows) */
  --accent-fg:     #000000;                 /* text on an accent-filled surface */
  --accent-soft:   rgba(255,159,67,0.14);   /* accent tint (hover fills) */
  --accent-border: rgba(255,159,67,0.4);    /* accent-colored border */
  --green:         #4ade80;                 /* brand green (value, prices, success) */

  /* ---- shared modal accent (settings modal + the shared confirm/alert dialog) ----
     One token drives every modal button, border, tab pill and tick, so the modals
     stay identical across home/collect/stats. Green reads fine on the dark card;
     work-mode swaps it to the theme orange because green-on-white is muddy.
     --ui-accent-rgb is the same colour as an r,g,b triplet so the many different
     tint alphas can stay exactly as they are: rgba(var(--ui-accent-rgb),.12). */
  --ui-accent:     var(--green);
  --ui-accent-rgb: 74,222,128;
  --cyan:          #22d3ee;                 /* secondary accent */
  --pixel:         #ffd400;                 /* Pixel grader color (theme-independent) */
  --watermark:     rgba(255,212,0,0.38);    /* VGPOPREPORT chart watermark — retro yellow, subtle */

  /* ---- semantic ---- */
  --danger:        #ff6b6b;                 /* loss / error */
  --fab:           var(--green);            /* floating scroll-to-top button (green on dark/retro) */
  --gold:          #ffd166;                 /* A++ "coming soon" accent */
  --modal-field:   #161b22;                 /* account-modal input / toggle-track fill */
  --modal-field-bd: #333333;                /* account-modal input border */

  /* ---- legacy aliases (existing var(--neon-*) uses keep working + auto-follow the
     theme). NOTE: these MUST be repeated verbatim in every theme block below —
     a custom property is computed on its declaring element, so an alias declared
     only here would freeze to :root's value in other themes. ---- */
  --main-text:   var(--text);
  --neon-green:  var(--green);
  --neon-orange: var(--accent);
  --neon-cyan:   var(--cyan);
  --dark-bg:     var(--bg);
  --grid-color:  var(--grid);
}

/* ===================== LIGHT ("work-mode") ================================ */
body.work-mode {
  --bg:            #f7f8fa;
  --grid:          transparent;
  --surface:       #ffffff;
  --surface-2:     #fafbfc;
  --surface-raise: #ffffff;
  --header-bg:     #eef1f5;
  --hover:         #eef1f5;

  --border:        #e5e7eb;
  --border-strong: #d3d9e0;
  --shadow:        rgba(15,23,42,0.10);

  --text:          #333333;
  --text-strong:   #111111;
  --text-muted:    #666666;
  --text-faint:    #999999;

  --accent:        #d2691e;
  --accent-fg:     #ffffff;
  --accent-soft:   rgba(210,105,30,0.12);
  --accent-border: rgba(210,105,30,0.5);
  --green:         #16a34a;
  --ui-accent:     var(--accent);           /* modals go orange on white — see :root */
  --ui-accent-rgb: 210,105,30;              /* must track --accent (#d2691e) */
  --cyan:          #6b7280;
  --pixel:         #ffd400;
  --watermark:     rgba(34,150,80,0.5);     /* chart watermark — muted green on light, subtle */

  --danger:        #dc2626;
  --fab:           var(--accent);           /* scroll-to-top button turns orange on work-mode */
  --gold:          #b8860b;                 /* darker gold so it's readable on the light modal */
  --modal-field:   #f1f3f5;                 /* light input / toggle-track fill */
  --modal-field-bd: #d3d9e0;                /* light input border */

  /* legacy aliases MUST be repeated in every theme block: a custom property's
     value is computed on the element it's declared on, so an alias declared only
     in :root would keep :root's (dark) value even here. Repeating them re-resolves
     var(--bg) etc. against THIS block's tokens. */
  --main-text:   var(--text);
  --neon-green:  var(--green);
  --neon-orange: var(--accent);
  --neon-cyan:   var(--cyan);
  --dark-bg:     var(--bg);
  --grid-color:  var(--grid);
}

/* ===================== add a theme in ONE block ==========================
body.pink-mode {
  --bg:#1a0d14; --grid:rgba(236,72,153,0.06); --surface:rgba(0,0,0,0.5);
  --surface-2:rgba(0,0,0,0.35); --surface-raise:#241019; --header-bg:rgba(0,0,0,0.5);
  --hover:rgba(236,72,153,0.10); --border:rgba(236,72,153,0.3);
  --border-strong:rgba(236,72,153,0.5); --shadow:rgba(0,0,0,0.5);
  --text:#f5dced; --text-strong:#ffffff; --text-muted:#c99; --text-faint:#a77;
  --accent:#ec4899; --accent-fg:#fff; --accent-soft:rgba(236,72,153,0.14);
  --accent-border:rgba(236,72,153,0.5); --green:#4ade80; --cyan:#22d3ee;
  --pixel:#ffd400; --danger:#ff6b6b; --fab:var(--accent); --gold:#ffd166; --modal-field:#241019; --modal-field-bd:#3a1f2a;
  --main-text:var(--text); --neon-green:var(--green); --neon-orange:var(--accent);
  --neon-cyan:var(--cyan); --dark-bg:var(--bg); --grid-color:var(--grid);
}
   (then: setMode/toggle sets body.className to the theme — nothing else changes)
   ========================================================================= */

/* ---- Nav bar: shared by every page (index/collect/stats/sales), theme-aware via tokens.
   HTML is duplicated per page (HOME · RECENT SALES · COLLECT · STATS · account), styling lives
   here so all four match. ------------------------------------------------------------------- */
/* ── Top nav: an arcade "select" rail. The tabs join into one framed bar (no doubled borders); the
   active tab lights up with a glowing neon under-bar — the select-screen cue — and A++ renders in
   gold, the one meaningful accent since gold = the premium tier everywhere else in the app. */
.nav-bar {
    display: flex; align-items: stretch; margin-bottom: 22px;
    border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
    background: linear-gradient(180deg, rgba(74,222,128,0.05), rgba(0,0,0,0));
}
.nav-bar a {
    flex: 3; position: relative; display: flex; align-items: center; justify-content: center;
    padding: 11px 5px; color: var(--text-muted); text-decoration: none;
    font-family: 'Share Tech Mono', monospace; font-size: 0.9rem; letter-spacing: 2px;
    transition: color .18s ease, background .18s ease;
}
.nav-bar a + a { border-left: 1px solid rgba(var(--ui-accent-rgb), .16); }
/* the under-bar: a glowing neon line that slides in on hover and locks full-width when active */
.nav-bar a::after {
    content: ''; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px;
    background: var(--neon-green); border-radius: 2px 2px 0 0; box-shadow: 0 0 10px var(--neon-green);
    transform: scaleX(0); transition: transform .18s ease;
}
.nav-bar a:hover { color: var(--neon-green); background: rgba(74,222,128,0.06); }
.nav-bar a:hover::after { transform: scaleX(.5); }
.nav-bar a.active { color: var(--neon-green); background: rgba(74,222,128,0.10); }
.nav-bar a.active::after { transform: scaleX(1); }
/* A++ tab — gold, because it IS the premium tier (this accent carries meaning, not decoration) */
.nav-bar a[href="/aplusplus"] { color: var(--gold); font-weight: 700; letter-spacing: 3px;
    flex-direction: column; gap: 1px; line-height: 1.05; }
.nav-bar a[href="/aplusplus"] .nav-sub { font-size: 0.56em; letter-spacing: 2px; font-weight: 700; opacity: .8; }
.nav-bar a[href="/aplusplus"]::after { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.nav-bar a[href="/aplusplus"]:hover, .nav-bar a[href="/aplusplus"].active { color: var(--gold); background: rgba(255,209,102,0.10); }
/* Home = compact icon cell (narrow, like the old account icon), so the word-tabs get the width */
.nav-bar a[href="/"] { flex: 1; }
.nav-bar a[href="/"] i { font-size: 1.2rem; }
/* Account cell: dynamic label. Signed OUT = "SIGN UP" as an orange CTA (deliberately NOT gold —
   gold is A++ — and not the green tabs); signed IN = "ACCOUNT" in the plain nav colour. No under-bar. */
.nav-bar a#signin-toggle { flex: 3; letter-spacing: 1px; color: var(--neon-orange); font-weight: 700;
    background: rgba(255,159,67,0.16); }                                  /* highlighted CTA while it says SIGN UP */
.nav-bar a#signin-toggle::after { display: none; }
.nav-bar a#signin-toggle:hover { color: var(--neon-orange); background: rgba(255,159,67,0.24); }
/* signed in = SETTINGS: drop the highlight, go plain */
.nav-bar a#signin-toggle.nav-auth-in { color: var(--text-muted); font-weight: 400; background: transparent; }
.nav-bar a#signin-toggle.nav-auth-in:hover { color: var(--neon-green); background: rgba(74,222,128,0.06); }
@media (prefers-reduced-motion: reduce) { .nav-bar a::after { transition: none; } }
/* 5 tabs (+ account icon) — shrink the label on narrow phones so it stays ONE row. */
@media (max-width: 560px) {
    .nav-bar a { font-size: 0.66rem; padding: 9px 1px; letter-spacing: .5px; }
    .nav-bar a[href="/aplusplus"] { letter-spacing: 1px; }
    .nav-bar a::after { left: 6px; right: 6px; }
    .nav-bar a#signin-toggle { font-size: 0.66rem; letter-spacing: .5px; }   /* now text, not an icon */
    .nav-bar a[href="/"] { flex: 1.6; }                                       /* home a little wider on phones (desktop stays 1) */
    .nav-bar a[href="/"] i { font-size: 1.05rem; }                            /* home icon a touch smaller on phones */
}
body.work-mode .nav-bar { border-color: var(--border-strong); background: linear-gradient(180deg, rgba(22,163,74,0.045), transparent); }
body.work-mode .nav-bar a { font-family: 'Open Sans', Arial, sans-serif; }
body.work-mode .nav-bar a + a { border-left-color: rgba(15,23,42,0.08); }
body.work-mode .nav-bar a::after { background: var(--green); box-shadow: 0 0 8px rgba(22,163,74,.5); }
body.work-mode .nav-bar a:hover, body.work-mode .nav-bar a.active { color: var(--green); background: rgba(22,163,74,0.06); }
body.work-mode .nav-bar a[href="/aplusplus"] { color: #b8860b; }   /* --gold is too light on white; darker amber reads */
body.work-mode .nav-bar a[href="/aplusplus"]::after { background: #b8860b; box-shadow: 0 0 8px rgba(184,134,11,.5); }
body.work-mode .nav-bar a[href="/aplusplus"]:hover, body.work-mode .nav-bar a[href="/aplusplus"].active { color: #b8860b; background: rgba(184,134,11,0.09); }

/* ── Mobile: pin the nav as a full-width app bar flush to the TOP ──────────────────
   (Bottom tab bars are the NATIVE-app convention, but on the mobile web they fight
   Safari's own bottom toolbar + the home indicator — so top is the robust web choice.)
   Desktop is untouched. Fixed (not sticky) so it spans the full viewport and escapes
   .container's overflow-x. Opaque bg (via --bg, follows the theme) so content scrolls
   under it cleanly; square corners; a coloured accent line + soft shadow on the bottom
   edge so the bar stands out. .container gets a top pad so its content clears the bar. */
@media (max-width: 560px) {
    .nav-bar {
        position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 1500;   /* above Collect's z-1001 cover art, below its modals (2000) */
        margin: 0; height: 46px; border-radius: 0; border-width: 0;
        background: linear-gradient(180deg, rgba(74,222,128,0.05), rgba(0,0,0,0)), var(--bg);
        box-shadow: 0 6px 16px -8px rgba(0,0,0,0.5);    /* subtle drop so the bar stands out */
    }
    body.work-mode .nav-bar {
        background: linear-gradient(180deg, rgba(22,163,74,0.045), rgba(0,0,0,0)), var(--bg);
    }
    .container { padding-top: 48px; }             /* clear the fixed top bar (+2px border) */
}

/* ---- Scroll-to-top button: shared by every page (injected by /static/scrolltop.js).
   Colour follows --fab (green on dark/retro, orange on work-mode) so it stays theme-reactive.
   Hidden until the page has scrolled ~a screen, then fades in bottom-right. ------------------ */
.scroll-top-btn {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; cursor: pointer;
    background: var(--fab); color: var(--accent-fg);
    font-size: 1.4rem; line-height: 1;
    box-shadow: 0 4px 16px var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease, filter .15s, box-shadow .2s;
}
.scroll-top-btn.show { opacity: .92; visibility: visible; transform: translateY(0); }
.scroll-top-btn:hover { opacity: 1; filter: brightness(1.08); box-shadow: 0 6px 22px var(--shadow); }
.scroll-top-btn:active { transform: translateY(1px); }
@media (max-width: 600px) {
    .scroll-top-btn { right: 14px; bottom: 14px; width: 42px; height: 42px; font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-top-btn, .scroll-top-btn.show { transform: none; transition: opacity .2s ease; }
}

/* ---- Delta pill: reusable up/down price-change badge (green up / red down, theme-aware) ----
   Used by Cert Lookup's sale-to-sale steps; drop in anywhere with class="delta-pill up|down". */
.delta-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Share Tech Mono', monospace; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.3px;
    padding: 5px 16px; border-radius: 999px; white-space: nowrap;
}
.delta-pill.up   { color: #05130a; background: var(--green); }
.delta-pill.down { color: #fff;    background: var(--danger); }