/*
 * The look of the whole portal, app and public copy alike. DECISIONS V1-74, V1-80.
 *
 * Three rules here are not taste (MODULE_6.md):
 *
 *   §10.3  Nothing is encoded by colour alone. Every colour distinction in this
 *          file is paired with a pattern, a stroke, a symbol or a label.
 *   §10.4  Minimum contrast 4.5:1 for text, 3:1 for graphical objects, and
 *          `prefers-reduced-motion` respected.
 *   §7.2   Low confidence is present but unobtrusive — muted and dashed, never
 *          hidden. §4.4 rules out a toggle that would hide it.
 *
 * The caveat strip and the footer stay easy to find. A chart whose provenance is
 * styled into invisibility satisfies the letter of the gate and none of its point.
 *
 * Tokens. Every colour below is one of these, so a theme is a set of values, not
 * a stylesheet. Five palettes (2026-11-01) and Matrix: Santorini is the bare
 * :root, so a page without scripts gets it; settings.js stamps `data-theme` for
 * the rest, and "Device" picks Santorini or Midnight Neon. Each palette brings
 * its own accent. A palette's colour too light for text on its ground is
 * darkened, keeping its hue, and every pair is held to WCAG AA by
 * tests/unit/test_settings_css.py. The accent is never a figure's colour: green
 * and orange are gain and loss, and §10.2 keeps a semantic hue out of brand and
 * category use.
 */

/* Terminess Nerd Font (V1-81, everywhere): Terminus by Dimitar Zhekov, SIL OFL 1.1,
   with Nerd Fonts' patches (MIT), v3.5.1. Cut to Latin and the symbols these pages
   use (fonts/terminess-LICENSE.txt); Rubik below covers what Terminus lacks (₹). */
@font-face {
  font-family: "Terminess Nerd Font";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/terminess-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Terminess Nerd Font";
  font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("fonts/terminess-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  /* Rubik, SIL Open Font License 1.1, from @fontsource-variable/rubik 5.3.0 (ui/). */
  src: url("fonts/rubik-latin-wght-normal.woff2") format("woff2");
}
/* ₹ only, from the system's own sans (G-02): none of the faces above has the sign,
   and a "local()" face loads nothing, so the 'self' policy holds. */
@font-face {
  font-family: "Rupee";
  src: local("Segoe UI"), local("Roboto"), local("Noto Sans"), local("SF Pro Text"),
       local(".SF NS Text"), local("Helvetica Neue"), local("Arial");
  unicode-range: U+20B9;
}
/* Atkinson Hyperlegible (V1-83), the Braille Institute's face for low-vision readers,
   SIL OFL 1.1, from @fontsource/atkinson-hyperlegible 5.3.0 (ui/), Latin subset
   (fonts/atkinson-hyperlegible-LICENSE.txt). Rubik supplies the ₹ it lacks. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 500 900; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Type scale (V1-88): eight sizes, none under 12px at standard text size. The
     root's size is the reader's text-size choice (V1-83), so all of them follow it. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --text-h3: 1.375rem;
  --text-h2: 1.75rem;
  --text-display: clamp(2.125rem, 5.4vw, 3.75rem);
  --track-label: 0.06em;
  --track-tight: -0.02em;
  --lh-body: 1.55;
  --lh-tight: 1.2;
  --lh-display: 1.05;
  /* Reading widths below are in ch, the width of a "0"; the reading face's letters
     run about two-thirds of that, so 48ch holds some 72 characters a line
     (Impeccable critique, 2026-11-02, when "72ch" held ~110). */
  /* Running prose: the reader's face, except under Terminess (the "Terminal"
     choice), whose sentences stay in Atkinson Hyperlegible. */
  --font-prose: var(--font);
  color-scheme: light;
  --bg: #f7f4ec;
  --surface: #ffffff;
  --surface-2: #f3efe4;
  --surface-3: #ebe5d6;
  --line: #e5dfd1;
  --line-strong: #cdc4b0;
  /* A field's outline, 3:1 on its surface (WCAG 1.4.11, V1-88). */
  --field-line: #857f70;
  --ink: #0b2236;
  --ink-soft: #3c4c5c;
  --ink-faint: #536170;
  --accent: #0067ad;
  --accent-strong: #004f86;
  --accent-soft: rgb(0 103 173 / 0.08);
  --on-accent: #ffffff;
  --sky: #f2c400;
  --hero-a: #fdf3cc;
  --hero-b: #f7f4ec;
  --bench: #8a5000;
  --gain: #0b6b49;
  --loss: #a83709;
  --gain-soft: rgb(11 107 73 / 0.1);
  --loss-soft: rgb(168 55 9 / 0.1);
  --warn: #7a5600;
  --warn-bg: #fbf3dc;
  --warn-line: #e3c56f;
  --good: #1b6342;
  --fair: #7a5600;
  --weak: #93331a;
  --synthetic: #a6a294;
  /* Series (UI/UX critique G-14): the first four, and the accent that draws
     the fund's own line, keep clear of the gain, loss and benchmark hues. */
  --cat-1: #0077c8;
  --cat-2: #486b1f;
  --cat-3: #8e5aa6;
  --cat-4: #a8396b;
  --cat-5: #5b6b7a;
  --cat-6: #4a5fc1;
  --cat-7: #6e6a2c;
  --cat-8: #2f7f86;
  --on-cat: #ffffff;
  --decal: rgb(255 255 255 / 0.5);
  --sankey-right: #486b1f;
  --heat-0: #eef4fa;
  --heat-1: #d3e6f5;
  --heat-2: #9fcbeb;
  --heat-3: #7fb6e0;
  --heat-4: #0067ad;
  --heat-ink-low: #0b2236;
  --heat-ink-high: #ffffff;
  --shadow: 0 1px 2px rgb(11 34 54 / 0.04), 0 8px 24px rgb(11 34 54 / 0.06);
  --shadow-lift: 0 2px 4px rgb(11 34 54 / 0.05), 0 16px 40px rgb(0 103 173 / 0.12);
  --radius: 14px;
  --radius-sm: 10px;
  /* A proportional face by default (UI/UX critique G-01, 2026-10-04): the pixel
     monospace read as a terminal and had no ₹. "Rupee" fills the ₹ in. */
  --font: "Atkinson Hyperlegible", "Rupee", "Rubik", "Segoe UI Variable Text", "Segoe UI",
          system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* Sky: Sky Blue and Hot Pink on White. Sky Blue is 3.4:1 on white, so text
   and buttons take it darker; the pure shade rings and draws. */
:root[data-theme="sky"] {
  color-scheme: light;
  --bg: #f4fbfe;
  --surface: #fcffff;
  --surface-2: #eef8fc;
  --surface-3: #e2f1f8;
  --line: #d9edf5;
  --line-strong: #b5d6e4;
  /* A field's outline, 3:1 on its surface (WCAG 1.4.11, V1-88). */
  --field-line: #7d8a92;
  --ink: #0c2433;
  --ink-soft: #3b5260;
  --ink-faint: #4f6472;
  --accent: #006a93;
  --accent-strong: #00506f;
  --accent-soft: rgb(0 106 147 / 0.08);
  --on-accent: #ffffff;
  --sky: #0593c6;
  --hero-a: #fde8f2;
  --hero-b: #f4fbfe;
  --bench: #9b5a00;
  --gain: #0e7853;
  --loss: #bc3f0c;
  --gain-soft: rgb(14 120 83 / 0.1);
  --loss-soft: rgb(188 63 12 / 0.1);
  --warn: #8a6100;
  --warn-bg: #fdf6e3;
  --warn-line: #e3c56f;
  --good: #1f6f4a;
  --fair: #8a6100;
  --weak: #a1391d;
  --synthetic: #9aa1ad;
  /* Series (UI/UX critique G-14): the first four, and the accent that draws
     the fund's own line, keep clear of the gain, loss and benchmark hues. */
  --cat-1: #037aa6;
  --cat-2: #c42a76;
  --cat-3: #5b3fc4;
  --cat-4: #2f7f86;
  --cat-5: #5b6b7a;
  --cat-6: #8e5aa6;
  --cat-7: #6e6a2c;
  --cat-8: #1f6f9a;
  --on-cat: #ffffff;
  --decal: rgb(255 255 255 / 0.5);
  --sankey-right: #c42a76;
  --heat-0: #eef8fc;
  --heat-1: #cdebf6;
  --heat-2: #9ad6ec;
  --heat-3: #6cc0e0;
  --heat-4: #006a93;
  --heat-ink-low: #0c2433;
  --heat-ink-high: #ffffff;
  --shadow: 0 1px 2px rgb(12 36 51 / 0.04), 0 8px 24px rgb(12 36 51 / 0.06);
  --shadow-lift: 0 2px 4px rgb(12 36 51 / 0.05), 0 16px 40px rgb(5 147 198 / 0.14);
}

/* Indian Heritage: Deep Maroon and Near-Black on Ivory, Gold behind the hero. */
:root[data-theme="heritage"] {
  color-scheme: light;
  --bg: #f5e6d3;
  --surface: #fdf7ef;
  --surface-2: #f8ecdc;
  --surface-3: #f0dfc8;
  --line: #e8d5bd;
  --line-strong: #d4bc9e;
  /* A field's outline, 3:1 on its surface (WCAG 1.4.11, V1-88). */
  --field-line: #85736a;
  --ink: #2b2024;
  --ink-soft: #55454a;
  --ink-faint: #5f4d52;
  --accent: #8b1e3f;
  --accent-strong: #6c1631;
  --accent-soft: rgb(139 30 63 / 0.08);
  --on-accent: #fdf7ef;
  --sky: #d4af37;
  --hero-a: #f3dc9a;
  --hero-b: #f5e6d3;
  --bench: #7f4a00;
  --gain: #0a6344;
  --loss: #9c3208;
  --gain-soft: rgb(10 99 68 / 0.1);
  --loss-soft: rgb(156 50 8 / 0.1);
  --warn: #6f4f00;
  --warn-bg: #f8ecc9;
  --warn-line: #d4af37;
  --good: #185c3d;
  --fair: #6f4f00;
  --weak: #8a2f17;
  --synthetic: #a8968c;
  /* Series (UI/UX critique G-14): the first four, and the accent that draws
     the fund's own line, keep clear of the gain, loss and benchmark hues. */
  --cat-1: #8b1e3f;
  --cat-2: #1f6f86;
  --cat-3: #5b3fc4;
  --cat-4: #9a4f8a;
  --cat-5: #6b5a5e;
  --cat-6: #8c5f5f;
  --cat-7: #6e6a2c;
  --cat-8: #4a5fc1;
  --on-cat: #ffffff;
  --decal: rgb(255 255 255 / 0.5);
  --sankey-right: #1f6f86;
  --heat-0: #f8ecdc;
  --heat-1: #efd3c4;
  --heat-2: #dba6aa;
  --heat-3: #c98a90;
  --heat-4: #8b1e3f;
  --heat-ink-low: #2b2024;
  --heat-ink-high: #fdf7ef;
  --shadow: 0 1px 2px rgb(43 32 36 / 0.05), 0 8px 24px rgb(43 32 36 / 0.07);
  --shadow-lift: 0 2px 4px rgb(43 32 36 / 0.06), 0 16px 40px rgb(139 30 63 / 0.14);
}

/* Crimson Depth: Soft Pearl on Obsidian Black, Warm Sand for links and buttons.
   Crimson is 1.6:1 on black, so it tints the hero and the ring, never text. */
:root[data-theme="crimson"] {
  color-scheme: dark;
  --bg: #161616;
  --surface: #1d1b1a;
  --surface-2: #252221;
  --surface-3: #2e2a28;
  --line: #2f2b29;
  --line-strong: #45403c;
  /* A field's outline, 3:1 on its surface (WCAG 1.4.11, V1-88). */
  --field-line: #7d746c;
  --ink: #f2f1ed;
  --ink-soft: #cdc7bd;
  --ink-faint: #aea59a;
  --accent: #d9bf8c;
  --accent-strong: #ecdcb9;
  --accent-soft: rgb(217 191 140 / 0.12);
  --on-accent: #161616;
  --sky: #710014;
  --hero-a: #2b0d12;
  --hero-b: #161616;
  --bench: #8fb8de;
  --gain: #4cc38a;
  --loss: #ff7b61;
  --gain-soft: rgb(76 195 138 / 0.14);
  --loss-soft: rgb(255 123 97 / 0.14);
  --warn: #e9b949;
  --warn-bg: rgb(233 185 73 / 0.09);
  --warn-line: rgb(233 185 73 / 0.4);
  --good: #5fcf98;
  --fair: #e0b04a;
  --weak: #ff8a6a;
  --synthetic: #6b635d;
  /* Series (UI/UX critique G-14): the first four, and the accent that draws
     the fund's own line, keep clear of the gain, loss and benchmark hues. */
  --cat-1: #f2f1ed;
  --cat-2: #b7a6ff;
  --cat-3: #e88aa8;
  --cat-4: #c8c26a;
  --cat-5: #a39a90;
  --cat-6: #d9bf8c;
  --cat-7: #5ec8e5;
  --cat-8: #7fc8b0;
  --on-cat: #161616;
  --decal: rgb(22 22 22 / 0.45);
  --sankey-right: #5ec8e5;
  --heat-0: #252221;
  --heat-1: #3d2328;
  --heat-2: #5e2a33;
  --heat-3: #8a3a47;
  --heat-4: #e3b8a0;
  --heat-ink-low: #f2f1ed;
  --heat-ink-high: #161616;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px rgb(0 0 0 / 0.32);
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 18px 44px rgb(0 0 0 / 0.5);
}

/* Midnight Neon: Lavender and Cyan on Midnight Navy, Electric Violet in the swatch. */
:root[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #0f172a;
  --surface: #131c33;
  --surface-2: #19233d;
  --surface-3: #202b48;
  --line: #243052;
  --line-strong: #34406a;
  /* A field's outline, 3:1 on its surface (WCAG 1.4.11, V1-88). */
  --field-line: #66709a;
  --ink: #ede9fe;
  --ink-soft: #c3bde6;
  --ink-faint: #a29dc6;
  --accent: #a78bfa;
  --accent-strong: #c4b5fd;
  --accent-soft: rgb(167 139 250 / 0.13);
  --on-accent: #0f172a;
  --sky: #22d3ee;
  --hero-a: #221a4c;
  --hero-b: #0f172a;
  --bench: #f2b347;
  --gain: #4cc38a;
  --loss: #ff7b61;
  --gain-soft: rgb(76 195 138 / 0.14);
  --loss-soft: rgb(255 123 97 / 0.14);
  --warn: #e9b949;
  --warn-bg: rgb(233 185 73 / 0.09);
  --warn-line: rgb(233 185 73 / 0.4);
  --good: #5fcf98;
  --fair: #e0b04a;
  --weak: #ff8a6a;
  --synthetic: #5f6782;
  /* Series (UI/UX critique G-14): the first four, and the accent that draws
     the fund's own line, keep clear of the gain, loss and benchmark hues. */
  --cat-1: #a78bfa;
  --cat-2: #22d3ee;
  --cat-3: #f07ca8;
  --cat-4: #f0abfc;
  --cat-5: #94a3b8;
  --cat-6: #818cf8;
  --cat-7: #e0a8ff;
  --cat-8: #5eead4;
  --on-cat: #0f172a;
  --decal: rgb(15 23 42 / 0.45);
  --sankey-right: #22d3ee;
  --heat-0: #19233d;
  --heat-1: #2a2a5e;
  --heat-2: #3b3488;
  --heat-3: #5b45c4;
  --heat-4: #c4b5fd;
  --heat-ink-low: #ede9fe;
  --heat-ink-high: #0f172a;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 10px 30px rgb(0 0 0 / 0.3);
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 18px 44px rgb(0 0 0 / 0.45);
}

/* Matrix (V1-81): green on black. Loss keeps its own hue, so gain and loss are
   still two colours as well as two symbols (§10.3). */
:root[data-theme="matrix"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #020b03;
  --surface-2: #051a08;
  --surface-3: #0a2a0e;
  --line: #0d3b12;
  --line-strong: #17601f;
  --field-line: #1a7328;
  --ink: #33ff66;
  --ink-soft: #22cc4e;
  --ink-faint: #19a33d;
  --accent: #00ff41;
  --accent-strong: #7dff9b;
  --accent-soft: rgb(0 255 65 / 0.1);
  --on-accent: #000000;
  --sky: #00ff41;
  --hero-a: #001a05;
  --hero-b: #000000;
  --bench: #b8ff3d;
  --gain: #00ff41;
  --loss: #ff5f3a;
  --gain-soft: rgb(0 255 65 / 0.12);
  --loss-soft: rgb(255 95 58 / 0.14);
  --warn: #d7ff3d;
  --warn-bg: rgb(215 255 61 / 0.07);
  --warn-line: rgb(215 255 61 / 0.4);
  --good: #00ff41;
  --fair: #d7ff3d;
  --weak: #ff5f3a;
  --synthetic: #1f6b2c;
  --cat-1: #00ff41;
  --cat-2: #7dff9b;
  --cat-3: #b8ff3d;
  --cat-4: #3dffc5;
  --cat-5: #9dff00;
  --cat-6: #2e9e48;
  --cat-7: #d7ff3d;
  --cat-8: #00c8a0;
  --on-cat: #000000;
  --decal: rgb(0 0 0 / 0.5);
  --sankey-right: #3dffc5;
  --heat-0: #031405;
  /* The green ink reads 4.5:1 on every cell but the brightest, which takes black. */
  --heat-1: #052a0b;
  --heat-2: #084d14;
  --heat-3: #0a6c1a;
  --heat-4: #00ff41;
  --heat-ink-low: #33ff66;
  --heat-ink-high: #000000;
  --shadow: 0 0 0 1px rgb(0 255 65 / 0.06), 0 8px 24px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 0 0 1px rgb(0 255 65 / 0.25), 0 0 24px rgb(0 255 65 / 0.18);
}
:root[data-theme="matrix"] h1, :root[data-theme="matrix"] h2,
:root[data-theme="matrix"] .kpi__value {
  text-shadow: 0 0 8px rgb(0 255 65 / 0.45);
}

* { box-sizing: border-box; }
/* Every field's hint, in every theme: the browser's own grey failed AA on dark
   grounds. Firefox fades placeholders, so opacity is set back. */
::placeholder { color: var(--ink-faint); opacity: 1; }
/* Every fold-out is a 24px target at least (WCAG 2.5.8); some ask for more below. */
summary { min-height: 24px; }
/* No paragraph, list item or definition ends on a word alone on its line (design
   critique, 2026-11-04: "prices" and "worst." alone on their last lines). */
p, li, dd { text-wrap: pretty; }

/* A jump lands below the pinned top bar and, on a fund page, the section
   navigator (V1-84): scripts measure both into --bar-h and --nav-h; these are
   the defaults without them. */
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h, 63px) + var(--nav-h, 0px) + 12px);
}
:root:has(nav.sections) { --nav-h: 44px; }

