/* version_tag = 28 */

/* ─────────────────────────────────────────
   TEXT ROLE TOKEN REFERENCE
   Single source of truth for "what color should this text be".
   When adding new pages, pick a role below instead of inventing
   a new color. Update THIS table first, then propagate.

   role              purpose                                   dark hex                 light hex
   --nav-bg          navbar / pillar-card background            #141414 (near-black charcoal) #3d4f42 (--slate, unchanged)
   --heading-1       section titles, active nav, card titles,   #e8eceb (neutral off-wht) #1e2b22 (--text, unchanged)
                      button text (folded in, was mint)
   --label           small uppercase labels: stat labels,        rgba(255,255,255,.75)    var(--faint) (unchanged)
                      chart title, "Annualized Return"           (neutral white, was mint/green-tinted faint/muted)
   --body            paragraph / description copy                #c8c8c8 (unchanged)      #4a4a4a (unchanged)
   --body-muted      secondary/de-emphasized text (table cells,  rgba(255,255,255,.55)    var(--muted) (unchanged)
                      sub-captions under big numbers)             (neutral, was greenish muted)
   --accent-pos      green — gains/positive numbers ONLY          var(--green) (unchanged) var(--green) (unchanged)
   --accent-neg      red — losses ONLY                            var(--red) (unchanged)   var(--red) (unchanged)
   --card-bg         card surfaces (pillar cards etc.)            tied to --nav-bg         #ffffff (unchanged)
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   CUSTOM TOOLTIP
   Replaces native browser title= tooltips.
   Usage: add data-tooltip="..." to any element.
   ───────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-deep);
  color: var(--mint-soft);
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: 220px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 999;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transition-delay: 0.2s;
}

/* ── Tooltip edge-column corrections ──
   The scorecard stat grid is 6 columns. Tooltips on columns 1–2 (left edge)
   would clip left; columns 5–6 (right edge) would clip right.
   We anchor left-edge tooltips to the left side of the cell, and
   right-edge tooltips to the right side, keeping them fully in viewport.

   nth-child index covers both rows of the 6-col × 2-row grid:
     Left-edge  cols: 1, 2, 7, 8   (1st and 2nd column in each row)
     Right-edge cols: 5, 6, 11, 12 (5th and 6th column in each row)
*/
.scorecard-stat-grid [data-tooltip]:nth-child(6n+1)::after,
.scorecard-stat-grid [data-tooltip]:nth-child(6n+2)::after {
  left: 0;
  right: auto;
  transform: translateX(0);
}
.scorecard-stat-grid [data-tooltip]:nth-child(6n+5)::after,
.scorecard-stat-grid [data-tooltip]:nth-child(6n+6)::after,
.scorecard-stat-grid [data-tooltip]:nth-child(6n)::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}
[data-theme="dark"] [data-tooltip]::after {
  background: #1a2d22;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40);
}

/* ─────────────────────────────────────────
   TOKENS
   Slate lightened from #3d4f42 → #506858
   so the banner feels airy, not oppressive.
   ───────────────────────────────────────── */
:root {
  --banner:     #506858;   /* reverted — medium slate green              */
  --banner-deep:#3d5247;   /* hover / depth shade                        */
  --slate:      #3d4f42;   /* nav text, headings, buttons on light pages */
  --slate-deep: #2e3d33;
  --mint:       #a8e6c0;   /* logo border colour                         */
  --mint-soft:  #c8f0d8;
  --mint-pale:  #e8f7ee;
  --green:      #3aaa1e;   /* lime green accent (updated per redesign)   */
  --cream:      #f3f5f3;
  --white:      #ffffff;
  --text:       #1e2b22;
  --muted:      #4e6155;
  --faint:      #8aa090;
  --border:     rgba(61,79,66,0.15);
  --red:        #b83c2b;
  --red-pale:   #fce8e6;
  --glass:      var(--white);

  /* role-based tokens — see table above. Light mode keeps existing values. */
  --nav-bg:      var(--slate);
  --heading-1:   var(--text);
  --label:       var(--faint);
  --body-muted:  var(--muted);
  --card-bg:     var(--white);
}

[data-theme="dark"] {
  --banner:     #3a4f40;
  --banner-deep:#2c3e32;
  --slate:      #1e2e24;
  --slate-deep: #161f1a;
  --cream:      #000000; /* changed from #1a2620 — black throughout in dark mode */
  --white:      #111111; /* changed from #1f2e27 — near-black for card surfaces  */
  --text:       #d4e8da;
  --muted:      #8ab89a;
  --faint:      #5a7a64;
  --border:     rgba(168,230,192,0.10);
  --mint:       #a8e6c0;
  --mint-soft:  #c8f0d8;
  --mint-pale:  #1f3a2a;
  --green:      #4abf2a;
  --red:        #e05a47;
  --red-pale:   #2e1a18;

  /* role-based tokens — see table above. Dark mode: mint/green-tinted
     text roles become neutral. --nav-bg overridden to near-black charcoal
     (#141414) so the dark mode nav reads as clean/modern rather than
     forest-green. Light mode nav stays on --slate (unchanged).
     --card-bg matches --white so pillar cards use the same surface as
     every other card (chart-card, metric-card, scorecard-card). */
  --nav-bg:      #141414;
  --heading-1:   #e8eceb;
  --label:       rgba(255,255,255,0.75);
  --body-muted:  rgba(255,255,255,0.55);
  --card-bg:     var(--white);
}

[data-theme="dark"] .pillar-header-title,
[data-theme="dark"] .section-title        { color: var(--heading-1); }
[data-theme="dark"] .btn                  { background: var(--slate); color: var(--heading-1); border: 1px solid rgba(168,230,192,0.30); }
[data-theme="dark"] .btn:hover            { background: #2a3e30; }
[data-theme="dark"] .period-tabs          { background: rgba(168,230,192,0.08); }
[data-theme="dark"] .period-tab           { color: var(--body-muted); }
[data-theme="dark"] .period-tab.active    { background: rgba(168,230,192,0.15); color: var(--heading-1); box-shadow: none; }
[data-theme="dark"] .client-tab           { background: transparent; color: var(--body-muted); border-color: var(--border); }
[data-theme="dark"] .client-tab.active    { background: rgba(168,230,192,0.15); color: var(--heading-1); border-color: rgba(168,230,192,0.30); }
[data-theme="dark"] .chart-band-big       { color: var(--label); }
[data-theme="dark"] .chart-band-big span  { color: var(--green); }
[data-theme="dark"] .chart-band-sub       { color: var(--label); }
[data-theme="dark"] .pillar-title         { color: var(--heading-1); }
[data-theme="dark"] .pillar-desc          { color: var(--body-muted); }
[data-theme="dark"] .pillar-card          { background: var(--card-bg); border-color: rgba(168,230,192,0.12); }
[data-theme="dark"] .pillar-step          { color: var(--heading-1); }
[data-theme="dark"] .tx-table td          { color: var(--body-muted); }
[data-theme="dark"] .amt-dep              { color: var(--green); }
[data-theme="dark"] .amt-wit              { color: var(--red); }
[data-theme="dark"] .badge-dep            { background: rgba(74,191,42,0.20); color: var(--heading-1); }
[data-theme="dark"] .badge-wit            { background: rgba(224,90,71,0.18); color: #f0907e; }
[data-theme="dark"] #dailyMonthLabel      { color: var(--heading-1); }
[data-theme="dark"] .chart-card-title     { color: var(--body-muted); }

/* smooth colour transitions */
*, *::before, *::after { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }

/* theme toggle button */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  background: rgba(168,230,192,0.10);
  border: 1px solid rgba(168,230,192,0.25);
  border-radius: 50%; width: 32px; height: 32px;
  padding: 0; cursor: pointer; flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: rgba(168,230,192,0.22); border-color: rgba(168,230,192,0.55); }
.theme-toggle-icon  { font-size: 15px; line-height: 1; display: block; }
@keyframes spinIn { from { transform: rotate(-180deg) scale(0.4); opacity:0; } to { transform: rotate(0deg) scale(1); opacity:1; } }
.theme-toggle-icon.switching { animation: spinIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Roboto Mono', monospace;
  background: var(--cream);
  color: var(--text);
  font-size: 15px;   /* bumped from 13 → 15 */
  line-height: 1.75;
}

/* ─────────────────────────────────────────
   NAV — always solid slate background.
   Link colours: neutral grays (no mint accent).
   Dark mode: white-alpha links, white active underline.
   Light mode: same slate background, same white-alpha links
   (nav bg is always dark-green slate regardless of theme).
   ───────────────────────────────────────── */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 84px;
  display: flex;
  align-items: center;
  padding: 0 2.5rem;
  gap: 2rem;
  background: var(--nav-bg);
  border-bottom: 2px solid rgba(255,255,255,0.12); /* neutral separator, replaces mint */
}
/* .scrolled no longer needed — nav is always solid */
nav.scrolled {
  position: sticky;
  background: var(--nav-bg);
  border-bottom: 2px solid rgba(255,255,255,0.12);
  backdrop-filter: none;
}
nav.scrolled .brand-name      { color: rgba(255,255,255,0.92); }
nav.scrolled .nav-link        { color: rgba(255,255,255,0.65); }
nav.scrolled .nav-link:hover  { color: rgba(255,255,255,0.95); }
nav.scrolled .nav-link.active { color: #fff; border-bottom-color: #fff; }
/* live-badge removed */

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 0.5rem; }
.brand-logo { height: 64px; width: auto; flex-shrink: 0; }
.brand-name {
  font-family: 'Roboto Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.05em;
  transition: color 0.2s;
}

