/* ---------------------------------------------------------------------------
 * theme.css — shared visual layer for every WheelDesk page.
 *
 * Loaded AFTER each page's inline <style> (the <link> sits at the end of
 * <head>), so equal-specificity rules here win. Two jobs:
 *   1. Cross-page polish that applies to BOTH themes (radii, transitions,
 *      brand-link behavior). Kept deliberately small.
 *   2. The light theme: pages define the dark palette in their own :root;
 *      when /auth/theme.js sets <html data-theme="light">, the variable
 *      overrides below re-skin them, plus a few fixes for spots where a page
 *      hard-coded a dark color instead of using a variable.
 * ------------------------------------------------------------------------- */

/* ---- typography: Figtree (self-hosted variable font, OFL license) ----
   JJ wanted waymo.com's typeface; that's GT Walsheim, a paid commercial font.
   Figtree is the closest open-licensed match (same friendly geometric feel). */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;   /* system stack shows instantly, Figtree swaps in when loaded */
}
body { font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
/* form controls don't inherit fonts by default — pull them onto Inter too */
button, input, select, textarea { font-family: inherit; }

/* ---- polish (both themes) ---- */
/* Tell the browser which palette the page uses so NATIVE widgets follow it —
   without this, the date inputs' calendar icon (and the picker popup itself)
   stays dark-on-dark in the dark theme. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* Reserve the scrollbar's width even while there's nothing to scroll: with
   always-visible scrollbars (external mouse on macOS, most of Windows) the
   bar otherwise appears/disappears as views change length, shoving the whole
   centered layout sideways — the "everything jumps" JJ reported across tabs.
   No-op for overlay scrollbars. Applies inside the dashboard iframes too,
   since every page loads this stylesheet. */
html { scrollbar-gutter: stable; }
a.brand { color: inherit; text-decoration: none; }
a.brand:hover .dot { filter: brightness(1.2); }
.card, .g-card, .stat, .billing, .price-card, .feat, .note, .banner { border-radius: 14px; }
button, .btn, a.btn, .back, .popout, nav .tab {
  transition: border-color .15s ease, color .15s ease, background-color .15s ease, filter .15s ease;
}
input, select, textarea { transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
/* consistent, softer control shapes app-wide */
button, .btn, input, select, textarea { border-radius: 9px; }
button:active, .btn:active { transform: translateY(0.5px); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(108, 182, 255, .16); }
/* the Type / Open-Close pills: plain tags (Stock, Dividend) share the dropdown
   pills' height so mixed rows line up (.strat-tag/.act-tag are carried by the
   <select> pills too, so one rule covers both). Width hugs the label (JJ,
   2026-08-08) — a fixed 106px once made them "two tidy columns", but on wide
   columns it read as stretched empty pills */
span.strat-tag, span.act-tag { display: inline-flex; align-items: center; justify-content: center; height: 21px; }
select.tag-sel { height: 21px; border-radius: 20px; }
.card, .g-card, .stat, .billing, .price-card, .feat {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 10px 28px -18px rgba(0, 0, 0, .45);
}
button:focus-visible, .btn:focus-visible, a:focus-visible, select:focus-visible {
  outline: 2px solid rgba(108, 182, 255, .55); outline-offset: 1px;
}
/* ticker logos (Overview + Cost Basis). The <img> and the monogram fallback
   share the same footprint so a 404 swap doesn't shift the layout. */
.tkr-logo, .tkr-mono {
  width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin-right: 7px;
  display: inline-block; flex: 0 0 auto;
}
/* dark chip in BOTH themes: the icon set is drawn for dark UIs, so several logos
   (DDOG, PLTR, PM, DHI, GLW, ELF…) are white glyphs — invisible on a white chip */
.tkr-logo { object-fit: contain; background: #10151c; padding: 2px; border: 1px solid #2a3441; }
.tkr-mono {
  /* same dark chip as real logos, so misses (GLD, QQQ…) don't stand out */
  background: #10151c; border: 1px solid #2a3441;
  color: #a9b7c6; font-weight: 700; font-size: 8.5px; letter-spacing: .02em;
  text-align: center; line-height: 19px; overflow: hidden;
}
.tkr-logo.big, .tkr-mono.big { width: 28px; height: 28px; vertical-align: -7px; }
.tkr-mono.big { font-size: 10.5px; line-height: 27px; }

/* ---- light theme ---- */
:root[data-theme="light"] {
  --bg: #f2f4f8; --card: #ffffff; --card-2: #eef1f5; --card2: #eef1f5; --border: #d8dfe8;
  --text: #1b2430; --muted: #5c6c7d; --accent: #17925e; --red: #ce413d; --amber: #96700f;
  --blue: #1a66c4; --danger: #ce413d;
  /* the dark step (#a371f7) is far too light on white — this one clears 3:1 on the
     card surface and stays >=8 ΔE from the accent green under deuteranopia */
  --violet: #7c3aed;
}
:root[data-theme="light"] .card, :root[data-theme="light"] .g-card, :root[data-theme="light"] .stat,
:root[data-theme="light"] .billing, :root[data-theme="light"] .price-card, :root[data-theme="light"] .feat {
  box-shadow: 0 1px 2px rgba(23, 32, 46, .06), 0 10px 28px -18px rgba(23, 32, 46, .18);
}
/* app.html's nav hard-codes a near-black background (scoped: the landing page's
   transparent nav must NOT go white or it seams against the page background) */
:root[data-theme="light"] nav.app-nav { background: #ffffff; }
/* "hero" cards use a dark-green gradient */
:root[data-theme="light"] .g-card.hero, :root[data-theme="light"] .stat.hero {
  background: linear-gradient(160deg, #e9f6ef, #ffffff); border-color: #b9e0cc;
}
/* primary BUTTONS get a pale-green fill in light mode, so their text must go dark
   (this also outranks account.html's `.billing .primary` white-on-green, which
   otherwise left the active Appearance button white-on-pale — unreadable) */
:root[data-theme="light"] button.primary, :root[data-theme="light"] #live-toggle.on {
  background: #e3f4ea; color: #14724a;
}
/* app.html hard-codes the same dark-green pill on the Live-prices badge and the
   feedback Send button */
:root[data-theme="light"] .live-badge, :root[data-theme="light"] #fb-send { background: #e3f4ea; }
/* Options Positions: the four ALL-strategies summary cards are blue-tinted to
   stand apart from the per-strategy cards (dark palette lives in the page) */
:root[data-theme="light"] .stat.overall, :root[data-theme="light"] .g-card.total-pv {
  background: linear-gradient(160deg, #e9f1fc, #ffffff); border-color: #b9d0ee;
}
:root[data-theme="light"] textarea.dragover { background: #e9f6ef; }
/* chart tracks: --card-2 is near-invisible against the light page background */
:root[data-theme="light"] .bar-track, :root[data-theme="light"] .bars .track { background: #e0e6ee; }
/* solid-green ANCHOR CTAs (landing hero, Subscribe links) keep white text */
:root[data-theme="light"] .btn.primary { color: #ffffff; }
/* app.html's solid-accent pills (floating Feedback button + the demo "Sign up
   free" / "Start your free 90-day trial" CTAs) hard-code near-black text on the
   accent, which reads muddy on the DARKER light-mode green — flip them to white
   like the other solid-green CTAs, and soften the button's black drop shadow. */
:root[data-theme="light"] #fb-btn,
:root[data-theme="light"] .btn-demo-signup { color: #ffffff; }
:root[data-theme="light"] #fb-btn { box-shadow: 0 6px 20px rgba(23, 32, 46, .22); }
/* ticker chips MUST stay dark in both themes (many icons — AAPL, DDOG, PLTR,
   PM, DHI, GLW, ELF… — are white-on-transparent glyphs that vanish on a light
   chip; misses like QQQ/GLD fall back to the same dark monogram chip). In light
   mode, soften the near-black chip to a slate badge with a hairline ring so it
   reads as a deliberate avatar on the white card rather than a dark-mode leftover. */
:root[data-theme="light"] .tkr-logo,
:root[data-theme="light"] .tkr-mono { background: #1c2632; border-color: #ccd5e1; }
:root[data-theme="light"] .tkr-mono { color: #c2ccd9; }
/* account.html status pills + MFA banner */
:root[data-theme="light"] .billing .pill.on { background: #e3f4ea; color: #14724a; }
:root[data-theme="light"] .billing .pill.off { background: #fdecec; color: #a83a36; }
:root[data-theme="light"] .banner { background: linear-gradient(160deg, #fdf3dd, #ffffff); }
:root[data-theme="light"] .banner b { color: #8a6410; }
/* ledger tags were color-tuned for dark backgrounds */
:root[data-theme="light"] .strat-csp { color: #0f7a4d; border-color: #a7d8c1; }
:root[data-theme="light"] .strat-cc { color: #1a66c4; border-color: #b3cdef; }
:root[data-theme="light"] .strat-leaps { color: #7a3fb8; border-color: #d5bbee; }
:root[data-theme="light"] .strat-long, :root[data-theme="light"] .strat-stock { color: #8a6410; border-color: #e2cf9c; }
:root[data-theme="light"] .strat-div { color: #20794b; border-color: #abd8bf; }
:root[data-theme="light"] .act-tag.pos { color: #0f7a4d; border-color: #a7d8c1; }
:root[data-theme="light"] .act-tag.neg { color: #c23c38; border-color: #efc0bf; }
:root[data-theme="light"] .kind-buy { color: #8a6410; }
:root[data-theme="light"] .kind-sell { color: #1a66c4; }
:root[data-theme="light"] .kind-premium, :root[data-theme="light"] .kind-dividend { color: #0f7a4d; }
:root[data-theme="light"] .kind-buyback { color: #c23c38; }

/* ---- Page Up (Scroll to Top) Button ---- */
.scroll-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(27, 35, 48, 0.75);
  color: #e6edf3;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  outline: none;
  
  /* Hidden state by default */
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px) scale(0.9);
  transition: 
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
  background: rgba(42, 52, 65, 0.85);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: scale(1.05);
}

.scroll-to-top:active {
  transform: scale(0.95);
}

/* Light theme overrides */
:root[data-theme="light"] .scroll-to-top {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(0, 0, 0, 0.08);
  color: var(--text);
  box-shadow: 0 4px 16px rgba(23, 32, 46, 0.08), 0 2px 4px rgba(23, 32, 46, 0.04);
}

:root[data-theme="light"] .scroll-to-top:hover {
  background: rgba(240, 243, 246, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text);
}