/* Text size and density (V1-83). Every font size is in rem, so the root's size is
   the reader's text size; standard is the browser's own, as before. */
html { font-size: 100%; }
/* `hidden` hides, whatever display a class sets: a control a page has not
   switched on yet (the settings gear, without scripts) must not show. */
[hidden] { display: none !important; }
:root[data-size="small"] { font-size: 93.75%; }
:root[data-size="large"] { font-size: 112.5%; }
[data-density="compact"] th, [data-density="compact"] td { padding: 6px 10px; }
[data-density="compact"] .card { padding: 14px; }
[data-density="compact"] .view__header { padding: 12px 14px 6px; }
[data-density="compact"] .view__chart { padding: 4px 14px 14px; }
[data-density="compact"] .view__footer { padding: 6px 14px; }
[data-density="compact"] .home-section { margin-top: 32px; }

/* The reader's font (V1-83). Atkinson Hyperlegible is the bare :root's since the
   UI/UX critique (G-01); Terminess is the opt-in "Terminal". */
:root[data-font="rubik"] {
  --font: "Rubik", "Rupee", system-ui, sans-serif;
}
:root[data-font="terminess"] {
  --font: "Terminess Nerd Font", "Rupee", "Rubik", system-ui, sans-serif;
  --mono: "Terminess Nerd Font", ui-monospace, monospace;
  --font-prose: "Atkinson Hyperlegible", "Rupee", "Rubik", system-ui, sans-serif;
}

body {
  margin: 0;
  font: 1rem/1.55 var(--font);
  font-variant-numeric: tabular-nums;   /* figures line up where the face has them */
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
h1, h2, h3 { text-wrap: balance; }

.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- the shell ------------------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px 14px;
  background: var(--surface);
  border-right: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 8px 12px;
  color: var(--ink); text-decoration: none;
  font-size: var(--text-base); font-weight: 700; letter-spacing: var(--track-tight); white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand__mark { width: 26px; height: 26px; color: var(--accent); stroke-width: 2; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav__group {
  margin: 16px 10px 6px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.sidenav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: var(--text-md);
}
.sidenav__link:hover { background: var(--surface-2); color: var(--ink); }
.sidenav__link[aria-current="page"] {
  background: var(--accent-soft); color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
.sidenav__link[aria-current="page"] .icon { color: var(--accent); }
.sidebar__foot {
  margin-top: auto; padding: 14px 10px 2px;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--ink-faint);
}
.sidebar__foot p { margin: 0 0 8px; }
.sidebar__private { display: flex; gap: 8px; align-items: flex-start; }
.sidebar__private .icon { width: 14px; height: 14px; margin-top: 2px; }

.shell__main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 28px;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .search { margin-right: auto; }
.topbar--public .brand { padding: 0 8px 0 0; }
.icon-button.topbar__menu { display: none; }

.icon-button {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }
/* Settings says what it opens on a wide screen, "Display" beside its sliders
   (UI/UX critique G-06); an icon alone, named in aria-label, below that. */
.icon-button__label { display: none; }
@media (min-width: 981px) {
  .icon-button--labelled { display: inline-flex; gap: 6px; width: auto; padding: 0 12px; }
  .icon-button--labelled .icon-button__label { display: inline; font-size: var(--text-sm); }
}
/* No search box between the links and it (the home page, G-08): still at the end. */
.topnav + .icon-button { margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--text-xs); color: var(--ink-soft); white-space: nowrap;
}
.chip--mono { font-family: var(--mono); font-size: var(--text-xs); letter-spacing: var(--track-label); }

.content { width: 100%; max-width: 1680px; margin: 0 auto; padding: 28px; }
/* One width for every public page, the home page's sections included: 1200px of
   content and its padding (UI/UX critique G-09). */
.content--public { max-width: 1256px; }
/* The front page (V1-88): a full-width <main> for the hero; .home-body puts the rest
   back in the same column as every other page. */
main.content.content--bleed { max-width: none; padding: 0; }
.home-body { max-width: 1600px; margin: 0 auto; padding: 28px; }
@media (max-width: 720px) { .home-body { padding: 18px 12px; } }

.colophon {
  width: 100%; max-width: 1680px; margin: 0 auto;
  padding: 8px 28px 32px;
  font-size: var(--text-xs); color: var(--ink-faint);
}
.content--public ~ .colophon, .content--public + .colophon { max-width: 1256px; }
.colophon__columns {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin: 24px 0 16px; padding-top: 24px; border-top: 1px solid var(--line);
}
.colophon__columns h2 { margin: 0 0 8px; font-size: var(--text-sm); color: var(--ink); }
.colophon__columns ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.colophon__columns li { font-size: var(--text-sm); color: var(--ink-soft); }
.colophon__columns a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 720px) { .colophon__columns { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.public-note p { margin: 0; }
.public-note {
  margin: 0; padding: 8px 28px;
  font-size: var(--text-sm); color: var(--ink-soft);
  background: var(--surface); border-bottom: 1px solid var(--line);
}

/* --- search --------------------------------------------------------------------- */

.search { position: relative; flex: 1 1 320px; max-width: 520px; }
.search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none;
}
/* Every field shows where to type, 3:1 against its surface (WCAG 1.4.11, V1-88).
   :where() keeps this at zero specificity, so components still style their own. */
:where(input:not([type="radio"], [type="checkbox"], [type="file"], [type="hidden"]), select, textarea) {
  border: 1px solid var(--field-line);
}
.search input {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.search__icon + input { padding-left: 36px; }
.search input:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.search__suggest {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0;
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow);
}
.search__suggest a, .search-results a {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.search__suggest a:hover, .search__suggest a:focus, .search-results a:hover {
  background: var(--surface-2);
}
/* Arrowing through suggestions: the tint alone is about 1.05:1, so a ring too. */
.search__suggest a:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.search__meta, .search-results__meta { font-size: var(--text-xs); color: var(--ink-soft); }
/* The fund pickers (kit.js, UI/UX critique C-01): the same list, its options chosen
   with the arrows while focus stays in the box (aria-activedescendant). */
.picker { max-height: min(60vh, 26rem); overflow-y: auto; }
.picker [role="option"] {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.picker [role="option"]:hover, .picker [aria-selected="true"] { background: var(--surface-2); }
.picker [aria-selected="true"] { outline: 2px solid var(--accent); outline-offset: -2px; }
.picker .picker__none { color: var(--ink-soft); cursor: default; }
.search__name, .search-results__name { font-weight: 600; }

.search--hero { max-width: 640px; flex: none; }
.search--hero .search__icon { left: 16px; width: 18px; height: 18px; }
.search--hero input { padding: 14px 16px 14px 46px; font-size: var(--text-base); border-radius: 12px; }
.search--hero .search__icon + input { padding-left: 46px; }

/* --- cards: the view container ------------------------------------------------------ */

.view {
  position: relative;
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.view__header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 20px 10px;
}
/* The panel's question and, beside it, its "?" (no label above it since the
   Impeccable critique, 2026-11-02). */
.view__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; }
.view__header h2 { margin: 0; font-size: var(--text-h3); font-weight: 650; letter-spacing: var(--track-tight); }
.view__chart { flex: 1; padding: 6px 20px 20px; overflow-x: auto; }

/*
 * §7.2. Low confidence: muted and a dashed border. Both, because the mute alone
 * is a colour-only encoding and §10.3 forbids that.
 */
.view--low { border-style: dashed; }
.view--low .view__chart { opacity: 0.86; }

/* Present but unobtrusive (§7.2): the words in the soft ink, the grade in a dot
   beside them, and a link to what the grades mean (V1-94). */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
a.badge:hover { color: var(--ink); border-color: var(--ink-faint); }
.badge--high::before { background: var(--good); }
.badge--medium::before { background: var(--fair); }
.badge--low { border-style: dashed; }
.badge--low::before { background: var(--weak); }

/* The fund page's header card names the fund itself; its question is for a
   screen reader, and only the badge shows, on its own line at the right. In the
   flow, not laid over the corner: "Confidence: medium" ran over the NAV box when
   the card only kept a guessed gap for it. */
/* Its question is for a screen reader and its badge closes the panel, so a quiet
   header takes no room. */
.view__header--quiet { padding: 0; }

/* --- caveats: never quiet --------------------------------------------------------- */

.caveats {
  margin: 0 20px 12px; padding: 9px 12px;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
}
.caveats summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); color: var(--ink); }
.caveats ul { margin: 8px 0 2px; padding-left: 18px; }
.caveats li { margin: 4px 0; font-size: var(--text-sm); color: var(--ink-soft); }