.nav-link {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65); /* white-alpha — nav bg is always dark slate */
  cursor: pointer;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.nav-link:hover  { color: rgba(255,255,255,0.95); }
.nav-link.active { color: #fff; border-bottom-color: #fff; } /* neutral white — no mint */

.nav-spacer { flex: 1; }

/* ─────────────────────────────────────────
   GATE THEME TOGGLE
   Fixed top-right button on the login / reset pages so users can
   switch light/dark before they authenticate. Reuses the same
   .theme-toggle-icon span element as the nav version.
   ───────────────────────────────────────── */
.gate-theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,230,192,0.10);
  border: 1px solid rgba(168,230,192,0.25);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  z-index: 50;
  transition: background 0.2s, border-color 0.2s;
}
.gate-theme-toggle:hover {
  background: rgba(168,230,192,0.22);
  border-color: rgba(168,230,192,0.55);
}
/* Light mode: use slate-tinted border so the button is visible against
   the cream login page background (mint is too faint there) */
[data-theme="light"] .gate-theme-toggle {
  background: rgba(61,79,66,0.07);
  border-color: rgba(61,79,66,0.35);
}
[data-theme="light"] .gate-theme-toggle:hover {
  background: rgba(61,79,66,0.14);
  border-color: rgba(61,79,66,0.60);
}

/* ─────────────────────────────────────────
   PAGE SYSTEM
   ───────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }
.inner { max-width: 980px; margin: 0 auto; padding: 2.5rem 2rem 5rem; }
.light-section .inner { padding-top: 1.25rem; }

/* ─────────────────────────────────────────
   HERO BANNER — lightened background
   ───────────────────────────────────────── */
.hero-banner {
  /* Hero-scoped tokens. Separate from site-wide tokens so hero redesign
     doesn't bleed into nav/login/buttons. */
  --hero-bg: #000;
  --hero-text: #fff;
  --hero-accent: #4abf2a;
  --hero-tagline-color: rgba(255,255,255,0.90);
  --hero-sub-color: rgba(255,255,255,0.58);
  --hero-stat-label-color: rgba(255,255,255,0.75);
  --hero-stat-sub-color: rgba(255,255,255,0.80);

  background: var(--hero-bg);
  padding: 0 2.5rem 4.5rem;   /* bottom padding = tagline margin (1rem) + stats margin-top (3.5rem), so space below cards mirrors space above them */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 520px;
}

/* Light-mode hero tokens. Measured for WCAG AA contrast against #e6e4da. */
[data-theme="light"] .hero-banner {
  --hero-bg: #e6e4da;
  --hero-text: #0a0a0a;
  --hero-accent: #3aaa1e;
  --hero-tagline-color: rgba(10,10,10,0.88);
  --hero-sub-color: rgba(10,10,10,0.62);
  --hero-stat-label-color: rgba(10,10,10,0.70);
  --hero-stat-sub-color: rgba(10,10,10,0.75);
}

/* Ribbon graphic strip — sits in-flow directly below the wordmark inside
   .hero-lockup. No longer absolutely positioned to the banner bottom.
   width: 100vw + negative margins let it bleed to the banner edges
   even though .hero-lockup has max-width padding. */
.leaf-wrap {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 160px;
  pointer-events: none;
  overflow: hidden;
  margin-top: 0.5rem;   /* small gap below wordmark */
}

.ribbon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* ensure it fills without distortion */
}

/* Only one theme's ribbon shows at a time, toggled via the existing
   [data-theme] attribute that applyTheme() already sets in app.js */
[data-theme="dark"] .ribbon-light { display: none; }
[data-theme="light"] .ribbon-dark { display: none; }

.hero-stats {
  position: relative;
  z-index: 1;

}
.hero-lockup {
  max-width: 980px;
  margin: 0 auto;
  padding-top: 5rem;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* Giant SPROUT wordmark — the centrepiece.
   letter-spacing: 0.005em matches sprout_wordmark_final.html reference (was 0.1em — too wide).
   No margin-bottom: leaf-wrap sits directly below, separated only by leaf-wrap's margin-top. */
.hero-wordmark {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(80px, 13vw, 130px);
  font-weight: 800;
  color: var(--hero-text);
  letter-spacing: 0.005em;  /* fixed from 0.1em — matched to reference */
  line-height: 1;
  margin-bottom: 0;
  text-shadow: 0 0 80px rgba(168,230,192,0.20);
  position: relative;
}

/* Stem accent image nested inside the wordmark text.
   Sized/offset in 'em' units relative to hero-wordmark's font-size so it
   stays proportional across clamp(80px, 13vw, 130px).
   Ratios derived from sprout_wordmark_final.html:
     HEIGHT_RATIO  = 0.8143  →  height: 0.8143em
     OFFSET_RATIO  = -0.15   →  top: -0.15em  (pulls stem bottom to align with letter baseline)
     GAP_RATIO     = 0       →  margin-left: 0
     ASPECT_H_W    = 1.2064  →  width: auto preserves this */
.hero-stem {
  height: 0.8143em;
  width: auto;
  position: relative;
  top: 0em;   /* calibrated by user via stem_adjust.html — was -0.15em */
  margin-left: 0;
  vertical-align: baseline;
}

.hero-tagline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(24px, 3.5vw, 34px);
  color: var(--hero-tagline-color);
  line-height: 1.3;
  margin-top: 2rem;    /* space between leaf ribbon and tagline */
  margin-bottom: 1rem;
  font-style: italic;
}

