/* Design tokens — three themes (Country/Dark/Light), switched via
   [data-theme] on <html> (see js/theme.js). "Country" — matching
   tech.ridgeway.cloud's look — is the default. All values below are
   re-mapped per theme; every other rule in this file only ever references
   the variable names, never a raw colour, so the whole app re-themes
   instantly. --font-display is used only for the app title/byline; every
   other font-family reference uses --font. */
:root {
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-display: var(--font);

  --app-bg: #14161a;
  --card-bg: #1c1f26;
  --card-bg-raised: #262a33;
  --border-subtle: #2c303a;
  --border-strong: #3d424e;

  --text-primary: #eef0f3;
  --muted: #8b93a1;
  --brand-accent: #4cc9f0;

  --btn-primary: #3b82f6;
  --btn-primary-hov: #5b9bfb;
  --btn-neutral: #262a33;
  --btn-neutral-hov: #323744;
  --btn-neutral-text: #eef0f3;
  --btn-accent: #16a184;
  --btn-accent-hov: #1cbe9c;
  --btn-destructive: #dc4a4a;
  --btn-destructive-hov: #ea5f5f;

  --gain: #34d399;
  --loss: #f87171;
  --warning: #fbbf24;
  --warning-bg: #3a2e10;
  --highlight: #eab308;

  --danger-bg: #3a1414;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --overlay-bg: rgba(8, 9, 12, 0.65);
  --focus-ring: rgba(59, 130, 246, 0.35);

  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;

  --header-height: 53px;
}

[data-theme="light"] {
  --font-display: var(--font);
  --app-bg: #f2f3f6;
  --card-bg: #ffffff;
  --card-bg-raised: #f1f2f5;
  --border-subtle: #e2e4e9;
  --border-strong: #cfd2d9;

  --text-primary: #171a1f;
  --muted: #667085;
  --brand-accent: #0891b2;

  --btn-primary: #2563eb;
  --btn-primary-hov: #1d4ed8;
  --btn-neutral: #eceef2;
  --btn-neutral-hov: #dfe2e8;
  --btn-neutral-text: #171a1f;
  --btn-accent: #0d9488;
  --btn-accent-hov: #0b7d73;
  --btn-destructive: #dc2626;
  --btn-destructive-hov: #b91c1c;

  --gain: #059669;
  --loss: #dc2626;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --highlight: #b45309;

  --danger-bg: #fee2e2;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 20px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.14);
  --overlay-bg: rgba(23, 26, 31, 0.4);
  --focus-ring: rgba(37, 99, 235, 0.2);
}

/* "Country" — the default theme, matching tech.ridgeway.cloud: warm cream
   paper background, near-black warm text, deep forest-green brand accent,
   and an "Instrument Serif" display face for the app title (loaded from
   Google Fonts in index.html). */