/* --- the gate: as-of, staleness, coverage ---------------------------------------------- */

.view__footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 10px 20px;
  font-size: var(--text-xs); color: var(--ink-faint);
}
.view__source { margin: 0; }
.view__source a { color: var(--accent); }
.view__provenance summary { cursor: pointer; margin-top: 4px; width: fit-content; }
.view__provenance summary:hover { color: var(--ink-soft); }
.view__provenance dl { margin-top: 8px; }
.view__footer dl { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; }
.view__footer dt { font-weight: 600; display: inline; color: var(--ink-soft); }
.view__footer dt::after { content: ": "; }
.view__footer dd { display: inline; margin: 0; }
.view__footer div { white-space: nowrap; }
.staleness { color: var(--ink-faint); }
.truncated { color: var(--fair); font-weight: 600; }

/* --- explained absence ------------------------------------------------------------ */

.placeholder { padding: 28px 20px; }
.placeholder__state { margin: 0 0 4px; font-weight: 650; font-size: var(--text-base); }
.placeholder__reason { margin: 0; color: var(--ink-soft); max-width: 44ch; }
.placeholder--error .placeholder__state { color: var(--loss); }
.chart-error { margin: 10px 0 0; color: var(--loss); font-size: var(--text-sm); }

/* --- KPI tiles ------------------------------------------------------------------- */

.kpi { margin: 0; }
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0;
}
/* Inside the panel's card a hairline divides the figures; none is a box of its own
   (Impeccable critique, 2026-11-02). */
.kpi__tile {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 12px 2px 4px;
  border-top: 1px solid var(--line);
}
.kpi__tile dt {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.kpi__tile dd { margin: 0; }
.kpi__value {
  font-size: var(--text-h3); font-weight: 650; line-height: var(--lh-tight); letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums; color: var(--ink);
  overflow-wrap: anywhere;
}
.kpi__context {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--text-xs); color: var(--ink-soft);
}
.kpi__symbol { font-size: var(--text-xs); }
.kpi__tile--ahead .kpi__symbol { color: var(--gain); }
.kpi__tile--behind .kpi__symbol { color: var(--loss); }
/* A figure takes its own sign's colour (`ret--gain`/`ret--loss`, from the builder);
   its benchmark's verdict is the ▲/▼ on the line beneath (Impeccable critique,
   2026-11-01). Matrix's text is all green, so there a loss is what stands out. */