.hero-sub {
  font-size: 16px;
  color: var(--hero-sub-color);
  line-height: 1.85;
  max-width: 540px;
  margin: 0 auto 2.25rem;
  font-weight: 300;
}

.btn {
  display: inline-block;
  background: var(--slate);
  color: #fff;
  border: none;
  padding: 14px 32px;
  border-radius: 6px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn:hover { background: var(--slate-deep); transform: translateY(-1px); }

/* Stat strip at bottom of banner */
.hero-stats {
  max-width: 980px;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.12);  /* divider colour between cells */
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.hero-stat {
  padding: 1.5rem 1.75rem;
  background: rgba(255,255,255,0.14);  /* frosted-glass white — light mode default */
}
/* Dark mode: match the balance-banner card surface (var(--white) = #111111).
   Border and divider line also darkened so they don't glow against the black banner. */
[data-theme="dark"] .hero-stat {
  background: var(--white);  /* #111111 — same surface as balance-banner, chart-card, scorecard-card */
}
[data-theme="dark"] .hero-stats {
  border-color: var(--border);           /* rgba(168,230,192,0.10) — matches other dark mode card borders */
  background: rgba(168,230,192,0.06);    /* subtle mint divider line between cells */
}
/* Light mode: boost card opacity so they read as clearly white against
   the cream (#e6e4da) banner background. */
[data-theme="light"] .hero-stat {
  background: rgba(255,255,255,0.82);
}
[data-theme="light"] .hero-stats {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);  /* divider tint between cells on light bg */
}
.hero-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hero-stat-label-color);
  margin-bottom: 8px;
}
.hero-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 38px;   /* bumped from 32px per redesign goal #4 */
  color: var(--hero-accent);
  line-height: 1;
  margin-bottom: 4px;
}
.hero-stat-sub {
  font-size: 13px;   /* bumped from 11px per redesign goal #4 */
  color: var(--hero-stat-sub-color);
}

/* ─────────────────────────────────────────
   CHART BAND
   Sits right below the banner. White card
   with the all-time cumulative return chart.
   ───────────────────────────────────────── */
.chart-band {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.chart-band-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 2.5rem 2rem 2rem;
}
.chart-band-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.chart-band-title {
  font-size: 13px;   /* bumped from 10px per redesign goal #7 */
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 6px;
}
.chart-band-big {
  font-family: 'DM Serif Display', serif;
  font-size: 36px;
  color: var(--slate);
  line-height: 1;
}
.chart-band-big span {
  color: var(--green);
}
.chart-band-sub {
  font-size: 14px;   /* bumped from 12px per redesign goal #4 */
  color: var(--label);
  margin-top: 4px;
}
.legend-row  { display: flex; gap: 18px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--label); }
.legend-line { width: 20px; height: 2px; border-radius: 2px; background: var(--green); }
.legend-line.spy { background: repeating-linear-gradient(90deg,#aaa 0,#aaa 4px,transparent 4px,transparent 8px); }

/* ─────────────────────────────────────────
   LIGHT SECTION (feature cards, how-strip)
   ───────────────────────────────────────── */
.light-section {
  background: var(--cream);
  background-image: radial-gradient(circle, rgba(61,79,66,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ── HOW IT WORKS BAND
   Simple top border line separates it from the annualized return above.
   No background change — just a clean mint-tinted rule.
   ───────────────────────────────────────────────────────────── */
.hiw-band {
  border-top: 1px solid rgba(58,170,30,0.25);
  margin-top: 2.5rem;
  padding-top: 0.5rem;
}
[data-theme="dark"] .hiw-band {
  border-top-color: rgba(168,230,192,0.15);
}

/* ── PILLAR SECTION HEADER ── */
.pillar-header {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}
.pillar-header-title {
  font-family: 'DM Serif Display', serif;
  font-size: 32px;
  color: var(--slate);
}

/* ── BOTTOM CTA ── */
.bottom-cta {
  text-align: center;
  padding: 2.5rem 0 3.5rem;
}

/* ── PILLAR CARDS — 3 columns ── */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 2rem 0;
}
.pillar-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.pillar-card:hover {
  border-color: var(--heading-1);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(61,79,66,0.10);
}
/* thin accent line at top of each card — neutral, no mint */
.pillar-card::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--heading-1);
  border-radius: 2px;
  margin-bottom: 1.25rem;
}
/* step label + emoji on same row */
.pillar-step-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}
.pillar-step {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.pillar-icon {
  font-size: 26px;
  line-height: 1;
  /* card padding already gives breathing room from the right border */
}
.pillar-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--slate);
  line-height: 1.2;
  margin-bottom: 0.85rem;
}
.pillar-desc {
  font-size: 15px;   /* bumped from 13px per redesign goal #4 */
  color: var(--muted);
  line-height: 1.85;
  flex: 1;
}

/* ─────────────────────────────────────────
   SHARED: INNER PAGES
   ───────────────────────────────────────── */
.section-title {
  font-family: 'DM Serif Display', serif;
  font-size: 28px;
  color: var(--slate);
  margin: 0 0 1.5rem;
}

/* metric grid */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 1.5rem; }
.metric-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.25rem; }
.metric-label { font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.metric-val   { font-family: 'DM Serif Display', serif; font-size: 28px; color: var(--text); }
.metric-val.g { color: var(--green); }
.metric-val.r { color: var(--red); }
.metric-sub-text { font-size: 11px; color: var(--faint); margin-top: 3px; }

/* chart cards */
.chart-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 1.75rem; margin-bottom: 1.5rem; }
.chart-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.chart-card-title  { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }

