/* emerald-tools.css — emerald re-theme for the public /tools pages so they
   match the master-strategy landing page. Scoped to `body.theme-emerald`,
   so the gated app and the /learn pages are never affected. Linked LAST on
   the 4 tools pages (after tokens.css, and after tools.css / the inline
   <style> on tools/index.html).

   It remaps BOTH the app/tools design tokens AND the landing calculator's
   own tokens to the landing emerald palette, swaps the page background for
   the landing gradient, and styles the shared "Early members" announcement
   bar that replaces the old site nav. Alias tokens are re-declared explicitly
   because `--x: var(--y)` aliases freeze to their :root value otherwise. */

body.theme-emerald {
  /* ---- app / tools design tokens ---- */
  --bg-base: #04160f;
  --bg-sidebar: #04160f;
  --bg-surface: #071c13;
  --bg-elevated: #0a2016;
  --border: rgba(218,241,222,0.10);
  --border-sub: rgba(218,241,222,0.06);
  --text-primary: #daf1de;
  --text-secondary: #8eb69b;
  --text-muted: #8eb69b;
  --text-faint: #7ba58a;
  --text-ph: #4a6b58;
  --navy: #daf1de;
  --navy-hover: #b9e0c5;
  --green: #8fd3a6; --green-bg: #052e16; --green-tint: rgba(143,211,166,0.14); --green-accent: #8fd3a6;
  --red: #ff6b6b; --red-bg: #2d0a0a; --red-accent: #ff6b6b;
  --green-pill-bg: rgba(143,211,166,0.16); --red-pill-bg: rgba(255,107,107,0.16);
  --chart-grid: rgba(218,241,222,0.08);
  --input-bg: #020a07; --input-border: rgba(218,241,222,0.10);
  --input-border-focus: rgba(142,182,155,0.55); --input-text: #daf1de; --input-placeholder: #4a6b58;

  /* tools.css aliases (must be re-declared, they froze to the navy :root value) */
  --ink: #daf1de;
  --whisper: #7ba58a;
  --accent: #daf1de;
  --accent-bright: #b9e0c5;
  --col: 78rem;

  /* ---- landing calculator tokens (for the ported expectancy widget) ---- */
  --bg: #04160f; --bg-hi: #0a2c1d; --bg-mid: #03110b; --bg-deep: #020a07;
  --ink-dim: #8eb69b; --accent-2: #8eb69b;
  --accent-grad: linear-gradient(135deg, #daf1de 0%, #b9e0c5 55%, #8eb69b 100%);
  --line: rgba(218,241,222,0.10);
  --radius: 0.5rem;
  --font-display: "Neue Haas Grotesk Display", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter Tight", "Söhne", system-ui, sans-serif;

  /* ---- page background = landing emerald gradient ---- */
  background:
    radial-gradient(95% 75% at 28% 18%, var(--bg-hi) 0%, transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-mid) 60%, var(--bg-deep) 100%) !important;
  background-attachment: fixed;
  color: var(--ink);
}

/* drop the dot-grid overlay and blue scan-line to match the clean landing bg */
body.theme-emerald::before { display: none !important; }
body.theme-emerald .scan { display: none !important; }

/* ---- announcement bar (replaces the old .site-nav on tools pages) ---- */
body.theme-emerald .topbar {
  position: relative;
  margin: -3.5rem -1.5rem 1.8rem;
  padding: 0.75rem 3.25rem;
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  background: rgba(13,33,25,0.55);
  border-bottom: 1px solid var(--line);
  z-index: 20;
}
body.theme-emerald .topbar-msg { color: var(--ink-dim); text-decoration: none; transition: color .18s ease; }
body.theme-emerald .topbar-msg:hover { color: var(--ink); }
body.theme-emerald .topbar-tools {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-dim);
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease;
}
body.theme-emerald .topbar-tools:hover { color: var(--ink); }

/* ---- fills that assumed a dark-on-navy accent: give them dark ink on mint ---- */
body.theme-emerald .cta-primary {
  background: var(--accent-grad);
  color: #0a2016;
  border: none;
}
body.theme-emerald .cta-primary:hover { filter: brightness(1.05); }

/* stray blue focus ring on the legacy tool inputs */
body.theme-emerald .exp-input:focus,
body.theme-emerald .field input:focus { border-color: rgba(142,182,155,0.55); }

/* long-form readability: the base tools prose is 0.875rem, below the 16px
   floor. Bump to a comfortable reading size and firm up the heading scale. */
body.theme-emerald .lede { font-size: 1.15rem; line-height: 1.7; }
body.theme-emerald section p,
body.theme-emerald section li { font-size: 1.0625rem; line-height: 1.75; }
body.theme-emerald section h2 { font-size: 1.5rem; }
body.theme-emerald section h3 { font-size: 1.15rem; }
body.theme-emerald .formula { font-size: 1.0625rem; }
body.theme-emerald .cta p { font-size: 1.0625rem; }

/* simple data table for the long-form content */
body.theme-emerald section table {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 1.0625rem;
}
body.theme-emerald section th,
body.theme-emerald section td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-dim);
}
body.theme-emerald section th { color: var(--ink); font-weight: 600; }
body.theme-emerald section thead th { border-bottom-color: rgba(218,241,222,0.2); }
body.theme-emerald section td:last-child,
body.theme-emerald section th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* key takeaways box near the end of a long-form page */
body.theme-emerald .takeaways {
  background: rgba(218,241,222,0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.85rem;
}
body.theme-emerald .takeaways h2 { margin-bottom: 0.9rem; }
body.theme-emerald .takeaways p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  body.theme-emerald .topbar { margin: -2.5rem -1.1rem 1.4rem; padding: 0.7rem 1.1rem; }
  body.theme-emerald .topbar-tools { position: static; transform: none; display: block; margin-top: 0.4rem; }
}