:root[data-theme="matrix"] .ret--loss { color: var(--loss); }
.kpi__spark { margin-top: 6px; }
.kpi__spark svg { display: block; width: 100%; height: 34px; overflow: visible; }
.kpi__spark polyline {
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.kpi__spark polygon { fill: var(--accent-soft); stroke: none; }
/* An absent figure is muted AND dashed — colour alone would not carry it. */
.kpi__tile--absent { border-top-style: dashed; }   /* low confidence: muted, dashed (§7.2) */
.kpi__tile--absent .kpi__value { color: var(--ink-faint); }
.kpi__absent-note {
  margin: 18px 0 8px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.tiles--absent { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.tiles--absent .kpi__tile { padding: 8px 2px 4px; }
.tiles--absent .kpi__value { font-size: var(--text-base); }
.tiles--inline { margin-top: 16px; }
.tiles--inline .kpi__value { font-size: var(--text-h3); }
.definition { margin: 14px 0 0; font-size: var(--text-sm); color: var(--ink-soft); max-width: 48ch; }

/* --- tables ---------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; --table-ground: var(--surface); }
/* What lies behind a table: a card, or the page where a section sits on it. */
.home-section .table-wrap { --table-ground: var(--bg); }
.home-section .card .table-wrap { --table-ground: var(--surface); }
/* More to the right (app.js): the edge fades, as a hint to scroll (UI/UX critique
   G-17). A mask, so it suits a card and the page's ground alike. */
.table-wrap--more { mask-image: linear-gradient(to left, transparent, #000 40px); }
/* While a table scrolls (app.js's tab stop), its first column stays and the rest
   pass under it (C-04): the measure or the fund's name beside its figures. `:where`
   keeps a row's hover and flag tints on top. */
:where(.table-wrap[tabindex] tbody > tr) > :first-child {
  position: sticky; left: 0; background: var(--table-ground);
}
:where(.table-wrap[tabindex] thead tr) > :first-child { left: 0; z-index: 2; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--text-sm); }
th, td {
  text-align: left; vertical-align: middle;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
tbody tr:hover > * { background: var(--surface-2); }
tbody tr:last-child > * { border-bottom: 0; }
.col--inr, .col--inr_signed, .col--pct, .col--units, .col--nav, .col--fraction, .col--fall,
.col--return_ann, .col--ratio, .col--metric, .col--count, .col--row, .num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
th button {
  all: unset; cursor: pointer;
  /* 24px tall at least, WCAG 2.5.8 (design critique, 2026-11-04: 19px). */
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit;
}
th button:hover { color: var(--ink); }
th button::after { content: "↕"; opacity: 0.45; font-size: var(--text-xs); }
th[aria-sort="ascending"] button::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] button::after { content: "▼"; opacity: 1; }
th[aria-sort] button { color: var(--ink); }

/* A share of the whole draws a bar behind its figure: an SVG <rect> whose
   width is the figure itself, so no style attribute and nothing derived. */
.bar-cell { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.bar { width: 90px; height: 6px; flex: none; }
.bar-cell > span { min-width: 5.5em; text-align: right; }  /* bars line up */
.bar rect.bar__track { fill: var(--surface-3); }
.bar rect.bar__fill { fill: var(--accent); }

/* Unreconciled rows carry the `!` marker as well as the tint. §10.3. */
.row--unreconciled > * { background: var(--warn-bg); }
.row--unaligned td { font-style: italic; }
.flag {
  color: var(--fair); font-weight: 700; border: none; text-decoration: none;
  cursor: help; margin-left: 3px;
}
.chart-table { margin-top: 16px; }
.chart-table summary { cursor: pointer; font-size: var(--text-sm); color: var(--ink-faint); }
.chart-table summary:hover { color: var(--ink-soft); }
p.chart-table { font-size: var(--text-sm); color: var(--ink-faint); }
.chart-table .table-wrap {
  margin-top: 10px; max-height: 26rem; overflow-y: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}

/* --- sankey ---------------------------------------------------------------------- */

.sankey { margin: 0; }

/* --- heatmap ----------------------------------------------------------------------- */

.heatmap { margin: 0; }
.heatmap svg { max-width: 100%; height: auto; }
.heatmap .axis { font-size: var(--text-xs); fill: var(--ink-soft); }
.heatmap .axis--row { text-anchor: end; }
.cell rect { stroke: var(--surface); stroke-width: 2; rx: 6px; }
.cell--unaligned rect { stroke: var(--fair); }
.cell--s0 rect { fill: var(--heat-0); }
.cell--s1 rect { fill: var(--heat-1); }
.cell--s2 rect { fill: var(--heat-2); }
.cell--s3 rect { fill: var(--heat-3); }
.cell--s4 rect { fill: var(--heat-4); }
.cell__label {
  font-size: var(--text-xs); font-weight: 600; text-anchor: middle;
  font-variant-numeric: tabular-nums; fill: var(--heat-ink-low);
}
.cell--s4 .cell__label { fill: var(--heat-ink-high); }

/* --- lorenz ------------------------------------------------------------------------ */

.lorenz { margin: 0; }
.lorenz svg { max-width: 340px; height: auto; }
.equality { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 4; }
.curve { stroke: var(--accent); stroke-width: 2.2; }
.axis-line { stroke: var(--line-strong); stroke-width: 1; }
.lorenz .axis { font-size: var(--text-xs); fill: var(--ink-soft); }

/* --- interactive charts ------------------------------------------------------------- */

.headline { margin: 0 0 14px; font-size: var(--text-md); color: var(--ink-soft); max-width: 55ch; text-wrap: pretty; }
.tabs {
  display: inline-flex; gap: 2px; margin: 0 0 12px; padding: 3px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tab {
  padding: 5px 12px; border-radius: 7px;
  font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="true"] {
  background: var(--surface); color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25), 0 0 0 1px var(--line);
}
.view[aria-busy="true"] .echarts { opacity: 0.5; }
.echarts--several { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
/* One at a time behind a switch (charts.js `switcher`): full width, the buttons
   saying what each is, so no captions. */
.echarts--switched { display: block; }
.echarts--switched figcaption { display: none; }
.echarts--switched .echart[hidden] { display: none; }
.zoom.chart-switch { justify-content: flex-start; margin-bottom: 10px; }
.echarts--several .echart--treemap, .echarts--several .echart--wide { grid-column: 1 / -1; }
/* Holdings not matched to a company: a grey bar above the tiles (F-10). */
.unmatched { display: flex; align-items: center; gap: 12px; margin: 14px 0 18px; font-size: var(--text-sm); color: var(--ink-soft); }
.unmatched .bar { width: 120px; }
.panel-sub { margin: 22px 0 8px; font-size: var(--text-base); }
.echart { margin: 0; min-width: 0; }
.echart figcaption {
  margin-bottom: 6px;
  font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.echart__canvas { width: 100%; height: 340px; }
.echart--bar .echart__canvas { height: 300px; }
.echart--donut .echart__canvas { height: 260px; }
.echart--treemap .echart__canvas { height: 400px; }
.echart--hbar .echart__canvas { height: 240px; }
.echart--scatter .echart__canvas { height: 380px; }

/* --- page headings ------------------------------------------------------------------- */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; margin: 0 0 20px;
}
.page-head h1 { margin: 0; font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--track-tight); }
.page-head p { margin: 4px 0 0; color: var(--ink-soft); }
/* Learn's way back to its index (Impeccable critique, 2026-11-01: no label sits
   above a heading; a breadcrumb is a link, in the sentence's own case). */
.crumbs { margin: 0 0 6px; font-size: var(--text-sm); color: var(--ink-soft); }

/* --- the home dashboard ------------------------------------------------------------- */

.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.dash > * { grid-column: 1 / -1; min-width: 0; }
.dash > * > .view { height: 100%; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; min-width: 0;
}
.card h2 { margin: 0 0 4px; font-size: var(--text-base); font-weight: 650; }
.card__sub { margin: 0 0 16px; font-size: var(--text-sm); color: var(--ink-soft); }

.more { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.more a {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none;
}
.more a:hover { background: var(--surface-2); }
.more__icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 9px; background: var(--accent-soft); color: var(--accent);
}
.more__name { font-weight: 600; font-size: var(--text-md); }
.more__question { display: block; font-size: var(--text-xs); color: var(--ink-soft); }
.more .icon--arrow { width: 16px; height: 16px; color: var(--ink-faint); }

/* --- the welcome state: no portfolio yet ---------------------------------------------- */

.welcome { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.welcome > * { grid-column: 1 / -1; min-width: 0; }
.welcome__intro { padding: 8px 0 4px; }
.welcome__intro h1 { margin: 8px 0 8px; font-size: var(--text-h2); font-weight: 750; letter-spacing: var(--track-tight); }
.welcome__intro p.lede { margin: 0; max-width: 47ch; font-size: var(--text-base); color: var(--ink-soft); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.checklist__item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
.checklist__mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--ink-soft);
  font-size: var(--text-sm); font-weight: 650;
}
.checklist__mark .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.is-done .checklist__mark { background: var(--gain-soft); border-color: transparent; color: var(--gain); }
.checklist__title { margin: 3px 0 2px; font-weight: 650; }
.checklist__item p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.command {
  display: block; margin-top: 8px; padding: 9px 12px;
  font-family: var(--mono); font-size: var(--text-xs); white-space: nowrap; overflow-x: auto;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.facts-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.facts-list div { padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.facts-list dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.facts-list dd { margin: 4px 0 0; font-size: var(--text-lead); font-weight: 650; font-variant-numeric: tabular-nums; }
.facts-list .facts-list__note { margin-top: 2px; font-size: var(--text-xs); font-weight: 400; color: var(--ink-soft); }
.facts-list--ranks { margin: 18px 0 4px; }
.recent { margin-top: 18px; }
.recent h3 {
  margin: 0 0 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink-faint);
}
.recent ul { list-style: none; margin: 0; padding: 0; }
.recent a {
  display: block; padding: 7px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--text-md);
}
.recent a:hover { background: var(--surface-2); }

/* --- the fund page -------------------------------------------------------------------- */

.fund-page {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px;
  /* Dense, so consistency fills the half-row beside returns rather than
     leaving a hole where the full-width falls chart comes between them. */
  grid-auto-flow: row dense;
}
.fund-page > * { grid-column: 1 / -1; min-width: 0; }
.fund-page__panel > .view { height: 100%; }
.fund-page__detail > summary {
  cursor: pointer; color: var(--ink-soft); font-size: var(--text-sm); padding: 4px 2px;
}
.fund-page__detail[open] > summary { margin-bottom: 12px; }

.fundcard { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.fundcard__name {
  margin: 0; padding-right: 90px;
  font-size: var(--text-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-tight);
}
.fundcard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
/* Six tiles as two rows of three: four-and-two reads as something missing. */
.fundcard .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .fundcard .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .fundcard .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .fundcard .tiles { grid-template-columns: minmax(0, 1fr); } }
.findings {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px;
}
.finding {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
}
.finding__symbol {
  flex: none; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: var(--text-xs); color: var(--ink-soft); background: var(--surface-3);
}
.finding--ahead .finding__symbol { color: var(--gain); background: var(--gain-soft); }
.finding--behind .finding__symbol { color: var(--loss); background: var(--loss-soft); }
.finding__title {
  margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.finding__text { margin: 3px 0 0; font-weight: 600; line-height: var(--lh-body); }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px 24px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.facts dt { font-size: var(--text-xs); color: var(--ink-faint); }
.facts dd { margin: 2px 0 0; }

/* --- the public front page ------------------------------------------------------------- */

.hero { padding: 40px 0 28px; }
.hero__title {
  margin: 14px 0 14px; max-width: 18ch;
  font-size: var(--text-display); font-weight: 750; line-height: var(--lh-display); letter-spacing: var(--track-tight);
}
.hero__lede { margin: 0 0 26px; max-width: 41ch; font-size: var(--text-base); color: var(--ink-soft); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0 0 12px; }
.stat {
  display: flex; flex-direction: column-reverse; gap: 2px; margin: 0;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.stat dt { font-size: var(--text-sm); color: var(--ink-soft); }
.stat dd { margin: 0; font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px 16px; flex-wrap: wrap; margin: 40px 0 14px;
}
/* A heading's "?" sits beside it, outside the <h2> so the heading reads only its own
   words (V1-88); the rest of the row stays pushed to the end. */
.section-head > h2 + .term { align-self: center; margin-left: -10px; margin-right: auto; }
/* Room kept for the "?" after a heading, so a long heading wraps within itself
   rather than leaving the "?" alone on the next line (G-16). */
.section-head > h2 { max-width: calc(100% - 34px); }
.section-head h2 { margin: 0; font-size: var(--text-h3); font-weight: 700; letter-spacing: var(--track-tight); }
.section-head p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.families { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.family {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink); text-decoration: none;
}
.family:hover { border-color: var(--accent); color: var(--ink); }

.table-card { padding: 0; overflow: clip; }  /* rounds the corners without becoming a scroll box */
.table-card__tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
/* The entry fields' shape (V1-93), 40px to sit in a toolbar (design review). */
.table-card__tools select, .table-card__tools input {
  box-sizing: border-box; height: 40px; padding: 0 12px;
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--surface); border: 1px solid var(--field-line); border-radius: 12px;
}
.table-card__tools select:hover, .table-card__tools input:hover { border-color: var(--ink-faint); }
.table-card__tools select:focus-visible, .table-card__tools input:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 0;
}
.table-card__search { position: relative; flex: 1 1 220px; max-width: 320px; }
.table-card__search .field-search__icon { left: 13px; width: 16px; height: 16px; }
.table-card__search input { width: 100%; padding-left: 36px; border-radius: 999px; }
.table-card__count { margin-left: auto; font-size: var(--text-sm); color: var(--ink-faint); }
/* The table grows with the page (V1-88): one scroll, not a box inside it. Where every
   column fits, even in the widest font and text size, the wrapper stops scrolling
   sideways and the header row sticks under the top bar; narrower, it scrolls with
   the table. */
.table-card .table-wrap { overflow-x: auto; }
.table-card thead th { position: sticky; top: var(--bar-h, 0px); z-index: 2; }
@media (min-width: 1280px) { .table-card .table-wrap { overflow: visible; } }
.fund-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.fund-name:hover { color: var(--accent); }
.cell-sub { display: block; font-size: var(--text-xs); color: var(--ink-faint); }
.ret--gain { color: var(--gain); }
.ret--loss { color: var(--loss); }
.ret__symbol { font-size: var(--text-xs); margin-right: 3px; }

/* Explore funds (UI/UX critique E-01 to E-07). The columns a reader turned off
   (app.js writes the table's data-hide), the chooser, the empty state and "more". */
table[data-hide~="cat"] [data-col="cat"], table[data-hide~="size"] [data-col="size"],
table[data-hide~="ter"] [data-col="ter"], table[data-hide~="r1"] [data-col="r1"],
table[data-hide~="r3"] [data-col="r3"], table[data-hide~="r5"] [data-col="r5"],
table[data-hide~="rank"] [data-col="rank"], table[data-hide~="vol3"] [data-col="vol3"],
table[data-hide~="fall3"] [data-col="fall3"],
table[data-hide~="sharpe3"] [data-col="sharpe3"] { display: none; }
.columns { position: relative; }
.columns > summary { list-style: none; cursor: pointer; min-height: 40px; }
.columns > summary::-webkit-details-marker { display: none; }
.columns__menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 4px;
  min-width: 220px; margin: 0; padding: 12px 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.columns__menu legend { padding: 0; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 650; color: var(--ink-soft); }
.columns__menu label { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--text-sm); cursor: pointer; }
.columns__menu input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.table-empty { display: grid; justify-items: start; gap: 10px; padding: 24px 16px; color: var(--ink-soft); }
.table-empty p { margin: 0; font-size: var(--text-base); color: var(--ink); }
.table-more { margin: 0; padding: 14px 16px; border-top: 1px solid var(--line); }
@media (min-width: 721px) { .table-card__sort { display: none; } }
@media (max-width: 720px) {
  /* The filters fill the width, one to a line (E-06). */
  .table-card__tools select, .table-card__tools .table-card__search { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; }
  .table-card__count { margin-left: 0; }
  /* A fund in two lines (E-07): its name, then its figures, each under a short
     name; the headings, which a phone has no room to sort by, read out only. */
  .table-card table[data-rows] thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  }
  .table-card table[data-rows], .table-card table[data-rows] tbody { display: block; }
  .table-card table[data-rows] tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
    padding: 12px 16px; border-bottom: 1px solid var(--line);
  }
  .table-card table[data-rows] td {
    padding: 0; border: 0; text-align: left; white-space: normal;
    font-size: var(--text-sm); background: none;
  }
  .table-card table[data-rows] td[data-col="name"] { flex-basis: 100%; font-size: var(--text-base); }
  .table-card table[data-rows] td[data-col="name"] .cell-sub { display: none; }
  .table-card table[data-rows] td[data-label]::before {
    content: attr(data-label) " "; color: var(--ink-faint);
  }
  .table-card table[data-rows] .cell-sub { display: inline; margin-left: 4px; }
}


.fund-browser { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.explorer__group > summary {
  cursor: pointer; padding: 10px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-weight: 600;
}
.explorer__group[open] > summary { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.explorer__group .search-results { margin: 0; border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.explorer__count { font-weight: 400; color: var(--ink-faint); margin-left: 6px; }

/* --- search results and plain pages ------------------------------------------------------- */

.search-page h1, .plain h1 { margin: 0 0 12px; font-size: var(--text-h2); font-weight: 700; letter-spacing: var(--track-tight); }
.search--page { max-width: 680px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search--page label { flex-basis: 100%; font-size: var(--text-sm); color: var(--ink-soft); }
.search--page input { flex: 1; padding: 10px 12px; }
.search--page button, .button {
  font: inherit; font-weight: 600; border: 0; border-radius: var(--radius-sm);
  padding: 10px 18px; background: var(--accent); color: var(--on-accent); cursor: pointer;
  text-decoration: none; display: inline-block;
}
.search--page button:hover, .button:hover { background: var(--accent-strong); color: var(--on-accent); }
.search-page__count { color: var(--ink-soft); margin: 16px 0 8px; }
.search-results {
  list-style: none; padding: 6px; margin: 8px 0 0; max-width: 820px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.search-results li + li { border-top: 1px solid var(--line); }
.plain .lede { color: var(--ink-soft); max-width: 45ch; }

/* --- accessibility --------------------------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a:focus-visible, summary:focus-visible, details:focus-visible, button:focus-visible,
select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* --- widths ------------------------------------------------------------------------------ */

@media (min-width: 1100px) {
  .dash__cell--overlap_heatmap { grid-column: span 8; }
  .dash__cell--more { grid-column: span 4; }
  .fund-page__panel--fund_returns, .fund-page__panel--fund_consistency { grid-column: span 6; }
  .welcome__setup { grid-column: span 7; }
  .welcome__find { grid-column: span 5; }
}

/* Narrower: the sidebar keeps its icons and drops its words. */
@media (max-width: 1099px) {
  .shell { grid-template-columns: 68px minmax(0, 1fr); }
  .sidebar { padding: 16px 10px; align-items: center; }
  .sidebar .brand span, .sidenav__link span, .sidenav__group, .sidebar__foot { display: none; }
  .brand { padding: 4px 0 12px; }
  .sidenav__link { justify-content: center; padding: 10px; }
}

/* A phone: the sidebar becomes a drawer behind the menu button. */
@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 50; width: 272px;
    align-items: stretch; padding: 16px 12px 14px;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open::after {
    content: ""; position: fixed; inset: 0; z-index: 45; background: rgb(0 0 0 / 0.5);
  }
  .sidebar .brand span, .sidenav__link span { display: inline; }
  .sidenav__group, .sidebar__foot { display: block; }
  .brand { padding: 4px 8px 12px; }
  .sidenav__link { justify-content: flex-start; padding: 8px 10px; }
  .icon-button.topbar__menu { display: inline-grid; }
  .topbar { padding: 10px 16px; gap: 8px; }
  .topbar .chip { display: none; }
  .content { padding: 18px 16px; }
  .public-note, .colophon { padding-left: 16px; padding-right: 16px; }
  .echarts--several { grid-template-columns: minmax(0, 1fr); }
  /* The name keeps its 28px: at 22 it sat one step above the panels' 18px headings. */
  .hero { padding-top: 24px; }
  .kpi__value { font-size: var(--text-h3); }
  .kpi__tile { padding: 10px 2px 4px; }
}

/* A phone in portrait: the public bar keeps the mark and drops the name. */
@media (max-width: 480px) {
  .topbar--public .brand span { display: none; }
}

/* --- V1-80: the front page after MF Zone, the fund page after Fundoo ----------------- */

body { font-size: var(--text-base); overflow-x: clip; }  /* a last guard: the page never pans sideways */
.brand { font-weight: 600; }
.brand span { letter-spacing: var(--track-tight); }

/* The public bar: mark, the three ways around, search, theme. */
.topnav { display: flex; align-items: center; gap: 4px; }
.topnav__link {
  padding: 7px 12px; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none; font-size: var(--text-md); font-weight: 500; white-space: nowrap;
}
.topnav__link:hover { color: var(--accent); background: var(--accent-soft); }
.topnav__link[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.topbar--public { background: color-mix(in srgb, var(--surface) 88%, transparent); }
.topbar--public .search { max-width: 360px; min-width: 180px; }
.public-note { background: var(--surface-2); color: var(--ink-faint); font-size: var(--text-xs); }

.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 500; text-decoration: none;
  box-shadow: 0 0 0 0 var(--sky);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.button:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky) 45%, transparent); }
.button .icon { width: 16px; height: 16px; }

/* --- V1-89: the landing page -------------------------------------------------------
   A product story: the hero with three doors, then one section per door. Marks (bars,
   markers, lines) are SVG drawn from the build's geometry; the motion further down only
   builds them, and every word is in place from the first frame. */
.lp-hero {
  margin: 0; padding: 56px 28px 40px;
  background: var(--hero-a); border-bottom: 1px solid var(--line);
}
/* Words, doors, example: the page's order is the order read and tabbed; the grid
   puts the example beside the words on a wide screen and the doors under both. */
.lp-hero__grid {
  width: 100%; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas: "text fund" "doors doors"; gap: 36px 40px; align-items: center;
}
/* No example tonight: the doors beside the words, one above another, rather than
   an empty half (design review, 2026-10-04). */
.lp-hero__grid--alone { grid-template-areas: "text doors"; }
.lp-hero__grid--alone > .lp-doors { grid-template-columns: minmax(0, 1fr); }
.lp-hero__text { grid-area: text; }
.lp-hero__grid > .lp-doors { grid-area: doors; margin: 0; }
.lp-fund { grid-area: fund; }
.lp-hero__title {
  margin: 12px 0 14px; max-width: 18ch; text-wrap: balance;
  font-size: var(--text-display); font-weight: 600; line-height: var(--lh-display);
  letter-spacing: var(--track-tight); color: var(--ink);
}
.lp-hero__lede { margin: 0 0 20px; max-width: 35ch; font-size: var(--text-lead); color: var(--ink-soft); }
.lp-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
  color: var(--gain); font-size: var(--text-sm); font-weight: 600; text-decoration: none;
}
.lp-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* The example fund, opened up. */
.lp-fund {
  margin: 0; padding: 20px 22px; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
}
.lp-fund__name {
  display: block; overflow-wrap: anywhere;
  font-size: var(--text-lead); font-weight: 700; color: var(--ink); text-decoration: none;
}
.lp-fund__name:hover { color: var(--accent); }
.lp-fund__detail { margin: 2px 0 14px; font-size: var(--text-sm); color: var(--ink-faint); }
.lp-mix { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; }
.lp-mix__part { fill: var(--accent); }
.lp-mix__part--2 { fill: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.lp-mix__part--3, .lp-mix__part--4, .lp-mix__part--5, .lp-mix__part--6 {
  fill: color-mix(in srgb, var(--accent) 25%, var(--surface));
}
.lp-mix__legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 14px;
  font-size: var(--text-xs); color: var(--ink-soft);
}
.lp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px;
  align-items: center; font-size: var(--text-sm);
}
.lp-row__name { color: var(--ink); overflow-wrap: anywhere; }
.lp-row__track { display: block; width: 100%; height: 6px; }
.lp-row__bar { fill: var(--accent); }
.lp-row__value { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lp-fund figcaption { margin-top: 14px; font-size: var(--text-xs); color: var(--ink-faint); }

/* The three doors, in the hero and again at the end. */
.lp-doors {
  list-style: none; width: 100%; max-width: 1200px; margin: 36px auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.lp-door {
  display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.lp-door__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--accent); }
.lp-door .search--hero { width: 100%; max-width: none; }
.lp-door__more { display: inline-flex; align-items: center; min-height: 24px; font-size: var(--text-sm); }
/* The example's returns, beside what it owns (UI/UX critique H-01). */
.lp-fund__returns { display: flex; gap: 20px; margin: 8px 0 12px; }
.lp-fund__returns dt { font-size: var(--text-xs); color: var(--ink-soft); }
.lp-fund__returns dd { margin: 0; font-size: var(--text-lead); font-weight: 700; font-variant-numeric: tabular-nums; }
/* One destination: its link's ::after covers the card, so the whole face answers
   (UI/UX critique H-02); the ring shows where the keyboard is. */
.lp-door--link { position: relative; transition: border-color 0.15s, box-shadow 0.15s; }
.lp-door--link .lp-door__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lp-door--link:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.lp-door--link:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px; }

/* One section per door: words on one side, its picture on the other. */
.lp-section {
  max-width: 1200px; margin: 96px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center;
}
.lp-section--flip .lp-pic { order: -1; }
.lp-section--wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.lp-text h2 {
  margin: 8px 0 12px; text-wrap: balance;
  font-size: var(--text-h2); line-height: var(--lh-tight); letter-spacing: var(--track-tight);
}
.lp-text p { max-width: 39ch; color: var(--ink-soft); }
.lp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; }
.lp-pic {
  min-width: 0; margin: 0; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.lp-pic__title { margin: 0 0 14px; font-weight: 600; }
.lp-pic__note { margin: 14px 0 0; font-size: var(--text-sm); color: var(--ink-faint); }
.lp-none { margin: 0; color: var(--ink-soft); }
.lp-how { margin-top: 14px; }
.lp-how summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.lp-how ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-soft); }