.period-tabs { display: flex; gap: 3px; background: var(--cream); border-radius: 7px; padding: 3px; }
.period-tab  { font-size: 11px; font-family: 'Roboto Mono', monospace; font-weight: 500; padding: 5px 13px; border: none; background: transparent; cursor: pointer; color: var(--muted); border-radius: 5px; transition: all 0.15s; letter-spacing: 0.03em; }
.period-tab.active { background: var(--white); color: var(--slate); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* account */
.client-tabs { display: flex; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.client-tab  { padding: 8px 20px; font-size: 12px; font-family: 'Roboto Mono', monospace; font-weight: 500; letter-spacing: 0.03em; border: 1px solid var(--border); border-radius: 6px; background: var(--white); color: var(--muted); cursor: pointer; transition: all 0.15s; }
.client-tab.active { background: var(--slate); color: #fff; border-color: var(--slate); }

.tx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tx-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.tx-table td { padding: 13px 0; border-bottom: 1px solid var(--border); color: var(--muted); }
.tx-table tr:last-child td { border-bottom: none; }
.badge     { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; padding: 4px 11px; border-radius: 4px; text-transform: uppercase; }
.badge-dep { background: var(--mint-pale); color: var(--slate); }
.badge-wit { background: var(--red-pale);  color: var(--red); }
.amt-dep   { color: var(--green); font-weight: 600; }
.amt-wit   { color: var(--red);   font-weight: 600; }

/* footer */
footer { text-align: center; padding: 2rem; font-size: 12px; color: var(--faint); border-top: 1px solid var(--border); letter-spacing: 0.04em; }

/* animations */
@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.fu  { animation: fadeUp 0.4s ease both; }
.fu2 { animation: fadeUp 0.4s ease 0.08s both; }
.fu3 { animation: fadeUp 0.4s ease 0.16s both; }
.fu4 { animation: fadeUp 0.4s ease 0.24s both; }


/* ─────────────────────────────────────────
   BALANCE BANNER — total AUM
   Uses the same card surface as chart-card /
   scorecard-card — white in light, dark in
   dark mode. Decoupled from the nav bar color.
   ───────────────────────────────────────── */
.balance-banner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem 2rem;
  margin-bottom: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.balance-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.balance-val {
  font-family: 'DM Serif Display', serif;
  font-size: 44px;
  color: var(--green);  /* uses standard green accent, same as gains */
  line-height: 1;
}
.balance-right {
  font-size: 11px;
  color: var(--faint);
  text-align: right;
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* chart drill-down hint */
.chart-hint {
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.03em;
  font-style: italic;
  margin-top: 4px;
}

/* daily card fade in */
#dailyCard { opacity: 0; transition: opacity 0.25s; }

/* ─────────────────────────────────────────
   LOGIN FORM
   ───────────────────────────────────────── */
.login-wrap {
  max-width: 380px;
  margin: 3rem auto 0;
}
.gate-wordmark img { height: 0.8143em; width: auto; }
.login-input {
  width: 100%;
  display: block;
  padding: 13px 16px;
  margin-bottom: 12px;
  font-family: 'Roboto Mono', monospace;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.login-input:focus { border-color: var(--mint); }
.login-input::placeholder { color: var(--faint); }
.login-btn { width: 100%; margin-top: 4px; }

/* ─────────────────────────────────────────
   ACCOUNT VIEW — greeting row
   ───────────────────────────────────────── */
.acct-header {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.sign-out-btn {
  background: none;
  border: none;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: var(--faint);
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.sign-out-btn:hover { color: var(--red); }

/* ── ACCOUNT ACTION BUTTONS ── */
.acct-actions {
  display: flex;
  gap: 8px;
}
/* 4-column grid with buttons floating above the 4th card */
.metric-grid-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 14px;
  margin-bottom: 1.5rem;
}
.acct-btn {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.acct-btn-deposit {
  background: var(--green);
  color: #fff;
  border: none;
}
.acct-btn-deposit:hover {
  background: var(--slate);
  transform: translateY(-1px);
}
.acct-btn-withdraw {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
}
.acct-btn-withdraw:hover {
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-1px);
}

/* ─────────────────────────────────────────
   YEAR SELECT DROPDOWN
   Shared class for all year/month select
   dropdowns (performance, account, ledger).
   ───────────────────────────────────────── */
.year-select {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.year-select:focus { border-color: var(--mint); }
.year-select option {
  background: var(--white);
  color: var(--text);
}

/* ─────────────────────────────────────────
   LEDGER TABS — Daily Ledger / Tx History
   ───────────────────────────────────────── */
.ledger-tabs {
  display: flex;
  gap: 0;
}
.ledger-tab {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 7px 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.ledger-tab:first-child { border-radius: 6px 0 0 6px; }
.ledger-tab:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.ledger-tab.active {
  background: var(--slate);
  color: #fff;
  border-color: var(--slate);
}

/* ─────────────────────────────────────────
   LEDGER FILTER ROW — month/year + page size
   ───────────────────────────────────────── */
.ledger-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.75rem;
}
.ledger-filters {
  display: flex;
  gap: 6px;
  align-items: center;
}
.ledger-info {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: 0.03em;
}

/* ─────────────────────────────────────────
   TX REQUEST MODAL — deposit/withdraw form
   ───────────────────────────────────────── */
.tx-req-label {
  display: block;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.tx-req-amount-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--cream);
  overflow: hidden;
  transition: border-color 0.15s;
}
.tx-req-amount-row:focus-within { border-color: var(--mint); }
.tx-req-dollar {
  font-family: 'Roboto Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  padding: 12px 0 12px 14px;
  line-height: 1;
  flex-shrink: 0;
}
.tx-req-amount-input {
  flex: 1;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: var(--text);
  padding: 12px 14px 12px 6px;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.tx-req-amount-input::-webkit-outer-spin-button,
.tx-req-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tx-req-textarea {
  resize: vertical;
  min-height: 60px;
  max-height: 160px;
  font-size: 13px;
  line-height: 1.5;
}

/* Ledger table: fixed column widths so $/% toggle doesn't shift layout */
.ledger-table { table-layout: fixed; }
.ledger-table th:nth-child(1) { width: 30%; }
.ledger-table th:nth-child(2) { width: 23%; }
.ledger-table th:nth-child(3) { width: 24%; }
.ledger-table th:nth-child(4) { width: 23%; }

/* ─────────────────────────────────────────
   LOGIN GATE — full-page login screen
   Mirrors the home hero's brand treatment (stem logo + Urbanist
   wordmark on a solid black/cream field) instead of a standalone
   plain-text logo. The form itself sits in a white card, matching
   the card language used everywhere else (cp-box, chart-card).
   ───────────────────────────────────────── */
#loginPage, #resetPage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  padding: 2rem;
}
[data-theme="light"] #loginPage,
[data-theme="light"] #resetPage {
  background: #e6e4da;
}

.gate-lockup { text-align: center; margin-bottom: 2.5rem; }
.gate-wordmark {
  font-family: 'Urbanist', sans-serif;
  font-size: clamp(40px, 8vw, 60px);
  font-weight: 800;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
}
[data-theme="light"] .gate-wordmark { color: #0a0a0a; }
.gate-sub {
  font-family: 'DM Serif Display', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,0.58);
  margin-top: 0.85rem;
  letter-spacing: 0.01em;
}
[data-theme="light"] .gate-sub { color: rgba(10,10,10,0.62); }

.gate-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
#loginPage .login-wrap, #resetPage .login-wrap { max-width: 100%; margin: 0; }
#loginPage .login-input, #resetPage .login-input {
  background: var(--cream);
  border-color: var(--border);
  color: var(--text);
}
#loginPage .login-input::placeholder, #resetPage .login-input::placeholder { color: var(--faint); }
#loginPage .login-input:focus, #resetPage .login-input:focus { border-color: var(--green); }
#loginPage .login-btn, #resetPage .login-btn { background: var(--slate); color: #fff; }
#loginPage .login-btn:hover, #resetPage .login-btn:hover { background: var(--slate-deep); }
.login-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
  min-height: 18px;
}

/* --- Forgot password link below the login button --- */
.forgot-link {
  text-align: center;
  margin-top: 0.6rem;
}
.forgot-link a {
  font-size: 0.75rem;
  color: var(--label);
  text-decoration: none;
  opacity: 0.55;
  transition: opacity 0.15s;
  letter-spacing: 0.01em;
}
.forgot-link a:hover { opacity: 1; }

/* --- Divider between login fields and forgot form --- */
.forgot-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0 0.85rem;
}

/* --- Success message shown after a reset email is sent --- */
.login-success {
  font-size: 0.78rem;
  color: var(--green);
  text-align: center;
  margin-top: 0.6rem;
  line-height: 1.45;
}

/* Main app wrapper — hidden until authenticated */
#mainApp { display: none; }
#mainApp.visible { display: block; }

/* Admin client switcher in nav */
.admin-switcher {
  position: relative;
  display: flex;
  align-items: center;
}
.admin-switcher input {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 5px;
  border: 1px solid rgba(168,230,192,0.25);
  background: rgba(168,230,192,0.08);
  color: rgba(255,255,255,0.85);
  outline: none;
  width: 130px;
  transition: border-color 0.15s;
}
.admin-switcher input::placeholder { color: rgba(255,255,255,0.35); }
.admin-switcher input:focus { border-color: var(--mint); }
.admin-switcher .switcher-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--slate);
  border: 1px solid rgba(168,230,192,0.25);
  border-radius: 5px;
  margin-top: 4px;
  z-index: 200;
  display: none;
}
.admin-switcher .switcher-dropdown.open { display: block; }
.admin-switcher .switcher-option {
  padding: 6px 12px;
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  transition: background 0.1s;
}
.admin-switcher .switcher-option:hover {
  background: rgba(168,230,192,0.12);
  color: var(--mint);
}