[data-theme="country"] {
  --font-display: "Instrument Serif", Georgia, serif;

  /* Same frosted-glass treatment as the two Glassmorphism themes further
     down — card/raised backgrounds and borders become translucent (instead
     of flat opaque colours) so the blur + gradient glow added below shows
     through. Hue is unchanged, just alpha. */
  --app-bg: #f4f1eb;
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-bg-raised: rgba(232, 227, 216, 0.62);
  --border-subtle: rgba(224, 219, 204, 0.55);
  --border-strong: rgba(201, 190, 172, 0.7);

  --text-primary: #1a1917;
  --muted: #6b6558;
  --brand-accent: #2a3d28;

  /* Gradients instead of flat fills, mixing Country's own two brand
     colours (forest green + gold) rather than introducing new hues. */
  --btn-primary: linear-gradient(135deg, #2a3d28, #3a4f38);
  --btn-primary-hov: linear-gradient(135deg, #3a4f38, #4a5f48);
  --btn-neutral: linear-gradient(135deg, rgba(232, 227, 216, 0.75), rgba(232, 227, 216, 0.4));
  --btn-neutral-hov: linear-gradient(135deg, rgba(221, 214, 194, 0.88), rgba(221, 214, 194, 0.55));
  --btn-neutral-text: #1a1917;
  --btn-accent: linear-gradient(135deg, #2a3d28, #93701f);
  --btn-accent-hov: linear-gradient(135deg, #3a4f38, #a9832f);
  --btn-destructive: linear-gradient(135deg, #a1403a, #7d322d);
  --btn-destructive-hov: linear-gradient(135deg, #b94f48, #a1403a);

  --gain: #3f7d4f;
  --loss: #a1403a;
  --warning: #a1750f;
  --warning-bg: #f3e6c4;
  --highlight: #8a6d1f;

  --danger-bg: #f2ded9;

  --shadow-sm: 0 1px 3px rgba(26, 25, 23, 0.08);
  --shadow-md: 0 6px 20px rgba(26, 25, 23, 0.1);
  --shadow-lg: 0 16px 48px rgba(26, 25, 23, 0.18), 0 0 40px rgba(42, 61, 40, 0.14);
  --overlay-bg: rgba(26, 25, 23, 0.45);
  --focus-ring: rgba(42, 61, 40, 0.25);

  /* Softer, more rounded "Vision Pro" surfaces — matches both Glassmorphism themes. */
  --radius-sm: 9px;
  --radius-md: 16px;
  --radius-lg: 22px;

  /* Taller header — the title/byline block below is bigger in this theme. */
  --header-height: 74px;
}

/* "Dark Glassmorphism" — Apple Vision Pro meets modern SaaS: near-black
   base (#0B0F14), translucent frosted-glass cards, a purple→blue gradient
   glow behind everything, and blurred surfaces for the header/sidebar/modals.
   The actual blur/backdrop-filter/gradient rules live further down (search
   "glass" theme) since those aren't expressible as plain colour tokens —
   this block only sets the colour/shadow/radius variables every other rule
   already reads. */
[data-theme="glass"] {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --app-bg: #0b0f14;
  --card-bg: rgba(255, 255, 255, 0.055);
  --card-bg-raised: rgba(255, 255, 255, 0.09);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.26);

  --text-primary: #f2f5fa;
  --muted: #98a2b3;
  --brand-accent: #a78bfa;

  --btn-primary: linear-gradient(135deg, #7c3aed, #3b82f6);
  --btn-primary-hov: linear-gradient(135deg, #8b5cf6, #60a5fa);
  --btn-neutral: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04));
  --btn-neutral-hov: linear-gradient(135deg, rgba(255, 255, 255, 0.19), rgba(255, 255, 255, 0.09));
  --btn-neutral-text: #f2f5fa;
  --btn-accent: linear-gradient(135deg, #22d3ee, #6366f1);
  --btn-accent-hov: linear-gradient(135deg, #67e8f9, #818cf8);
  --btn-destructive: linear-gradient(135deg, #ef4444, #dc2626);
  --btn-destructive-hov: linear-gradient(135deg, #f87171, #ef4444);

  --gain: #34d399;
  --loss: #fb7185;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.14);
  --highlight: #c4b5fd;

  --danger-bg: rgba(239, 68, 68, 0.14);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 10px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 26px 64px rgba(0, 0, 0, 0.6), 0 0 44px rgba(124, 58, 237, 0.18);
  --overlay-bg: rgba(4, 6, 9, 0.75);
  --focus-ring: rgba(139, 92, 246, 0.4);

  /* Softer, more rounded "Vision Pro" surfaces. */
  --radius-sm: 9px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --header-height: 60px;
}

/* "Light Glassmorphism" — the same frosted-glass, blurred-surface look as
   Dark Glassmorphism above, just flipped to a light base with an orange→red
   gradient glow instead of purple→blue. Structural rules (blur, gradients,
   large typography) live further down alongside the dark variant's. */
[data-theme="glass-light"] {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --app-bg: #faf6f3;
  --card-bg: rgba(255, 255, 255, 0.5);
  --card-bg-raised: rgba(255, 255, 255, 0.72);
  --border-subtle: rgba(120, 53, 15, 0.1);
  --border-strong: rgba(120, 53, 15, 0.22);

  --text-primary: #241a14;
  --muted: #8a7468;
  --brand-accent: #ea580c;

  --btn-primary: linear-gradient(135deg, #E3906A, #C8614A); /* Anthropic-toned orange (#D97757) gradient */
  --btn-primary-hov: linear-gradient(135deg, #E9A07D, #D26F57);
  --btn-neutral: linear-gradient(135deg, rgba(120, 53, 15, 0.1), rgba(120, 53, 15, 0.03));
  --btn-neutral-hov: linear-gradient(135deg, rgba(120, 53, 15, 0.18), rgba(120, 53, 15, 0.08));
  --btn-neutral-text: #241a14;
  --btn-accent: linear-gradient(135deg, #E3906A, #C8614A);
  --btn-accent-hov: linear-gradient(135deg, #E9A07D, #D26F57);
  --btn-destructive: linear-gradient(135deg, #dc2626, #b91c1c);
  --btn-destructive-hov: linear-gradient(135deg, #ef4444, #dc2626);

  --gain: #059669;
  --loss: #dc2626;
  --warning: #b45309;
  --warning-bg: rgba(180, 83, 9, 0.14);
  --highlight: #C8614A;

  --danger-bg: rgba(220, 38, 38, 0.1);

  --shadow-sm: 0 2px 10px rgba(120, 53, 15, 0.1);
  --shadow-md: 0 10px 32px rgba(120, 53, 15, 0.14);
  --shadow-lg: 0 26px 64px rgba(120, 53, 15, 0.18), 0 0 44px rgba(249, 115, 22, 0.18);
  --overlay-bg: rgba(250, 246, 243, 0.7);
  --focus-ring: rgba(249, 115, 22, 0.35);

  /* Softer, more rounded "Vision Pro" surfaces — matches the dark variant. */
  --radius-sm: 9px;
  --radius-md: 16px;
  --radius-lg: 22px;

  --header-height: 60px;
}

/* "Professional" — institutional-confidence-meets-modern-fintech: a single
   deep ink-navy base throughout (no per-section light/dark flips — every
   other rule in this file assumes --text-primary reads correctly against
   both --app-bg and --card-bg, so unlike a marketing page this can't
   literally flip a "hero" section to warm off-white without a much bigger
   text-colour refactor). Warm off-white shows up instead as the dominant
   TEXT colour and as a restrained highlight surface (raised cards, active
   tabs), and the "one confident accent, used sparingly" is a single
   electric teal — spent almost entirely on primary CTAs, the brand
   wordmark, and focus rings, never on more than one element per view.
   Hairline borders (8–12% white opacity) replace heavy shadows; the only
   glow is a very low-opacity radial mesh behind the login screen (this
   app's closest equivalent to a marketing "hero") and a barely-there
   backdrop blur on the header — deliberately restrained to "glass used
   once, not everywhere", unlike the three Glassmorphism-flavoured themes
   above. Structural rules (grain overlay, header blur, card hover-lift,
   tabular-numeral stats) live further down, alongside the other themes'. */
[data-theme="professional"] {
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --app-bg: #0b1220;
  --card-bg: #101828;
  --card-bg-raised: #16202f;
  --border-subtle: rgba(248, 247, 244, 0.08);
  --border-strong: rgba(248, 247, 244, 0.16);

  --text-primary: #f8f7f4;
  --muted: #8891a3;
  --brand-accent: #14b8a6;

  /* Deeper teal than --brand-accent for button fills specifically — the
     bright #14b8a6 reads great as TEXT on navy (7.5:1) but fails WCAG AA
     for the white button label on top of it (2.5:1). These two shades keep
     the same hue but darken enough for the forced-white .btn text to clear
     4.5:1 (see the code comment at the top of this file). */
  --btn-primary: #0f766e;
  --btn-primary-hov: #107a71;
  --btn-neutral: rgba(248, 247, 244, 0.06);
  --btn-neutral-hov: rgba(248, 247, 244, 0.1);
  --btn-neutral-text: #f8f7f4;
  --btn-accent: #115e59;
  --btn-accent-hov: #0f766e;
  --btn-destructive: #b3261e;
  --btn-destructive-hov: #dc2626;

  --gain: #22c55e;
  --loss: #f87171;
  --warning: #eab308;
  --warning-bg: rgba(234, 179, 8, 0.12);
  --highlight: #eab308;

  --danger-bg: rgba(239, 68, 68, 0.1);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(20, 184, 166, 0.08);
  --overlay-bg: rgba(5, 8, 14, 0.7);
  --focus-ring: rgba(20, 184, 166, 0.35);

  /* "Rounded corners consistent at 12–16px; buttons pill or 8px, pick one" —
     8px for buttons/inputs (--radius-sm), 12/16 for cards and modals. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --header-height: 60px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--app-bg);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  transition: background 0.2s ease, color 0.2s ease;
}

.hidden { display: none !important; }

/* thin, theme-aware scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* consistent, visible keyboard focus everywhere, without adding an ugly
   default outline to every mouse click */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--btn-primary);
  outline-offset: 2px;
}

/* ---------- Login ---------- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-bg);
}
.login-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 340px;
  max-width: 92vw;
  box-shadow: var(--shadow-lg);
}
.app-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 0; color: var(--brand-accent); letter-spacing: -0.01em; line-height: 1.1; }
.app-byline { font-style: italic; font-family: var(--font-display); color: var(--muted); font-size: 0.85em; margin: 2px 0 0; }
.app-subtitle { color: var(--muted); margin: 14px 0 20px 0; }

/* Generic underlined text-button — used for secondary, low-emphasis actions
   that don't warrant a full .btn (e.g. "Forgot password?"). */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-accent);
  cursor: pointer;
  text-decoration: underline;
}
.link-btn:hover { opacity: 0.8; }
.proj-info-link { margin-left: 8px; font-weight: 400; font-size: 12px; text-transform: none; letter-spacing: normal; color: var(--brand-accent); }
.login-forgot-link { display: block; margin: 8px 0 4px; text-align: right; }

/* ---------------------------------------------------------------------------
   "Corporate" theme — matched to invesco.com (UK), checked Sept 2026.
   Their palette: Invesco blue #000AD2 (hover #262FD9), dark blue #000078,
   black text on white, light greys #F6F6F6 / #F0F0F0, hairline
   rgba(0,0,0,.15) borders, square buttons, 4px cards, flat (no shadows).
   Type: Invesco uses the proprietary Graphik (sans) + InvescoEditor (serif
   headlines, blue italic accent words); Inter and Source Serif 4 stand in.
   --------------------------------------------------------------------------- */
[data-theme="corporate"] {
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --app-bg: #f6f6f6;
  --card-bg: #ffffff;
  --card-bg-raised: #f6f6f6;
  --border-subtle: rgba(0, 0, 0, 0.12);
  --border-strong: rgba(0, 0, 0, 0.24);

  --text-primary: #000000;
  --muted: #555555;
  --brand-accent: #000ad2;

  --btn-primary: #000ad2;
  --btn-primary-hov: #262fd9;
  --btn-neutral: #f0f0f0;
  --btn-neutral-hov: #dcdcdc;
  --btn-neutral-text: #000000;
  --btn-accent: #000078;
  --btn-accent-hov: #000ad2;
  --btn-destructive: #d52219;
  --btn-destructive-hov: #b01c14;

  --gain: #038747;
  --loss: #d52219;
  --warning: #c25100;
  --warning-bg: rgba(249, 103, 6, 0.1);
  --highlight: #000ad2;

  --danger-bg: rgba(213, 34, 25, 0.07);

  --shadow-sm: none;
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.18);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --focus-ring: rgba(0, 10, 210, 0.35);

  --radius-sm: 0px;
  --radius-md: 4px;
  --radius-lg: 4px;

  --header-height: 64px;
}

/* ---------------------------------------------------------------------------
   "Bread" theme — built on the deep navy of the Bread logo (#0B3661): a warm,
   friendly DARK theme. White text on layered navy surfaces (matching the white
   wordmark), a wheat-gold brand accent for titles/links/highlights (the crust),
   and soft rounded corners echoing the rounded logo lettering.
   --------------------------------------------------------------------------- */
[data-theme="bread"] {
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;

  --app-bg: #082a4d;          /* a touch deeper than the logo navy so cards lift */
  --card-bg: #0b3661;         /* the logo navy */
  --card-bg-raised: #0f416f;
  --border-subtle: #1c4f80;
  --border-strong: #2c6199;

  --text-primary: #f4f8fc;    /* near-white, like the wordmark */
  --muted: #a6c1dc;
  --brand-accent: #e8b96a;    /* wheat-gold "crust" accent */

  /* Labels are forced white (.btn), so button fills stay readable blues; the
     gold shows through as the brand accent (title, links, underline, ticks). */
  --btn-primary: #2f6fb3;
  --btn-primary-hov: #3d82cc;
  --btn-neutral: #123f6b;
  --btn-neutral-hov: #17508a;
  --btn-neutral-text: #eaf2fb;
  --btn-accent: #1f5c9e;
  --btn-accent-hov: #2a6cb3;
  --btn-destructive: #d64550;
  --btn-destructive-hov: #b8323c;

  --gain: #4ade80;
  --loss: #f87171;
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --highlight: #e8b96a;

  --danger-bg: rgba(248, 113, 113, 0.12);

  --shadow-sm: 0 1px 2px rgba(2, 12, 28, 0.4);
  --shadow-md: 0 4px 16px rgba(2, 12, 28, 0.5);
  --shadow-lg: 0 20px 48px rgba(2, 12, 28, 0.6);
  --overlay-bg: rgba(4, 18, 38, 0.6);
  --focus-ring: rgba(232, 185, 106, 0.4);

  /* Soft, friendly rounding to echo the rounded logo lettering. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --header-height: 60px;
}

/* Country theme: title sizes match tech.ridgeway.cloud's own (89.6px hero
   heading, 28.8px header wordmark) at desktop widths, scaling down smoothly
   on narrow screens via clamp() so nothing overflows. The login card also
   widens to give the much bigger serif title room to breathe. */
[data-theme="country"] .login-card { width: 460px; }
[data-theme="country"] .app-title {
  font-size: clamp(40px, 8vw, 89.6px);
  font-weight: 400;
  line-height: 1.02;
}
[data-theme="country"] .app-title-sm {
  font-size: clamp(18px, 3vw, 28.8px);
  font-weight: 400;
}
/* The byline reads too small next to the much bigger login-screen title —
   bump it up (login/signup only; the header's byline has its own rule). */
[data-theme="country"] .login-card .app-byline {
  font-size: 22px;
}
.login-card label, .modal-card label { display: block; margin: 12px 0 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.login-card input, .modal-card input, .modal-card select {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--card-bg-raised);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-card input:focus, .modal-card input:focus, .modal-card select:focus {
  outline: none;
  border-color: var(--btn-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
/* The width:100% above targets text/email/password inputs — it also
   matched the "Remember me" checkbox (still an <input> inside .login-card),
   stretching its layout box to the full row width and pushing the label
   text onto the next line instead of sitting beside it. Scope it back down
   to its natural size within any .checkbox-row (login or modal). */
.checkbox-row input[type="checkbox"] { width: auto; flex-shrink: 0; }
.error-text { color: var(--loss); font-size: 14px; min-height: 16px; margin-top: 8px; }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  cursor: pointer;
  color: #fff;
  background: var(--btn-neutral);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--btn-neutral-hov); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--btn-primary-hov); box-shadow: var(--shadow-md); }
.btn-neutral { background: var(--btn-neutral); color: var(--btn-neutral-text); }
.btn-neutral:hover { background: var(--btn-neutral-hov); }
.btn-accent { background: var(--btn-accent); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--btn-accent-hov); box-shadow: var(--shadow-md); }
.btn-destructive { background: var(--btn-destructive); }
.btn-destructive:hover { background: var(--btn-destructive-hov); }
.btn-block { width: 100%; margin-top: 14px; }
.btn-sm { padding: 6px 10px; font-size: 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.file-btn { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- App shell ---------- */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 50;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-title-block { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.app-title-sm { font-family: var(--font-display); font-size: 21px; margin: 0; white-space: nowrap; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.header-title-block .app-byline { font-size: 14px; margin: 0; line-height: 1.1; white-space: nowrap; }
.app-version { color: var(--muted); font-size: 14px; white-space: nowrap; }
/* Lives at the bottom of the sidebar now (not the header) — margin-top:auto
   pushes it to the foot of the flex column, past whatever else is in the
   menu, rather than sitting right after the last button. Still shows on
   narrow screens now: the sidebar is a full-height drawer with room to
   spare, unlike the cramped header it used to clutter. */
.sidebar-version { margin-top: auto; padding-top: 10px; text-align: left; }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.user-email { color: var(--muted); font-size: 14px; }

@media (max-width: 860px) {
  .app-header { padding: 10px 12px; gap: 8px; }
  .header-left { gap: 6px; }
  .header-right { gap: 8px; }
  .app-title-sm { font-size: 17px; }
  .user-email { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 420px) {
  .user-email { display: none; } /* Sign Out button alone is enough context */
}

.menu-toggle {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 18px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
  align-self: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-toggle:hover { background: var(--card-bg-raised); border-color: var(--border-strong); }

/* ---------- Sidebar (left menu: portfolio switch + actions) ----------
   Always an off-canvas, slide-in/out burger menu — on every screen size,
   not just mobile — toggled via .menu-toggle / #btnMenuToggle. */
.app-body {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - var(--header-height));
}

.sidebar {
  width: 264px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--border-subtle);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 150;
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }

.sidebar-divider { height: 1px; background: var(--border-subtle); margin: 10px 0; }

/* Collapsible sidebar sections (accordion). Each .sidebar-section holds a
   clickable title row that expands/collapses its .sidebar-section-body. */
.sidebar-section { border-top: 1px solid var(--border-subtle); }
.sidebar-section:first-of-type { border-top: none; }
.sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.06em;
  padding: 9px 8px;
  margin: 0;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.sidebar-section-label { flex: 1; min-width: 0; }
.sidebar-section-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.65;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.sidebar-section-title:hover {
  color: var(--text-primary);
  background: var(--card-bg-raised);
  padding-left: 12px;
}
.sidebar-section-title:hover .sidebar-section-icon { opacity: 1; transform: scale(1.14); }
.admin-group-body .sidebar-section-icon { width: 14px; height: 14px; flex-basis: 14px; }
.sidebar-chevron {
  font-size: 12px;
  line-height: 1;
  transition: transform 0.18s ease;
  transform: rotate(0deg);
}
.sidebar-section.collapsed .sidebar-chevron { transform: rotate(-90deg); }
.sidebar-section-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding-bottom: 10px;
  /* Height is driven in JS (0 ⇆ content px ⇆ auto) so the section slides open
     smoothly like invesco.com's nav, rather than snapping via display:none.
     Easing/curve match a material-style ease-in-out. */
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease;
}
.sidebar-section.collapsed .sidebar-section-body {
  height: 0;
  opacity: 0;
  padding-bottom: 0;
}

/* Admin area: everything admin-only is grouped under one "Admin" section,
   set off from the normal menu by a thick divider so it's clearly separate. */
.admin-group { border-top: 3px solid var(--border-strong); margin-top: 6px; }
.admin-group > .sidebar-section-title { color: var(--text-primary); }
.admin-group-body { padding-left: 8px; border-left: 2px solid var(--border-subtle); margin-left: 2px; }
.admin-group-body .sidebar-subsection { border-top: 1px solid var(--border-subtle); }
.admin-group-body .sidebar-subsection:first-of-type { border-top: none; }
.admin-group-body .sidebar-subsection > .sidebar-section-title { font-size: 12px; }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; }
.sidebar-actions .btn { margin-top: 0; }
.sidebar-viewing { display: flex; flex-direction: column; gap: 6px; }
.sidebar-viewing .select { width: 100%; }

.theme-picker-row { display: flex; align-items: center; gap: 8px; }
.theme-picker-row .select { flex: 1; }

/* Keep every sidebar control inside the menu width. Selects have an intrinsic
   min-content width set by their longest <option> (e.g. "Dark Glassmorphism",
   "STOXX Europe 600 (GBP)"); without min-width:0 that overflows the sidebar
   and the flex row. width:100% + border-box makes buttons/inputs/selects fit
   the padded column exactly. */
.sidebar { overflow-x: hidden; }
.sidebar .select,
.sidebar .input,
.sidebar .btn {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.sidebar .select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Portfolio tabs (Pensions/ISAs/Other) — top-left, under the header, styled
   like actual file tabs (flat bottom, rounded top, attached to the content
   below) rather than plain buttons — matches the original v1 look. */
.tab-bar {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  background: var(--app-bg);
  flex-wrap: wrap;
}
.tab-btn {
  background: var(--card-bg);
  color: var(--muted);
  border: 1px solid var(--border-subtle);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 20px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Divider between the portfolio-provider tabs (Pensions/ISAs/Other) and the
   Bank Accounts tab — they track different things, so separate them visually. */
.tab-sep {
  align-self: stretch;
  width: 1px;
  margin: 6px 10px 0;
  background: var(--border-strong);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { background: var(--card-bg-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
/* Markets and Find Investments are separate sections (not portfolios) —
   pinned as a pair to the far right of the tab bar, away from
   Pensions/ISAs/Other. Markets carries the auto margin so it (and
   Find Investments right after it) both get pushed over together. */
.tab-btn-markets { margin-left: auto; }
/* When the Markets tab is hidden (Advanced Investor off), it can't carry the
   auto margin, so hand it to Find Investments instead — otherwise Find/Bank
   collapse to the left next to the portfolio tabs. */
.tab-btn-markets.hidden ~ .tab-btn-find { margin-left: auto; }
/* Model Portfolios sits far right; if Markets and Find are both hidden it
   carries the auto margin itself. */
.tab-btn-markets.hidden ~ .tab-btn-find.hidden ~ .tab-btn-models { margin-left: auto; }

@media (max-width: 860px) {
  .tab-bar { padding: 10px 14px 0; gap: 3px; }
  .tab-btn { padding: 8px 14px; font-size: 14px; }
  .tab-btn-markets { margin-left: 0; }
  .tab-btn-markets.hidden ~ .tab-btn-find { margin-left: 0; }
  .tab-btn-markets.hidden ~ .tab-btn-find.hidden ~ .tab-btn-models { margin-left: 0; }
}

.sidebar-overlay {
  display: none;
}
.sidebar-overlay.visible {
  display: block;
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  z-index: 140;
}

.stale-warning {
  margin: 0 0 16px;
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  color: var(--warning);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
}

/* Shown only while the admin account is viewing/editing someone else's
   tracker — deliberately louder than .stale-warning so it's impossible to
   mistake another account's data for your own. */
.admin-banner {
  margin: 0 0 16px;
  background: var(--danger-bg);
  border: 1px solid var(--loss);
  color: var(--loss);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
}

.view-container { flex: 1; min-width: 0; padding: 0 24px 40px; }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.select {
  background: var(--card-bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: var(--font);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.select:focus { outline: none; border-color: var(--btn-primary); box-shadow: 0 0 0 3px var(--focus-ring); }

/* Tick boxes take the theme's brand colour when checked (navy in Corporate). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-accent); }
.snapshot-picker-label { color: var(--muted); font-size: 14px; }

.mobile-col-toggle { display: none; } /* desktop: all columns already visible */

@keyframes colSlideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---------- Narrow screens: tighten spacing, stack panels ---------- */
@media (max-width: 860px) {
  .view-container { padding: 0 14px 32px; }
  .summary-bar { gap: 20px; }

  /* Provider table: hide the detail columns (Start, History, One-off Pay
     In, Withdrawal, Std Monthly / Day, Std Monthly Out / Day) by default —
     the "Show More Columns" toggle above the table reveals them again. */
  .mobile-col-toggle { display: inline-block; margin: 10px 10px 0; }
  /* Higher specificity (.table-scroll prefix) so these beat the base
     `.rows-table { min-width: 1400px }` rule, which appears LATER in the file
     and would otherwise win at equal specificity — keeping the collapsed table
     at 1400px and forcing a long horizontal scroll to reach Current/Gain/%. */
  .table-scroll .rows-table { min-width: 0; width: 100%; }
  .table-scroll .rows-table .col-extra { display: none; }
  .table-scroll .rows-table.show-extra-cols { min-width: 1400px; }
  .table-scroll .rows-table.show-extra-cols .col-extra {
    display: table-cell;
    animation: colSlideIn 0.2s ease;
  }
  /* Tighten widths/padding in the collapsed view so Provider + Current Value +
     Gain + Performance all fit a phone's width — no horizontal scroll needed
     to see them. (Expanded "Show More Columns" restores the wide layout.) */
  /* Tight enough that Provider + Current + Gain + Performance + the chart icon
     all fit a ~360px phone width with NO horizontal overflow (which was pushing
     the actions column, and its chart icon, off the right edge). */
  .table-scroll .rows-table:not(.show-extra-cols) th,
  .table-scroll .rows-table:not(.show-extra-cols) td { padding-left: 4px; padding-right: 4px; font-size: 13px; }
  .table-scroll .rows-table:not(.show-extra-cols) input.readonly-name { width: 74px; }
  .table-scroll .rows-table:not(.show-extra-cols) input[type=text],
  .table-scroll .rows-table:not(.show-extra-cols) input[type=number] { width: 60px; font-size: 13px; }
  /* Collapsed mobile view: only the chart icon is needed — hide edit/delete so
     the chart icon pulls left and sits clear of the screen edge. (They return
     in "Show More Columns" / on desktop.) */
  .table-scroll .rows-table:not(.show-extra-cols) .row-actions .icon-btn:nth-child(n+2) { display: none; }
  .table-scroll .rows-table:not(.show-extra-cols) .icon-btn { padding: 4px 4px; font-size: 13px; }
  .table-scroll .rows-table:not(.show-extra-cols) td.actions-cell { padding-right: 10px; }

  .bottom-row { flex-direction: column; }
  .panel-compact { max-width: none; }
  .dashboard-chart-panel { min-width: 0; }
}

/* Phone rotated to landscape: blow the "All providers — growth over time"
   chart up to full screen for a proper look at the trend. Fires only on short-
   and-wide viewports (a phone on its side), and only on the dashboard tab —
   this panel lives inside main.view-container, which is hidden on the Markets
   and Find Investments tabs, so their own charts aren't affected. Chart.js v4
   auto-resizes to the container via ResizeObserver, so no JS is needed. */
@media (orientation: landscape) and (max-height: 500px) {
  .dashboard-chart-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    margin: 0;
    border-radius: 0;
    background: var(--card-bg);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
  }
  .dashboard-chart-panel .panel-title { margin-bottom: 4px; }
  .dashboard-chart-panel .dashboard-chart-canvas-wrap {
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .dashboard-chart-panel .chart-footer { display: none; } /* maximise the chart area */
}

/* Portrait phone: the growth chart is unreadably squished, so hide it and show
   a prompt to rotate instead (landscape gives the full-screen view above). */
.chart-rotate-hint { display: none; }
@media (max-width: 860px) and (orientation: portrait) {
  .dashboard-chart-panel .dashboard-chart-canvas-wrap,
  .dashboard-chart-panel .chart-footer { display: none; }
  .dashboard-chart-panel .chart-rotate-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    min-height: 120px;
    padding: 20px;
    color: var(--muted);
    font-size: 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
  }
}

/* Individual provider chart on mobile: open full screen, in landscape. A phone
   can't be force-rotated by the page, so when it's held in PORTRAIT we rotate
   the chart modal itself 90° and size it to the swapped viewport dimensions —
   the chart then fills the screen sideways for a proper wide read. Chart.js v4
   resizes to the new container automatically (ResizeObserver). */
@media (max-width: 860px) and (orientation: portrait) {
  /* Sit above the dashboard chart's own landscape full-screen (z-index 200)
     so an open provider chart is never overlaid by the all-providers chart. */
  #chartModal { z-index: 300; }
  #chartModal .modal-card-wide {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vh;
    height: 100vw;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 12px 14px;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
  }
  #chartModal .chart-footer { display: none; } /* maximise chart area */
}
/* Phone already in landscape: just go full screen, no rotation needed. Keyed on
   width alone (≤950px catches phones in landscape but not tablets/laptops) —
   the old max-height:500px gate was missing on taller phones, so on rotation
   neither this nor the portrait rule matched and the chart fell back to the
   small default modal. */
@media (max-width: 950px) and (orientation: landscape) {
  /* Above the dashboard chart's landscape full-screen (z-index 200) so tilting
     to landscape with a provider chart open keeps showing THAT chart, not the
     all-providers one. */
  #chartModal { z-index: 300; }
  #chartModal .modal-card-wide {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 10px 12px;
  }
  #chartModal .chart-footer { display: none; }
}

.summary-bar { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.stat-title { color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0.04em; font-weight: 600; }
.stat-value { font-size: 24px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }
.stat-lg { font-size: 24px; }
.stat-sublabel { font-size: 13px; color: var(--muted); margin-top: 2px; }
.notify-label { margin-left: auto; color: var(--muted); font-size: 14px; }

/* Benchmark result, moved into the summary bar (far right) to free up the
   space the standalone Benchmark card used to take. */
.stat-benchmark { min-width: 180px; max-width: 260px; }
.stat-benchmark .panel-result { margin-top: 2px; }

.panel-title { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 8px; }
/* Small "last refreshed" style caption next to a panel title (e.g. Index
   Chart's "Updates 12:00 UTC") — deliberately un-bold/un-tracked/normal
   case so it doesn't compete with the eyebrow-style title text next to it. */
.fi-index-updates-note { font-weight: 400; letter-spacing: normal; text-transform: none; margin-left: 4px; }
/* Projector card doesn't need the full table width — keep it compact and
   left-aligned. The freed-up space to its right holds the all-providers
   growth chart, in the same visual format as the per-provider charts. */
.panel-compact { max-width: 420px; flex-shrink: 0; }

.bottom-row { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; }
.dashboard-chart-panel { flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.dashboard-chart-canvas-wrap { min-height: 280px; flex: 1; }
.dashboard-chart-panel .chart-footer { max-height: 110px; margin-top: 8px; }
.panel-result { font-size: 16px; margin-top: 8px; }
.panel-result-lg { font-size: 21px; font-weight: 700; color: var(--highlight); }
.panel-sublabel { font-size: 13px; color: var(--muted); margin-top: 4px; }
.proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: center; }
.proj-grid label { font-size: 14px; color: var(--muted); }
.input {
  background: var(--card-bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  font-family: var(--font);
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { outline: none; border-color: var(--btn-primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ---------- Table ---------- */
.table-card { padding: 0; overflow: hidden; position: relative; }
/* Quick-save shortcut for the provider dash — same action as the sidebar's
   SAVE SNAPSHOT button, just reachable without opening the sidebar. Sits
   top-right of the card regardless of screen size or the "Show More
   Columns" toggle's own (independent) position. */
.table-card-save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 17px;
  line-height: 1;
  padding: 6px 9px;
}
.table-scroll { overflow-x: auto; }
.rows-table { border-collapse: collapse; width: 100%; min-width: 1400px; }
/* History Log modal's table only has two columns (Date, Amount) and lives in
   a narrow modal-card — the 1400px min-width above is tuned for the wide
   provider dashboard table and was forcing an unnecessary horizontal
   scrollbar here. Scrolls vertically instead once there are enough
   transactions to need it. */
.history-log-table { min-width: 0; }
.history-log-scroll { overflow-x: visible; max-height: 50vh; overflow-y: auto; }
.rows-table th {
  text-align: left;
  font-size: 13px;
  color: var(--muted);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 12px 8px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  background: var(--card-bg);
}
.rows-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.rows-table tbody tr { transition: background 0.1s ease; }
.rows-table tbody tr:hover { background: var(--card-bg-raised); }
.rows-table input[type=text], .rows-table input[type=number] {
  background: var(--card-bg-raised);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  width: 90px;
  font-family: var(--font);
  font-size: 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rows-table input[type=text]:focus, .rows-table input[type=number]:focus {
  outline: none;
  border-color: var(--btn-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.rows-table input.readonly-name { background: transparent; border: none; color: var(--text-primary); font-weight: 700; width: 190px; text-overflow: ellipsis; }
.rows-table input.day-input { width: 40px; }
.day-pair { display: flex; gap: 4px; align-items: center; }
.day-pair span { color: var(--muted); font-size: 13px; }
.history-cell-wrap { display: flex; gap: 4px; align-items: center; }
.history-cell-wrap input { min-width: 0; flex: 1; }
.history-cell-wrap .icon-btn { flex-shrink: 0; padding: 4px 6px; }
.cell-value { font-weight: 700; }
/* Desktop: provider table number values one point smaller than the base body
   size, so the figures sit a touch tighter on the wide layout. (Mobile keeps
   the larger size for touch legibility.) */
@media (min-width: 861px) {
  .rows-table td { font-size: 15px; }
  .rows-table input[type=text], .rows-table input[type=number] { font-size: 14px; }
  /* Desktop "Show More Columns": hide One-off Pay In + Withdrawal by default
     (they carry .col-desktop-extra); the toggle reveals them. Other columns
     stay visible on desktop. */
  .mobile-col-toggle { display: inline-block; margin: 12px 12px 0; }
  .rows-table .col-desktop-extra { display: none; }
  .rows-table.show-extra-cols .col-desktop-extra {
    display: table-cell;
    animation: colSlideIn 0.22s ease;
  }
}
/* Ticker/Company links to Google Finance (see tickerLinkHtml/companyLinkHtml
   in find-investments.js) — styled to read as a normal cell at rest, with an
   underline only on hover so the results table doesn't look link-heavy. */
#fiResultsBody a { color: inherit; text-decoration: none; }
#fiResultsBody a:hover { text-decoration: underline; color: var(--brand-accent); }

/* "More detail" buttons under each Find Investments mode's short blurb —
   opens #fiModeInfoModal with the fuller explanation (see MODE_INFO in
   find-investments.js). Styled as an inline text link, not a boxed button,
   so the trimmed-down mobile blurbs stay visually lightweight. */
.fi-more-detail {
  background: none;
  border: none;
  padding: 0;
  margin-left: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-accent);
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
}
.fi-more-detail:hover { opacity: 0.8; }
.cell-muted { color: var(--muted); }
.cell-gain { color: var(--gain); }
.cell-loss { color: var(--loss); }
.cell-auto { color: var(--warning); }
/* width:1% + white-space:nowrap is the standard table trick to make a
   column shrink to its content instead of soaking up the table's leftover
   width — otherwise this, being the last/emptiest-header column, ends up
   stretched with the buttons stranded on the far side of dead space. */
.rows-table td.actions-cell { width: 1%; white-space: nowrap; }
.row-actions { display: flex; gap: 4px; }
.icon-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--muted);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  font-size: 14px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--card-bg-raised); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
  width: 380px;
  max-width: 92vw; /* never overflow narrow phones (SE / small Androids) */
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
/* Chart modal takes over almost the whole viewport so the graph itself gets
   as much room as possible, instead of being squeezed into a ~900px card. */
.modal-card-wide {
  width: 97vw;
  max-width: none;
  height: 94vh;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-card h2 { margin: 0 0 4px 0; font-weight: 700; letter-spacing: -0.01em; }
.modal-note { color: var(--muted); font-size: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-header-row { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }

.chart-canvas-wrap { flex: 1; min-height: 0; position: relative; margin-top: 8px; }
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

.chart-footer {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
  flex-shrink: 0;
  max-height: 22vh;
  overflow-y: auto;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg-raised);
  border: 1px solid var(--border-subtle);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  z-index: 200;
  font-size: 15px;
  box-shadow: var(--shadow-lg);
}

/* ---------- Find Investments: index chart (top of tab) ---------- */
.fi-index-card { margin-bottom: 16px; }

/* Drag-to-reorder Markets-tab cards. Each .mkt-card gets a grip handle in
   its top-right corner; dragging it reorders the cards (order persisted). */
.mkt-card { position: relative; }
.mkt-drag-handle {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  padding: 2px 6px;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 2px;
  color: var(--muted);
  cursor: grab;
  user-select: none;
  border-radius: 6px;
  opacity: 0.55;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.mkt-drag-handle:hover { opacity: 1; background: var(--border-subtle); }
.mkt-drag-handle:active { cursor: grabbing; }
.mkt-card.mkt-dragging { opacity: 0.5; outline: 2px dashed var(--brand-accent, var(--border-subtle)); outline-offset: -2px; }
.fi-index-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.fi-index-row .select { max-width: 280px; }
.fi-index-summary { font-size: 15px; color: var(--muted); }
.fi-index-summary strong { color: var(--text-primary); }
.fi-index-summary .gain { color: var(--gain); }
.fi-index-summary .loss { color: var(--loss); }

/* Market summary table — one-view snapshot of every indicator, below the chart. */
.fi-market-summary { margin-top: 16px; }
.panel-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.fi-summary-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fi-summary-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.fi-summary-table tr:last-child td { border-bottom: none; }
.fi-summary-table td:first-child { color: var(--text-primary); font-weight: 500; white-space: normal; }
.fi-summary-table .gain { color: var(--gain); }
.fi-summary-table .loss { color: var(--loss); }

.fi-index-description { margin: 0 0 14px; }
.fi-index-blurb { font-size: 15px; line-height: 1.55; color: var(--text-primary); margin: 0 0 8px; }
.fi-index-facts { margin: 0; font-size: 14px; }
.fi-index-facts dt { color: var(--muted); text-transform: none; letter-spacing: 0.03em; font-weight: 600; margin-top: 6px; }
.fi-index-facts dd { margin: 0 0 2px; color: var(--text-primary); }

.fi-period-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fi-period-btn {
  background: var(--card-bg-raised);
  color: var(--muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 5px 13px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.fi-period-btn:hover { color: var(--text-primary); }
.fi-period-btn.active { background: var(--btn-primary); color: #fff; border-color: var(--btn-primary); box-shadow: var(--shadow-sm); }

.fi-index-chart-wrap { position: relative; height: 280px; }
.fi-index-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  padding: 0 20px;
}

/* ---------- Find Investments (Mode 17 "Compounder" scan) ---------- */
.fi-settings-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* Grid items default to a content-based min-width (min-width: auto), which
   for a <select> means the browser won't shrink it below its WIDEST option
   text — e.g. "Cannibal Capital Allocators (share buyback compounders)" is
   far wider than a phone screen's half-column track. Without this, the
   select (and the whole grid/card) overflows the viewport to the right on
   mobile instead of wrapping its own text. min-width: 0 lets it actually
   shrink to the track width like every other grid item. */
.fi-settings-grid select,
.fi-settings-grid .select { width: 100%; min-width: 0; }
@media (max-width: 860px) {
  .fi-settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  /* Two columns is still too tight for a label + select/input pair on a
     phone-width screen — stack to one column instead of squeezing text. */
  .fi-settings-grid { grid-template-columns: 1fr; }
}
.fi-actions-row { justify-content: flex-start; margin-top: 16px; flex-wrap: wrap; }
.fi-actions-row .select { max-width: 220px; width: 100%; min-width: 0; }

.fi-universe-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 4px;
}
.fi-universe-import-row .snapshot-picker-label { flex: 1; min-width: 220px; }

.fi-progress-wrap {
  height: 10px;
  border-radius: 999px;
  background: var(--card-bg-raised);
  overflow: hidden;
  margin: 4px 0 10px;
}
.fi-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--btn-primary);
  transition: width 0.3s ease;
}

.fi-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 16px 16px 0;
}
.fi-link-pref { margin: 0; white-space: nowrap; }

.fi-flag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  margin-right: 4px;
  white-space: nowrap;
}
.fi-flag-caveat { background: var(--warning-bg); color: var(--warning); }
.fi-flag-buybacks { background: var(--card-bg-raised); color: var(--gain); }
.fi-flag-dilution { background: var(--danger-bg); color: var(--loss); }
.fi-flag-peg { background: var(--danger-bg); color: var(--loss); }

.fi-detail-body { font-size: 15px; line-height: 1.7; max-height: 60vh; overflow-y: auto; }
.fi-detail-body dt { color: var(--muted); font-size: 13px; text-transform: none; letter-spacing: 0.03em; margin-top: 8px; }
.fi-detail-body dd { margin: 0 0 2px; }

/* ================== "Dark Glassmorphism" theme — structural effects ==================
   The colour/shadow/radius tokens for this theme live up in the [data-theme="glass"]
   block near the top of the file, same as every other theme. What's here is
   the stuff that can't be expressed as a plain CSS variable: background
   gradients, backdrop-filter blur, gradient text, and the "large typography"
   sizing bumps. Every selector below is scoped to [data-theme="glass"] so it
   has zero effect on Country/Dark/Light. */

/* Dark base + a soft purple-to-blue glow, fixed so it doesn't scroll away. */
[data-theme="glass"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(139, 92, 246, 0.28), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.22), transparent 50%),
    radial-gradient(circle at 50% 115%, rgba(99, 102, 241, 0.14), transparent 60%),
    var(--app-bg);
  background-attachment: fixed;
}

/* Frosted-glass cards — translucent + blurred so the gradient glow behind
   them shows through softly. */
[data-theme="glass"] .card,
[data-theme="glass"] .modal-card,
[data-theme="glass"] .login-card {
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Blur behind the header, sidebar drawer, and modal backdrop — the "blur
   effects behind menus" part of the brief. */
[data-theme="glass"] .app-header,
[data-theme="glass"] .sidebar {
  background: rgba(11, 15, 20, 0.55);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}
[data-theme="glass"] .modal-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Tabs, inputs, and selects pick up the same translucent glass treatment as
   cards, just without their own blur (they already sit on a blurred card). */
[data-theme="glass"] .tab-btn { background: rgba(255, 255, 255, 0.045); }
[data-theme="glass"] .tab-btn.active { background: rgba(255, 255, 255, 0.12); }
[data-theme="glass"] .select,
[data-theme="glass"] .input,
[data-theme="glass"] .login-card input,
[data-theme="glass"] .modal-card input,
[data-theme="glass"] .modal-card select {
  background: rgba(255, 255, 255, 0.055);
}

/* The dropdown POPUP list a <select> opens is painted by the OS/browser
   chrome, not this page — it can't inherit blur or a translucent rgba
   background like the closed control can. Left as-is, it fell back to each
   browser's own default (often a plain white popup), which combined with
   our light --text-primary option text made every option unreadable. Give
   the popup an explicit solid dark background here instead. */
[data-theme="glass"] select option {
  background-color: #141a24;
  color: var(--text-primary);
}

/* Gradient "purple → blue" title text. */
[data-theme="glass"] .app-title,
[data-theme="glass"] .app-title-sm {
  background: linear-gradient(135deg, #c4b5fd 0%, #93c5fd 60%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Every button now carries a gradient token (see the [data-theme="glass"]
   block above), not just Primary/Accent — give all four types a matching
   translucent border, and a soft glow tinted to each one's own colour
   instead of the flat shadow the other themes use. Neutral gets a subtle
   white glow to stay quiet next to the more colourful action buttons. */
[data-theme="glass"] .btn-primary,
[data-theme="glass"] .btn-accent,
[data-theme="glass"] .btn-neutral,
[data-theme="glass"] .btn-destructive {
  border: 1px solid rgba(255, 255, 255, 0.14);
}
[data-theme="glass"] .btn-primary,
[data-theme="glass"] .btn-accent {
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.35);
}
[data-theme="glass"] .btn-primary:hover,
[data-theme="glass"] .btn-accent:hover {
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.5);
}
[data-theme="glass"] .btn-neutral { box-shadow: 0 4px 16px rgba(255, 255, 255, 0.08); }
[data-theme="glass"] .btn-neutral:hover { box-shadow: 0 6px 22px rgba(255, 255, 255, 0.12); }
[data-theme="glass"] .btn-destructive { box-shadow: 0 4px 20px rgba(239, 68, 68, 0.32); }
[data-theme="glass"] .btn-destructive:hover { box-shadow: 0 6px 28px rgba(239, 68, 68, 0.45); }

/* ================== "Light Glassmorphism" theme — structural effects ==================
   Same idea as Dark Glassmorphism just above (see its comment for the full
   rationale) — the colour/shadow/radius tokens live in the [data-theme="glass-light"]
   block near the top of the file; this is the blur/gradient/typography
   plumbing that can't be a plain variable. Orange→red instead of purple→blue,
   light base instead of dark. */

/* Light base + a soft orange-to-red glow, fixed so it doesn't scroll away. */
[data-theme="glass-light"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(249, 115, 22, 0.22), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(239, 68, 68, 0.18), transparent 50%),
    radial-gradient(circle at 50% 115%, rgba(251, 146, 60, 0.14), transparent 60%),
    var(--app-bg);
  background-attachment: fixed;
}

/* Frosted-glass cards — translucent + blurred so the gradient glow behind
   them shows through softly. */
[data-theme="glass-light"] .card,
[data-theme="glass-light"] .modal-card,
[data-theme="glass-light"] .login-card {
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Blur behind the header, sidebar drawer, and modal backdrop. */
[data-theme="glass-light"] .app-header,
[data-theme="glass-light"] .sidebar {
  background: rgba(250, 246, 243, 0.6);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}
[data-theme="glass-light"] .modal-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Tabs, inputs, and selects pick up the same translucent glass treatment as
   cards, just without their own blur (they already sit on a blurred card). */
[data-theme="glass-light"] .tab-btn { background: rgba(120, 53, 15, 0.045); }
[data-theme="glass-light"] .tab-btn.active { background: rgba(120, 53, 15, 0.12); }
[data-theme="glass-light"] .select,
[data-theme="glass-light"] .input,
[data-theme="glass-light"] .login-card input,
[data-theme="glass-light"] .modal-card input,
[data-theme="glass-light"] .modal-card select {
  background: rgba(255, 255, 255, 0.55);
}

/* Same reasoning as the dark variant's option-popup fix above — the native
   dropdown list can't inherit blur/translucency, so give it an explicit
   solid (light) background instead of trusting the browser default. */
[data-theme="glass-light"] select option {
  background-color: #fdf8f4;
  color: var(--text-primary);
}

/* Gradient "orange → red" title text. */
[data-theme="glass-light"] .app-title,
[data-theme="glass-light"] .app-title-sm {
  background: linear-gradient(135deg, #f97316 0%, #ef4444 60%, #dc2626 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Every button now carries a gradient token, not just Primary/Accent — give
   all four types a matching translucent border, and a soft glow tinted to
   each one's own colour instead of the flat shadow the other themes use. */
[data-theme="glass-light"] .btn-primary,
[data-theme="glass-light"] .btn-accent,
[data-theme="glass-light"] .btn-neutral,
[data-theme="glass-light"] .btn-destructive {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
[data-theme="glass-light"] .btn-primary,
[data-theme="glass-light"] .btn-accent {
  box-shadow: 0 4px 18px rgba(217, 119, 87, 0.28);
}
[data-theme="glass-light"] .btn-primary:hover,
[data-theme="glass-light"] .btn-accent:hover {
  box-shadow: 0 6px 24px rgba(217, 119, 87, 0.38);
}
[data-theme="glass-light"] .btn-neutral { box-shadow: 0 4px 16px rgba(120, 53, 15, 0.08); }
[data-theme="glass-light"] .btn-neutral:hover { box-shadow: 0 6px 22px rgba(120, 53, 15, 0.12); }
[data-theme="glass-light"] .btn-destructive { box-shadow: 0 4px 20px rgba(220, 38, 38, 0.28); }
[data-theme="glass-light"] .btn-destructive:hover { box-shadow: 0 6px 28px rgba(220, 38, 38, 0.4); }

/* ================== "Country" theme — Glassmorphism structural effects ==================
   Same brief as the two dedicated Glassmorphism themes above (frosted-glass
   blur, gradient glow, gradient title text, large typography) applied to
   Country's existing palette instead of a new one — no new hues, just
   translucency + blur + gradients built from the greens/gold Country
   already uses (see the [data-theme="country"] token block near the top,
   which was updated to make card/border colours translucent for this). */

/* Cream base + a very soft green-to-gold glow, fixed so it doesn't scroll away. */
[data-theme="country"] body {
  background:
    radial-gradient(circle at 15% -10%, rgba(42, 61, 40, 0.1), transparent 55%),
    radial-gradient(circle at 85% 0%, rgba(147, 112, 31, 0.1), transparent 50%),
    radial-gradient(circle at 50% 115%, rgba(63, 125, 79, 0.08), transparent 60%),
    var(--app-bg);
  background-attachment: fixed;
}

/* Frosted-glass cards — translucent + blurred so the gradient glow behind
   them shows through softly. */
[data-theme="country"] .card,
[data-theme="country"] .modal-card,
[data-theme="country"] .login-card {
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}

/* Blur behind the header, sidebar drawer, and modal backdrop. */
[data-theme="country"] .app-header,
[data-theme="country"] .sidebar {
  background: rgba(244, 241, 235, 0.65);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}
[data-theme="country"] .modal-overlay {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Tabs, inputs, and selects pick up the same translucent glass treatment as
   cards, just without their own blur (they already sit on a blurred card). */
[data-theme="country"] .tab-btn { background: rgba(232, 227, 216, 0.45); }
[data-theme="country"] .tab-btn.active { background: rgba(232, 227, 216, 0.85); }
[data-theme="country"] .select,
[data-theme="country"] .input,
[data-theme="country"] .login-card input,
[data-theme="country"] .modal-card input,
[data-theme="country"] .modal-card select {
  background: rgba(255, 255, 255, 0.5);
}

/* Same reasoning as the other two Glassmorphism themes — the native dropdown
   popup can't inherit blur/translucency, so give it an explicit solid
   background instead of trusting the browser default. */
[data-theme="country"] select option {
  background-color: #fbf9f4;
  color: var(--text-primary);
}

/* Gradient title text, mixing Country's own forest-green brand accent with
   its gold highlight — same idea as purple→blue / orange→red on the other
   two themes, just Country's existing colours. Font size/weight/line-height
   are untouched (set by the rules above, in the Login section) since
   Country's big serif title is already its own "large typography". */
[data-theme="country"] .app-title,
[data-theme="country"] .app-title-sm {
  background: linear-gradient(135deg, #2a3d28 0%, #5c7a52 50%, #93701f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Every button now carries a gradient token, not just Primary/Accent — give
   all four types a matching translucent border, and a soft glow tinted to
   each one's own colour instead of the flat shadow the other themes use. */
[data-theme="country"] .btn-primary,
[data-theme="country"] .btn-accent,
[data-theme="country"] .btn-neutral,
[data-theme="country"] .btn-destructive {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
[data-theme="country"] .btn-primary,
[data-theme="country"] .btn-accent {
  box-shadow: 0 4px 20px rgba(42, 61, 40, 0.25);
}
[data-theme="country"] .btn-primary:hover,
[data-theme="country"] .btn-accent:hover {
  box-shadow: 0 6px 28px rgba(42, 61, 40, 0.35);
}
[data-theme="country"] .btn-neutral { box-shadow: 0 4px 16px rgba(26, 25, 23, 0.06); }
[data-theme="country"] .btn-neutral:hover { box-shadow: 0 6px 22px rgba(26, 25, 23, 0.1); }
[data-theme="country"] .btn-destructive { box-shadow: 0 4px 20px rgba(161, 64, 58, 0.28); }
[data-theme="country"] .btn-destructive:hover { box-shadow: 0 6px 28px rgba(161, 64, 58, 0.4); }

/* Large typography — bigger, bolder numbers and headings throughout. Shared
   across all three Glassmorphism-flavoured themes since the sizing itself
   doesn't differ, just the colours set above/further up. Country's app-title
   / app-title-sm are deliberately excluded here — its own serif clamp()
   sizing (see the Login section) is already bigger than these values. */
[data-theme="glass"] .app-title,
[data-theme="glass-light"] .app-title { font-size: 38px; }
[data-theme="glass"] .app-title-sm,
[data-theme="glass-light"] .app-title-sm { font-size: 26px; }
[data-theme="glass"] .stat-value,
[data-theme="glass-light"] .stat-value,
[data-theme="country"] .stat-value { font-size: 29px; font-weight: 800; letter-spacing: -0.02em; }
[data-theme="glass"] .stat-lg,
[data-theme="glass-light"] .stat-lg,
[data-theme="country"] .stat-lg { font-size: 32px; }
[data-theme="glass"] .stat-title,
[data-theme="glass-light"] .stat-title,
[data-theme="country"] .stat-title { font-size: 14px; letter-spacing: 0.06em; }
[data-theme="glass"] .panel-result-lg,
[data-theme="glass-light"] .panel-result-lg,
[data-theme="country"] .panel-result-lg { font-size: 27px; }
[data-theme="glass"] .panel-title,
[data-theme="glass-light"] .panel-title,
[data-theme="country"] .panel-title { font-size: 14px; letter-spacing: 0.08em; }
.fi-detail-body dl { margin: 0; }

/* ================== "Professional" theme — structural effects ==================
   Restrained by design, per its own brief: hairline borders instead of heavy
   glass, ONE accent colour spent sparingly, glassmorphism used at most once
   (the header only) rather than on every surface like the three themes
   above. */

/* Fine grain/noise texture (2–4% opacity) + a very low-opacity radial glow —
   this app's login screen is the closest equivalent to a marketing "hero",
   so that's the only place the glow lives; the rest of the app stays a flat
   ink navy so content (tables, numbers) reads as the priority, not the chrome. */
[data-theme="professional"] .login-screen {
  background:
    radial-gradient(circle at 20% -10%, rgba(20, 184, 166, 0.09), transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(20, 184, 166, 0.05), transparent 50%),
    var(--app-bg);
  position: relative;
}
[data-theme="professional"] .login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="professional"] .login-card {
  position: relative;
  z-index: 1;
}

/* Glassmorphism used exactly once — the sticky header — with a much
   subtler blur/opacity than the three Glassmorphism themes above, per the
   brief's "hairline border, frosted blur" nav spec. Sidebar and cards stay
   flat/opaque; this is deliberately the one place it happens. */
[data-theme="professional"] .app-header {
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--border-subtle);
}

/* Brand wordmark: tight tracking, no gradient fill (that's a Country/Glass
   flourish) — the accent colour alone carries it. */
[data-theme="professional"] .app-title,
[data-theme="professional"] .app-title-sm {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Eyebrow labels — uppercase, small, accent-coloured, per the brief — applied
   to the two labels that already play that role in this app's layout
   (stat captions and panel section titles). */
[data-theme="professional"] .stat-title,
[data-theme="professional"] .panel-title,
[data-theme="professional"] .sidebar-section-title {
  color: var(--brand-accent);
  letter-spacing: 0.12em;
}

/* Tabular, oversized figures for any stat display — numerals never jump
   around as they update, and read with the scale/confidence the brief
   calls for without breaking this dashboard's inline multi-stat layout
   (a literal 48–96px would blow out the summary bar). */
[data-theme="professional"] .stat-value,
[data-theme="professional"] .cell-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
[data-theme="professional"] .stat-value { font-size: 30px; font-weight: 700; }
[data-theme="professional"] .stat-lg { font-size: 34px; }
[data-theme="professional"] .panel-result-lg { font-size: 28px; font-variant-numeric: tabular-nums; }

/* Capability-card hover: border brightening only — no lift/translate, so
   dashboard cards stay put rather than shifting under the cursor. */
[data-theme="professional"] .card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="professional"] .card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

/* Buttons: solid (primary, teal — the one place the accent is "spent") vs.
   ghost (neutral — hairline border, transparent fill) rather than the
   gradient-and-glow treatment the other themes use. */
[data-theme="professional"] .btn {
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
}
[data-theme="professional"] .btn-neutral {
  border-color: var(--border-subtle);
}
[data-theme="professional"] .btn-neutral:hover {
  border-color: var(--border-strong);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="professional"] .card,
  [data-theme="professional"] .btn {
    transition: none !important;
  }
}

/* ---------- Sector Heatmap (Markets tab) ---------- */
.sector-heatmap-card { margin-top: 16px; }
.sector-heatmap-header-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.sector-heatmap-user-row {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--card-bg-raised);
}
/* Native <select> sizes its closed box to fit its WIDEST option text and
   won't shrink below that on its own (same issue fixed for .fi-settings-grid
   above) — the long "6x daily — adds a second overnight check..." option
   made this overflow the card on mobile instead of wrapping. flex: 1 1 220px
   + min-width: 0 lets it shrink to whatever room is left on its line (or
   wrap to its own line via the row's flex-wrap); the browser just clips the
   CLOSED-state text if the box ends up narrower than that — the full option
   list is unaffected in the open dropdown. */
.sector-heatmap-user-row .select { flex: 1 1 220px; min-width: 0; max-width: 100%; }

.sector-heatmap-alerts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sector-alert-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--card-bg-raised);
  font-size: 14px;
}
.sector-alert-kind {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
}
.sector-alert-message { flex: 1 1 260px; color: var(--text-primary); }
.sector-alert-time { flex: 0 0 auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* Own table styling rather than the wide 1400px-min provider table — this
   grid has 12 narrow columns (Snapshot + 11 sectors) and reads best compact. */
.sector-heatmap-table { border-collapse: collapse; width: 100%; min-width: 0; }
.sector-heatmap-table th {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.sector-heatmap-table th:first-child { text-align: left; }
.sector-heatmap-table td {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.sector-heatmap-table td:first-child { text-align: left; font-weight: 400; font-size: 13px; }
.sector-heat-cell { cursor: pointer; transition: outline-color 0.1s ease; outline: 1px solid transparent; outline-offset: -1px; }
.sector-heat-cell:hover { outline-color: var(--border-strong); }
/* Admin-only per-row delete "✕" (see sector-heatmap.js renderHeatmapTable) —
   sits inline after the timestamp text in the first cell rather than a
   dedicated actions column, keeping this already-wide 12-column table from
   getting any wider. */
.sector-snapshot-delete { margin-left: 6px; padding: 2px 6px; font-size: 12px; vertical-align: middle; }

/* Sector drill-down modal table (public/js/sector-heatmap.js openSectorDetail) —
   same compact numbers-table idea as the heatmap grid, but with a Name
   column so it's left-aligned rather than centered throughout. */
.sector-detail-table { border-collapse: collapse; width: 100%; min-width: 0; font-size: 14px; }
.sector-detail-table th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  text-transform: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.sector-detail-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }

/* Hover popover (public/js/sector-heatmap.js showSectorHoverPopover) — a
   quick, colour-coded glance at a sector cell's constituents, positioned
   next to the cursor without needing a click. pointer-events:none so it
   never itself becomes the mouseout target and fights the cell's own hover
   state. */
.sector-hover-popover {
  position: fixed;
  z-index: 300;
  background: var(--card-bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  max-width: 260px;
  pointer-events: none;
}
.sector-hover-title { font-weight: 700; font-size: 13px; color: var(--text-primary); margin-bottom: 4px; }
.sector-hover-row { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: 13px; white-space: nowrap; }
.sector-hover-ticker { flex: 0 0 auto; min-width: 40px; font-weight: 600; color: var(--muted); }

/* ---------- Bank Accounts: spending globe ---------- */
.bank-card { display: flex; flex-direction: column; }
.bank-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 6px; }
.bank-summary { font-size: 14px; color: var(--text-primary); margin: 4px 0 10px; min-height: 18px; }
.bank-cards { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.bank-card-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--card-bg-raised); font-size: 13px; }
.bank-card-chip b { font-variant-numeric: tabular-nums; }
.bank-card-total { border-style: dashed; }
.bank-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.bank-tip .bank-swatch { margin-right: 4px; }
.bank-people { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.bank-people .select { width: auto; min-width: 140px; max-width: 220px; }
.bank-card-editor { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--card-bg-raised); padding: 10px 12px; margin: 0 0 10px; }
.bank-card-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.bank-card-code { min-width: 90px; font-size: 13px; color: var(--muted); }
.bank-card-row .input { max-width: 220px; }

/* Category breakdown (deposits & debits) */
.bank-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 4px; }
.bank-breakdown-col { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 10px 12px; background: var(--card-bg-raised); }
.bank-breakdown-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 13px; text-transform: none; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.bank-breakdown-total { font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bank-cat { border-top: 1px solid var(--border-subtle); }
.bank-cat > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 2px; cursor: pointer; list-style: none; }
.bank-cat > summary::-webkit-details-marker { display: none; }
.bank-cat > summary::before { content: "▸"; color: var(--muted); font-size: 11px; transition: transform 0.15s ease; }
.bank-cat[open] > summary::before { transform: rotate(90deg); }
.bank-cat-name { flex: 1; font-weight: 600; }
.bank-cat-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bank-cat-table { margin: 2px 0 8px 16px; }
.bank-cat-table td { padding: 3px 8px 3px 0; vertical-align: middle; }
.bank-recat { font-size: 11px; padding: 2px 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--card-bg-raised); color: var(--text-primary); max-width: 130px; }
.bank-tx-type { color: var(--muted); font-size: 11px; white-space: nowrap; }
@media (max-width: 860px) { .bank-breakdown { grid-template-columns: 1fr; } }
.bank-globe-wrap { position: relative; width: 100%; height: 560px; border-radius: var(--radius-md); overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(0,20,60,0.06), transparent 70%); }
.bank-globe { width: 100%; height: 100%; }
.bank-globe canvas { display: block; }
.bank-globe-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 24px; color: var(--muted); font-size: 14px; pointer-events: none;
}
/* Hover tooltip rendered by globe.gl's pointLabel. */
.bank-tip {
  background: var(--card-bg); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 10px 12px; max-width: 320px;
}
.bank-tip-title { font-weight: 700; font-size: 14px; }
.bank-tip-sub { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.bank-tip-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.bank-tip-table td { padding: 2px 6px 2px 0; white-space: nowrap; vertical-align: top; }
.bank-tip-table td:nth-child(2) { color: var(--muted); max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

/* Let our .bank-tip provide the popup chrome, not MapLibre's default white box. */
.maplibregl-popup-content { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
.maplibregl-popup-tip { display: none !important; }
.bank-globe { border-radius: var(--radius-md); overflow: hidden; }

@media (max-width: 860px) {
  .bank-globe-wrap { height: 62vh; }
}

/* ===========================================================================
   Corporate (Invesco) theme — components. White header with a soft drop
   shadow, blue wordmark, black tabs with a blue underline, flat white cards
   on light grey, serif headlines, uppercase letter-spaced "eyebrow" labels
   (with Invesco's leading rule), square buttons and dark-blue hero.
   =========================================================================== */
[data-theme="corporate"] .app-header {
  background: #ffffff;
  border-bottom: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
[data-theme="corporate"] .app-title,
[data-theme="corporate"] .app-title-sm {
  font-family: var(--font); color: var(--brand-accent); font-weight: 600; letter-spacing: -0.02em;
}
[data-theme="corporate"] .tab-btn {
  position: relative; background: transparent; border-radius: 0; border: none;
  color: #000; font-weight: 400; font-size: 14.5px; padding: 10px 12px;
  transition: color 0.2s ease;
}
[data-theme="corporate"] .tab-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px;
  background: var(--brand-accent); transform: scaleX(0); transform-origin: left center;
  transition: transform 0.24s ease;
}
[data-theme="corporate"] .tab-btn:hover { color: var(--brand-accent); }
[data-theme="corporate"] .tab-btn:hover::after,
[data-theme="corporate"] .tab-btn.active::after { transform: scaleX(1); }
[data-theme="corporate"] .tab-btn.active { background: transparent; color: #000; font-weight: 500; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  [data-theme="corporate"] .tab-btn, [data-theme="corporate"] .tab-btn::after { transition: none; }
}
[data-theme="corporate"] .card { border: 1px solid var(--border-subtle); box-shadow: none; }
[data-theme="corporate"] .card:hover { box-shadow: none; }
/* Serif headlines, regular weight with tight tracking, like InvescoEditor. */
[data-theme="corporate"] .panel-title,
[data-theme="corporate"] .mp-card-title,
[data-theme="corporate"] .mpq-title,
[data-theme="corporate"] .mpq-hero-title,
[data-theme="corporate"] .modal-card h2,
[data-theme="corporate"] .hc-title,
[data-theme="corporate"] .mpq-explain-head,
[data-theme="corporate"] .mp-wrapper-title,
[data-theme="corporate"] .pie-hero h1,
[data-theme="corporate"] .pie-sec-head h2,
[data-theme="corporate"] .login-card h1,
[data-theme="corporate"] .login-card h2 {
  font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: #000;
}
[data-theme="corporate"] .panel-title { font-size: 21px; }
[data-theme="corporate"] .panel-title em, [data-theme="corporate"] .mpq-title em { color: var(--brand-accent); }
/* Eyebrow labels: small, uppercase, widely spaced, black. */
[data-theme="corporate"] .stat-title,
[data-theme="corporate"] .panel-subtitle,
[data-theme="corporate"] .sidebar-section-title {
  color: #000; text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px; font-weight: 500;
}
[data-theme="corporate"] .sidebar-section-title { display: flex; align-items: center; gap: 10px; }
[data-theme="corporate"] .sidebar-section-title::before { content: ""; width: 28px; height: 1px; background: #000; flex: none; }
[data-theme="corporate"] .stat-value { font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
[data-theme="corporate"] .btn { border-radius: 0; font-weight: 500; letter-spacing: 0.01em; }
[data-theme="corporate"] input, [data-theme="corporate"] select, [data-theme="corporate"] textarea { border-radius: 0; }
[data-theme="corporate"] a { color: var(--brand-accent); }
/* Invesco blue is dark: anything filled with it gets white text. */
[data-theme="corporate"] .mp-seg button.active,
[data-theme="corporate"] .mp-periods .btn.active,
[data-theme="corporate"] .mp-match-badge { color: #fff; }
[data-theme="corporate"] .mp-periods .btn.active { font-weight: 500; }
[data-theme="corporate"] .app-logo { background-color: var(--brand-accent); }
/* Sign-in: Invesco's dark-blue feature banner. */
[data-theme="corporate"] .login-screen { background: linear-gradient(160deg, #000078 0%, #000000 100%); }
[data-theme="corporate"] .login-card { border: 0; border-radius: 4px; box-shadow: var(--shadow-lg); }

/* ===================== EVENT TRENDS (Find Investments module) ===================== */
.trends-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.trends-toolbar .select { max-width: 200px; }
#trendsMeta { margin-left: auto; }

.trends-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.trend-empty {
  color: var(--muted);
  padding: 18px 4px;
  font-size: 0.95em;
}

.trend-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-bg-raised);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.trend-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.trend-icon { font-size: 1.2em; }
.trend-theme {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 1.02em;
}
.trend-geo, .trend-ai {
  font-size: 0.72em;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--brand-accent);
  color: #fff;
}
.trend-ai { background: #7c3aed; }
.trend-sources { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.trend-src {
  font-size: 0.68em;
  color: var(--muted);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 1px 7px;
}
.trend-note {
  color: var(--muted);
  font-size: 0.86em;
  margin: 0 0 10px;
  line-height: 1.4;
}
.trend-triggers { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.trend-chip {
  font-size: 0.74em;
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  color: var(--text-primary);
}
.trend-tickers { display: flex; flex-direction: column; gap: 4px; }
.trend-tickers-neg { margin-top: 10px; }
.trend-tickers-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2px;
}
.trend-ticker {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86em;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.trend-ticker:last-child { border-bottom: none; }
.trend-arrow { font-size: 0.8em; width: 12px; text-align: center; }
.trend-pos .trend-arrow { color: var(--gain); }
.trend-neg .trend-arrow { color: var(--loss); }
.trend-sym { font-weight: 700; color: var(--text-primary); min-width: 48px; }
.trend-name {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.trend-exch {
  font-size: 0.72em;
  color: var(--muted);
  opacity: 0.8;
}
.trend-move { font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.trend-move.up { color: var(--gain); }
.trend-move.down { color: var(--loss); }
.trend-move.flat { color: var(--muted); }
.trend-articles {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}
.trend-article {
  font-size: 0.8em;
  color: var(--brand-accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trend-article:hover { text-decoration: underline; }
.trend-article em { color: var(--muted); font-style: normal; }

/* --- Brand logo wordmark: shown in every theme, in place of the text title.
   The PNG is used as a CSS mask so the wordmark takes each theme's own title
   colour (--text-primary) — one white asset recolours itself per theme, so it
   stays legible on light (Corporate), dark (Bread/Dark) and glass backgrounds
   alike. Aspect ratio matches the source asset (388×120). --- */
.app-logo {
  display: block;
  height: 30px;
  width: 106px; /* 30 × 422/120 — Ridgeway tile + wordmark */
  background-color: var(--text-primary);
  -webkit-mask: url("../img/ridgeway-logo.png") no-repeat center / contain;
  mask: url("../img/ridgeway-logo.png") no-repeat center / contain;
}
/* Hide the text wordmark in the header (every theme) — the logo replaces it. */
.header-title-block .app-title-sm,
.header-title-block .app-byline { display: none; }

/* --- Logo on the LOGIN card only (not signup/verify, which keep their own
   headings): swap the "Portfolio" title for the logo, every theme. --- */
#loginScreen .login-card .app-title,
#loginScreen .login-card .app-byline { display: none; }
.app-logo-login {
  height: 48px;
  width: 169px; /* 48 × 422/120 */
  margin: 4px auto 20px;
}

/* --- Transactions tile title + merchant hover tooltip (Bank Accounts) --- */
.bank-breakdown-title {
  grid-column: 1 / -1;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin: 4px 0 2px;
}
.bank-breakdown-title .panel-sublabel { font-weight: 400; font-size: 12px; }
tr[data-mkey] { cursor: default; }
tr[data-mkey]:hover > td { background: var(--card-bg-raised); }

.bank-mtip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  min-width: 200px;
  max-width: 320px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-primary);
}
.bank-mtip-head {
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  white-space: normal;
}
.bank-mtip-table { width: 100%; border-collapse: collapse; }
.bank-mtip-table td { padding: 2px 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.bank-mtip-amt { text-align: right; color: var(--text-primary); padding-left: 14px; }
.bank-mtip-more { color: var(--muted); font-size: 11px; margin-top: 2px; }
.bank-mtip-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums;
}
.bank-mtip-total strong { color: var(--brand-accent); }

/* --- Model Portfolios (Find Investments) --- */
.mp-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mp-lump-group { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.mp-reset { margin-left: auto; }
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.mp-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-bg-raised);
  padding: 14px;
}
.mp-card-head { margin-bottom: 10px; }
.mp-card-title { font-weight: 700; color: var(--text-primary); font-size: 15px; line-height: 1.25; }
.mp-card-note { color: var(--muted); font-size: 12px; margin-top: 3px; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mp-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.mp-table th:nth-child(2), .mp-table th:nth-child(3) { text-align: right; }
.mp-table td { padding: 6px 0; border-bottom: 1px dashed var(--border-subtle); }
.mp-table tbody tr:last-child td { border-bottom: 1px solid var(--border-subtle); }
.mp-inv { color: var(--text-primary); }
.mp-pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-amt { text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.mp-table tfoot td { padding-top: 8px; font-weight: 700; color: var(--text-primary); border-bottom: none; }
.mp-table tfoot .mp-amt { color: var(--brand-accent); }

/* Leading icon for a sidebar section title (e.g. Advanced Investor). */
.sidebar-section-icon { margin-right: 7px; font-size: 0.95em; }

/* --- Login "Explore the demo" affordance --- */
.login-demo-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0 10px;
}
.login-demo-divider::before,
.login-demo-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.login-demo-divider span { padding: 0 10px; }
.login-demo-note { margin: 8px 0 0; text-align: center; }

/* ===================== MORTGAGE TAB ===================== */
.mortgage-format { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.mortgage-format > summary { cursor: pointer; font-weight: 600; color: var(--brand-accent); }
.mortgage-format-body { margin-top: 10px; font-size: 13px; color: var(--muted); }
.mortgage-format-table { border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.mortgage-format-table th, .mortgage-format-table td { border: 1px solid var(--border-subtle); padding: 4px 10px; text-align: left; white-space: nowrap; }
.mortgage-format-table th { color: var(--text-primary); background: var(--card-bg-raised); }
.mortgage-format-list { margin: 8px 0; padding-left: 18px; }
.mortgage-format-list li { margin: 3px 0; }
.mortgage-format-list code, .mortgage-format-body code { background: var(--card-bg-raised); padding: 1px 5px; border-radius: 4px; }

.mortgage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.mortgage-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-bg-raised);
  padding: 14px 16px;
}
.mortgage-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.mortgage-card-value { font-size: 24px; font-weight: 800; color: var(--text-primary); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.mortgage-card-sub { font-size: 12px; color: var(--muted); }

.mortgage-charts {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 2fr);
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) { .mortgage-charts { grid-template-columns: 1fr; } }
.mortgage-chart-card { display: flex; flex-direction: column; }
.mortgage-doughnut-wrap { position: relative; height: 220px; margin: 8px 0; }
.mortgage-line-wrap { position: relative; height: 300px; margin-top: 8px; }
.mortgage-legend { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.mortgage-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.mortgage-legend-row strong { margin-left: auto; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mortgage-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.mortgage-calc-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  max-width: 720px;
}
@media (max-width: 700px) { .mortgage-calc-grid { grid-template-columns: 1fr 1fr; } }
.mortgage-calc-grid label { font-size: 13px; color: var(--muted); }
.mortgage-hint { color: var(--muted); font-size: 11px; }
.mortgage-calc-result { margin-top: 16px; }
.mortgage-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.mortgage-compare-col {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  background: var(--card-bg-raised);
}
.mortgage-compare-col > div { margin: 3px 0; color: var(--muted); }
.mortgage-compare-col strong { color: var(--text-primary); }
.mortgage-compare-over { border-color: var(--gain); }
.mortgage-savings { display: flex; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.mortgage-saving {
  flex: 1;
  min-width: 140px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: rgba(44, 201, 133, 0.12);
  border: 1px solid var(--gain);
  display: flex;
  flex-direction: column;
}
.mortgage-saving span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mortgage-saving strong { font-size: 22px; color: var(--gain); font-variant-numeric: tabular-nums; }
.mortgage-warn { color: var(--warning); }

/* Mortgage rate input + inline Reset button */
.mortgage-rate-cell { display: flex; gap: 8px; align-items: center; }
.mortgage-rate-cell .input { flex: 1; min-width: 0; }
.mortgage-rate-cell .btn { flex: 0 0 auto; }

/* --- Social sign-in (Google / Apple) on the login card --- */
.login-social-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 14px 0 10px;
}
.login-social-divider::before,
.login-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.login-social-divider span { padding: 0 10px; }
.login-social { display: flex; gap: 10px; }
.social-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.social-icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Compact login card on small / short phone screens --- */
@media (max-width: 480px), (max-height: 760px) {
  .login-card { padding: 20px 18px; }
  #loginScreen .bread-logo-login, .bread-logo-login { height: 40px; margin: 2px auto 12px; }
  .app-subtitle { margin: 6px 0 12px; font-size: 0.95em; }
  .login-card label, .modal-card label { margin: 8px 0 3px; }
  .login-card input, .modal-card input, .modal-card select { padding: 8px 10px; }
  .login-remember-row { margin: 6px 0; }
  .login-forgot-link { margin: 4px 0 2px; }
  .btn-block { margin-top: 9px; }
  .btn { padding: 8px 14px; font-size: 14px; }
  .login-social-divider, .login-demo-divider { margin: 10px 0 8px; }
  .error-text { margin-top: 4px; min-height: 0; }
}

/* ===================== AI FINANCIAL REVIEW TAB ===================== */
.ai-disclaimer {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--warning-bg, rgba(178,106,0,0.1));
  border: 1px solid var(--warning);
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.5;
}
.ai-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.ai-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-bg-raised);
  padding: 14px 16px;
}
.ai-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ai-card-value { font-size: 23px; font-weight: 800; color: var(--text-primary); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ai-card-sub { font-size: 12px; color: var(--muted); }

.ai-suggestions { display: flex; flex-direction: column; gap: 10px; }
.ai-suggestion {
  border: 1px solid var(--border-subtle);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--card-bg-raised);
}
.ai-tone-act { border-left-color: var(--loss); }
.ai-tone-watch { border-left-color: var(--warning); }
.ai-tone-info { border-left-color: var(--brand-accent); }
.ai-tone-good { border-left-color: var(--gain); }
.ai-sug-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.ai-sug-icon { font-size: 1.1em; }
.ai-sug-title { font-weight: 700; color: var(--text-primary); }
.ai-sug-body { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }

.ai-spend { margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 6px; }
.ai-spend-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--muted); border-bottom: 1px dashed var(--border-subtle); }
.ai-spend-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.ai-review-out { margin-top: 12px; }
.ai-review-text {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--card-bg-raised);
  padding: 16px 18px;
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.6;
}
.ai-review-text p { margin: 0 0 10px; }

/* About-you form (AI tab) */
.ai-about-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  max-width: 760px;
}
@media (max-width: 700px) { .ai-about-grid { grid-template-columns: 1fr 1fr; } }
.ai-about-grid label { font-size: 13px; color: var(--muted); }
.ai-about-subhead {
  margin: 14px 0 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.ai-about-full { max-width: 760px; display: flex; flex-direction: column; gap: 6px; }
.ai-about-full label { font-size: 13px; color: var(--muted); }
.ai-about-full .input { width: 100%; }

/* AI written-review formatting */
.ai-review-h { font-weight: 700; color: var(--text-primary); margin: 14px 0 6px; font-size: 15px; }
.ai-review-h:first-child { margin-top: 0; }
.ai-review-list { margin: 4px 0 8px; padding-left: 20px; }
.ai-review-list li { margin: 3px 0; }
.ai-review-text strong { color: var(--text-primary); }

/* AI source provenance badges (programmatic vs Claude) */
.ai-source {
  font-size: 12.5px;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  display: inline-block;
}
.ai-source-prog { background: var(--card-bg); border: 1px solid var(--border-subtle); color: var(--muted); }
.ai-source-claude { background: rgba(124,58,237,0.12); border: 1px solid #7c3aed; color: var(--text-primary); font-weight: 600; }

/* AI review loading spinner */
.ai-spin {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand-accent);
  border-radius: 50%;
  animation: ai-spin 0.7s linear infinite;
  vertical-align: -1px;
  margin-right: 4px;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* AI review staleness warning */
.ai-stale {
  background: var(--warning-bg, rgba(178,106,0,0.1));
  border: 1px solid var(--warning);
  color: var(--text-primary);
  font-weight: 600;
  display: block;
}

/* ===================== ASSETS TAB ===================== */
.asset-form { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.asset-form-grid {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 10px 14px;
  align-items: center;
  max-width: 820px;
}
@media (max-width: 700px) { .asset-form-grid { grid-template-columns: 1fr 1fr; } }
.asset-form-grid label { font-size: 13px; color: var(--muted); }
.asset-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; }

.asset-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.asset-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--card-bg-raised); padding: 14px 16px; }
.asset-card-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.asset-card-value { font-size: 23px; font-weight: 800; color: var(--text-primary); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.asset-card-sub { font-size: 12px; color: var(--muted); }

.asset-chart-wrap { position: relative; height: 280px; margin-top: 8px; }

/* ---- Model Portfolios tab ---- */
.mp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mp-periods { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mp-fee-pick { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); margin-left: 6px; }
.mp-fee-pick select { background: var(--card-bg-raised); color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 6px; padding: 4px 6px; font-size: 13px; }
.mp-calc-controls { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 12px 0; }
.mp-calc-amount { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.mp-calc-input { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 4px 10px; background: var(--card-bg-raised); color: var(--text-primary); }
.mp-calc-input input { width: 130px; background: transparent; border: 0; color: var(--text-primary); font-size: 16px; font-weight: 700; outline: none; }
.mp-calc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mp-calc-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border-subtle); }
.mp-calc-table td { padding: 8px; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); vertical-align: top; }
.mp-calc-table .num { text-align: right; white-space: nowrap; }
.mp-calc-table tfoot td { font-weight: 700; border-bottom: 0; }
.mp-calc-ticker { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; }
.mp-calc-isin { font-size: 11.5px; color: var(--muted); }
.mp-calc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.mp-calc-wrap { overflow-x: auto; }
/* ---- Model Portfolios: "Help me choose" questionnaire ---- */
/* Before-you-start checklist */
.mpq-checks { display: flex; flex-direction: column; gap: 10px; }
.mpq-check { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 14px 14px 50px; background: var(--card-bg-raised); color: var(--text-primary); border: 2px solid var(--border-subtle); border-radius: 14px; cursor: pointer; font: inherit; }
.mpq-check .mpq-tick { left: 14px; right: auto; top: 50%; transform: translateY(-50%); }
.mpq-check.sel { border-color: var(--highlight, #e8b96a); background: color-mix(in srgb, var(--highlight, #e8b96a) 12%, var(--card-bg-raised)); }
.mpq-check.sel .mpq-tick { background: var(--highlight, #e8b96a); border-color: var(--highlight, #e8b96a); }
.mpq-check .mpq-label, .mpq-check .mpq-note { display: block; text-align: left; }
/* Segmented toggle (Monthly / One-off, years) */
.mp-seg { display: inline-flex; background: var(--app-bg); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px; gap: 2px; }
.mp-seg button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer; }
.mp-seg button.active { background: var(--highlight, #e8b96a); color: #0b3661; }
.mp-seg-sm button { font-size: 12.5px; padding: 5px 10px; }
/* Growth projection */
.mp-proj { margin-top: 14px; padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 12px); background: var(--card-bg-raised); }
.mp-proj:empty { display: none; }
.mp-proj-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: var(--text-primary); font-weight: 600; }
.mp-proj-figures { display: flex; gap: 24px; flex-wrap: wrap; margin: 12px 0 8px; }
.mp-proj-paid { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.mp-proj-range { font-size: 20px; font-weight: 800; color: var(--gain); }
.mp-proj-bar { position: relative; height: 14px; border-radius: 7px; overflow: hidden; background: var(--app-bg); }
.mp-proj-bar > div { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.mp-proj-bar-hi { background: var(--mc); opacity: .4; }
.mp-proj-bar-lo { background: var(--mc); }
.mp-proj-bar-paid { background: var(--muted); }
.mp-proj-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.mp-proj-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.mp-proj-small { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
/* ISA or pension + how to buy */
.mp-howto { margin-top: 14px; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.mp-howto summary { cursor: pointer; font-weight: 700; color: var(--text-primary); padding: 6px 0; }
.mp-wrappers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 10px 0; }
.mp-wrapper { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; background: var(--card-bg-raised); }
.mp-wrapper-title { font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.mp-wrapper ul { margin: 0 0 8px 18px; padding: 0; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
.mp-wrapper-best { font-size: 12.5px; color: var(--highlight, #e8b96a); font-weight: 600; }
.mp-steps { margin: 6px 0 0 20px; padding: 0; font-size: 13.5px; color: var(--text-primary); line-height: 1.55; }
.mp-steps li { margin: 4px 0; }
/* Chart: labelled market falls */
.mp-chart-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.mp-chart-note:empty { display: none; }
.mp-chart-note b { color: var(--text-primary); }
.mp-choose { display: block; width: 100%; margin-top: 14px; min-height: 42px; font-weight: 700; }
.mpq-notice { max-width: 440px; }
.mp-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mp-card { position: relative; }
.mp-card-match { outline: 2px solid var(--highlight, #e8b96a); outline-offset: 2px; }
.mp-match-badge { position: absolute; top: -12px; right: 12px; background: var(--highlight, #e8b96a); color: #0b3661; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
body.mpq-open { overflow: hidden; }
.mpq-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 20, 38, 0.72); backdrop-filter: blur(4px); animation: mpqFade .2s ease; }
.mpq-overlay.hidden { display: none; }
@keyframes mpqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mpqRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mpq-wrap { width: 100%; max-width: 600px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; align-items: stretch; }
.mpq-hero { text-align: center; margin-bottom: 14px; flex: none; }
.mpq-hero-title { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; color: var(--highlight, #e8b96a); line-height: 1.1; }
.mpq-hero-sub { font-size: 15px; color: #eaf2fb; opacity: .85; margin-top: 4px; }
.mpq-card { width: 100%; max-width: 600px; min-height: 0; max-height: 100%; overflow-y: auto; background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-subtle); border-top: 4px solid var(--highlight, #e8b96a); border-radius: 18px; padding: 22px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.45); animation: mpqRise .25s ease; }
.mpq-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.mpq-dots span { width: 26px; height: 5px; border-radius: 3px; background: var(--border-subtle); transition: background .2s; }
.mpq-dots span.done, .mpq-dots span.on { background: var(--highlight, #e8b96a); }
.mpq-dots span.done { opacity: .55; }
.mpq-step { text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--highlight, #e8b96a); font-weight: 700; }
.mpq-title { text-align: center; font-size: 22px; line-height: 1.25; margin: 6px 0 6px; font-weight: 800; color: var(--text-primary); }
.mpq-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 0 auto 14px; max-width: 460px; line-height: 1.45; }
.mpq-lead { display: flex; justify-content: center; color: var(--muted); margin: -4px 0 12px; }
.mpq-opts { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.mpq-opts-3 { grid-template-columns: repeat(3, 1fr); }
.mpq-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; padding: 14px 10px 12px; min-height: 120px; background: var(--card-bg-raised); color: var(--text-primary); border: 2px solid var(--border-subtle); border-radius: 14px; cursor: pointer; font: inherit; transition: border-color .15s, transform .15s, background .15s; }
.mpq-opt:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.mpq-opt:focus-visible { outline: 2px solid var(--highlight, #e8b96a); outline-offset: 2px; }
.mpq-opt.sel { border-color: var(--highlight, #e8b96a); background: color-mix(in srgb, var(--highlight, #e8b96a) 12%, var(--card-bg-raised)); }
.mpq-tick { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #0b3661; }
.mpq-opt.sel .mpq-tick { background: var(--highlight, #e8b96a); border-color: var(--highlight, #e8b96a); }
.mpq-art { display: flex; align-items: flex-end; justify-content: center; min-height: 54px; }
.mpq-label { font-size: 15px; font-weight: 700; text-align: center; line-height: 1.25; }
.mpq-note { font-size: 12px; color: var(--muted); }
.mpq-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.mpq-nav .btn { min-width: 110px; min-height: 42px; }
.mpq-nav .btn[disabled] { opacity: .45; cursor: not-allowed; }
.mpq-link { background: none; border: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 0; }
.mpq-result { display: flex; justify-content: center; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin: 14px 0 10px; }
.mpq-warn { background: var(--warning-bg, rgba(251,191,36,.12)); color: var(--text-primary); border-left: 3px solid var(--warning, #fbbf24); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin: 8px 0; }
.mpq-small { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 0 0; }
@media (max-width: 640px) {
  .mpq-overlay { padding: 0; align-items: flex-end; }
  .mpq-wrap { max-width: none; max-height: 100vh; }
  .mpq-hero { margin: 12px 0 10px; }
  .mpq-hero-title { font-size: 28px; }
  .mpq-hero-sub { font-size: 14px; padding: 0 16px; }
  .mpq-card { max-width: none; max-height: calc(100vh - 100px); border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
  .mpq-title { font-size: 19px; }
  .mpq-opts, .mpq-opts-3 { grid-template-columns: 1fr 1fr; }
  .mpq-opts-3 .mpq-opt:last-child { grid-column: 1 / -1; }
  .mpq-opt { min-height: 108px; }
}
.mp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mp-horizon { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--text-primary); background: var(--app-bg); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.mp-visuals { display: flex; justify-content: space-around; align-items: flex-end; gap: 10px; margin: 12px 0 6px; }
.mp-vis { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text-primary); }
.mp-vis-cap { font-size: 12px; color: var(--muted); font-weight: 600; }
.mp-donut-num { font-size: 14px; font-weight: 800; fill: var(--text-primary); }
.mp-donut-lbl { font-size: 8.5px; fill: var(--muted); }
.mp-calc-bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 4px 0 8px; }
.mp-calc-bar div { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #111; min-width: 0; overflow: hidden; white-space: nowrap; }
.mp-intro { margin: 4px 0 6px; font-size: 14px; color: var(--text-primary); max-width: 620px; line-height: 1.45; }
.mp-more-options { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 4px 0 10px; }
.mp-more-options.hidden { display: none; }
.mp-more-btn { margin-left: 4px; }
.mp-split { font-size: 13px; color: var(--text-primary); margin: 6px 0 2px; }
.mp-big { font-size: 26px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.mp-big-lead { font-size: 13px; color: var(--muted); margin: 10px 0 2px; }
.mp-big-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mp-dip { margin-top: 8px; font-size: 13px; color: var(--text-primary); }
.mp-card details { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.mp-card details summary { cursor: pointer; font-weight: 600; }
.mp-card details .mp-stat-grid { margin-top: 8px; }
.mp-calc-what { font-weight: 600; }
.mp-risk { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.mp-risk-scale { display: inline-flex; gap: 3px; }
.mp-risk-scale span { width: 14px; height: 6px; border-radius: 3px; background: var(--border-subtle); }
.mp-suits { margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); font-style: italic; line-height: 1.4; }
.mp-fees { margin-top: 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mp-fees b { color: var(--text-primary); font-weight: 700; }
.mp-periods .btn.active { background: var(--highlight); color: #111; border-color: transparent; font-weight: 700; }
.mp-chart-wrap { position: relative; height: 340px; }
.mp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 16px 0; }
.mp-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--card-bg-raised); padding: 14px 16px; }
.mp-card-title { font-size: 18px; font-weight: 800; color: var(--text-primary); }
.mp-card-blurb { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.mp-alloc-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 8px; }
.mp-alloc-list { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; color: var(--text-primary); }
.mp-alloc-list li { margin: 2px 0; }
.mp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.mp-period-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.mp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 8px 12px; }
.mp-stat-label { font-size: 11px; color: var(--muted); }
.mp-stat-value { font-size: 16px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.mp-rotate-hint { display: none; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
@media (orientation: portrait) and (max-width: 640px) and (pointer: coarse) {
  .mp-rotate-hint { display: flex; }
}
/* ---- Model Portfolios: phone turned sideways → chart fills the screen ---- */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  #modelsView:not(.hidden) .mp-chart-wrap {
    position: fixed; inset: 0; z-index: 1500; height: auto;
    background: var(--app-bg); /* solid — glass themes' card colour is see-through */
    padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  body:has(#modelsView:not(.hidden)) { overflow: hidden; }
  /* Glass themes put a backdrop blur on cards, and a blur (or transform) on an
     ancestor traps position:fixed inside that card instead of the screen —
     so switch it off on the chart's card while it's full screen. */
  #modelsView:not(.hidden) .card:has(.mp-chart-wrap) {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: none !important; filter: none !important;
  }
}

/* ---- Model Portfolios: phones ---- */
@media (max-width: 640px) {
  #modelsView .card { padding: 14px; }
  #modelsView .mp-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .mp-intro { font-size: 15px; }
  /* Period picker: a full-width segmented control with thumb-sized buttons */
  #modelsView .mp-head > .mp-periods { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  #modelsView .mp-head > .mp-periods > .mp-fee-pick { grid-column: 1 / -1; margin: 0; }
  #mpPeriods { display: contents; }
  #mpPeriods .btn, .mp-more-btn { min-height: 42px; font-size: 14px; margin: 0; }
  .mp-more-btn { grid-column: 1 / -1; }
  .mp-more-options { flex-direction: column; gap: 10px; }
  .mp-more-options .mp-fee-pick { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; font-size: 14px; }
  .mp-fee-pick select { font-size: 16px; padding: 10px; min-height: 44px; } /* 16px stops iOS zooming in */
  .mp-chart-wrap { height: 260px; }
  .mp-cards { grid-template-columns: 1fr; gap: 12px; }
  .mp-card { padding: 14px; }
  .mp-card-blurb, .mp-alloc-list, .mp-dip, .mp-split { font-size: 14px; }
  .mp-suits, .mp-fees { font-size: 13.5px; }
  .mp-alloc-list li { margin: 5px 0; line-height: 1.35; }
  .mp-big { font-size: 30px; }
  .mp-card details summary { padding: 10px 0; font-size: 14px; }
  /* Calculator */
  .mp-calc-controls { flex-direction: column; align-items: stretch; }
  .mp-calc-input { padding: 8px 12px; }
  .mp-calc-input input { width: 100%; font-size: 20px; }
  #mpCalcModels { display: grid; grid-template-columns: repeat(3, 1fr); }
  #mpCalcModels .btn { min-height: 42px; font-size: 14px; }
  /* Table becomes one card per fund */
  .mp-calc-table thead { display: none; }
  .mp-calc-table, .mp-calc-table tbody, .mp-calc-table tfoot { display: block; }
  .mp-calc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
  .mp-calc-table td { display: block; padding: 0; border: 0; }
  .mp-calc-table td:first-child { grid-column: 1 / -1; font-size: 15px; }
  .mp-calc-table td.num { text-align: left; font-size: 14px; }
  .mp-calc-table td[data-label]::before { content: attr(data-label) " "; color: var(--muted); font-weight: 400; font-size: 12.5px; }
  .mp-calc-table td.mp-calc-ticker { font-size: 17px; }
  .mp-calc-table tfoot tr { border-bottom: 0; }
  .mp-calc-table tfoot td:first-child { grid-column: auto; }
  .mp-calc-table tfoot td.num { text-align: right; font-size: 16px; }
  .mp-calc-table tfoot td:empty { display: none; }
  .mp-calc-foot { flex-direction: column; align-items: stretch; }
  #mpCalcCopy { min-height: 44px; font-size: 15px; }
}
.asset-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.asset-share { color: var(--muted); font-size: 12px; }
.asset-stale { cursor: help; }
#assetTable .gain-pos { color: var(--gain); }
#assetTable .gain-neg { color: var(--loss); }
.asset-actions { white-space: nowrap; text-align: right; }
.asset-actions .btn { margin-left: 4px; }

.mpq-check.na { opacity: .5; cursor: default; }

/* Light Glassmorphism (login + demo theme): light frosted backdrop behind the
   questionnaire/demo dialogs, and white text on the orange "selected" fills. */
[data-theme="glass-light"] .mpq-overlay { background: rgba(250, 246, 243, 0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
[data-theme="glass-light"] .mpq-card { background: rgba(255, 255, 255, 0.82); box-shadow: 0 24px 60px rgba(120, 53, 15, 0.18); }
[data-theme="glass-light"] .mpq-hero-sub { color: var(--text-primary); opacity: .75; }
[data-theme="glass-light"] .mp-seg button.active,
[data-theme="glass-light"] .mp-match-badge,
[data-theme="glass-light"] .mpq-tick,
[data-theme="glass-light"] .mp-periods .btn.active { color: #fff; }
/* Light Glassmorphism: the Bread wordmark in a deep cobalt blue that
   contrasts with the theme's orange (header + login logo). */
[data-theme="glass-light"] .app-logo { background-color: #D97757; }
/* Light Glassmorphism: Total Invested / Total Current Value in the Bread orange. */
[data-theme="glass-light"] #statInvested,
[data-theme="glass-light"] #statCurrent { color: #D97757; }

/* Full-screen demo on Android: give the fullscreen root and its backdrop the
   page colour (the browser default is black), and skip heavy blurs while the
   switch is happening so it doesn't stall on a black frame. */
html:fullscreen, html:-webkit-full-screen { background: var(--app-bg); }
html::backdrop { background: var(--app-bg); }
html.fs-switching *, html.fs-switching *::before, html.fs-switching *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; transition: none !important;
}
/* Model Portfolios: "£10,000 → worth today" with a mini growth chart. */
.mp-growth { margin-top: 12px; }
.mp-growth-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.mp-growth-lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.mp-growth-start { font-size: 20px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.mp-growth-date { font-size: 12px; color: var(--muted); margin-top: 1px; }
.mp-growth-arrow { font-size: 22px; color: var(--muted); padding-bottom: 18px; }
.mp-growth .mp-big { line-height: 1.1; }
.mp-spark { display: block; width: 100%; height: 76px; margin-top: 8px; color: var(--muted); overflow: visible; }
.mp-spark-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 2px; }
.mp-spark-dash { display: inline-block; width: 14px; border-top: 1.5px dashed currentColor; vertical-align: middle; margin-right: 5px; opacity: .7; }
/* "What it could grow to" chart */
.mp-proj-chart { display: block; width: 100%; height: auto; max-height: 220px; margin-top: 8px; color: var(--muted); }
.mp-proj-t { font-size: 11px; font-weight: 700; font-family: inherit; }
.mp-proj-axis { font-size: 10px; fill: var(--muted); font-family: inherit; }
/* "Before you start": one-line ISA/SIPP explainers + the pop-up. */
.mpq-what { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--text-primary); opacity: .8; }
.mpq-explain-link { display: block; margin: 12px auto 0; text-align: center; color: var(--highlight, #e8b96a); font-weight: 600; }
.mpq-explain { z-index: 2100; }
.mpq-explain-card { max-width: 620px; }
.mpq-explain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 10px; }
.mpq-explain-col { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 12px 14px; background: var(--card-bg-raised); }
.mpq-explain-head { font-weight: 800; font-size: 16px; margin-bottom: 6px; color: var(--text-primary); }
.mpq-explain-col ul { margin: 0 0 8px 18px; padding: 0; font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.mpq-explain-col li { margin: 4px 0; }
.mpq-explain-good { font-size: 13px; font-weight: 600; color: var(--highlight, #e8b96a); }
@media (max-width: 640px) { .mpq-explain-grid { grid-template-columns: 1fr; } }
/* ---- "Ask Bread" help chat (demo) ---- */
.hc { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 1400; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hc.hidden { display: none; }
.hc-fab { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 18px 12px 14px; cursor: pointer; color: #fff; font: inherit; font-weight: 700; font-size: 15px; background: var(--btn-primary); box-shadow: 0 8px 24px rgba(0,0,0,.22); }
.hc-open .hc-fab-label { display: none; }
.hc-open .hc-fab { padding: 12px; }
.hc-panel { display: none; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 110px)); flex-direction: column; background: var(--card-bg-raised); background-color: var(--app-bg); border: 1px solid var(--border-subtle); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; }
.hc-open .hc-panel { display: flex; animation: mpqRise .2s ease; }
.hc-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--btn-primary); color: #fff; }
.hc-title { font-weight: 800; font-size: 17px; }
.hc-sub { font-size: 12.5px; opacity: .9; }
.hc-close { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.hc-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.hc-msg { max-width: 86%; padding: 10px 12px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; color: var(--text-primary); }
.hc-msg p { margin: 0 0 6px; } .hc-msg p:last-child { margin-bottom: 0; }
.hc-msg ul { margin: 4px 0 6px 18px; padding: 0; } .hc-msg li { margin: 2px 0; }
.hc-bot { align-self: flex-start; background: var(--card-bg); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; }
.hc-user { align-self: flex-end; background: var(--btn-primary); color: #fff; border-bottom-right-radius: 4px; }
.hc-typing { display: flex; gap: 4px; padding: 12px 14px; }
.hc-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: hcDot 1s infinite ease-in-out; }
.hc-typing span:nth-child(2) { animation-delay: .15s; } .hc-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hcDot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.hc-chips.hidden { display: none; }
.hc-chip { border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text-primary); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.hc-chip:hover { border-color: var(--highlight); }
.hc-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border-subtle); }
.hc-input { flex: 1; border: 1px solid var(--border-strong); border-radius: 999px; padding: 10px 14px; font: inherit; font-size: 16px; background: var(--card-bg); color: var(--text-primary); outline: none; }
.hc-input:focus { border-color: var(--highlight); }
.hc-send { width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--btn-primary); color: #fff; font-size: 16px; cursor: pointer; }
.hc-foot { font-size: 11px; color: var(--muted); text-align: center; padding: 0 12px 10px; }
@media (max-width: 640px) {
  .hc-fab-label { display: none; }
  .hc-fab { padding: 14px; }
  /* Half-height on phones so the page above stays visible and tappable for
     point-and-click help while the chat is open. */
  .hc-open .hc-panel { position: fixed; inset: auto 0 0 0; width: 100%; height: 52vh; border-radius: 16px 16px 0 0; }
  .hc-open .hc-fab { display: none; }
}
/* Keep the chat out of the way of full-screen views. */
/* Ask Bread is always there: a closed button pinned bottom-right, above every
   screen — the questionnaire, pop-ups and the sideways full-screen chart. */
.hc { z-index: 2200; }
/* Leave room at the bottom of the questionnaire on phones so the button never
   sits on top of its Next/Back buttons. */
@media (max-width: 640px) {
  body:has(#helpChat:not(.hidden)) .mpq-card { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}
/* Mortgage: manual entry */
.mortgage-manual { margin-top: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; padding: 8px 12px; }
.mortgage-manual summary { cursor: pointer; font-weight: 700; color: var(--text-primary); padding: 4px 0; }
.mortgage-manual-body { padding-top: 8px; }
.mortgage-term-cell { display: flex; align-items: center; gap: 6px; }
.mortgage-term-cell .input { width: 70px; }
.mortgage-term-cell span { color: var(--muted); font-size: 13px; }

/* ---- Ask Bread "explain mode" (demo): tap anything to have it explained ---- */
.hc-explain-btn { align-self: flex-end; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--app-bg); color: var(--highlight, #C8614A); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.hc-explain-btn.active { background: var(--highlight, #C8614A); color: #fff; border-color: transparent; }
html.hc-explaining, html.hc-explaining * { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228.5%22%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20stroke%3D%22%23C8614A%22%20stroke-width%3D%222.6%22/%3E%3Cpath%20d%3D%22M18.5%2018.5l8%208%22%20stroke%3D%22%23C8614A%22%20stroke-width%3D%223.6%22%20stroke-linecap%3D%22round%22/%3E%3Ctext%20x%3D%2212%22%20y%3D%2216.3%22%20text-anchor%3D%22middle%22%20font-size%3D%2212%22%20font-weight%3D%22800%22%20fill%3D%22%23C8614A%22%20font-family%3D%22Arial%2C%20sans-serif%22%3E%3F%3C/text%3E%3C/svg%3E") 12 12, help !important; }
html.hc-explaining #helpChat, html.hc-explaining #helpChat *, html.hc-explaining .hc-explain-bar, html.hc-explaining .hc-explain-bar * { cursor: pointer !important; }
.hc-explain-hover { outline: 2px dashed var(--highlight, #C8614A) !important; outline-offset: 3px; border-radius: 6px; background-color: color-mix(in srgb, var(--highlight, #C8614A) 7%, transparent); }
.hc-explain-bar { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 2300; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border-radius: 999px; background: var(--highlight, #C8614A); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.22); white-space: nowrap; max-width: calc(100vw - 24px); }
.hc-explain-bar span { overflow: hidden; text-overflow: ellipsis; }
.hc-explain-bar button { border: 0; border-radius: 999px; padding: 6px 14px; background: #fff; color: var(--highlight, #C8614A); font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 640px) {
  .hc-open .hc-explain-btn { display: none; }
  .hc-explain-bar { font-size: 13px; }
}
.hc-tip { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed var(--border-strong); font-size: 13px; color: var(--muted); }

/* =====================================================================
   "Warm Neutral + Copper" — premium, established, wealth-management feel.
   Warm ivory / soft beige surfaces, dark charcoal type, copper (#B87333)
   for calls-to-action and highlights, bronze/champagne (#D4A373) as the
   secondary accent, and emerald for gains — the "charcoal + emerald with
   copper accents" hybrid: modern and sophisticated rather than generic SaaS.
   ===================================================================== */
[data-theme="copper"] {
  /* Typography in the spirit of Claude's app: a clean, neutral sans (Inter)
     for the interface and numbers, and a refined serif (Source Serif 4 —
     an open-source cousin of the bookish serif Claude uses) for headings. */
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;

  --app-bg: #F6F1E7;          /* warm ivory */
  --card-bg: #FFFCF6;         /* soft cream card */
  --card-bg-raised: #EFE7D9;  /* soft beige */
  --border-subtle: #E3D8C6;
  --border-strong: #CDBDA3;

  --text-primary: #2B2A28;    /* dark charcoal */
  --muted: #6F665A;           /* warm grey */
  --brand-accent: #B87333;    /* copper */

  --btn-primary: linear-gradient(135deg, #C4843F, #A8652A);
  --btn-primary-hov: linear-gradient(135deg, #CF914E, #B87333);
  --btn-neutral: #EFE7D9;
  --btn-neutral-hov: #E6DAC6;
  --btn-neutral-text: #2B2A28;
  --btn-accent: linear-gradient(135deg, #D4A373, #B98A5B);
  --btn-accent-hov: linear-gradient(135deg, #DDB184, #C49565);
  --btn-destructive: #B3403A;
  --btn-destructive-hov: #963530;

  --gain: #1F7A5A;            /* emerald */
  --loss: #B3403A;            /* muted brick red */
  --warning: #9A6B1F;
  --warning-bg: #F6E9CF;
  --highlight: #B87333;       /* copper */

  --danger-bg: #F6DEDA;

  --shadow-sm: 0 1px 3px rgba(60, 45, 25, 0.08);
  --shadow-md: 0 8px 24px rgba(60, 45, 25, 0.10);
  --shadow-lg: 0 20px 56px rgba(60, 45, 25, 0.16);
  --overlay-bg: rgba(43, 42, 40, 0.45);
  --focus-ring: rgba(184, 115, 51, 0.28);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}
/* Subtle warm "natural light" wash behind everything. */
[data-theme="copper"] body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(212, 163, 115, 0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(184, 115, 51, 0.10), transparent 60%),
    linear-gradient(180deg, #F8F3EA 0%, #F2EADC 100%) fixed;
}
[data-theme="copper"] .card { box-shadow: var(--shadow-sm); }
[data-theme="copper"] .app-header { background: rgba(250, 245, 236, 0.9); border-bottom: 1px solid var(--border-subtle); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Charcoal UI chrome with copper details. */
[data-theme="copper"] .app-logo { background-color: #B87333; }
[data-theme="copper"] .tab-btn { background: transparent; color: var(--muted); }
[data-theme="copper"] .tab-btn:hover { color: var(--text-primary); }
[data-theme="copper"] .tab-btn.active { background: var(--card-bg); color: var(--text-primary); box-shadow: inset 0 2px 0 #B87333, var(--shadow-sm); }
[data-theme="copper"] .panel-title { color: var(--text-primary); }
[data-theme="copper"] .btn-primary,
[data-theme="copper"] .btn-accent { color: #fff; box-shadow: 0 4px 14px rgba(184, 115, 51, 0.25); }
[data-theme="copper"] .btn-primary:hover,
[data-theme="copper"] .btn-accent:hover { box-shadow: 0 6px 20px rgba(184, 115, 51, 0.32); }
[data-theme="copper"] .btn-neutral { border: 1px solid var(--border-subtle); }
[data-theme="copper"] #statInvested,
[data-theme="copper"] #statCurrent { color: #2B2A28; }
[data-theme="copper"] .mp-periods .btn.active,
[data-theme="copper"] .mp-seg button.active,
[data-theme="copper"] .mp-match-badge,
[data-theme="copper"] .mpq-tick { color: #fff; }
[data-theme="copper"] .mpq-overlay { background: rgba(43, 42, 40, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="copper"] .mpq-hero-sub { color: #FFFCF6; }
[data-theme="copper"] .hc-explain-hover { outline-color: #B87333 !important; }
/* Warm Neutral + Copper: serif headings, sans everywhere else. */
[data-theme="copper"] body { font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.003em; }
[data-theme="copper"] .panel-title,
[data-theme="copper"] .mp-card-title,
[data-theme="copper"] .mpq-title,
[data-theme="copper"] .mpq-hero-title,
[data-theme="copper"] .modal-card h2,
[data-theme="copper"] .hc-title,
[data-theme="copper"] .mpq-explain-head,
[data-theme="copper"] .mp-wrapper-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-transform: none;
}
[data-theme="copper"] .panel-title { font-size: 19px; color: var(--text-primary); }
[data-theme="copper"] .stat-title, [data-theme="copper"] .mp-growth-lbl { letter-spacing: 0.02em; }
[data-theme="copper"] .stat-value, [data-theme="copper"] .mp-big, [data-theme="copper"] .mp-growth-start,
[data-theme="copper"] .rows-table td, [data-theme="copper"] .mortgage-card-value { font-variant-numeric: tabular-nums; }
[data-theme="copper"] .btn, [data-theme="copper"] input, [data-theme="copper"] select, [data-theme="copper"] textarea { font-family: var(--font); }
/* Golden-hour wheat field (Benoît Deschasaux on Unsplash — Unsplash Licence,
   free for commercial use) behind the sign-in / sign-up / verify screens and
   the "New to investing?" questionnaire — shown sharp (no blur), on a layer
   behind the content, with a warm wash on top so the copper buttons stand out. */
:root { --wheat-photo: url("https://images.unsplash.com/photo-1657626625832-2c0851cdaa9b?w=2200&q=80&auto=format&fit=crop"); }
.login-screen, #mpQuiz.mpq-overlay, #pieQuiz.mpq-overlay { isolation: isolate; }
.login-screen { position: relative; min-height: 100vh; background: #E9DCC6 !important; }
#mpQuiz.mpq-overlay, #pieQuiz.mpq-overlay { background: #E9DCC6; backdrop-filter: none; -webkit-backdrop-filter: none; }
.login-screen::before, #mpQuiz.mpq-overlay::before, #pieQuiz.mpq-overlay::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: var(--wheat-photo) center / cover no-repeat;
}
.login-screen::after, #mpQuiz.mpq-overlay::after, #pieQuiz.mpq-overlay::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(40, 30, 20, 0.22) 0%, rgba(40, 30, 20, 0.10) 50%, rgba(40, 30, 20, 0.32) 100%);
}
#mpQuiz .mpq-hero-title, #pieQuiz .mpq-hero-title { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
#mpQuiz .mpq-hero-sub, #pieQuiz .mpq-hero-sub { color: #fff; opacity: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45); }
.login-screen .login-card { background: var(--card-bg) !important; box-shadow: 0 24px 60px rgba(40, 30, 20, 0.28); }

/* =====================================================================
   Personalised Investment Experience (concept demo) — pie.js
   ===================================================================== */
.pie-login-btn { margin-top: 8px; }
.pie-new { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--highlight, #B87333); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.pie-screen { position: fixed; inset: 0; z-index: 1300; overflow-y: auto; background: var(--app-bg); color: var(--text-primary); font-family: var(--font); }
.pie-screen.hidden { display: none; }
.pie-wrap { max-width: 1100px; margin: 0 auto; padding: 16px 18px 40px; }
.pie-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 14px; }
.pie-brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pie-tag { font-size: 14px; color: var(--muted); font-weight: 600; }
.pie-tag em { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pie-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--highlight, #B87333) 14%, var(--card-bg)), var(--card-bg)); border: 1px solid var(--border-subtle); margin-bottom: 18px; }
.pie-avatar { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; background: var(--highlight, #B87333); flex: none; }
.pie-hero-text { flex: 1; min-width: 220px; }
.pie-hero h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; font-weight: 600; }
.pie-hero p { margin: 0; color: var(--muted); font-size: 14px; }
.pie-hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pie-card { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 16px 18px; }
.pie-person-edit { margin: -6px 0 18px; display: grid; grid-template-columns: 1fr 120px; gap: 10px 14px; }
.pie-person-edit label, .pie-edit label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pie-person-edit input, .pie-edit input { border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 16px; background: var(--card-bg); color: var(--text-primary); }
.pie-comfort { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pie-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.pie-sec-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.pie-sec-head h2 { font-family: var(--font-display); font-size: 20px; margin: 0; font-weight: 600; }
.pie-sub { color: var(--muted); font-size: 13px; }
.pie-pots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pie-pot { background: var(--card-bg); border: 1px solid var(--border-subtle); border-top: 3px solid var(--pc, var(--highlight)); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.pie-pot-top { display: flex; align-items: center; gap: 12px; }
.pie-pot-icon { font-size: 28px; }
.pie-pot-name { flex: 1; font-weight: 700; font-size: 16px; }
.pie-pot-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pie-pot-figs span { display: block; font-size: 11.5px; color: var(--muted); }
.pie-pot-figs b { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pie-glide { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.pie-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-primary); background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.pie-from { color: var(--muted); }
.pie-arrow { color: var(--muted); }
.pie-status { font-size: 13.5px; padding: 8px 10px; border-radius: 8px; }
.pie-ok { background: color-mix(in srgb, var(--gain) 12%, transparent); color: var(--gain); font-weight: 600; }
.pie-warn { background: var(--warning-bg); color: var(--text-primary); }
.pie-paused { background: var(--card-bg-raised); color: var(--muted); }
.pie-pot-actions { display: flex; gap: 16px; }
.pie-link { background: none; border: 0; padding: 0; color: var(--highlight, #B87333); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.pie-danger { color: var(--muted); }
.pie-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding-top: 6px; border-top: 1px dashed var(--border-strong); }
.pie-edit label:first-child { grid-column: 1 / -1; }
.pie-add { border-style: dashed; border-top-width: 1px; justify-content: center; }
.pie-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pie-opt { text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--card-bg-raised); color: var(--text-primary); font: inherit; font-size: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.pie-opt span { font-size: 12px; color: var(--muted); }
.pie-opt:hover { border-color: var(--highlight, #B87333); }
.pie-opt.sel { border-color: var(--highlight, #B87333); background: color-mix(in srgb, var(--highlight, #B87333) 12%, var(--card-bg-raised)); }
.pie-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pie-events { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pie-signal { border: 1px solid var(--highlight, #B87333); background: color-mix(in srgb, var(--highlight, #B87333) 8%, var(--card-bg)); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; }
.pie-signal-tag { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--highlight, #B87333); font-weight: 700; margin-bottom: 4px; }
.pie-signal-tag em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.pie-log { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pie-log-item { border-left: 3px solid var(--highlight, #B87333); padding: 6px 10px; background: var(--card-bg-raised); border-radius: 0 8px 8px 0; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; }
.pie-vlabel { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px; }
.pie-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pie-toggle { border: 1px solid var(--border-strong); background: var(--card-bg-raised); color: var(--text-primary); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; cursor: pointer; }
.pie-toggle.sel { background: var(--highlight, #B87333); border-color: transparent; color: #fff; font-weight: 600; }
.pie-effects { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; }
.pie-effects li { margin: 4px 0; }
.pie-foot { text-align: center; color: var(--muted); font-size: 12px; margin: 22px 0 0; }
@media (max-width: 760px) {
  .pie-two { grid-template-columns: 1fr; }
  .pie-hero-actions { align-items: flex-start; flex-direction: row; }
  .pie-comfort { grid-template-columns: 1fr; }
  .pie-person-edit { grid-template-columns: 1fr 90px; }
  .pie-pots { grid-template-columns: 1fr; }
  .pie-hero h1 { font-size: 22px; }
}
/* "Build my plan" — second chat button (demo), just above Ask Bread. */
.hc-plan-fab { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--highlight, #B87333); border-radius: 999px; padding: 10px 16px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: var(--highlight, #B87333); background: var(--card-bg, #fff); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.hc-plan-fab:hover { background: color-mix(in srgb, var(--highlight, #B87333) 10%, var(--card-bg, #fff)); }
.hc[data-mode="plan"].hc-open .hc-plan-fab { background: var(--highlight, #B87333); color: #fff; }
.hc-build { display: block; margin-top: 10px; width: 100%; border: 0; border-radius: 10px; padding: 11px 14px; background: var(--btn-primary); color: #fff; font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; }
@media (max-width: 640px) {
  .hc-plan-fab .hc-fab-label { display: inline; }
  .hc-open .hc-plan-fab { display: none; }
}
/* Questionnaire: "I don't know yet — try a Personalised Investment Experience" */
.mpq-pie-option { border-style: dashed; border-color: var(--highlight, #B87333); }
.mpq-pie-option .mpq-pie-icon { border: 0; background: none; font-size: 16px; }
.mpq-pie-option:hover { background: color-mix(in srgb, var(--highlight, #B87333) 8%, var(--card-bg-raised)); }
.pie-empty { background: var(--card-bg); border: 1px dashed var(--highlight, #B87333); border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; font-size: 14.5px; }

/* ---- PIE tidy-up (v4.18.1) ---- */
.pie-person-edit label, .pie-edit label { min-width: 0; }
.pie-person-edit input, .pie-edit input, .pie-edit select { width: 100%; min-width: 0; box-sizing: border-box; font-size: 15px; padding: 8px 10px; }
.pie-pots { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; gap: 16px; margin-bottom: 12px; }
.pie-pot { padding: 14px 16px 12px; gap: 12px; min-width: 0; overflow: hidden; }
.pie-pot-icon { font-size: 24px; }
.pie-pot-name { min-width: 0; }
.pie-pot-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pie-pot-name .pie-sub { font-weight: 500; font-size: 12.5px; }
.pie-pot-figs { gap: 6px; padding: 10px 0; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.pie-pot-figs > div { min-width: 0; }
.pie-pot-figs b { font-size: 14px; white-space: nowrap; }
.pie-glide { flex-wrap: nowrap; gap: 5px; font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.pie-glide .pie-chip { font-size: 11.5px; padding: 1px 8px; }
.pie-glide-lbl { color: var(--muted); }
.pie-step { color: var(--text-primary); font-weight: 600; }
.pie-pot-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pie-pot-foot .pie-status { flex: 1; min-width: 0; font-size: 12.5px; padding: 5px 9px; }
.pie-pot-actions { gap: 4px; flex: none; }
.pie-icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pie-icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
.pie-edit { border-top: 0; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 4%, transparent); }
.pie-addbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 20px; }
.pie-addbar .pie-sub { margin-right: 4px; }
.pie-addchip { border: 1px dashed var(--border-strong); background: transparent; color: var(--text-primary); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.pie-addchip:hover { border-style: solid; border-color: var(--highlight, #B87333); }
@media (max-width: 600px) {
  .pie-person-edit { grid-template-columns: 1fr 84px; }
  .pie-edit { grid-template-columns: 1fr 1fr; }
  .pie-addchip { padding: 6px 10px; }
}

/* ---- PIE "Make it mine" questionnaire (reuses .mpq-*) ---- */
.pq-fields { display: grid; grid-template-columns: 1fr 110px; gap: 12px; max-width: 420px; margin: 4px auto 0; }
.pq-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted); min-width: 0; }
.pq-fields input { width: 100%; box-sizing: border-box; min-width: 0; border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 12px; font: inherit; font-size: 16px; background: var(--card-bg); color: var(--text-primary); }
.pq-fields input:focus { outline: 2px solid var(--highlight, #B87333); outline-offset: 1px; border-color: transparent; }
.pq-opt { font-weight: 400; }
.pq-goals { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pq-goals .mpq-opt { min-height: 96px; }
.pq-goals .mpq-art { min-height: 38px; }
.pq-emoji { font-size: 30px; line-height: 1; }
.pq-accent { color: var(--highlight, #B87333); }
.pq-summary { list-style: none; margin: 4px auto 6px; padding: 0; max-width: 420px; }
.pq-summary li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border-subtle); font-size: 14.5px; }
.pq-summary li:last-child { border-bottom: 0; }
.pq-summary b { font-weight: 600; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .pq-fields { grid-template-columns: 1fr 90px; }
  .pq-goals { grid-template-columns: repeat(2, 1fr); }
}

/* ---- PIE accounts: ISA first, GIA overflow, optional SIPP, couples ---- */
.pie-accounts { margin-bottom: 18px; }
.pie-acc { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #fff; vertical-align: 1px; background: #2F8F6B; }
.pie-acc-gia { background: #6B7C93; }
.pie-acc-sipp { background: #7A5AA6; }
.pie-glide .pie-acc { margin-right: 2px; }
.pie-acc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.pie-acc-row:last-of-type { border-bottom: 0; }
.pie-acc-name { font-weight: 600; font-size: 14.5px; }
.pie-acc-amt { text-align: right; font-size: 14px; }
.pie-acc-amt b { font-variant-numeric: tabular-nums; }
.pie-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--border-subtle); overflow: hidden; }
.pie-bar span { display: block; height: 100%; border-radius: 99px; background: #2F8F6B; transition: width .3s; }
.pie-acc-note { grid-column: 1 / -1; margin: 6px 0 2px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.pie-edit-wide { grid-column: 1 / -1; }
.pie-edit select { width: 100%; box-sizing: border-box; min-width: 0; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; background: var(--card-bg); color: var(--text-primary); }
.pq-who { display: flex; gap: 10px; justify-content: center; margin: 16px auto 4px; max-width: 420px; }
.pq-who-btn { flex: 1; padding: 11px 12px; border-radius: 12px; border: 2px solid var(--border-subtle); background: var(--card-bg-raised); color: var(--text-primary); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.pq-who-btn.sel { border-color: var(--highlight, #B87333); background: color-mix(in srgb, var(--highlight, #B87333) 12%, var(--card-bg-raised)); }
.pq-account { display: flex; gap: 10px; align-items: flex-start; max-width: 420px; margin: 8px auto 4px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #2F8F6B 9%, var(--card-bg)); }
.pq-account > div { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.pq-account span:not(.pie-acc) { color: var(--muted); line-height: 1.4; }
.pq-account .pie-acc { margin-top: 2px; }
@media (max-width: 640px) { .pie-acc-row { grid-template-columns: 1fr; } .pie-acc-amt { text-align: left; } }

/* ---- Line icons (icons.js) ---- */
.ico { display: inline-block; vertical-align: -0.18em; flex: none; }
.pie-pot-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; font-size: 0;
  color: var(--pc, var(--highlight)); background: color-mix(in srgb, var(--pc, var(--highlight)) 14%, transparent); }
.pie-sec-head h2 { display: flex; align-items: center; gap: 8px; }
.pie-h-ico { color: var(--highlight, #B87333); }
.pie-addchip { display: inline-flex; align-items: center; gap: 6px; }
.pie-addchip .ico { color: var(--muted); }
.pie-events .pie-opt { flex-direction: row; align-items: center; gap: 10px; }
.pie-events .pie-opt .ico { color: var(--highlight, #B87333); }
.pie-empty { display: flex; align-items: center; gap: 10px; }
.pie-empty .ico { color: var(--highlight, #B87333); }
.pie-icon-btn .ico { vertical-align: 0; }
.pq-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: var(--highlight, #B87333); background: color-mix(in srgb, var(--highlight, #B87333) 12%, transparent); }
.mpq-opt.sel .pq-icon { background: var(--highlight, #B87333); color: #fff; }
.pq-step-ico { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pq-li { display: inline-flex; align-items: center; gap: 8px; }
.pq-li .ico { color: var(--highlight, #B87333); }
.pq-who-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mpq-pie-icon .ico { color: var(--highlight, #B87333); }
.hc-tip .ico, .hc-explain-bar .ico { vertical-align: -0.2em; margin-right: 2px; }
.hc-send .ico { vertical-align: middle; }
.sidebar-section-icon .ico { vertical-align: -0.2em; }

.pq-chat-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px auto 0; font-size: 13.5px; }
.pq-account-sipp { background: color-mix(in srgb, #7A5AA6 9%, var(--card-bg)); }

.pie-empty { flex-wrap: wrap; justify-content: space-between; }
.pie-empty > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pie-empty-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.pie-empty-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

.pie-tax { grid-column: 1 / -1; margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, #7A5AA6 7%, transparent); }
.pie-tax .pie-vlabel { margin-top: 0; }
.pie-tax-list { list-style: none; margin: 8px 0 2px; padding: 0; }
.pie-tax-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.pie-tax-list b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pie-tax a { color: var(--highlight, #B87333); }
.pie-warn-txt { color: var(--loss, #c0392b); }

/* ---- PIE behavioural nudges (pie-behaviour.js) ---- */
.pie-nudges { margin-bottom: 18px; }
.nd-head { flex-wrap: wrap; }
.nd-head .pie-sub b { color: var(--text-primary); }
.nd-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; font-size: 13px; }
.nd-techtoggle { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.nd-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x mandatory; }
.nd-card { scroll-snap-align: start; background: var(--card-bg-raised); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nd-retain { border-color: color-mix(in srgb, #2F8F6B 45%, var(--border-subtle)); }
.nd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nd-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--highlight, #B87333); background: color-mix(in srgb, var(--highlight, #B87333) 13%, transparent); flex: none; }
.nd-tech { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--border-strong); border-radius: 999px; padding: 2px 8px; }
.nd-title { margin: 0; font-size: 15.5px; line-height: 1.3; font-family: var(--font-display); }
.nd-body { font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.nd-body b { font-variant-numeric: tabular-nums; }
.nd-foot { font-size: 11.5px; color: var(--muted); margin-top: auto; }
.nd-steps { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.nd-chart { color: var(--muted); display: block; }
.nd-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; background: color-mix(in srgb, var(--loss, #c0392b) 9%, transparent); color: var(--text-primary); font-size: 14px; }
.nd-banner .ico { color: var(--loss, #c0392b); }
.nd-banner .btn { margin-left: auto; }
.nd-traits { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 18px; margin: 4px 0 12px; }
.nd-trait-lbl { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.nd-trait-ends { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.nd-trait-bar { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--highlight, #B87333) 18%, var(--border-subtle)), color-mix(in srgb, var(--highlight, #B87333) 45%, var(--border-subtle))); }
.nd-trait-bar span { position: absolute; top: 50%; width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 50%; background: var(--highlight, #B87333); border: 2px solid var(--card-bg); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* compare overlay */
.nd-overlay { z-index: 2050; }
.nd-cmp-card { width: min(980px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card-bg); color: var(--text-primary); border-radius: 18px; padding: 20px 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.nd-cmp-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.nd-cmp-head h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; }
.nd-cmp-tabs { margin: 12px 0 14px; }
.nd-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.nd-phone { position: relative; border: 10px solid #1f1a16; border-radius: 34px; padding: 26px 12px 14px; background: var(--app-bg); min-height: 520px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.nd-phone-notch { position: absolute; top: 6px; left: 50%; width: 80px; height: 14px; margin-left: -40px; border-radius: 10px; background: #1f1a16; }
.nd-phone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.nd-phone-head div { display: flex; flex-direction: column; }
.nd-phone-head span:not(.nd-ico) { font-size: 12.5px; color: var(--muted); }
.nd-phone .nd-traits { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.nd-phone .nd-trait-ends { display: none; }
.nd-phone-feed { display: grid; gap: 10px; }
/* behaviour questions in the wizard */
.pq-bq { display: grid; gap: 10px; }
.pq-bq-row { display: grid; gap: 6px; }
.pq-bq-q { font-weight: 600; font-size: 14px; }
.pq-bq-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pq-bq-btn { font-size: 13px; padding: 8px 8px; min-height: 42px; line-height: 1.25; }
.pq-persona { background: color-mix(in srgb, var(--highlight, #B87333) 9%, var(--card-bg)); }
.pq-icon-sm { width: 34px; height: 34px; border-radius: 10px; flex: none; }
/* execution-only picker + mode toggle */
.pie-mode { margin: -4px 0 12px; }
.pie-pick .pie-chips { margin: 6px 0 2px; }
.pie-mix.sel { background: var(--c); border-color: var(--c); color: #fff; }
@media (max-width: 720px) {
  .nd-compare { grid-template-columns: 1fr; }
  .nd-phone { min-height: 0; }
  .pq-bq-opts { grid-template-columns: 1fr; }
  .nd-actions { margin-left: 0; }
}

/* ---- Trading 212 provider link ---- */
.t212-check { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-weight: 600; cursor: pointer; }
.t212-check input { width: auto; margin: 0; }
.t212-fields { border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); padding: 10px 12px; margin-bottom: 8px; background: var(--card-bg-raised); }
.t212-fields .modal-note { margin-top: 0; }
.t212-help { font-size: 13px; color: var(--muted); margin-top: 8px; }
.t212-help summary { cursor: pointer; color: var(--brand-accent); }
.t212-help ol { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.t212-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-md, 8px); background: var(--card-bg-raised); font-size: 13px; }
.t212-status span { flex: 1 1 100%; }
td.has-t212 { position: relative; }
.t212-badge { position: absolute; top: 2px; right: 4px; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 5px; background: #2F8F6B; color: #fff; cursor: help; }
.t212-badge-err { background: var(--loss, #c0392b); }
.t212-ro { font-weight: 400; font-size: 13px; align-items: flex-start; }
.t212-ro input { margin-top: 3px; }

/* ---- Questionnaires on shorter laptop screens (e.g. 14" at 1366×768 / 1536×864) ----
   Tighten spacing so "Before you start" and the other steps fit without scrolling. */
@media (min-width: 641px) and (max-height: 880px) {
  .mpq-overlay { padding: 10px 16px; }
  .mpq-wrap { max-height: calc(100vh - 20px); }
  .mpq-hero { margin-bottom: 8px; }
  .mpq-hero-title { font-size: 27px; }
  .mpq-hero-sub { font-size: 13.5px; margin-top: 2px; }
  .mpq-card { padding: 14px 20px 14px; border-radius: 16px; }
  .mpq-dots { margin-bottom: 8px; }
  .mpq-title { font-size: 19px; margin: 4px 0 4px; }
  .mpq-sub { font-size: 13px; margin-bottom: 10px; }
  .mpq-checks { gap: 7px; }
  .mpq-check { padding: 9px 12px 9px 46px; border-radius: 12px; }
  .mpq-check .mpq-label { font-size: 14px; }
  .mpq-check .mpq-note { font-size: 12px; }
  .mpq-what { margin-top: 3px; font-size: 12px; line-height: 1.35; }
  .mpq-explain-link { margin-top: 6px; font-size: 13px; }
  .mpq-nav { margin-top: 10px; }
  .mpq-nav .btn { min-height: 38px; }
  .mpq-opt { min-height: 100px; padding: 10px 8px; }
  .mpq-lead { margin-bottom: 8px; }
  .mpq-result { margin: 8px 0 6px; }
  .pq-bq { gap: 6px; }
  .pq-bq-btn { min-height: 36px; padding: 6px 8px; }
  .pq-goals .mpq-opt { min-height: 84px; }
}
@media (min-width: 641px) and (max-height: 640px) {
  .mpq-hero-sub { display: none; }
  .mpq-hero-title { font-size: 24px; }
  .mpq-what { display: none; }
}

/* ---- Discover Invesco ETFs (etf-discovery.js) ---- */
.etf-hide { display: none !important; }
.etf-page { display: flex; flex-direction: column; gap: 14px; }
.etf-loading { padding: 30px; text-align: center; color: var(--muted); }
.etf-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.etf-head > div { flex: 1; min-width: 240px; }
.etf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.etf-card { background: var(--card-bg-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 10px); padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s, transform .15s; }
.etf-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.etf-card.is-focus { border-color: var(--brand-accent); box-shadow: 0 0 0 1px var(--brand-accent); }
.etf-card:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.etf-card-top { display: flex; gap: 6px; align-items: center; }
.etf-tick { font-weight: 800; font-size: 12px; letter-spacing: .04em; padding: 2px 8px; border-radius: 6px; background: var(--brand-accent); color: #fff; }
.etf-tick-lg { font-size: 15px; padding: 6px 10px; }
.etf-cat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border-subtle); color: var(--muted); }
.etf-warn { font-size: 11px; font-weight: 700; color: var(--loss); }
.etf-card-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.etf-card-sum { font-size: 12.5px; color: var(--muted); line-height: 1.4; flex: 1; }
.etf-card-foot { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--muted); }
.etf-card-foot b { color: var(--text-primary); }
.etf-card-foot .etf-cmp { margin-left: auto; }
.pos { color: var(--gain); }
.neg { color: var(--loss); }
.etf-cmp { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--card-bg); color: var(--text-primary); cursor: pointer; white-space: nowrap; }
.etf-cmp.on { background: var(--brand-accent); border-color: var(--brand-accent); color: #fff; }
.etf-cmp:disabled { opacity: .4; cursor: not-allowed; }
.etf-chart-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 10px); padding: 12px; background: var(--card-bg); }
.etf-chart-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.etf-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.etf-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 3px 6px 3px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); }
.etf-leg i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.etf-leg button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.etf-leg-hint { font-size: 12px; color: var(--muted); }
.etf-periods { display: flex; gap: 4px; }
.etf-periods .btn.active { background: var(--btn-primary); color: #fff; border-color: transparent; }
.etf-canvas-wrap { position: relative; height: 320px; }
.etf-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.etf-detail { border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 10px); padding: 16px; background: var(--card-bg); }
.etf-detail-head { display: flex; gap: 12px; align-items: flex-start; }
.etf-detail-head > div { flex: 1; }
.etf-detail-head h3 { margin: 0 0 4px; font-size: 18px; }
.etf-detail-head p { margin: 0; color: var(--muted); font-size: 14px; }
.etf-returns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 14px 0; }
.etf-returns div { text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--card-bg-raised); }
.etf-returns span { display: block; font-size: 11.5px; color: var(--muted); }
.etf-returns b { font-size: 15px; font-variant-numeric: tabular-nums; }
.etf-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.etf-block h4 { margin: 4px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.etf-about { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.etf-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.etf-facts dt { color: var(--muted); }
.etf-facts dd { margin: 0; }
.etf-holdings { margin: 0; padding: 0; list-style: none; counter-reset: h; display: grid; gap: 6px; }
.etf-holdings li { counter-increment: h; display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 56px; gap: 8px; align-items: center; font-size: 13.5px; }
.etf-h-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etf-h-name::before { content: counter(h) ". "; color: var(--muted); }
.etf-h-bar { height: 8px; border-radius: 99px; background: var(--border-subtle); overflow: hidden; }
.etf-h-bar i { display: block; height: 100%; background: var(--brand-accent); border-radius: 99px; }
.etf-holdings b, .etf-sectors b { text-align: right; font-variant-numeric: tabular-nums; }
.etf-sectors { display: grid; gap: 6px; }
.etf-sectors div { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr 56px; gap: 8px; align-items: center; font-size: 13px; }
.etf-foot { font-size: 12px; color: var(--muted); margin: 0; }
@media (max-width: 760px) {
  .etf-detail-grid { grid-template-columns: 1fr; }
  .etf-returns { grid-template-columns: repeat(3, 1fr); }
  .etf-canvas-wrap { height: 250px; }
  .etf-detail-head { flex-wrap: wrap; }
}

.etf-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
.etf-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.etf-list .etf-filters { margin-bottom: 8px; }
@media (min-width: 1000px) {
  .etf-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .etf-list { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; padding-right: 4px; }
  .etf-list .etf-grid { grid-template-columns: 1fr; gap: 8px; }
  .etf-list .etf-card-sum { display: none; }
  .etf-list .etf-card { padding: 10px 12px; gap: 4px; }
}
@media (max-width: 999px) {
  .etf-list .etf-grid { grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); grid-template-columns: none; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .etf-list .etf-card { scroll-snap-align: start; }
}
.etf-list { min-width: 0; } .etf-page { min-width: 0; overflow-x: hidden; }

/* ---- Questionnaires on phones: fit the screen, Next always visible ---- */
@media (max-width: 640px) {
  .mpq-hero { margin: 8px 0 6px; }
  .mpq-hero-title { font-size: 24px; }
  .mpq-hero-sub { font-size: 13px; }
  .mpq-card { max-height: calc(100dvh - 78px); padding: 12px 14px 0; }
  .mpq-dots { margin-bottom: 6px; }
  .mpq-step { font-size: 11px; }
  .mpq-title { font-size: 18px; margin: 2px 0 2px; }
  .mpq-sub { font-size: 13px; margin-bottom: 8px; }
  .mpq-checks { gap: 7px; }
  .mpq-check { padding: 9px 10px 9px 42px; border-radius: 12px; }
  .mpq-check .mpq-tick { left: 11px; }
  .mpq-check .mpq-label { font-size: 14px; line-height: 1.3; }
  .mpq-check .mpq-note { font-size: 12px; line-height: 1.35; }
  .mpq-what { font-size: 12px; margin-top: 4px; }
  .mpq-explain-link { margin-top: 6px; font-size: 13px; }
  /* Back / Next stick to the bottom of the card so they're never scrolled out of view. */
  .mpq-nav { position: sticky; bottom: 0; z-index: 2; margin: 8px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--card-bg); border-top: 1px solid var(--border-subtle); }
}
/* Most phones: drop the longer second explanation line (the "What's the difference
   between an ISA and a SIPP?" link still explains both). */
@media (max-width: 640px) and (max-height: 860px) { .mpq-what { display: none; } }
/* The Ask Bread button sat on top of Next — hide it while a questionnaire is open. */
body:has(.mpq-overlay:not(.hidden)) .hc { display: none; }

/* ---- "Six quick ones about you" on phones: three answers per row so all six fit ---- */
@media (max-width: 720px) {
  .pq-bq { gap: 9px; }
  .pq-bq-row { gap: 4px; }
  .pq-bq-q { font-size: 13px; line-height: 1.3; }
  .pq-bq-opts { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .pq-bq-btn { font-size: 11.5px; line-height: 1.2; min-height: 38px; padding: 5px 4px; border-radius: 9px; }
}
@media (max-width: 640px) { #pieQuiz .pq-bq-intro { display: none; } }

.mpq-card.no-anim { animation: none; }

/* =====================================================================
   "Ridgeway" — the default theme. Institutional and calm: deep navy ink,
   white surfaces on a cool light-grey page, a single teal accent, hairline
   borders, restrained shadows and squarer corners. Inter for the interface
   and figures; Source Serif 4 for page headings (an established, editorial
   feel). Login and questionnaires sit on a navy field with a faint ridgeline.
   ===================================================================== */
[data-theme="ridgeway"] {
  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;

  --app-bg: #F4F6F9;
  --card-bg: #FFFFFF;
  --card-bg-raised: #F6F8FB;
  --border-subtle: #E2E7EE;
  --border-strong: #C8D1DD;

  --text-primary: #14213D;
  --muted: #5B6B82;
  --brand-accent: #0B2545;

  --btn-primary: #0B2545;
  --btn-primary-hov: #163A66;
  --btn-neutral: #FFFFFF;
  --btn-neutral-hov: #F0F3F8;
  --btn-neutral-text: #14213D;
  --btn-accent: #1F6F6B;
  --btn-accent-hov: #185B58;
  --btn-destructive: #B4372F;
  --btn-destructive-hov: #962D26;

  --gain: #1B7A57;
  --loss: #B4372F;
  --warning: #8A5A12;
  --warning-bg: #FBF1DE;
  --highlight: #1F6F6B;          /* teal — selections, ticks, chips */

  --danger-bg: #FBE5E3;

  --shadow-sm: 0 1px 2px rgba(16, 32, 61, 0.06);
  --shadow-md: 0 6px 18px rgba(16, 32, 61, 0.08);
  --shadow-lg: 0 18px 44px rgba(16, 32, 61, 0.14);
  --overlay-bg: rgba(11, 37, 69, 0.55);
  --focus-ring: rgba(31, 111, 107, 0.30);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}
[data-theme="ridgeway"] body { font-family: var(--font); background: var(--app-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
[data-theme="ridgeway"] .btn, [data-theme="ridgeway"] input, [data-theme="ridgeway"] select, [data-theme="ridgeway"] textarea { font-family: var(--font); }
[data-theme="ridgeway"] .card { box-shadow: var(--shadow-sm); border: 1px solid var(--border-subtle); }
[data-theme="ridgeway"] .app-header { background: #FFFFFF; border-bottom: 1px solid var(--border-subtle); box-shadow: none; }
[data-theme="ridgeway"] .app-logo { background-color: #0B2545; }
[data-theme="ridgeway"] .tab-btn { background: transparent; color: var(--muted); border-radius: 0; box-shadow: none; }
[data-theme="ridgeway"] .tab-btn:hover { color: var(--text-primary); }
[data-theme="ridgeway"] .tab-btn.active { background: transparent; color: var(--text-primary); box-shadow: inset 0 -2px 0 #0B2545; font-weight: 600; }
[data-theme="ridgeway"] .btn { font-weight: 600; letter-spacing: 0; box-shadow: none; }
[data-theme="ridgeway"] .btn-primary, [data-theme="ridgeway"] .btn-accent, [data-theme="ridgeway"] .btn-destructive { color: #fff; }
[data-theme="ridgeway"] .btn-neutral { border: 1px solid var(--border-strong); color: var(--btn-neutral-text); }
[data-theme="ridgeway"] .panel-title,
[data-theme="ridgeway"] .mp-card-title,
[data-theme="ridgeway"] .mpq-title,
[data-theme="ridgeway"] .mpq-hero-title,
[data-theme="ridgeway"] .modal-card h2,
[data-theme="ridgeway"] .mpq-explain-head,
[data-theme="ridgeway"] .pie-hero h1,
[data-theme="ridgeway"] .pie-sec-head h2,
[data-theme="ridgeway"] .nd-title,
[data-theme="ridgeway"] .etf-detail-head h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; text-transform: none; color: var(--text-primary);
}
[data-theme="ridgeway"] .panel-title { font-size: 19px; }
[data-theme="ridgeway"] .stat-title { letter-spacing: 0.04em; }
[data-theme="ridgeway"] .stat-value, [data-theme="ridgeway"] .mp-big, [data-theme="ridgeway"] .rows-table td,
[data-theme="ridgeway"] .mortgage-card-value, [data-theme="ridgeway"] .etf-returns b { font-variant-numeric: tabular-nums; }
[data-theme="ridgeway"] #statInvested, [data-theme="ridgeway"] #statCurrent { color: var(--text-primary); }
[data-theme="ridgeway"] .mp-periods .btn.active,
[data-theme="ridgeway"] .mp-seg button.active,
[data-theme="ridgeway"] .mp-match-badge,
[data-theme="ridgeway"] .mpq-tick,
[data-theme="ridgeway"] .etf-periods .btn.active { color: #fff; }
[data-theme="ridgeway"] .hc-explain-hover { outline-color: #1F6F6B !important; }
[data-theme="ridgeway"] .pie-avatar { background: #0B2545; }

/* Sign-in, sign-up, verify and the questionnaires: navy field with a faint
   ridgeline — replaces the wheat photograph used by the Copper theme. */
[data-theme="ridgeway"] {
  --ridge-field: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'%3E%3Cpath d='M0 330 C220 300 360 170 560 175 S900 300 1080 250 S1400 120 1600 140 V400 H0Z' fill='%23ffffff' fill-opacity='0.045'/%3E%3Cpath d='M0 370 C260 350 420 260 640 265 S980 360 1180 320 S1460 230 1600 240 V400 H0Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3C/svg%3E");
}
[data-theme="ridgeway"] .login-screen { background: #0B2545 !important; }
[data-theme="ridgeway"] #mpQuiz.mpq-overlay, [data-theme="ridgeway"] #pieQuiz.mpq-overlay { background: #0B2545; }
[data-theme="ridgeway"] .login-screen::before,
[data-theme="ridgeway"] #mpQuiz.mpq-overlay::before,
[data-theme="ridgeway"] #pieQuiz.mpq-overlay::before {
  background: var(--ridge-field) bottom / 100% 45% no-repeat, radial-gradient(1200px 700px at 15% 0%, #1B3A63 0%, transparent 60%), linear-gradient(165deg, #0B2545 0%, #0A1F3A 100%);
}
[data-theme="ridgeway"] .login-screen::after,
[data-theme="ridgeway"] #mpQuiz.mpq-overlay::after,
[data-theme="ridgeway"] #pieQuiz.mpq-overlay::after { background: none; }
[data-theme="ridgeway"] #mpQuiz .mpq-hero-title, [data-theme="ridgeway"] #pieQuiz .mpq-hero-title,
[data-theme="ridgeway"] #mpQuiz .mpq-hero-sub, [data-theme="ridgeway"] #pieQuiz .mpq-hero-sub { color: #fff; text-shadow: none; }
[data-theme="ridgeway"] .login-screen .login-card { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); border: 0; }
[data-theme="ridgeway"] .mpq-card { border-top-color: #1F6F6B; }
[data-theme="ridgeway"] .mpq-step { color: #1F6F6B; }

/* ---- Sign-in: brand panel beside the form on wide screens ---- */
.login-brand { display: none; }
@media (min-width: 960px) {
  #loginScreen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 64px; padding: 40px max(48px, 6vw); }
  #loginScreen .login-brand { display: block; max-width: 560px; justify-self: end; }
}
.login-brand { color: #fff; }
.login-brand .lb-logo { display: block; height: 44px; width: 155px; background-color: #fff; -webkit-mask: url("../img/ridgeway-logo.png") no-repeat left center / contain; mask: url("../img/ridgeway-logo.png") no-repeat left center / contain; margin-bottom: 36px; }
.login-brand h2 { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 14px; color: #fff; }
.login-brand p { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, 0.82); margin: 0 0 26px; max-width: 480px; }
.login-brand ul { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 12px; }
.login-brand li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: rgba(255, 255, 255, 0.9); }
.login-brand li .ico { color: #7FC8C2; margin-top: 2px; }
.login-brand .lb-note { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); max-width: 480px; }
[data-theme="copper"] .login-brand, [data-theme="copper"] .login-brand h2 { color: #fff; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.login-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 12px; color: var(--muted); }

/* ---- Site footer (every screen) ---- */
.site-footer { font-size: 12px; line-height: 1.55; color: var(--muted); padding: 18px 20px 26px; text-align: center; border-top: 1px solid var(--border-subtle); background: var(--app-bg); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 6px; }
.site-footer a { color: var(--text-primary); text-decoration: none; font-weight: 500; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 2px auto; max-width: 860px; }
body:has(#loginScreen:not(.hidden)) .site-footer,
body:has(#signupScreen:not(.hidden)) .site-footer,
body:has(#verifyScreen:not(.hidden)) .site-footer { background: #0A1F3A; color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.08); position: relative; z-index: 1; }
body:has(#loginScreen:not(.hidden)) .site-footer a,
body:has(#signupScreen:not(.hidden)) .site-footer a,
body:has(#verifyScreen:not(.hidden)) .site-footer a { color: rgba(255,255,255,.85); }

/* Version number: kept in the DOM (exports use it) but not shown to users. */
.app-version { display: none !important; }
.data-source { font-size: 12px; color: var(--muted); }
.icon-btn .ico { vertical-align: middle; }
/* Wide screens: the brand panel carries the logo, so the card leads with "Sign in". */
@media (min-width: 960px) {
  #loginScreen .app-logo-login { display: none; }
  #loginScreen .login-card .app-subtitle { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-top: 0; }
}

/* ---- Bank accounts: named accounts list ---- */
.bank-accounts { margin: 10px 0 14px; }
.bank-accounts-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bank-accounts-title { font-weight: 600; font-size: 15px; }
.bank-account-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; padding: 12px; margin-bottom: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--card-bg-raised); }
.bank-account-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--muted); min-width: 0; }
.bank-account-form .input { width: 100%; box-sizing: border-box; }
.bank-account-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.bank-account-list { display: grid; gap: 8px; }
.bank-acct { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 16px; align-items: center; padding: 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--card-bg); }
.bank-acct.is-selected { border-color: var(--brand-accent); box-shadow: inset 3px 0 0 var(--brand-accent); }
.bank-acct-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bank-acct-name { font-weight: 600; font-size: 14.5px; }
.bank-acct-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-acct-figs { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--muted); text-align: right; }
.bank-acct-figs b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.bank-acct-figs b.pos { color: var(--gain); }
.bank-acct-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.bank-acct-remove { color: var(--loss); }
.bank-acct-rename { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bank-acct-rename .input { max-width: 240px; }
.bank-upload-account { width: auto; min-width: 170px; max-width: 240px; }
@media (max-width: 640px) {
  .bank-acct { grid-template-columns: 1fr auto; }
  .bank-acct-actions { grid-column: 1 / -1; justify-content: flex-start; }
}