/* Look up a fund: where the fund sits between its category's lowest and highest. */
.lp-ranges { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.lp-range__head {
  display: flex; justify-content: space-between; gap: 8px; margin: 0 0 6px;
  font-size: var(--text-sm); color: var(--ink-soft);
}
.lp-range__head strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-range__bar { display: block; width: 100%; height: 14px; overflow: visible; }
.lp-range__track { fill: var(--surface-3); }
.lp-range__fill { fill: color-mix(in srgb, var(--accent) 45%, var(--surface)); }
/* A zero-length line with round caps: a dot that stays round on a stretched bar. */
.lp-range__marker { stroke: var(--accent); stroke-width: 14px; stroke-linecap: round; }
.lp-range__ends {
  display: flex; justify-content: space-between; gap: 8px; margin: 4px 0 0;
  font-size: var(--text-xs); color: var(--ink-faint);
}

/* See your portfolio: two funds and what they hold in common. */
.lp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* Inside the picture's panel a hairline divides the two funds; neither is a box
   of its own (Impeccable critique, 2026-11-01). */
.lp-pair__card { min-width: 0; }
.lp-pair__card + .lp-pair__card { padding-left: 14px; border-left: 1px solid var(--line); }
.lp-pair__card h3 { margin: 0; font-size: var(--text-md); }
.lp-pair__card h3 a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.lp-pair__cat { margin: 2px 0 10px; font-size: var(--text-xs); color: var(--ink-faint); }
.lp-pair__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp-pair__row {
  position: relative; isolation: isolate;
  display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px;
  border-radius: 6px; font-size: var(--text-sm);
}
.lp-pair__row--shared { font-weight: 600; color: var(--accent); }
.lp-pair__row--shared::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--accent-soft);
}
.lp-pair__total { margin: 14px 0 0; font-weight: 600; }

/* Your data stays yours: public data comes in; nothing goes back. */
.lp-flow { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 12px; align-items: center; }
.lp-flow__box { font-size: var(--text-sm); color: var(--ink-soft); }
.lp-flow__box strong { display: block; color: var(--ink); }
.lp-flow__arrows { display: block; width: 120px; height: 80px; }
.lp-flow__arrows path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lp-flow__out { stroke-dasharray: 1; stroke-dashoffset: 0; }
.lp-flow__out, .lp-flow__head--out { stroke: var(--accent); }
.lp-flow__labels {
  grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; margin: 0;
  font-size: var(--text-xs); color: var(--ink-faint);
}

/* About the data: the three sources. */
.lp-sources { list-style: none; display: grid; gap: 12px; }
.lp-source {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); font-size: var(--text-sm); color: var(--ink-soft);
}
.lp-source strong { display: block; font-size: var(--text-base); color: var(--ink); }

/* Narrow: one column; the hero's words, then its doors, then the example, so the
   first screen holds the headline, the privacy line and all three ways in. */
@media (max-width: 899px) {
  .lp-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "doors" "fund"; gap: 24px; }
  .lp-hero__grid--alone { grid-template-areas: "text" "doors"; }
  .lp-doors { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lp-section { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-section--flip .lp-pic { order: 0; }
}
@media (max-width: 720px) {
  .lp-hero { padding: 28px 16px 28px; }
  .lp-door { padding: 12px 14px; }
  .lp-section { margin-top: 64px; }
  .lp-pic { padding: 16px; }
  .lp-door a, .lp-links a, .lp-pair__card h3 a { display: inline-flex; align-items: center; min-height: 40px; }
  .leaders-fold > summary { display: flex; align-items: center; min-height: 40px; }
  /* One above another, the search box at full width; the portfolio door's longer
     line left out, so the doors stay near the first screen (375x812). */
  .lp-doors { grid-template-columns: minmax(0, 1fr); }
  .lp-door:first-child .lp-door__more { display: none; }
  .lp-hero__lede { font-size: var(--text-base); }
  .lp-pair { grid-template-columns: minmax(0, 1fr); }
  .lp-flow { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); gap: 8px; }
  .lp-flow__arrows { width: 72px; height: 48px; }
}

/* The landing page's motion (V1-89). Only marks move: bars grow, the fill runs to the
   fund, lines draw, two cards slide together, the sources settle. Every word is in
   place from the first frame. All of it stops with the site's motion setting, or the
   device's reduced-motion preference until the reader chooses (V1-83, below). The
   scroll-linked pictures exist only where the browser has scroll timelines, and each
   finishes by the time its section has fully entered -- so a section reached by a link
   (/#about, #privacy) is already complete. Elsewhere every mark simply sits finished. */
@keyframes lp-grow { from { transform: scaleX(0); } }
@keyframes lp-drop { from { transform: scaleY(0); } }
@keyframes lp-draw { from { stroke-dashoffset: 1; } }
@keyframes lp-fade { from { opacity: 0; } }
@keyframes lp-in-left { from { transform: translateX(-24px); } }
@keyframes lp-in-right { from { transform: translateX(24px); } }
@keyframes lp-rise { from { transform: translateY(12px); } }

.lp-mix__part, .lp-row__bar, .lp-range__fill { transform-box: fill-box; transform-origin: left center; }
/* The hero's example opens once, on load. */
.lp-mix__part { animation: lp-grow 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.lp-row__bar { animation: lp-grow 600ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both; }
.lp-row:nth-child(2) .lp-row__bar { animation-delay: 380ms; }
.lp-row:nth-child(3) .lp-row__bar { animation-delay: 460ms; }
.lp-row:nth-child(4) .lp-row__bar { animation-delay: 540ms; }
.lp-row:nth-child(5) .lp-row__bar { animation-delay: 620ms; }

@supports (animation-timeline: view()) {
  .lp-section { view-timeline: --lp-section block; }
  /* The peer-range bar and its marker are figures, so they are not animated: where
     a scroll timeline does not run they stayed invisible (UI/UX critique G-15). */
  #categories .fundmap__families::before, #categories .fundmap__family::before {
    transform-origin: top;
    animation: lp-drop linear both;
    animation-timeline: --lp-section; animation-range: entry 10% entry 50%;
  }
  #categories .fundmap__families::after {
    transform-origin: center;
    animation: lp-grow linear both;
    animation-timeline: --lp-section; animation-range: entry 20% entry 60%;
  }
  #categories .fundmap__cats > li::before {
    transform-origin: left;
    animation: lp-grow linear both;
    animation-timeline: --lp-section; animation-range: entry 40% entry 100%;
  }
  .lp-pair__card:first-child {
    animation: lp-in-left linear both;
    animation-timeline: --lp-section; animation-range: entry 10% entry 70%;
  }
  .lp-pair__card:last-child {
    animation: lp-in-right linear both;
    animation-timeline: --lp-section; animation-range: entry 10% entry 70%;
  }
  .lp-pair__row--shared::before {
    animation: lp-fade linear both;
    animation-timeline: --lp-section; animation-range: entry 60% entry 100%;
  }
  .lp-flow__out {
    animation: lp-draw linear both;
    animation-timeline: --lp-section; animation-range: entry 10% entry 60%;
  }
  .lp-source {
    animation: lp-rise linear both;
    animation-timeline: --lp-section; animation-range: entry 10% entry 60%;
  }
  .lp-source:nth-child(2) { animation-range: entry 20% entry 80%; }
  .lp-source:nth-child(3) { animation-range: entry 30% entry 100%; }
}

.home-section { margin-top: 48px; }
.home-section .section-head { margin-bottom: 18px; }
.home-section .section-head h2 { font-size: var(--text-h3); font-weight: 600; }
.home-section .section-head p { max-width: 47ch; font-size: var(--text-md); }
.recent.card { max-width: 880px; margin: 22px auto 0; }