/* Loading indicator */
.loading-text {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--faint);
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   SETTINGS GEAR ICON (next to greeting)
   ───────────────────────────────────────── */
.settings-gear {
  background: none;
  border: none;
  font-size: 20px;
  color: var(--faint);
  cursor: pointer;
  padding: 0 0 0 8px;
  vertical-align: middle;
  transition: color 0.15s, transform 0.3s;
  line-height: 1;
}
.settings-gear:hover {
  color: var(--green);
  transform: rotate(90deg);
}

/* ─────────────────────────────────────────
   CHANGE PASSWORD MODAL
   ───────────────────────────────────────── */
.cp-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.cp-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.cp-title {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: var(--slate);
  margin-bottom: 1.25rem;
}
.cp-input {
  width: 100%;
  display: block;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--cream);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.cp-input:focus { border-color: var(--mint); }
.cp-input::placeholder { color: var(--faint); }
.cp-error {
  color: var(--red);
  font-size: 12px;
  min-height: 16px;
  margin-top: 2px;
}
.cp-success {
  color: var(--green);
  font-size: 12px;
  min-height: 16px;
}
.cp-actions {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
}
.cp-btn {
  flex: 1;
  background: var(--slate);
  color: #fff;
}
.cp-cancel {
  flex: 1;
  background: var(--cream);
  color: var(--muted);
  border: 1px solid var(--border);
}
.cp-cancel:hover {
  background: var(--white);
  border-color: var(--faint);
}

/* Dark mode overrides for change password & tx-request modals */
[data-theme="dark"] .cp-box     { background: var(--slate); border-color: rgba(168,230,192,0.15); }
[data-theme="dark"] .cp-title   { color: var(--mint-soft); }
[data-theme="dark"] .cp-input   { background: rgba(255,255,255,0.08); border-color: rgba(168,230,192,0.20); color: rgba(255,255,255,0.90); }
[data-theme="dark"] .cp-input::placeholder { color: rgba(255,255,255,0.35); }
[data-theme="dark"] .cp-input:focus { border-color: var(--mint); }
[data-theme="dark"] .cp-btn     { background: var(--mint); color: var(--slate-deep); }
[data-theme="dark"] .cp-cancel  { background: transparent; color: var(--muted); border-color: rgba(168,230,192,0.25); }
[data-theme="dark"] .tx-req-label  { color: var(--body-muted); }
[data-theme="dark"] .tx-req-amount-row { background: rgba(255,255,255,0.08); border-color: rgba(168,230,192,0.20); }
[data-theme="dark"] .tx-req-amount-row:focus-within { border-color: var(--mint); }
[data-theme="dark"] .tx-req-dollar { color: rgba(255,255,255,0.60); }
[data-theme="dark"] .tx-req-amount-input { color: rgba(255,255,255,0.90); }

/* Dark mode: year-select dropdown — brighter text on dark background */
[data-theme="dark"] .year-select {
  background: rgba(168,230,192,0.08);
  color: var(--heading-1);
  border-color: rgba(168,230,192,0.20);
}
[data-theme="dark"] .year-select option {
  background: #1e2e24;
  color: #e8eceb;
}

/* Dark mode: ledger tabs */
[data-theme="dark"] .ledger-tab       { color: var(--body-muted); border-color: var(--border); }
[data-theme="dark"] .ledger-tab.active { background: rgba(168,230,192,0.15); color: var(--heading-1); border-color: rgba(168,230,192,0.30); }


/* ─────────────────────────────────────────
   PILLAR CARDS — vertical stack variant
   Used on the home page "How it works" section.
   Single column, centered text within each card.
   ───────────────────────────────────────── */
/* Two-class selector (.pillar-grid.pillar-vertical) has higher specificity than
   .pillar-grid alone, guaranteeing the single-column layout wins */
.pillar-grid.pillar-vertical {
  grid-template-columns: 1fr !important;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 0;
  gap: 0;
  /* Shift cards right to make room for the step indicator on the left */
  position: relative;
}
.pillar-card-centered {
  text-align: left;
  align-items: flex-start;
  margin-left: 48px;  /* space for the step indicator */
}
.pillar-card-centered .pillar-icon {
  font-size: 32px;
  margin-bottom: 0.75rem;
}
.pillar-card-centered .pillar-step {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
  margin-bottom: 0.85rem;
}
/* Dark mode: ensure centered pillar-step titles are readable */
[data-theme="dark"] .pillar-card-centered .pillar-step {
  color: var(--heading-1);
}
/* Remove the top accent line — step indicator replaces it */
.pillar-card-centered::before {
  display: none;
}

/* ── STEP INDICATOR — vertical line + dot on left side ── */
.pillar-connector {
  display: flex;
  align-items: center;
  height: 44px;
  margin-left: 15px;   /* centres the line under the dot */
  position: relative;
}
.pillar-connector::before {
  content: '';
  display: block;
  width: 2px;
  height: 100%;
  background: var(--mint);
  opacity: 0.5;
  border-radius: 1px;
}
[data-theme="dark"] .pillar-connector::before {
  background: rgba(255,255,255,0.20);
}

/* Dot sits to the left of each card, aligned with the line */
.pillar-card-centered {
  position: relative;
}
.pillar-card-centered::after {
  content: '';
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--green);
  z-index: 1;
}
[data-theme="dark"] .pillar-card-centered::after {
  background: var(--heading-1);
  border-color: var(--slate-deep);
  box-shadow: 0 0 0 2px var(--heading-1);
}

/* ─────────────────────────────────────────
   ALL TRADES — wider inner container
   ───────────────────────────────────────── */
.inner.inner-wide {
  max-width: 1400px !important;
}
.data-table-wide {
  width: 100%;
  table-layout: auto;
}
.data-table-wide th,
.data-table-wide td {
  white-space: nowrap;
  padding-right: 14px;
  font-size: 12px;
}

/* ─────────────────────────────────────────
   TABLE CONTROLS — page-size selector row
   Sits above each admin table (All Trades,
   Events, Client Summary). Uses the same
   pill aesthetic as .period-tabs.
   ───────────────────────────────────────── */
.table-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.table-info {
  font-size: 11px;
  color: var(--faint);
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 0.03em;
}
.page-size-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--cream);
  border-radius: 7px;
  padding: 3px;
}
.page-size-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 6px 0 3px;
}
.page-size-btn {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  padding: 5px 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  border-radius: 5px;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.page-size-btn:hover  { color: var(--slate); }
.page-size-btn.active {
  background: var(--white);
  color: var(--slate);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] .page-size-group { background: rgba(168,230,192,0.08); }
[data-theme="dark"] .page-size-btn         { color: var(--body-muted); }
[data-theme="dark"] .page-size-btn.active  {
  background: rgba(168,230,192,0.15);
  color: var(--heading-1);
  box-shadow: none;
}

/* ─────────────────────────────────────────
   TABLE PAGINATION — prev/next controls
   Sits below each admin table.
   ───────────────────────────────────────── */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  min-height: 48px;
}
.page-btn {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 500;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.page-btn:hover:not(:disabled)  { border-color: var(--slate); color: var(--slate); }
.page-btn:disabled { opacity: 0.35; cursor: default; }
.page-label {
  font-size: 11px;
  font-family: 'Roboto Mono', monospace;
  color: var(--faint);
  letter-spacing: 0.03em;
}
[data-theme="dark"] .page-btn {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--body-muted);
}
[data-theme="dark"] .page-btn:hover:not(:disabled) {
  border-color: var(--mint);
  color: var(--heading-1);
}

/* ─────────────────────────────────────────
   STATS GRID — 4 columns for metric cards
   ───────────────────────────────────────── */
.stats-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1.5rem;
}

/* glass table-scroll (kept for events) */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────
   HERO DESC STRIP
   Sits between the dark banner and the chart-band.
   Subtle background with generous vertical padding.
   Text color: neutral gray (no green tint) — brighter in dark, darker in light.
   ───────────────────────────────────────── */
.hero-desc-strip {
  background: var(--cream);
  padding: 2.25rem 2rem;
  text-align: center;
}
.hero-desc-text {
  max-width: 600px;
  margin: 0 auto;
  font-size: 16px;
  font-style: italic;
  color: #c8c8c8;           /* neutral light gray — dark mode default (readable on #000) */
  line-height: 1.85;
  letter-spacing: 0.01em;
}
[data-theme="light"] .hero-desc-text {
  color: #4a4a4a;           /* neutral dark gray — readable on light cream bg */
}

/* ─────────────────────────────────────────
   HOME ANNUALIZED RETURN CALLOUT
   Sits inside .light-section above How It Works.
   Large serif number on cream background.
   ───────────────────────────────────────── */
.home-ann-callout {
  text-align: center;
  padding: 3.5rem 1rem 1rem;
}
.home-ann-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 12px;
}
.home-ann-val {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(56px, 9vw, 88px);
  line-height: 1;
  margin-bottom: 8px;
}
.home-ann-sub {
  font-size: 15px;   /* bumped from 13px per redesign goal #4 */
  color: var(--label);
  letter-spacing: 0.03em;
  margin-bottom: 2.5rem;
}

/* Trade event badge */
.badge-trade {
  background: rgba(58,170,30,0.12);
  color: var(--slate);
}
[data-theme="dark"] .badge-trade {
  background: rgba(168,230,192,0.12);
  color: var(--mint-soft);
}

/* Colour classes for the home annualized callout */
.home-ann-val.g { color: var(--green); }
.home-ann-val.r { color: var(--red);   }

/* ─────────────────────────────────────────
   UNIFIED SCORECARD CARD
   Two rows inside one glass card:
     Row 1 — All-time / YTD / MTD returns (large)
     Row 2 — 4×2 stat grid (since Sep 2024; was 5×2 before Avg trades/day + Profit factor removed)
   ───────────────────────────────────────── */
.scorecard-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}

/* ── Row 1: return metrics ── */
.scorecard-row1 {
  display: flex;
  align-items: stretch;
  padding: 1.5rem 2rem;
  gap: 0;
}
.scorecard-return-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}
.scorecard-return-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.45rem;
}
.scorecard-return-val {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.scorecard-return-val.g { color: var(--green); }
.scorecard-return-val.r { color: var(--red);   }
.scorecard-return-sub {
  font-size: 11px;
  color: var(--faint);
}
.scorecard-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  margin: 0.25rem 0;
}

/* ── Row separator with "Statistics" label ── */
.scorecard-row-sep {
  border-top: 1px solid var(--border);
  padding: 0.55rem 2rem;
  background: rgba(0,0,0,0.015);
  display: flex;
  align-items: center;
}
[data-theme="dark"] .scorecard-row-sep {
  background: rgba(255,255,255,0.02);
}
.scorecard-stats-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── Row 2: 6-col × 2-row stat grid ── */
.scorecard-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 1rem 1.25rem 1.25rem;
  gap: 0.75rem 0.5rem;
}
.scorecard-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.25rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--border);
}
[data-theme="dark"] .scorecard-stat-item {
  background: rgba(255,255,255,0.03);
}
[data-theme="dark"] .scorecard-stat-val {
  color: var(--mint-soft);
}
.scorecard-stat-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.scorecard-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 18px;
  line-height: 1;
  color: var(--slate);
}
.scorecard-stat-val.g { color: var(--green); }
.scorecard-stat-val.r { color: var(--red);   }
.scorecard-stat-sub {
  font-size: 9px;
  color: var(--faint);
  margin-top: 3px;
}

/* ── Desktop stat grid ordering ──
   HTML is interleaved (A1,B1, A2,B2, ...) for mobile 2-col pairing.
   On desktop (6-col), CSS order restores the original top-row-then-
   bottom-row layout:  A1 A2 A3 A4 A5 A6 / B1 B2 B3 B4 B5 B6.
   ── */
.sg-1a { order: 1; }
.sg-2a { order: 2; }
.sg-3a { order: 3; }
.sg-4a { order: 4; }
.sg-5a { order: 5; }
.sg-6a { order: 6; }
.sg-1b { order: 7; }
.sg-2b { order: 8; }
.sg-3b { order: 9; }
.sg-4b { order: 10; }
.sg-5b { order: 11; }
.sg-6b { order: 12; }

/* ─────────────────────────────────────────
   METRICS REFERENCE — formula explanations
   at the bottom of the performance page
   ───────────────────────────────────────── */
/* Hidden — uncomment display to restore the formula explanations */
.metrics-reference {
  display: none;
  margin-top: 1rem;
}
.metrics-ref-header {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.metrics-ref-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.metrics-ref-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.metrics-ref-item:nth-child(even) {
  border-right: none;
}
.metrics-ref-item:nth-last-child(-n+2) {
  border-bottom: none;
}
.metrics-ref-name {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--label);
  margin-bottom: 0.35rem;
}
.metrics-ref-desc {
  font-size: 12px;
  line-height: 1.55;
  color: var(--label);
  margin-bottom: 0.5rem;
}
.metrics-ref-formula {
  margin: 0.5rem 0 0.25rem;
  min-height: 1.2em;
}
.metrics-ref-formula .katex {
  font-size: 14px;
  color: var(--slate);
}
[data-theme="dark"] .metrics-ref-formula .katex {
  color: var(--mint-soft);
}
.metrics-ref-note {
  font-size: 10px;
  color: var(--faint);
  font-style: italic;
  margin-top: 0.15rem;
}

/* ─────────────────────────────────────────
   CHART GROUP — pairs two linked charts
   inside a shared outer container so users
   understand they are controlled together
   (e.g. cumulative return + max drawdown,
   or monthly return + daily return drill-down).
   The inner chart-cards lose their own bottom
   margin so they sit flush inside the group.
   ───────────────────────────────────────── */
.chart-group {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  padding: 1.25rem 1.25rem 0.5rem;
  margin-bottom: 1.5rem;
}
.chart-group-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 0.85rem;
  padding-left: 0.25rem;
}
/* Chart cards nested inside a group: no individual background, border,
   or bottom margin — the group wrapper provides the container. */
.chart-group .chart-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0.5rem;
  margin-bottom: 0;
}
/* Thin rule between the two cards in a group */
.chart-group .chart-card + .chart-card {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 0.25rem;
}
/* Restore internal header margin inside grouped cards */
.chart-group .chart-card .chart-card-header {
  margin-bottom: 1rem;
}