/* Category cards: five highest three-year returns each. */
.leaders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.leader {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 10px; min-width: 0;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.leader:hover { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.leader__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.leader__head h2 { margin: 0; font-size: var(--text-lead); font-weight: 600; color: var(--accent); }
.leader__all {
  display: inline-flex; align-items: center; gap: 4px; min-height: 24px;
  font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.leader__all .icon { width: 14px; height: 14px; }
.leader__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.leader__table th {
  padding: 6px 4px; border-bottom: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint); text-align: left;
}
.leader__table td { padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.leader__table tr:last-child td { border-bottom: 0; }
.leader__table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.leader__table .fund-name { color: var(--ink); text-decoration: none; font-weight: 500; }
.leader__table .fund-name:hover { color: var(--accent); text-decoration: underline; }
.leader__key { font-weight: 600; }

/* /funds/ */
.page-head { display: block; margin: 8px 0 22px; }
/* Each category's highest three-year returns, folded above the table (V1-89). */
.leaders-fold { margin: 0 0 22px; }
.leaders-fold > summary {
  cursor: pointer; width: fit-content; font-weight: 600; color: var(--accent);
}
.leaders-fold[open] > summary { margin-bottom: 12px; }
.leaders-fold__note { max-width: 47ch; color: var(--ink-soft); font-size: var(--text-sm); }
.page-head h1 { margin: 6px 0 6px; font-size: var(--text-h2); font-weight: 600; }
.page-head__lede { max-width: 47ch; }
.table-note { margin: 10px 2px 0; font-size: var(--text-sm); color: var(--ink-faint); }

/* --- the fund page, in Fundoo's rhythm ------------------------------------------------- */

.fund-page .view { box-shadow: var(--shadow); }

.fundcard__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px 32px;
  flex-wrap: wrap;
}
.fundcard__id { min-width: 0; flex: 1 1 420px; }
.fundcard__name { padding-right: 0; font-weight: 600; color: var(--ink); }
/* The page's first sentence, under the name: how the fund has done, before any
   figure (Impeccable critique, 2026-11-02). */
.fundcard__summary {
  margin: 14px 0 18px; max-width: 43ch; font-family: var(--font-prose);
  font-size: var(--text-lead); line-height: var(--lh-body); color: var(--ink);
}
.facts--grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.facts--grid div { padding: 12px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts--grid dt { font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; }
.facts--grid dd { margin-top: 4px; font-weight: 500; }
/* Said, muted: no source this site loads carries it (UI/UX critique F-13). */
.facts--grid dd.facts__absent { font-weight: 400; color: var(--ink-soft); }

/* Returns compared to peers: lowest to highest, and this fund's mark. */
.ranges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 22px; margin: 6px 0 18px; }
.range { padding: 12px 2px 8px; border-top: 1px solid var(--line); }
.range__head { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 10px; }
.range__period { font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint); }
.range__value { font-size: var(--text-h3); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.range__rank { font-size: var(--text-sm); color: var(--ink-soft); }
.range__bar { display: block; width: 100%; height: 14px; }
.range__track { fill: var(--surface-3); }
.range__fill { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.range__mark { fill: var(--accent); }
.range__ends {
  display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0;
  font-size: var(--text-xs); color: var(--ink-faint); font-variant-numeric: tabular-nums;
}

/* 1Y / 3Y / 5Y / All above a time chart (charts.js). */
.zoom { display: flex; gap: 4px; margin: 0 0 6px; justify-content: flex-end; }
/* One button's height (its text, padding and border), reserved before it exists. */
.zoom[data-zoom-slot] { min-height: calc(0.75rem * 1.55 + 10px); }
.zoom button {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft); font: inherit; font-size: var(--text-xs); cursor: pointer;
}
.zoom button:hover { color: var(--accent); border-color: var(--accent); }
/* The scale is not a period (F-06): set apart from them. */
.zoom .zoom__scale { margin-left: 12px; }
.zoom__label { align-self: center; margin-right: 6px; font-size: var(--text-xs); color: var(--ink-soft); }
.zoom button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

@media (max-width: 1099px) {
  .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topnav__link[href$="#about"] { display: none; }
}
@media (max-width: 720px) {
  .leaders, .ranges { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .facts--grid { grid-template-columns: minmax(0, 1fr); }
  .leader__table th:nth-child(4), .leader__table td:nth-child(4) { display: none; }
}

/* The fund map (V1-81): mutual funds -> families -> categories, top down, with
   connector lines; a category opens in place (<details>). */
.fundmap { display: flex; flex-direction: column; align-items: center; }
.fundmap__root {
  margin: 0; padding: 10px 22px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.fundmap__root span { font-weight: 400; opacity: 0.85; margin-left: 8px; }
/* One row of families, sharing the width whatever their number: a grid of 220px
   columns wrapped the fifth under the tallest list, joined to nothing (V1-92). */
.fundmap__families {
  position: relative; width: 100%; list-style: none; margin: 28px 0 0; padding: 0;
  display: flex; align-items: flex-start; gap: 16px;
}
/* The trunk from the root, and the bar every family hangs from. */
.fundmap__families::before {
  content: ""; position: absolute; top: -28px; left: 50%; height: 14px;
  border-left: 2px solid var(--line-strong);
}
.fundmap__families::after {
  content: ""; position: absolute; top: -14px; left: 10%; right: 10%;
  border-top: 2px solid var(--line-strong);
}
.fundmap__family { position: relative; flex: 1 1 0; min-width: 0; }
.fundmap__family::before {
  content: ""; position: absolute; top: -14px; left: 50%; height: 14px;
  border-left: 2px solid var(--line-strong);
}
.fundmap__node {
  margin: 0; padding: 12px 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--accent); border-radius: 12px;
}
.fundmap__node strong { display: block; color: var(--accent); }
.fundmap__node span { font-size: var(--text-xs); color: var(--ink-faint); }
.fundmap__cats {
  list-style: none; margin: 10px 0 0 18px; padding: 0 0 0 14px;
  border-left: 2px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
}
.fundmap__cats > li { position: relative; }
.fundmap__cats > li::before {
  content: ""; position: absolute; left: -14px; top: 17px; width: 12px;
  border-top: 2px solid var(--line);
}
.fundmap__cat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 10px; font-size: var(--text-sm);
}
.fundmap__cat summary { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
.fundmap__cat summary span { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fundmap__cat[open] { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.fundmap__cat p { margin: 8px 0 6px; color: var(--ink-soft); line-height: var(--lh-body); }
.fundmap__cat a { font-weight: 600; text-decoration: none; }
/* A row is a target at least 24px tall, 40px on a phone (UI/UX critique H-03). */
.fundmap__cat summary, .fundmap__mixed > summary { min-height: 24px; align-items: center; }
.fundmap__cat a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 720px) {
  .fundmap__cat summary, .fundmap__mixed > summary, .fundmap__cat a { min-height: 40px; }
}
/* The headings that mix funds doing different jobs: a footnote under the family's
   categories, folded, not a category of its own (Impeccable critique, 2026-11-01). */
.fundmap__mixed > summary {
  cursor: pointer; padding: 4px 10px; font-size: var(--text-xs); color: var(--ink-soft);
  text-wrap: pretty;
}
.fundmap__mixed > p { margin: 4px 10px 8px; font-size: var(--text-xs); color: var(--ink-soft); }
.fundmap__mixed .fundmap__cats { margin-left: 4px; }
/* Below 1100px five families would get under 180px each and clip their names: they
   stack, full width, and the bar they hung from has nothing to join. */
@media (max-width: 1099px) {
  .fundmap__families { flex-direction: column; align-items: stretch; }
  .fundmap__families::after { display: none; }
}
.leader__table th button { font-size: var(--text-xs); }

/* Smooth scrolling is the browser's own, and only while motion is on (Lenis did it in
   18.7 KB until the ponytail audit, 2026-11-01). A panel or list that scrolls keeps
   the wheel to itself rather than handing it to the page at its end. */
:root[data-motion="on"] { scroll-behavior: smooth; }
.settings, .search__suggest { overscroll-behavior: contain; }

/* Motion (V1-83): one attribute, set by settings.js from the reader's choice or,
   until they choose, the device's reduced-motion setting. Off stops everything at
   once, without a reload. The media query below is only for a page without
   scripts, where nothing sets the attribute. */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  transition: none !important; animation: none !important; scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) *, :root:not([data-motion]) *::before,
  :root:not([data-motion]) *::after { animation: none !important; transition: none !important; }
}
/* While motion is on: colours fade when the theme or accent changes, the panel
   fades in, and a chart fades in as it finishes drawing. */
body, .topbar, .card, .view, .settings {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.settings[open] { animation: settings-in 0.2s ease-out; }
/* A fade, not a slide: pinned to the right edge, a slide starts past the window
   (UI/UX critique G-12). */
@keyframes settings-in { from { opacity: 0; } }
.echart__canvas.is-drawn { animation: chart-in 0.15s ease-out; }
@keyframes chart-in { from { opacity: 0; } }

/* Your portfolio (V1-82) */
.pf__toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.pf__status, .cmp__status { min-height: 1.4em; margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
/* Empty, out of the flow but still announced when filled, as `.pf__error` is:
   it left a blank band under Compare's search box (design review). */
.pf__status:empty, .cmp__status:empty { position: absolute; }
.pf__note, .pf__hint, .pf__estimate, .cmp__note { color: var(--ink-soft); font-size: var(--text-sm); max-width: 48ch; }
.pf__entry, .cmp__entry { display: grid; gap: 10px; margin-bottom: 28px; }
.pf__label, .cmp__label { font-weight: 650; }
.pf__holding { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 12px; }
.pf__holding-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.pf__holding-head h3 { margin: 0; font-size: var(--text-base); }
.pf__row { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.pf__field { display: grid; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }

/* Entry fields (V1-93), after Apple's text field: the label above, the field
   sized to what goes in it, a navy edge and soft ring while it is in use, and
   the loss colour on its edge beside a row's error. The design bucket has no
   field of its own; its fuse-button is the Undo on "Remove fund". */
.cmp__pick, .pf__pick, .pf__field input {
  box-sizing: border-box; height: 44px; padding: 0 14px;
  font: inherit; font-size: var(--text-base); font-weight: 400; color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: var(--surface); border: 1px solid var(--field-line); border-radius: 12px;
  transition: border-color 0.15s ease, outline-color 0.15s ease;
}
.cmp__pick:hover, .pf__pick:hover, .pf__field input:hover { border-color: var(--ink-faint); }
.cmp__pick:focus-visible, .pf__pick:focus-visible, .pf__field input:focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 30%, transparent); outline-offset: 0;
}
.pf__field input[aria-invalid="true"] {
  border-color: var(--loss); box-shadow: 0 0 0 3px var(--loss-soft);
}
.pf__field input { width: 10.5em; }
.pf__field input[data-field="day"] { width: 5em; }
.pf__field input[type="month"], .pf__field input[type="date"] { width: 11.5em; }
.pf__field input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
/* ₹ inside the field, before the figure; the label names the field. */
.pf__affix { position: relative; display: block; }
.pf__prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-base); font-weight: 400; color: var(--ink-faint); pointer-events: none;
}
.pf__affix input { padding-left: 30px; }
/* The fund pickers read as search fields, like the top bar's. */
.field-search { position: relative; width: min(100%, 560px); }
.field-search__icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-faint); pointer-events: none;
}
.field-search input { width: 100%; padding-left: 44px; border-radius: 999px; }
.pf__error { flex-basis: 100%; margin: 0; color: var(--loss); font-size: var(--text-sm); }
.pf__error:empty { position: absolute; }
.pf__add { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pf__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pf__tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.pf__tile dt { color: var(--ink-faint); font-size: var(--text-sm); }
.pf__tile dd { margin: 2px 0 0; font-size: var(--text-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.pf__alt { display: grid; gap: 8px; margin-bottom: 20px; }
/* One rhythm with /sip/'s answer (design critique, 2026-10-11): the heading, the
   sentence and its strip close together; a placeholder until the card is worked out. */
.pf__alt > h3 { margin: 0 0 4px; }
.pf__alt > h4 { margin: 14px 0 0; }
.pf__against-lead { margin: 0; max-width: 48ch; font-size: var(--text-lead); line-height: 1.55; color: var(--ink); }
.pf__waiting { height: 3.2em; max-width: 48ch; border-radius: 8px; background: var(--surface-2); }
.pf__another { justify-self: start; }
.pf__alts-intro { flex: 1 1 32rem; max-width: 41ch; display: grid; gap: 8px; }
.pf__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* The answer first (UI/UX critique P-01, P-02, P-09): the reference sentence, the
   return's period on a line of its own, and the form folded away above. */
.pf__verdict { margin: 0 0 8px; max-width: 48ch; font-size: var(--text-lead); line-height: 1.5; color: var(--ink); }
.pf__refs { margin: 0 0 16px; padding-left: 1.2em; max-width: 48ch; font-size: var(--text-sm); color: var(--ink-soft); }
.pf__refs li + li { margin-top: 2px; }
.pf__per { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }
.pf__edit { margin-bottom: 28px; }
.pf__edit > summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px;
  font-weight: 650; cursor: pointer; list-style: none;
}
.pf__edit > summary::-webkit-details-marker { display: none; }
.pf__edit-title { margin: 0; font-size: var(--text-base); font-weight: 650; }
.pf__holding-head h3 a { display: inline-flex; align-items: center; min-height: 24px; }
.measure-notes dt a { display: inline-flex; align-items: center; min-height: 24px; }
.pf__edit > summary::before {
  content: "▸"; display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: var(--text-sm);
}
.pf__edit[open] > summary::before { content: "▾"; }
/* Each kind of entry under its name (P-05); an amount's words beside its label (P-03). */
.pf__group { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.pf__group > legend {
  margin-bottom: 4px; padding: 0; font-size: var(--text-xs); font-weight: 650;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-faint);
}
.pf__words { margin-left: 0.5em; font-weight: 400; color: var(--ink-soft); }
.pf__check {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer;
}
.pf__check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
/* Clear, behind More (P-10): the menu says what it removes before the red button. */
.pf__more { position: relative; }
.pf__more > summary { list-style: none; cursor: pointer; }
.pf__more > summary::-webkit-details-marker { display: none; }
.pf__more-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: min(320px, 85vw);
  display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line-strong);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.pf__more-menu p { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.button--danger { background: transparent; color: var(--loss); box-shadow: inset 0 0 0 1px var(--loss); }
.button--danger:hover { background: var(--loss-soft); color: var(--loss); }
/* What is not a company -- cash, holdings not matched to one -- in grey (P-06). */
.bar--neutral rect.bar__fill { fill: var(--synthetic); }
.button--quiet { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1px var(--line-strong); }
/* A secondary action (V1-93): tinted, so a card's one solid button stays its own. */
.button--tinted { padding: 10px 16px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.button--tinted:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
/* An icon alone; its name is in aria-label and title (portfolio.js iconButton). */
.button--icon {
  width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 999px;
  background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line-strong);
}
.button--icon:hover { background: var(--surface-2); color: var(--ink); }
/* Remove fund's Undo: a line burns down its edge while Undo is on offer
   (FUSE_MS in portfolio.js). With motion off it stays whole; the card's own
   line counts the seconds either way. */
.fuse { position: relative; overflow: hidden; border-radius: 999px; }
.fuse__line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform-origin: left;
  animation: fuse-burn 4s linear forwards;
}
@keyframes fuse-burn { to { transform: scaleX(0); } }
.pf__holding--leaving h3, .pf__holding--leaving > :not(.pf__holding-head, .pf__leaving) { opacity: 0.5; }
.pf__leaving { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }

/* Compare (V1-85). The high/low tags are plain text in the ink's own colour:
   which end of a measure is wanted depends on the reader, so none is toned. */
.cmp__suggest { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cmp__chip { cursor: pointer; color: var(--ink); white-space: normal; text-align: left; min-height: 40px; }
.cmp__chip:hover { border-color: var(--line-strong); }
.cmp__why { color: var(--ink-faint); }
/* An overlap's figure on a tint as strong as it is large (UI/UX critique C-05,
   kit.js `heat`); the same fund against itself in grey. */
.heat { display: inline-block; min-width: 4.5em; padding: 2px 8px; border-radius: 6px; text-align: right; }
.heat--self { background: var(--surface-2); color: var(--ink-faint); text-align: center; }
/* Compare with nothing chosen: one panel, comparisons to start from (C-02). */
.cmp__start { display: grid; gap: 8px; margin-bottom: 28px; }
.cmp__start-title { margin: 0; font-size: var(--text-lead); }
.cmp__starters { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cmp__starters li { display: grid; gap: 2px; font-size: var(--text-sm); }
.cmp__starters a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 650; }
.cmp__lead { font-size: var(--text-base); max-width: 48ch; }
.cmp__table thead th {
  text-transform: none; letter-spacing: 0; white-space: normal; vertical-align: bottom;
  font-size: var(--text-sm); color: var(--ink); min-width: 11em;
}
.cmp__table thead th:first-child { min-width: 0; }
/* A fund's heading on the same right edge as its values (design review). */
.cmp__table thead th + th { text-align: right; }
.cmp__table thead th + th .cmp__fund { justify-content: flex-end; }
.cmp__table tbody th { font-weight: 500; color: var(--ink-soft); white-space: nowrap; }
.cmp__fund { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.cmp__remove {
  flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: var(--radius-sm); color: var(--ink-soft); cursor: pointer; font-size: var(--text-lead);
}
.cmp__remove:hover { color: var(--ink); background: var(--surface); }
.cmp__remove::after { content: none; }  /* not a sort button (th button::after) */
.cmp-tag {
  display: block; margin-top: 2px; font-size: var(--text-xs); letter-spacing: var(--track-label);
  color: var(--ink-faint);
}
.fundcard__compare { margin-top: 10px; }
/* The chosen funds (C-03): a chip each, in its line's colour, with its remove. */
.cmp__chosen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cmp__picked {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 2px 2px 2px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: var(--text-sm);
}
.cmp__picked a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp__swatch { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.cmp__swatch--1 { background: var(--cat-1); }
.cmp__swatch--2 { background: var(--cat-2); }
.cmp__swatch--3 { background: var(--cat-3); }
.cmp__swatch--4 { background: var(--cat-4); }
.cmp__swatch--5 { background: var(--cat-5); }

/* What would a SIP have become? (SPEC_SIP_WHAT_IF, Part A). The answer leads, in
   large type; the inputs reuse Your portfolio's fields and the settings' chips. */
.sip__entry { display: grid; gap: 14px; margin-bottom: 20px; }
.sip__row { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.sip__choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sip__choice > legend { float: left; margin-right: 6px; padding: 0; font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }
.sip__choice .settings__chip { min-height: 36px; }
.sip__kind { display: grid; gap: 4px; }
.sip__kind select, .sip__more select { min-height: 40px; max-width: 100%; padding: 0 12px; border: 1px solid var(--field-line);
  border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.sip__about { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.sip__more > summary { cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; font-weight: 600; }
.sip__more-body { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 10px; }
.sip__add { display: grid; gap: 8px; flex: 1 1 280px; min-width: 0; }
.sip__status, .sip__progress { min-height: 1.4em; margin: 0 0 6px; font-size: var(--text-sm); color: var(--ink-soft); }
.sip__answer { margin: 8px 0 12px; transition: opacity 0.2s; }
.sip__answer--busy { opacity: 0.55; }
.sip__lead { margin: 0 0 12px; max-width: 48ch; font-size: var(--text-lead); line-height: 1.55; color: var(--ink); }
.sip__index, .sip__along { max-width: 48ch; margin: 12px 0; }
.sip__tiles { margin: 14px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The range strip under the answer (design critique, 2026-10-11): the same mark as each
   overview row and each Portfolio card, so one reading serves all three. */
.sip__strip { max-width: 48ch; margin: 4px 0 12px; }
.sip__strip .sip__key { margin: 6px 0 0; }
.sip__behind { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); font-size: var(--text-sm); color: var(--ink-soft); }
.sip__unranged { margin: 6px 0 0; max-width: 48ch; font-size: var(--text-sm); color: var(--ink-soft); }
.sip__lines { margin: 8px 0; padding-left: 1.2em; font-size: var(--text-sm); }
.sip__note { max-width: 48ch; font-size: var(--text-sm); color: var(--ink-soft); }
.sip__notes-list { display: grid; gap: 6px; max-width: 48ch; margin: 0; padding-left: 1.2em; font-size: var(--text-sm); color: var(--ink-soft); }
.sip__out { display: grid; gap: 8px; margin: 10px 0 0; padding-left: 1.2em; font-size: var(--text-sm); }
/* The same money in other kinds of fund (§5.1): every bar on one ₹ axis. */
.sip__family { margin: 18px 0 0; }
.sip__family > h3 { margin: 0 0 8px; font-size: var(--text-md); }
.sip__kinds { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.sip__krow { padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sip__krow--current { border-color: var(--accent); }
.sip__krow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.sip__krow-name { min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--accent); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sip__krow-count, .sip__krow-about { font-size: var(--text-sm); color: var(--ink-soft); }
.sip__krow-about { margin: 0 0 8px; }
.sip__krow-figs { margin: 6px 0 0; font-size: var(--text-sm); }
.sip__bar { position: relative; height: 16px; background: linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat; }
.sip__bar > span { position: absolute; }
/* The fill alone was 1.9:1 on the card; its outline is the accent itself, 9.5:1. */
.sip__bar-range, .sip__key-range { top: 4px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 35%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--accent); }
.sip__bar-yours, .sip__key-yours { top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--cat-3); box-shadow: 0 0 0 2px var(--surface); }
.sip__bar-mid, .sip__key-mid { top: 0; width: 3px; height: 16px; margin-left: -1px; background: var(--accent); }
.sip__bar-index, .sip__key-index { top: 3px; width: 10px; height: 10px; margin-left: -5px; background: var(--ink); transform: rotate(45deg); }
.sip__bar-putin, .sip__key-putin { top: 0; height: 16px; margin-left: -1px; border-left: 2px dashed var(--ink-soft); }
.sip__key span { display: inline-block; position: relative; margin: 0 6px 0 0; vertical-align: middle; }
.sip__key .sip__key-item { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 4px 0; white-space: nowrap; }
.sip__key .sip__key-item > span { margin: 0; }
.sip__key .sip__key-range { width: 18px; top: 0; }
.sip__key .sip__key-index, .sip__key .sip__key-mid, .sip__key .sip__key-putin, .sip__key .sip__key-yours { top: 0; margin-left: 2px; }
/* The range grows out from the middle once, as it first appears -- the first answer,
   the overview, a Portfolio card -- and its marks follow. Recomputing after an input
   does not move (motion.md: no motion on frequent interactions); the motion setting
   or a reduced-motion preference stops it all (above). Every mark is in place in the
   final frame and without the animation. */
.sip__bar--fresh .sip__bar-range { animation: lp-grow 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sip__bar--fresh > span:not(.sip__bar-range) { animation: lp-fade 240ms ease-out 300ms both; }
.sip__krow:nth-child(2) .sip__bar--fresh .sip__bar-range { animation-delay: 60ms; }
.sip__krow:nth-child(3) .sip__bar--fresh .sip__bar-range { animation-delay: 120ms; }
.sip__krow:nth-child(2) .sip__bar--fresh > span:not(.sip__bar-range) { animation-delay: 360ms; }
.sip__krow:nth-child(3) .sip__bar--fresh > span:not(.sip__bar-range) { animation-delay: 420ms; }
.sip__axis { display: flex; justify-content: space-between; margin: 10px 0 0; font-size: var(--text-xs); color: var(--ink-faint); }
.echart--band .echart__canvas { height: 360px; }
/* A way into /sip/ from a panel (SPEC_SIP_WHAT_IF §4.8), and from the SIP guide. */
.panel-link, .learn__try, .learn__next { margin: 12px 0 0; font-size: var(--text-sm); }
.panel-link a, .learn__try a, .learn__next a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; }
.echart--dots .echart__canvas { height: 260px; }
@media (max-width: 720px) {
  .sip__choice .settings__chip, .sip__krow-name { min-height: 44px; }
  .sip__kind select, .sip__more select { min-height: 44px; width: 100%; }
  /* Three tiles across, not two and an orphan (design critique). */
  .sip__tiles { gap: 8px; }
  .sip__tiles .pf__tile { padding: 10px; }
  .sip__tiles dd { font-size: var(--text-lead); }
  .echart--band .echart__canvas { height: 260px; }
}
.cmp__picked .cmp__remove { border-radius: 50%; border: 0; background: transparent; }
@media (max-width: 720px) { .cmp__remove { width: 40px; height: 40px; } }

/* On a phone a table's rows are cards (P-08, C-04): the first cell heads the card,
   every other figure sits under its column's name, and nothing scrolls sideways. */
@media (max-width: 720px) {
  .table--stack thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  }
  .table--stack, .table--stack tbody { display: block; }
  .table--stack tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .table--stack tbody tr:last-child { border-bottom: 0; }
  .table--stack tbody :is(td, th) {
    display: block; position: static; padding: 0; border: 0;
    text-align: left; white-space: normal; background: none;
  }
  .table--stack tbody > tr > :first-child { grid-column: 1 / -1; order: -2; font-weight: 650; color: var(--ink); }
  .table--stack td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-size: var(--text-xs); font-weight: 400; color: var(--ink-faint);
  }
  .table--stack tbody > tr > :first-child::before { content: none; }
  .table--stack .bar-cell { justify-content: flex-start; }
  .table--stack .cmp-tag { display: inline; margin-left: 6px; }
  /* Your funds: what it is worth, the gain and the return first (P-08). */
  .pf__funds td:nth-child(4), .pf__funds td:nth-child(5), .pf__funds td:nth-child(6) { order: -1; }
}

/* Settings (V1-83): a slide-over <dialog> at the right edge. The backdrop is barely
   tinted, so the page behind stays readable and each change can be judged live. */
.settings {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(340px, 100vw);
  height: 100dvh; max-height: none; max-width: none; padding: 18px 20px 24px; overflow-y: auto;
  border: 0; border-left: 1px solid var(--line); background: var(--surface);
  color: var(--ink); box-shadow: var(--shadow-lift);
}
.settings::backdrop { background: rgb(0 0 0 / 0.08); }
@media (max-width: 480px) { .settings { width: 100vw; border-left: 0; } }
.settings__head { display: flex; align-items: center; justify-content: space-between; }
.settings__head h2 { margin: 0; font-size: var(--text-lead); font-weight: 700; }
.settings__group { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.settings__group legend {
  margin-bottom: 8px; padding: 0; font-size: var(--text-xs); font-weight: 650;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft);
}
.settings__chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-setting="font"] .settings__chips { flex-direction: column; align-items: stretch; }
.settings__chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer;
}
[data-setting="font"] .settings__chip { justify-content: space-between; border-radius: 10px; }
.settings__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.settings__chip:hover { border-color: var(--line-strong); color: var(--ink); }
.settings__chip:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 600;
}
.settings__chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings__chip:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.settings__sample { font-size: var(--text-base); color: var(--ink); font-weight: 400; }
.settings__sample--terminess { font-family: "Terminess Nerd Font", "Rubik", monospace; }
.settings__sample--rubik { font-family: "Rubik", system-ui, sans-serif; }
.settings__sample--atkinson { font-family: "Atkinson Hyperlegible", "Rubik", system-ui, sans-serif; }
.settings__swatch {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--line-strong); flex: none;
}
.settings__swatch--santorini { background: linear-gradient(135deg, #0077c8 0 34%, #f2c400 34% 66%, #486b1f 66%); }
.settings__swatch--sky { background: linear-gradient(135deg, #0593c6 0 34%, #fcffff 34% 66%, #d63985 66%); }
.settings__swatch--heritage { background: linear-gradient(135deg, #8b1e3f 0 34%, #d4af37 34% 66%, #f5e6d3 66%); }
.settings__swatch--crimson { background: linear-gradient(135deg, #710014 0 34%, #b38f6f 34% 66%, #161616 66%); }
.settings__swatch--midnight { background: linear-gradient(135deg, #0f172a 0 34%, #7c3aed 34% 66%, #22d3ee 66%); }
.settings__swatch--matrix { background: linear-gradient(135deg, #000000 0 34%, #00ff41 34% 66%, #000000 66%); }
.settings__hint, .settings__note { margin: 8px 0 0; font-size: var(--text-xs); color: var(--ink-soft); }
.settings__reset {
  display: block; min-height: 24px;
  margin-top: 22px; padding: 0; border: 0; background: none; font: inherit;
  font-size: var(--text-sm); color: var(--accent); text-decoration: underline; cursor: pointer;
}
.settings__reset + .settings__reset { margin-top: 8px; }

/* The fund page's section navigator (V1-84): pinned under the top bar; on a
   narrow screen the row scrolls sideways and the current chip is kept in view. */
.sections {
  position: sticky; top: var(--bar-h, 63px); z-index: 20;
  display: flex; gap: 4px; margin: 0 0 16px; padding: 6px 0;
  overflow-x: auto; scrollbar-width: thin;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
/* A phone scrolls the row with a finger; a mouse needs the scrollbar to reach
   the chips past the edge, so it is hidden on narrow screens only. */
@media (max-width: 720px) {
  .sections { scrollbar-width: none; }
  .sections::-webkit-scrollbar { display: none; }
}
.sections__chip {
  flex: none; display: inline-flex; align-items: center;
  padding: 6px 12px; border-radius: 999px;
  font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.sections__chip:hover { color: var(--ink); background: var(--surface-2); }
.sections__chip[aria-current="true"] { color: var(--on-accent); background: var(--accent); }
/* On a phone the top bar slides away while the reader scrolls down (app.js), and
   the navigator moves up into its place. */
.topbar { transition: transform 0.2s ease; }
.topbar--away { transform: translateY(-100%); }
body.bar-away .sections { top: 0; }

/* Fund pages on phones (V1-84) */
.measure-notes { margin: 8px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--text-sm); }
.measure-notes dt { font-weight: 600; }
.measure-notes dd { margin: 0; color: var(--ink-soft); }
details.tuck > summary { cursor: pointer; color: var(--accent); font-size: var(--text-sm); margin-top: 8px; }
/* A wide screen shows the meanings in the table's own column, so not twice. */
@media (min-width: 721px) { [data-view-id="fund_performance"] details.tuck { display: none; } }
@media (max-width: 720px) {
  /* Performance: one compact block per measure, its name over the three periods,
     each figure under its own period's name; the meanings move to the list below. */
  /* The period names once, as a header over the three columns, not under every figure. */
  [data-view-id="fund_performance"] thead { display: block; }
  [data-view-id="fund_performance"] thead tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [data-view-id="fund_performance"] thead th { padding: 0 0 4px; border: 0; text-align: left; }
  [data-view-id="fund_performance"] thead th:first-child,
  [data-view-id="fund_performance"] thead th:last-child { display: none; }
  [data-view-id="fund_performance"] tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 6px 0; border-bottom: 1px solid var(--line);
  }
  [data-view-id="fund_performance"] td { padding: 0; border: 0; text-align: left; }
  [data-view-id="fund_performance"] td:first-child { grid-column: 1 / -1; font-weight: 600; margin-bottom: 2px; }
  [data-view-id="fund_performance"] td:last-child { display: none; }
  .measure-notes { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .measure-notes dd { margin-bottom: 6px; }
}
@media (max-width: 720px) {
  /* Width: less padding around the page and inside each panel, so charts get it. */
  main.content { padding-left: 12px; padding-right: 12px; }
  .view__header, .view__chart, .view__footer { padding-left: 12px; padding-right: 12px; }
  .echart--line .echart__canvas, .echart--area .echart__canvas { height: 280px; }
  .echart--scatter .echart__canvas { height: 300px; }
  /* The header card: two compact columns of facts, smaller tiles. */
  .fundcard { gap: 14px; }
  .facts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts--grid div { padding: 8px 10px; }
  .fundcard .kpi__tile { padding: 10px 2px 4px; }
  .fundcard .kpi__spark svg { height: 22px; }
  /* Peers: the range bars closer together. */
  .ranges { gap: 8px; margin-bottom: 12px; }
  .range { padding: 10px 12px 8px; }
  /* Touch: every period button and section chip at least 40px tall. */
  .zoom button, .sections__chip { min-height: 40px; }
}
@media (max-width: 720px) {
  /* Every panel's own furniture, tighter: its question, notes and footer. */
  .view__header { padding-top: 10px; padding-bottom: 4px; gap: 8px; }
  .view__header h2 { font-size: var(--text-lead); }
  .caveats { margin: 0 12px 8px; padding: 6px 10px; }
  .view__footer { padding: 6px 12px; font-size: var(--text-xs); }
  .view__footer dl { gap: 2px 14px; }
  .fundcard .kpi__spark { margin-top: 4px; }
  .fundcard .kpi__spark svg { height: 16px; }
  .range__head { margin-bottom: 6px; }
  .range__value { font-size: var(--text-lead); }
  /* The header card's tiles three to a row, with smaller figures and labels. */
  .fundcard .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fundcard .kpi__tile { padding: 8px 2px 4px; }
  .fundcard .kpi__tile dt { font-size: var(--text-xs); letter-spacing: var(--track-label); }
  .fundcard .kpi__value { font-size: var(--text-lead); overflow-wrap: anywhere; }
  .fundcard__chips { gap: 6px; margin-top: 8px; }
  .fundcard__chips .chip { padding: 2px 8px; font-size: var(--text-xs); }
}
/* A phone: two to a row, so a label like "Return, 1 year" stays on one line. */
@media (max-width: 480px) { .fundcard .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .fundcard .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Learn (V1-87): guides in a reading column, cards by group, the glossary A to Z. */
.learn__note {
  max-width: 45ch; margin: 14px 0 24px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-soft); font-size: var(--text-md);
}
.learn__group h2 { margin: 28px 0 12px; }
.learn__cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
@media (max-width: 900px) { .learn__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .learn__cards { grid-template-columns: minmax(0, 1fr); } }
.learn__card { padding: 0; }
.learn__card a { display: block; height: 100%; padding: 16px 18px; color: inherit; text-decoration: none; }
.learn__card a:hover h3 { color: var(--accent); }
.learn__card h3 { margin: 0 0 6px; font-size: var(--text-base); }
.learn__card p { margin: 0; color: var(--ink-soft); font-size: var(--text-md); }
.learn--guide p, .learn--guide h2, .learn--guide .learn__sources { max-width: 45ch; }
.learn--guide h2 { margin: 28px 0 8px; font-size: var(--text-lead); }
.learn--guide p { line-height: var(--lh-body); }
/* A guide's contents, screenshots, terms and neighbours (UI/UX critique L-03, L-04). */
.learn__toc {
  max-width: 45ch; margin: 20px 0 8px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.learn--guide .learn__toc-title {
  margin: 0 0 6px; font-size: var(--text-xs); font-weight: 650;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-soft);
}
.learn__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.learn__toc a { display: inline-block; min-height: 24px; }
.learn__shot { margin: 18px 0 8px; max-width: 900px; }
.learn__shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.learn__callouts {
  display: grid; gap: 2px; max-width: 45ch; margin: 10px 0 0; padding-left: 1.4em;
  font-size: var(--text-sm); color: var(--ink-soft);
}
.learn__related { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.learn__related a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none;
}
.learn__pager { display: flex; flex-wrap: wrap; gap: 12px; max-width: 900px; margin: 32px 0 8px; }
.learn__step {
  display: grid; gap: 2px; min-width: min(100%, 260px); padding: 12px 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  text-decoration: none;
}
.learn__step--next { margin-left: auto; text-align: right; }
.learn__step-label {
  font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-soft);
}
.learn__sources { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: var(--text-sm); }
.learn__sources li { overflow-wrap: anywhere; color: var(--ink-soft); }
.learn__source { font-weight: 650; color: var(--ink); }
.learn__checked { white-space: nowrap; color: var(--ink-faint); }
.learn__more { margin-top: 28px; }
.learn__az { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 24px; font-size: var(--text-md); }
.learn__terms { margin: 0; display: grid; gap: 12px; }
.learn__term {
  padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); scroll-margin-top: calc(var(--bar-h, 64px) + 16px);
}
.learn__term:target { border-color: var(--accent); }
.learn__term dt { font-weight: 650; font-size: var(--text-base); }
.learn__term dd { margin: 4px 0 0; }
.learn__term dd > p { margin: 4px 0; max-width: 45ch; }
.learn__related { font-size: var(--text-md); color: var(--ink-soft); }

/* A term explained in place (V1-87): a small `?` and the native popover it opens,
   centred in the top layer, so it is never clipped by a table or a sticky bar. */
.term {
  display: inline-grid; place-items: center; width: max(1.25em, 16px); height: max(1.25em, 16px);
  margin-left: 0.35em;
  padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent;
  color: var(--ink-faint); font: inherit; font-size: max(0.75em, var(--text-xs)); font-weight: 600; line-height: 1;
  cursor: pointer; vertical-align: 0.1em; min-height: 0;   /* not a phone's 40px `th button` */
  text-transform: none; letter-spacing: 0;
}
.term:hover { color: var(--accent); border-color: var(--accent); }
th .term::after, .term::after { content: none; }   /* not a sort button (th button::after) */
/* The drawn circle stays small; the target around it does not (WCAG 2.5.8, UI/UX
   critique G-16): 16px + 2 x 4px = 24px, and 40px on a phone. */
.term { position: relative; }
.term::before { content: ""; position: absolute; inset: -4px; }
@media (max-width: 720px) {
  .term::before { inset: -12px; }   /* 16px + 2 x 12px = a 40px tap area */
}
.term-pop {
  width: min(22rem, calc(100vw - 32px)); max-width: min(22rem, calc(100vw - 32px));
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); box-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
  font-size: var(--text-md); line-height: var(--lh-body); text-align: left; text-transform: none;
  letter-spacing: 0; font-weight: 400; white-space: normal;
}
/* Hidden unless open, here and not only in the browser's own stylesheet: a
   browser without popovers would otherwise show every explanation inline. */
.term-pop { display: none; }
.term-pop:popover-open { display: block; }
.term-pop::backdrop { background: rgb(0 0 0 / 0.12); }
/* On hover or keyboard focus (V1-91): beside its label, placed by app.js, nothing
   dimmed behind it. */
.term-pop--hint { position: fixed; margin: 0; inset: auto; }
.term-pop--hint::backdrop { background: transparent; }
.term-pop__title { display: block; font-weight: 650; margin-bottom: 4px; }
.term-pop__text { display: block; }
.term-pop__more { display: block; margin-top: 8px; color: var(--ink-faint); font-size: var(--text-sm); }

/* Running prose in the prose face (V1-88): Atkinson Hyperlegible while the reader's
   font is Terminess; their own choice otherwise. Headings, labels, figures and
   controls keep --font. Since the design review of 2026-10-04 that covers every
   sentence -- a panel's headline and definition, notes, Learn's cards -- and the
   fund names in tables and search, which read slowly in the pixel face. */
.learn--guide p, .learn__term dd p, .lede, .public-note, .term-pop__text,
.placeholder__reason, .pf__note, .cmp__note,
.lp-hero__lede, .lp-text p, .lp-how li, .lp-pic__note, .lp-none,
.headline, .definition, .caveats li, .page-head__lede, .table-note, .measure-notes dd,
.learn__note, .learn__card p, .pf__hint, .pf__estimate, .pf__leaving, .cmp__lead,
.leaders-fold__note, .facts-list__note, .kpi__absent-note, .colophon p,
.fund-name, .search__name, .search-results__name, .cmp__fund a,
.pf__holding-head h3 { font-family: var(--font-prose); }

/* Skip link (V1-88): the keyboard's first stop, out of sight until focused. */
.skip-link {
  position: absolute; left: 8px; top: -80px; z-index: 300;
  padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--on-accent); font-weight: 650; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* The top bar's links (V1-88): inline on wide screens, behind "Menu" below 1180px.
   Five links and a 200-260px search: large text in Rubik needs 1,146px, measured
   (design critique, 2026-11-04; seven links and a wide search had needed 1,380px,
   which hid them on 1,280 and 1,366px laptops).
   One <nav popover>: a closed popover is hidden by the browser, but .topnav's own
   display would win, so a narrow screen hides it explicitly until it is open. */
@media screen and (min-width: 1180px) {
  .topmenu__summary { display: none; }
  .topnav[popover] {
    display: flex; position: static; inset: auto; width: auto; height: auto;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
  }
  /* Beside the links, a box that fits a fund's name rather than half the bar. */
  .topbar--public .search { flex: 0 1 260px; min-width: 200px; }
}
@media (max-width: 1179px) {
  .topmenu__summary {
    display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px;
    border: 1px solid var(--field-line); border-radius: 8px; background: var(--surface);
    color: var(--ink); font: inherit; font-size: var(--text-md); cursor: pointer;
  }
  .topnav[popover] {
    position: fixed; top: calc(var(--bar-h, 56px) + 6px); right: auto; bottom: auto;
    left: 12px;
    margin: 0; flex-direction: column; align-items: stretch; gap: 2px;
    min-width: 220px; padding: 8px; border: 1px solid var(--line);
    border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-lift);
  }
  .topnav[popover]:not(:popover-open) { display: none; }
  .topnav[popover] .topnav__link { display: flex; align-items: center; min-height: 40px; }
  .topbar--public .search { min-width: 0; flex: 1 1 auto; }
}

/* Phones (V1-88): every target at least 40px tall. */
@media (max-width: 720px) {
  th button { min-height: 40px; }
  .leader__all { display: inline-flex; align-items: center; min-height: 40px; }
  .cmp__pick, .pf__pick { min-height: 40px; }
  .topmenu__summary { min-height: 40px; }
  .colophon__columns a { min-height: 40px; }
  .learn__az a { display: inline-flex; align-items: center; min-height: 32px; }
}