/* ═════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   All rules are inside @media queries — zero changes to desktop.

   Breakpoints:
     768px  — tablet / phone (main breakpoint)
     480px  — small phones (fine-tuning)

   Sections:
     1.  Mobile nav — hamburger button + drawer + overlay
     2.  General layout — inner padding, headings
     3.  Hero banner — stat cards, wordmark
     4.  Home page — chart band, pillar cards
     5.  Performance page — scorecard, charts, period tabs
     6.  Account page — metric cards, chart, transaction table
     7.  Login / reset pages
     8.  Shared components — buttons, period tabs, chart cards
     9.  Small-phone overrides (480px)
   ═════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────
   1. MOBILE NAV — hamburger, drawer, overlay
   ─────────────────────────────────────────
   Desktop: hamburger hidden, drawer off-screen.
   Mobile:  nav links hidden, hamburger shown.
   ───────────────────────────────────────── */

/* Hamburger button — always hidden on desktop */
.nav-hamburger {
  display: none;
}

/* Overlay — dims the page when drawer is open */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 149;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
}

/* Drawer — fixed panel, slides in from left */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100dvh;           /* dvh respects mobile browser chrome */
  background: var(--nav-bg);
  z-index: 150;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 1px solid rgba(255,255,255,0.10);
  overflow-y: auto;
}
.mobile-nav-drawer.open {
  transform: translateX(0);
}

/* Drawer header row: logo + close button */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.mobile-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.mobile-nav-logo {
  height: 36px;
  width: auto;
  flex-shrink: 0;
}
.mobile-nav-wordmark {
  font-family: 'Urbanist', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.005em;
  color: rgba(255,255,255,0.92);
}
.mobile-nav-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-nav-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}

/* Stacked nav links inside drawer */
.mobile-nav-links {
  flex: 1;
  padding: 0.75rem 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;   /* stack links vertically */
}
.mobile-nav-link {
  padding: 0.9rem 1.5rem;
  font-size: 15px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  min-height: 44px;
  display: flex;            /* flex for vertical centering of text within each row */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.mobile-nav-link.active {
  border-left: 3px solid var(--green);
  padding-left: calc(1.5rem - 3px);
}

/* Drawer footer: theme toggle + logout */
.mobile-nav-footer {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 0.75rem;
}
.mobile-nav-theme {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: rgba(255,255,255,0.65);
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s;
}
.mobile-nav-theme:hover {
  border-color: rgba(255,255,255,0.40);
  color: #fff;
}
.mobile-nav-theme-label {
  font-size: 11px;
}
.mobile-nav-logout {
  background: none;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  min-height: 44px;
  transition: border-color 0.15s, color 0.15s;
}
.mobile-nav-logout:hover {
  border-color: var(--red);
  color: var(--red);
}

/* Lock body scroll when drawer is open */
body.nav-open {
  overflow: hidden;
  touch-action: none;
}


@media (max-width: 768px) {

  /* ── 1a. Show hamburger, hide desktop nav items ── */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;          /* push to right edge */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .nav-hamburger:hover {
    background: rgba(255,255,255,0.08);
  }
  /* Three-line icon */
  .nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: rgba(255,255,255,0.80);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
  }
  /* Animate hamburger into ✕ when open */
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Hide all desktop nav items on mobile */
  nav .nav-link,
  nav .nav-spacer,
  nav .admin-switcher,
  nav .theme-toggle {
    display: none !important;
  }

  /* Tighten nav height on mobile */
  nav {
    height: 64px;
    padding: 0 1rem;
    gap: 0;
  }
  .brand-logo {
    height: 44px;
  }


  /* ── 2. General layout ── */
  .inner {
    padding: 1.5rem 0.875rem 3.5rem;
  }
  .light-section .inner {
    padding-top: 1rem;
  }
  .section-title {
    font-size: 24px;
    margin-bottom: 1rem;
  }


  /* ── 3. Hero banner ── */
  .hero-banner {
    padding: 0 1.25rem 3rem;
    min-height: auto;
  }
  .hero-lockup {
    padding-top: 3rem;
  }
  /* Stat cards: 3-col → 1-col stack */
  .hero-stats {
    grid-template-columns: 1fr;
    margin-top: 2rem;
    gap: 1px;                              /* 1px gap lets the background colour bleed through as a separator */
    background: rgba(255,255,255,0.20);    /* separator line colour — slightly more opaque than desktop */
  }
  .hero-stat {
    padding: 1.1rem 1.25rem;
  }
  .hero-stat-val {
    font-size: 30px;
  }
  .hero-tagline {
    font-size: clamp(20px, 5vw, 26px);
    margin-top: 1.25rem;
  }
  .leaf-wrap {
    height: 110px;
  }


  /* ── 4. Home page ── */
  /* Chart band */
  .chart-band-inner {
    padding: 1.5rem 1rem 1.25rem;
  }
  .chart-band-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .chart-band-big {
    font-size: 28px;
  }
  /* Home equity chart slightly shorter */
  .chart-band-inner [style*="height:300px"] {
    height: 200px !important;
  }

  /* Pillar cards — remove left offset used for step indicator */
  .pillar-card-centered {
    margin-left: 0;
    text-align: left;
  }
  .pillar-card-centered::after {
    display: none;           /* hide step dot (relies on margin-left offset) */
  }
  .pillar-connector {
    margin-left: 0;
  }
  .pillar-grid.pillar-vertical {
    max-width: 100%;
  }
  .home-ann-callout {
    padding: 2rem 0.5rem 0.5rem;
  }
  .home-ann-val {
    font-size: clamp(44px, 13vw, 70px);
  }


  /* ── 5. Performance page ── */
  /* AUM balance banner */
  .balance-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem;
  }
  .balance-val {
    font-size: 34px;
  }
  .balance-right {
    text-align: left;
  }

  /* Scorecard Row 1: flex row → column stack */
  .scorecard-row1 {
    flex-direction: column;
    padding: 1.25rem 1.25rem;
    gap: 0;
  }
  .scorecard-return-item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border);
  }
  .scorecard-return-item:last-child {
    border-bottom: none;
  }
  .scorecard-return-val {
    font-size: clamp(22px, 6vw, 30px);
    text-align: right;
  }
  .scorecard-return-label {
    margin-bottom: 0;
  }
  /* Hide vertical dividers — replaced by horizontal borders above */
  .scorecard-divider {
    display: none;
  }
  .scorecard-row-sep {
    padding: 0.55rem 1.25rem;
  }

  /* Scorecard stat grid: 6-col → 2-col */
  .scorecard-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0.75rem 1rem 1rem;
    gap: 0.6rem;
  }
  /* Reset desktop CSS order — mobile uses natural HTML order (interleaved pairs) */
  .scorecard-stat-grid .scorecard-stat-item {
    order: unset !important;
  }
  /* Stat values slightly smaller */
  .scorecard-stat-val {
    font-size: 16px;
  }

  /* Reset tooltip edge corrections for 2-col grid on mobile:
     odd items (col 1) anchor left, even items (col 2) anchor right */
  .scorecard-stat-grid [data-tooltip]::after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .scorecard-stat-grid [data-tooltip]:nth-child(odd)::after {
    left: 0;
    right: auto;
    transform: translateX(0);
  }
  .scorecard-stat-grid [data-tooltip]:nth-child(even)::after {
    left: auto;
    right: 0;
    transform: translateX(0);
  }

  /* Metrics reference: 2-col → 1-col on mobile */
  .metrics-ref-grid {
    grid-template-columns: 1fr;
  }
  .metrics-ref-item {
    border-right: none;
  }
  .metrics-ref-item:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }
  .metrics-ref-item:last-child {
    border-bottom: none;
  }

  /* Charts: ensure canvases are 100% wide and shorten heights a bit */
  canvas {
    max-width: 100%;
  }
  /* Override inline height styles on chart wrappers */
  .chart-card [style*="height:280px"] { height: 200px !important; }
  .chart-card [style*="height:240px"] { height: 180px !important; }
  .chart-card [style*="height:180px"] { height: 140px !important; }
  .chart-card [style*="height:260px"] { height: 200px !important; }

  /* Chart card header: wrap controls below title on small screens */
  .chart-card-header {
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
  }

  /* Period tabs: allow wrapping */
  .period-tabs {
    flex-wrap: wrap;
  }

  /* Chart group inner padding */
  .chart-group {
    padding: 1rem 0.75rem 0.25rem;
  }

  /* Performance page: chart area header rows */
  #perfPeriodTabs {
    flex-wrap: wrap;
    gap: 3px;
  }


  /* ── 6. Account page ── */
  /* Widen the inner container slightly — account page felt narrower than others */
  #account .inner {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* metric-grid-btns: rebuild as 2-col grid, overriding all inline grid-column/row styles.
     Structure inside .metric-grid-btns (in DOM order):
       child 1: .acct-header  (greeting + gear icon)  → row 1, full width
       child 2: .metric-card  (Opening balance)        → row 2, col 1
       child 3: .metric-card  (Current balance)        → row 2, col 2
       child 4: .metric-card  (Net P&L)                → row 3, col 1
       child 5: .metric-card  (Annualized & Total)     → row 3, col 2
  */
  .metric-grid-btns {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
  }
  /* child 1: greeting header — full width, row 1 */
  .metric-grid-btns > *:nth-child(1) {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  /* child 2: Opening balance — row 2 col 1 */
  .metric-grid-btns > *:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  /* child 3: Current balance — row 2 col 2 */
  .metric-grid-btns > *:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  /* child 4: Net P&L — row 3 col 1 */
  .metric-grid-btns > *:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }
  /* child 5: Annualized & Total Return — row 3 col 2 */
  .metric-grid-btns > *:nth-child(5) {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  .metric-val {
    font-size: 22px;
  }


  /* Transaction table: wrap in a scroll container using a pseudo-wrapper approach.
     The table must NOT be display:block — that breaks its natural 100% width stretch.
     Instead we let overflow-x on the card-level handle it, and ensure the table
     fills its container fully with proper cell padding. */
  .chart-card .tx-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;          /* fixed layout: columns share width evenly, no overflow */
    box-sizing: border-box;
  }
  /* Give td/th a little horizontal breathing room on mobile */
  .chart-card .tx-table th,
  .chart-card .tx-table td {
    padding-left: 4px;
    padding-right: 4px;
  }
  /* Transaction history action buttons: wrap on small screens */
  .chart-card-header > div[style*="display:flex"] {
    flex-wrap: wrap;
  }

  /* Ledger tabs + action buttons: stack on mobile */
  .chart-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ledger-tab { font-size: 11px; padding: 6px 12px; }

  /* Filter row: stack on narrow screens */
  .ledger-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  /* TX request modal — same compact treatment as change-password */
  #txReqModal .cp-box {
    margin: 0 1rem;
    max-width: 100%;
    padding: 1.25rem 1.25rem 1rem;
  }
  #txReqModal .cp-title { font-size: 18px; margin-bottom: 0.9rem; }
  #txReqModal .cp-input {
    font-size: 16px;   /* ≥16px prevents iOS Safari auto-zoom */
  }


  /* ── 6b. Admin pages ── */

  /* inner-wide (All Trades page): override 1400px — pointless on mobile */
  .inner.inner-wide {
    max-width: 100% !important;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }

  /* table-controls: keep as a row (info left, show-buttons right) —
     this matches what you see in the screenshots and is the right layout.
     Just tighten padding for mobile. */
  .table-controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.75rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .table-info {
    font-size: 10px;
    white-space: nowrap;
  }

  /* page-size button group: shrink slightly on mobile */
  .page-size-group {
    flex-shrink: 0;
  }
  .page-size-btn {
    padding: 4px 8px;
    font-size: 10px;
  }
  .page-size-label {
    font-size: 9px;
    padding: 0 4px 0 2px;
  }

  /* .table-scroll wrappers (client-summary, events): scroll horizontally */
  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tables inside .table-scroll: give cells proper horizontal padding
     so columns breathe and don't run into each other */
  .table-scroll .tx-table {
    width: auto;
    min-width: 100%;
    table-layout: auto;           /* auto: let content define column widths */
  }
  .table-scroll .tx-table th,
  .table-scroll .tx-table td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;          /* prevent cell content from wrapping and crashing columns */
  }
  /* First column: tighter left edge flush with card */
  .table-scroll .tx-table th:first-child,
  .table-scroll .tx-table td:first-child {
    padding-left: 4px;
  }

  /* All Trades wide table: horizontal scroll inside its card */
  .data-table-wide {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .data-table-wide th,
  .data-table-wide td {
    font-size: 11px;
    padding-right: 10px;
    white-space: nowrap;
  }

  /* Pagination: tighten spacing on mobile */
  .table-pagination {
    padding: 0.65rem 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .page-btn {
    padding: 5px 10px;
    font-size: 10px;
  }
  .page-label {
    font-size: 10px;
  }


  /* ── 7. Login / reset pages ── */
  #loginPage, #resetPage {
    padding: 1.5rem 1rem;
    justify-content: flex-start;
    padding-top: 3.5rem;
  }
  .gate-card {
    padding: 1.75rem 1.25rem;
  }
  .gate-lockup {
    margin-bottom: 1.75rem;
  }
  .login-input {
    font-size: 16px;       /* 16px prevents iOS auto-zoom on focus */
    padding: 14px 16px;
    min-height: 50px;
  }
  .btn.login-btn {
    min-height: 50px;
    font-size: 14px;
  }


  /* ── 8. Shared components ── */
  /* Buttons: comfortable tap height */
  .btn {
    min-height: 44px;
  }
  .period-tab {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* Footer */
  footer {
    font-size: 11px;
    padding: 1.5rem 1rem;
  }

  /* Change-password modal — compact so it fits without zooming on mobile */
  .cp-box {
    margin: 0 1rem;
    max-width: 100%;
    padding: 1.25rem 1.25rem 1rem;
  }
  .cp-box .cp-title {
    font-size: 18px;
    margin-bottom: 0.9rem;
  }
  .cp-box .cp-input {
    padding: 8px 12px;
    font-size: 16px; /* must be ≥16px — iOS Safari auto-zooms inputs below this threshold */
    margin-bottom: 8px;
  }
  .cp-box .cp-actions {
    margin-top: 0.75rem;
  }

}


/* ─────────────────────────────────────────
   9. SMALL-PHONE OVERRIDES (480px)
   ───────────────────────────────────────── */
@media (max-width: 480px) {

  nav {
    height: 58px;
    padding: 0 0.75rem;
  }
  .brand-logo {
    height: 38px;
  }

  .hero-wordmark {
    font-size: clamp(60px, 18vw, 90px);
  }
  .hero-stat-val {
    font-size: 26px;
  }

  /* Scorecard stat values even tighter */
  .scorecard-stat-val {
    font-size: 15px;
  }
  .scorecard-return-val {
    font-size: clamp(20px, 7vw, 26px);
  }

  .balance-val {
    font-size: 28px;
  }
  .metric-val {
    font-size: 20px;
  }

  .inner {
    padding: 1.25rem 0.75rem 3rem;
  }

  /* Stat grid on very small phones: keep 2-col but shrink padding */
  .scorecard-stat-grid {
    padding: 0.5rem 0.65rem 0.75rem;
    gap: 0.5rem;
  }

}