/* stocks.bettercall.help — GARP board
 *
 * Design note (why it looks like this):
 * The page is an instrument readout, not a pitch. Every quantity on it — market
 * temperature, macro expensiveness, pillar z, metric z — is the SAME kind of
 * measurement: a signed distance from neutral. So the whole page uses exactly ONE
 * data scale, a diverging blue<->red thermometer with a neutral gray midpoint, and
 * one meaning holds everywhere: blue = cool / favourable, red = hot / adverse.
 * No categorical hues are used at all; the five pillars are told apart by column
 * position and label, which keeps 200 dense rows quiet.
 *
 * Palette provenance: dataviz skill reference palette (blue ramp + a matched red arm).
 * Validated with scripts/validate_palette.js --ordinal per arm and --pairs all across
 * arms, in BOTH modes, against these exact surfaces (#fbfcfd light / #171b21 dark).
 * The two mid steps sit below 3:1 on the light surface, so the relief rule applies:
 * every band is directly labelled and every value is also present as text in a table.
 *
 * The expected-return surface (added with schema 1.1.0) introduces no new hues. It
 * reuses the same two arms — --mark-pos for terms that ADD, --mark-neg for terms that
 * SUBTRACT — which is the diverging job the scale already does, and validates clean:
 *   validate_palette.js "#2a78d6,#c8413e" --mode light --surface "#fbfcfd"  → all PASS
 *   validate_palette.js "#3987e5,#e06b6b" --mode dark  --surface "#171b21"  → all PASS
 * (worst CVD ΔE 23.4 light / 18.7 dark; normal-vision 30.3 / 27.9; both ≥ 3:1.)
 *
 * The company panel (profile / why-it-ranks / investability) adds NO new hue either.
 * Its only mark is a 0–100 percentile meter, and the fill takes the same two arms —
 * --mark-pos where the company reads better than the field, --mark-neg where it reads
 * worse, which is the identical diverging job. Re-validated as a pair against both
 * surfaces before it shipped:
 *   validate_palette.js "#2a78d6,#c8413e" --mode light --surface "#fbfcfd"  → all PASS
 *   validate_palette.js "#3987e5,#e06b6b" --mode dark  --surface "#171b21"  → all PASS
 * Strengths and concerns are two families, so a legend is present, each column is
 * headed in words, and every percentile is printed as text beside its meter — the
 * colour is the third channel, never the first.
 *
 * The one figure that is NOT diverging — measured basket volatility against the
 * if-everything-moved-together counterfactual — uses the emphasis pattern the skill
 * prescribes for a one-number story: the real measurement in --mark-pos, the
 * counterfactual in --deemph gray. A de-emphasis gray is not a categorical slot, so
 * the categorical chroma floor does not apply to it (running the categorical validator
 * on it FAILs chroma BY DESIGN, exactly as it does on a sequential ramp); the check
 * that does apply is the lone-color contrast check the skill points at, via the
 * validator's exported contrast(): #7c8794 measures 3.56:1 on the light surface and
 * 4.73:1 on the dark one, both clear of 3:1 in both modes. The page accent is
 * deliberately NOT used as a chart fill — #7db2f2 sits at OKLCH L 0.752, outside the
 * dark mode band, so chart marks take --mark-pos in both modes instead.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --plane: #eceff3;
  --surface: #fbfcfd;
  --surface-2: #f3f6f9;
  --surface-3: #e8ecf1;
  --ink: #0f1318;
  --ink-2: #48525f;
  --ink-3: #6d7683;
  --rule: #dce1e8;
  --rule-strong: #c3cbd5;
  --accent: #1c5cab;
  --accent-wash: rgba(28, 92, 171, 0.09);

  /* the one data scale: cold -> hot */
  --band-cold: #1c5cab;
  --band-cool: #7db2f2;
  --band-neutral: #d3dae3;
  --band-warm: #eb9086;
  --band-hot: #b8322f;
  --mark-pos: #2a78d6;   /* above neutral / favourable / adds */
  --mark-neg: #c8413e;   /* below neutral / adverse / subtracts */
  --deemph: #7c8794;     /* the counterfactual channel — see the emphasis note above */
  --track: #e3e7ed;

  /* reserved status ink — always shipped with a label, never colour alone */
  --st-good: #0ca30c;
  --st-warn: #fab219;
  --st-serious: #ec835a;
  --st-critical: #d03b3b;
  --st-good-ink: #006300;
  --st-critical-ink: #a52725;
  --st-warn-ink: #7a5200;

  --warn-bg: #12161c;
  --warn-fg: #f4f6f9;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(15, 19, 24, 0.05), 0 8px 24px -18px rgba(15, 19, 24, 0.35);
  --radius: 3px;
  --page: 1440px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane: #0e1116;
    --surface: #171b21;
    --surface-2: #1e232b;
    --surface-3: #262c35;
    --ink: #f2f5f8;
    --ink-2: #a9b3c0;
    --ink-3: #838d9a;
    --rule: #262d36;
    --rule-strong: #39424e;
    --accent: #7db2f2;
    --accent-wash: rgba(125, 178, 242, 0.14);

    --band-cold: #86b6ef;
    --band-cool: #3987e5;
    --band-neutral: #2b323b;
    --band-warm: #d94a4a;
    --band-hot: #ef9b95;
    --mark-pos: #3987e5;
    --mark-neg: #e06b6b;
    --deemph: #7c8794;
    --track: #262d36;

    --st-good-ink: #35c035;
    --st-critical-ink: #f08b89;
    --st-warn-ink: #e9b13c;

    --warn-bg: #dce1e8;
    --warn-fg: #12161c;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -20px rgba(0, 0, 0, 0.9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane: #0e1116;
  --surface: #171b21;
  --surface-2: #1e232b;
  --surface-3: #262c35;
  --ink: #f2f5f8;
  --ink-2: #a9b3c0;
  --ink-3: #838d9a;
  --rule: #262d36;
  --rule-strong: #39424e;
  --accent: #7db2f2;
  --accent-wash: rgba(125, 178, 242, 0.14);

  --band-cold: #86b6ef;
  --band-cool: #3987e5;
  --band-neutral: #2b323b;
  --band-warm: #d94a4a;
  --band-hot: #ef9b95;
  --mark-pos: #3987e5;
  --mark-neg: #e06b6b;
  --deemph: #7c8794;
  --track: #262d36;

  --st-good-ink: #35c035;
  --st-critical-ink: #f08b89;
  --st-warn-ink: #e9b13c;

  --warn-bg: #dce1e8;
  --warn-fg: #12161c;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 28px -20px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--plane);
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 620; text-wrap: balance; letter-spacing: -0.011em; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 14px; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25em; }

a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.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;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 60;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 8px 12px; font-size: 13px; transition: top 120ms ease;
}
.skip-link:focus { top: 8px; }

.eyebrow {
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* `hidden` must win over any component display rule (the basket panel removes itself
   when the payload carries no portfolio). */
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* Table headers are uppercased for rhythm, but uppercasing σ yields Σ — which reads as
   "sum", not "standard deviation". Any header glyph whose case carries meaning wears
   this and opts out. */
.nocase { text-transform: none !important; }
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 20px; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 0.7em; }

/* ---------------------------------------------------------------- disclaimer strip */
/* Inverted in both themes on purpose: the disclaimer must not read as chrome. */
.warnbar {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-bottom: 1px solid var(--rule);
}
.warnbar-inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 9px 20px;
  max-width: var(--page); margin: 0 auto;
}
.warnbar strong {
  font: 620 11px/1.3 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.warnbar span { font-size: 12.5px; opacity: 0.82; }

/* ---------------------------------------------------------------- masthead */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  max-width: var(--page); margin: 0 auto;
}
.brand { display: flex; align-items: baseline; gap: 10px; margin-right: auto; }
.brand-mark {
  font: 620 14px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.brand-mark em { font-style: normal; color: var(--accent); }
.brand-sub { font-size: 12px; color: var(--ink-3); }

.navlinks { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.navlinks a { color: var(--ink-2); text-decoration: none; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

.btn {
  font: 500 12.5px/1 var(--sans);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 7px 11px;
  cursor: pointer;
}
.btn:hover { background: var(--surface-3); color: var(--ink); }
.btn[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--ink); }

/* ---------------------------------------------------------------- notices */
.notices { display: grid; gap: 10px; padding-top: 18px; }
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-left: 4px solid var(--ink-3);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.notice strong { color: var(--ink); display: block; font-size: 13.5px; }
.notice-icon { font: 620 12px/1.5 var(--mono); letter-spacing: 0; flex: none; }
.notice--warn { border-left-color: var(--st-warn); }
.notice--warn .notice-icon { color: var(--st-warn-ink); }
.notice--critical { border-left-color: var(--st-critical); }
.notice--critical .notice-icon { color: var(--st-critical-ink); }
.notice--info { border-left-color: var(--accent); }
.notice--info .notice-icon { color: var(--accent); }

/* ---------------------------------------------------------------- regime panel */
/* Sits in the same tab shell as .basket: the panel is the body of the tablist
   above it, so it loses its top border and its top corners. */
.regime {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.regime-grid {
  display: grid;
  grid-template-columns: minmax(320px, 5fr) minmax(300px, 6fr);
  gap: 0;
}
.regime-temp { padding: 22px 24px 20px; border-right: 1px solid var(--rule); }
.regime-drivers { padding: 22px 24px 20px; }

.temp-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.temp-figure {
  font: 620 64px/0.9 var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
}
.temp-figure sub {
  font: 500 15px/1 var(--mono); vertical-align: baseline; color: var(--ink-3);
  margin-left: 4px;
}
.temp-band {
  font: 620 11px/1 var(--mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 11px;
}
.temp-note { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); max-width: 46ch; }
.temp-note b { color: var(--ink); font-weight: 620; }

/* the gauge: 5 ordered bands, 2px surface gaps, marker with a surface ring */
.gauge { margin-top: 18px; }
.gauge-track {
  position: relative;
  display: flex;
  gap: 2px;
  height: 14px;
}
.gauge-band { border-radius: 1px; }
.gauge-band:first-child { border-radius: 3px 1px 1px 3px; }
.gauge-band:last-child { border-radius: 1px 3px 3px 1px; }
.gauge-marker {
  position: absolute; top: -5px; bottom: -5px; width: 4px;
  transform: translateX(-2px);
  background: var(--ink);
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}
.gauge-scale {
  display: flex; gap: 2px; margin-top: 7px;
}
.gauge-scale span {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gauge-scale span.is-current { color: var(--ink); font-weight: 620; }
.gauge-scale i { display: none; }
.gauge-ends {
  display: flex; justify-content: space-between;
  margin-top: 6px;
  font: 500 10.5px/1 var(--mono); color: var(--ink-3);
  letter-spacing: 0.06em;
}

/* macro driver readouts — diverging bars on a shared [-1, +1] axis */
.driver-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.driver-legend { font: 500 10.5px/1 var(--mono); color: var(--ink-3); letter-spacing: 0.06em; }
.driver-list { display: grid; gap: 14px; margin-top: 16px; }
/* fixed third column so all four zero-rules line up: the bars share one axis and
   only compare honestly if they start and centre at the same x */
.driver {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(90px, 1.35fr) 178px;
  align-items: center;
  gap: 8px 14px;
}
.driver-name { font-size: 13px; color: var(--ink); font-weight: 560; }
.driver-meta { font: 400 11px/1.35 var(--mono); color: var(--ink-3); display: block; white-space: normal; }
.driver-read { font: 500 13px/1.2 var(--mono); color: var(--ink-2); text-align: right; }

.dbar { position: relative; height: 10px; background: var(--track); border-radius: 2px; }
.dbar-zero { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: var(--rule-strong); }
.dbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.dbar-fill.is-pos { background: var(--mark-neg); }  /* expensive = hot */
.dbar-fill.is-neg { background: var(--mark-pos); }  /* cheap = cool */
.dbar-val {
  position: absolute; top: 50%; transform: translateY(-50%);
  font: 500 11px/1 var(--mono); color: var(--ink-2); white-space: nowrap;
}

/* macro-adjusted pillar weights */
.weights { border-top: 1px solid var(--rule); padding: 16px 24px 20px; }
.weights-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.weights-note { font-size: 12.5px; color: var(--ink-3); }
.weights-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px 22px; margin-top: 14px;
}
.wcell { display: grid; gap: 5px; }
.wcell-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wcell-name { font-size: 12.5px; color: var(--ink-2); }
.wcell-val { font: 560 13px/1 var(--mono); color: var(--ink); }
.wcell-track { height: 6px; background: var(--track); border-radius: 2px; overflow: hidden; }
.wcell-fill { height: 100%; background: var(--accent); border-radius: 0 3px 3px 0; }
.wcell-delta { font: 400 11px/1 var(--mono); color: var(--ink-3); }

/* ================================================================ basket panel
 * Sits between the temperature gauge and the board. Everything in it is the same
 * model output as the board, aggregated — so it gets the same visual weight as the
 * regime panel and no more, and it carries its own "not a recommendation" line.
 */
/* ------------------------------------------------------------------ top tabs
   Two panels above the board. Selection is carried by a 2px underline plus a
   weight change plus the text colour — never colour alone, so it survives a
   forced-colours mode and a monochrome print. */
.tabs {
  display: flex;
  gap: 4px;
  margin-top: 22px;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: thin;
}
.tab {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 18px 9px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: inherit;
  text-align: left;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.tab:hover { background: var(--surface-2); color: var(--ink-2); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  background: var(--surface);
}
.tab-label { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.tab[aria-selected="true"] .tab-label { font-weight: 700; }
.tab-sub { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- basket company cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 18px 24px 4px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.card-top { display: flex; align-items: flex-start; gap: 11px; }

/* Generated monogram, not a logo: there is no image source in the data.
   Lightness is 30%, not the 34% this first shipped with, and the difference is the
   whole point: HSL lightness is NOT perceptually uniform, so a yellow and a blue at
   the same L have very different luminance. At 34% the yellow band failed — hue 60
   measured 4.22:1 against white, under the 4.5 AA floor this 11px text needs.
   Swept all 360 hues in the browser: at 30% the worst case is hue 60 at 5.20:1. */
.avatar {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: hsl(var(--av-h) 46% 30%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.avatar-mono {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.card-id { flex: 1 1 auto; min-width: 0; }
.card-sym {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
  font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.card-weight {
  font-size: 11px; font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.card-name {
  font-size: 12.5px; color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card-sector { font-size: 11.5px; color: var(--ink-3); display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; }
/* The themed slot. Identity is carried by weight and a rule, not by colour alone, so it
   survives forced-colours and print. */
.theme-tag {
  font-weight: 650; color: var(--ink-2);
  border-left: 2px solid var(--accent); padding-left: 6px;
}
.theme-real { color: var(--ink-3); }
.card-er { flex: 0 0 auto; text-align: right; }
.card-er-v {
  display: block; font-size: 15px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.card-er-l { display: block; font-size: 10.5px; color: var(--ink-3); }
.card-desc { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.card-desc-none { color: var(--ink-3); font-style: italic; }
.card-facts {
  font-size: 11.5px; color: var(--ink-3);
  padding-top: 7px; border-top: 1px solid var(--rule);
}
/* The three figures that used to be columns in a duplicate table below the cards. Laid out with
   grid + gap rather than per-cell margins so the row cannot drift out of alignment between cards
   of different description length, and tabular figures so the values line up down the column. */
.card-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px;
  padding-top: 8px; border-top: 1px solid var(--rule);
}
.card-metric { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.card-metric-l {
  font-size: 10px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3);
}
.card-metric-v {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  font-variant-numeric: tabular-nums; font-family: var(--mono);
}
.card-news { padding-top: 8px; border-top: 1px solid var(--rule); }
.card-news-h {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 5px;
}
.news-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.news-item { display: flex; flex-direction: column; gap: 1px; }
.news-link {
  font-size: 12px; line-height: 1.4; color: var(--accent);
  text-decoration: none; text-underline-offset: 2px;
}
.news-link:hover { text-decoration: underline; }
.news-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.news-meta {
  font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .cards { grid-template-columns: 1fr; padding: 14px 14px 4px; }
  .tab { padding: 9px 13px 8px; }
}

.basket {
  margin-top: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.basket-head { padding: 22px 24px 0; }
.basket-head h2 { margin-top: 6px; }
.basket-lede {
  margin-top: 8px; font-size: 13.5px; color: var(--ink-2); max-width: 92ch;
}
.basket-lede b { color: var(--ink); font-weight: 620; }
.basket-warn {
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 14px 24px 16px;
  font-size: 12.5px; color: var(--ink-2);
}
.basket-warn strong { color: var(--ink); }

/* stat tiles: four headline numbers in four different units. A four-bar chart of
   four unrelated units would read worse than the numbers themselves. */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: 20px;
}
.kpi { background: var(--surface); padding: 15px 24px 16px; min-width: 0; }
.kpi-label {
  font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-3);
}
/* proportional figures on a standalone stat value — tabular-nums makes it look loose */
.kpi-value {
  font: 620 27px/1.15 var(--sans); letter-spacing: -0.02em;
  color: var(--ink); margin-top: 7px;
}
.kpi-sub { font-size: 11.5px; line-height: 1.4; color: var(--ink-3); margin-top: 5px; }

/* ---- the diversification comparison.
   Two bars, ONE axis (0 → the larger of the two), because they are the same
   measurement — annualised volatility — under two different computations. The
   measured figure is emphasised; the counterfactual recedes to the de-emphasis
   gray. Both values are printed in their own column, so no bar is the only read. */
.divfig { margin: 0; padding: 20px 24px 4px; }
.divfig figcaption { max-width: 88ch; }
.divfig figcaption p {
  margin-top: 7px; font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.divfig figcaption b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }

/* .divrow uses display:contents so every bar is laid out by THIS grid — one shared
   column for the track means the two bars genuinely share an axis rather than each
   getting its own width. */
.divchart {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(120px, 2fr) 96px;
  align-items: center;
  gap: 12px 16px;
  margin-top: 18px;
  max-width: 900px;
}
.divrow { display: contents; }
.divlabel { min-width: 0; }
.divlabel-nm { display: block; font-size: 13px; color: var(--ink); font-weight: 560; }
.divlabel-note { display: block; font: 400 11px/1.35 var(--mono); color: var(--ink-3); }
.divtrack {
  position: relative; height: 16px;
  background: var(--track); border-radius: 2px;
}
.divfill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 0 3px 3px 0;   /* 3px rounded data-end, square at the baseline */
}
.divfill.is-accent { background: var(--mark-pos); }
.divfill.is-deemph { background: var(--deemph); }
/* the bracket spanning the two bar ends — chrome, not a mark, so it is ink not hue */
.divbracket {
  position: absolute; top: 50%; height: 9px;
  transform: translateY(-50%);
  border-left: 1px solid var(--ink-3);
  border-right: 1px solid var(--ink-3);
}
.divbracket::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px solid var(--ink-3);
}
.divrow--gap .divtrack { background: none; height: 16px; }
.divvalue {
  font: 560 14px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); text-align: right;
}
.divvalue--gap { color: var(--ink-2); font-weight: 500; font-size: 13px; }
.divaxis {
  grid-column: 2 / 3;
  display: flex; justify-content: space-between;
  font: 400 10.5px/1 var(--mono); color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 5px; margin-top: -4px;
}
/* a superscript must not stretch the line box it sits in */
sup { font-size: 0.72em; line-height: 0; vertical-align: 0.42em; }

.figure-note {
  font-size: 12px; line-height: 1.55; color: var(--ink-3);
  margin-top: 14px; max-width: 88ch;
}
.figure-note b { color: var(--ink-2); }

/* ---- holdings table */

.wgt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wgt-val { min-width: 42px; text-align: right; }
.wgt-track {
  width: 54px; height: 7px; flex: none;
  background: var(--track); border-radius: 2px; overflow: hidden;
}
.wgt-fill { display: block; height: 100%; background: var(--mark-pos); border-radius: 0 2px 2px 0; }

/* ================================================================ E[r] cells */
.cell-er {
  font: 560 13px/1 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink);
  border-bottom: 1px dotted var(--rule-strong);   /* signals the hover carries more */
  cursor: help;
}
.cell-er.is-null { color: var(--ink-3); font-weight: 400; border-bottom: 0; cursor: default; }

/* ======================================================= expected-return panel */
.retpanel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 15px 16px 16px;
  min-width: 0;
}
.retpanel-head { max-width: 92ch; }
.retpanel-sub { font-size: 12.5px; color: var(--ink-2); margin-top: 5px; }
.retpanel-sub b { color: var(--ink); font-variant-numeric: tabular-nums; }
/* min() rather than a bare 330px: inside a ~320px detail panel a hard track minimum
   would overflow the panel and take the whole page sideways with it */
.retpanel-figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  gap: 18px 22px;
  margin-top: 14px;
  align-items: start;
}
/* the mini-tables carry a bar column; below ~360px of usable width they scroll
   inside the figure block rather than pushing the page sideways */
.figblock { min-width: 0; overflow-x: auto; }
.figblock > h3 { margin-bottom: 8px; }

table.minitable {
  border-collapse: collapse; width: 100%; min-width: 340px;
  font-size: 12px;
}
table.minitable th, table.minitable td {
  padding: 5px 7px; border-bottom: 1px solid var(--rule); text-align: right;
  vertical-align: middle;
}
table.minitable thead th {
  font: 500 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
table.minitable th.al, table.minitable td.al { text-align: left; }
table.minitable tbody th {
  font: 400 12px/1.3 var(--sans); color: var(--ink); font-weight: 500; white-space: nowrap;
}
.numc {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink-2); white-space: nowrap;
}
.numc.strong { color: var(--ink); font-weight: 620; }
.numc.muted { color: var(--ink-3); }

/* ---- one-sigma band: a single series, so no legend — the caption names it.
   The point estimate is a marker with a 2px surface ring, not a second colour. */
.bandcell { width: 42%; min-width: 110px; }
.bandtrack {
  position: relative; display: block; height: 16px;
  background: var(--track); border-radius: 2px;
}
.bandzero {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--rule-strong);
}
.bandspan {
  position: absolute; top: 4px; bottom: 4px;
  background: var(--mark-pos); opacity: 0.42; border-radius: 2px;
}
.bandmark {
  position: absolute; top: -2px; bottom: -2px; width: 3px;
  transform: translateX(-1.5px);
  background: var(--mark-pos); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ---- waterfall: adds / subtracts / running total */
.wfcell { width: 38%; min-width: 100px; }
.wftrack {
  position: relative; display: block; height: 15px;
  background: var(--track); border-radius: 2px;
}
.wfzero {
  position: absolute; top: -3px; bottom: -3px; width: 1px;
  background: var(--rule-strong);
}
.wffill { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.wffill.is-pos { background: var(--mark-pos); }
.wffill.is-neg { background: var(--mark-neg); }
/* a running total is not a third identity — it is a summary bar, so it wears ink */
.wffill.is-total { background: var(--ink-2); }
.wf-nm { display: block; color: var(--ink); }
.wf-note {
  display: block; font: 400 10.5px/1.35 var(--sans); color: var(--ink-3);
  white-space: normal; max-width: 30ch;
}
table.minitable tr.wf-total > th, table.minitable tr.wf-total > td {
  background: var(--surface-2);
  border-top: 1px solid var(--rule-strong);
}

.legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px;
  font: 400 11px/1 var(--mono); color: var(--ink-3);
}
.lk { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }
.sw.is-pos { background: var(--mark-pos); }
.sw.is-neg { background: var(--mark-neg); }
.sw.is-total { background: var(--ink-2); }

/* ---------------------------------------------------------------- controls */
.board-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 30px 0 12px;
}
.board-head p { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

.controls {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.field { display: grid; gap: 5px; }
.field label { font: 500 10.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select {
  font: 400 13px/1.2 var(--sans);
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 7px 9px;
  min-width: 180px;
}
.field input::placeholder { color: var(--ink-3); }
.field-help { font-size: 11.5px; color: var(--ink-3); max-width: 34ch; }
.controls-spacer { flex: 1 1 40px; }
.result-count { font: 400 12.5px/1.4 var(--mono); color: var(--ink-3); padding-bottom: 8px; }
.result-count b { color: var(--ink); font-weight: 620; }

/* ---------------------------------------------------------------- table */
.tablewrap {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: visible;
}
/* Child combinators throughout: the expanded-row detail nests its own tables inside a
   board <td>, and a descendant selector here would silently restyle them. */
table.board { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1180px; font-size: 13px; }
table.board > caption { text-align: left; padding: 10px 12px; font-size: 12.5px; color: var(--ink-3); }

/* `overflow-x: auto` on .tablewrap makes it a scroll container on BOTH axes, so a
   sticky header is positioned against the wrapper, not the viewport. top:0 keeps it
   at the head of the table instead of floating down over the rows. */
table.board > thead > tr > th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3);
  border-bottom: 1px solid var(--rule-strong);
  padding: 0;
  text-align: right;
  white-space: nowrap;
  vertical-align: bottom;
}
table.board > thead > tr > th:first-child,
table.board > thead > tr > th.al { text-align: left; }

.sortbtn {
  display: block; width: 100%;
  font: 500 10.5px/1.2 var(--mono);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: 0; border-radius: 0;
  padding: 9px 10px; cursor: pointer; text-align: inherit;
}
.sortbtn:hover { color: var(--ink); background: var(--accent-wash); }
.sortbtn .arrow { opacity: 0; margin-left: 4px; }
th[aria-sort] .sortbtn { color: var(--ink); }
th[aria-sort] .sortbtn .arrow { opacity: 1; }
th.plain { padding: 9px 10px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }

table.board > tbody > tr.row > td {
  border-bottom: 1px solid var(--rule);
  padding: 7px 10px;
  text-align: right;
  white-space: nowrap;
  color: var(--ink-2);
}
table.board > tbody > tr.row > td.al { text-align: left; }
tr.row:hover > td { background: var(--surface-2); }
tr.row.is-open > td { background: var(--accent-wash); }

.cell-rank { font: 400 12px/1 var(--mono); color: var(--ink-3); }
.cell-sym { font: 620 13px/1 var(--mono); color: var(--ink); letter-spacing: 0.01em; }
.cell-name { color: var(--ink); max-width: 240px; overflow: hidden; text-overflow: ellipsis; }

/* Company cell = name + a one-line "what it does". Both are blocks so max-width and
   text-overflow actually apply (they are inert on an inline box), and the cell keeps
   its nowrap so every row stays exactly two lines tall however long the sentence is. */
.namecell { display: block; max-width: 340px; min-width: 0; }
.namecell .cell-name { display: block; max-width: none; }
.cell-does {
  display: block; margin-top: 1px;
  font-size: 11.5px; line-height: 1.35; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis;
}
.cell-does:empty { display: none; }
.cell-sector { color: var(--ink-3); font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.cell-score { font: 620 13.5px/1 var(--mono); color: var(--ink); }
.cell-num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.expandbtn {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--ink-3); cursor: pointer; font: 400 11px/1 var(--mono);
}
.expandbtn:hover { border-color: var(--rule-strong); color: var(--ink); }
.expandbtn svg { transition: transform 130ms ease; }
.expandbtn[aria-expanded="true"] svg { transform: rotate(90deg); }

/* pillar mini-bar: signed, grows from a centre rule */
.pcell { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.pcell-val { font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.pbar { position: relative; width: 46px; height: 7px; background: var(--track); border-radius: 2px; flex: none; }
.pbar-zero { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--rule-strong); }
.pbar-fill { position: absolute; top: 0; bottom: 0; border-radius: 1px; }
.pbar-fill.is-pos { background: var(--mark-pos); }
.pbar-fill.is-neg { background: var(--mark-neg); }
.pcell.is-null .pcell-val { color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.05em;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--ink-2);
  background: var(--surface-2);
  white-space: nowrap;
}
.chip + .chip { margin-left: 5px; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-3); }
.chip--warn { border-color: var(--st-warn); color: var(--st-warn-ink); }
.chip--warn .chip-dot { background: var(--st-warn); }
.chip--serious { border-color: var(--st-serious); color: var(--st-critical-ink); }
.chip--serious .chip-dot { background: var(--st-serious); }
.chip--critical { border-color: var(--st-critical); color: var(--st-critical-ink); }
.chip--critical .chip-dot { background: var(--st-critical); }
.chip--good { border-color: var(--st-good); color: var(--st-good-ink); }
.chip--good .chip-dot { background: var(--st-good); }

.cell-flags { text-align: left; }

/* ---------------------------------------------------------------- detail panel */
tr.detailrow > td {
  padding: 0 !important;
  background: var(--surface-2) !important;
  border-bottom: 2px solid var(--rule-strong);
  text-align: left;
  white-space: normal;
}
/* The detail lives inside a cell as wide as the (horizontally scrolling) table, so it
   is pinned to the scroll container's left edge and sized to the viewport instead —
   otherwise half the panel sits off-screen behind the table's own scroll. */
.detail {
  position: sticky;
  left: 0;
  width: var(--detail-w, 100%);
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  white-space: normal;
}
/* the cell this grid sits in is ~1200px wide, so every descendant that could take its
   intrinsic size from that cell is pinned back to the panel's own width */
.detail > *, .detail-top, .detail-chips, .detail-cols,
.detail-cols > .panel, .pillarrow, .metricswrap { min-width: 0; }
.detail-top { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }
.detail-title { font: 620 17px/1.2 var(--sans); color: var(--ink); }
.detail-title span { font-family: var(--mono); }
.detail-sub { font-size: 12.5px; color: var(--ink-3); }
.detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 15px 16px;
}
.panel > h3 { margin-bottom: 10px; }
.panel-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; font-size: 12.5px; }
.kv dt { color: var(--ink-3); }
.kv dd {
  margin: 0; color: var(--ink); font-family: var(--mono);
  font-variant-numeric: tabular-nums; text-align: right;
  overflow-wrap: anywhere;   /* XBRL tag names are long unbreakable tokens */
}

.pillarlist { display: grid; gap: 9px; }
.pillarrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center; font-size: 12.5px; }
.pillarrow .nm { color: var(--ink); }
.pillarrow .wt { font: 400 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }
.pillarrow .pcell { flex: none; }

/* min-width so a narrow viewport scrolls this table sideways in its own container
   rather than crushing metric names into three-line stacks */
table.metrics { border-collapse: collapse; width: 100%; min-width: 660px; font-size: 12.5px; }
table.metrics caption {
  caption-side: top; text-align: left; padding: 12px 0 6px;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3);
}
table.metrics th, table.metrics td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: right; }
table.metrics th.srccol, table.metrics td.srccol { padding-left: 22px; }
table.metrics th { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
table.metrics th.al, table.metrics td.al { text-align: left; }
table.metrics td { color: var(--ink-2); font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.metrics td.al { font-family: var(--sans); }
table.metrics td.mname { color: var(--ink); }
table.metrics td.effect { color: var(--ink-3); font-size: 11.5px; max-width: 260px; white-space: normal; }
table.metrics tr.is-missing td { color: var(--ink-3); }
.metricswrap { overflow-x: auto; }

.fscore { display: flex; gap: 3px; flex-wrap: wrap; }
.fscore i {
  width: 17px; height: 17px; display: grid; place-items: center;
  font: 500 10px/1 var(--mono); font-style: normal;
  border: 1px solid var(--rule-strong); border-radius: 2px;
  color: var(--ink-3); background: var(--surface-2);
}
.fscore i.on { background: var(--mark-pos); border-color: var(--mark-pos); color: #fff; }

/* ======================================================== the company panel
 * Everything below answers "what is this thing?" before the page answers "what
 * does the model think of it?". It is the first block inside an expanded row and
 * it is deliberately plainer than the charts around it: prose, a fact list, two
 * equally weighted lists, and one mark type. */
.profileslot { display: grid; gap: 20px; min-width: 0; }

.profile, .why, .invest {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  min-width: 0;
}
.profile > h3, .why h3, .invest > h3 { margin-bottom: 8px; }

.profile-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 78ch;
}
.profile-desc.is-missing { color: var(--ink-3); font-style: italic; }

.facts {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 20px;
  border-top: 1px solid var(--rule);
  padding-top: 13px;
}
.fact { min-width: 0; }
.fact dt {
  font: 500 10px/1.4 var(--mono);
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3);
}
.fact dd {
  margin: 2px 0 0; font-size: 13px; color: var(--ink);
  overflow-wrap: anywhere;
}

/* ---- why it ranks here */
.why-head { max-width: 92ch; }
.why-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-3); margin-top: 6px; }
.why .legend { margin-top: 10px; }

.why-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
/* Strengths and concerns are the SAME size, weight and box. A board that shows the
   good half louder than the bad half is marketing, not research. They are told apart
   by their heading, their marker and their meter colour — never by prominence. */
.whycol {
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px 14px 6px;
}
.whycol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.whycol h4 { font-size: 13px; font-weight: 620; color: var(--ink); }
.whycol h4::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 2px; margin-right: 7px; vertical-align: 0;
}
.whycol.is-strength h4::before { background: var(--mark-pos); }
.whycol.is-concern h4::before { background: var(--mark-neg); }
.whycol-n { font: 400 11px/1 var(--mono); color: var(--ink-3); white-space: nowrap; }

.whylist { list-style: none; margin: 8px 0 0; padding: 0; }
.whyrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px auto;
  gap: 6px 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
}
.whylist > .whyrow:first-child { border-top: 0; }
.whyrow-txt { min-width: 0; }
.whyrow-phrase { display: block; font-size: 13px; line-height: 1.4; color: var(--ink); }
.whyrow-label {
  display: block; margin-top: 2px;
  font: 400 10.5px/1.35 var(--mono); color: var(--ink-3);
  overflow-wrap: anywhere;
}
.whyrow-pct { text-align: right; white-space: nowrap; }
.whyrow-pct b {
  display: block; font: 560 13px/1.15 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.whyrow-pctnote { display: block; font: 400 9.5px/1.2 var(--mono); color: var(--ink-3); }

.why-empty {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  padding: 10px 0 12px; max-width: 60ch;
}

/* ---- the one mark on this surface: a 0–100 percentile meter.
   Track is the page's standard track; the fill is square at the baseline and
   rounded at the data end; the value is printed beside it, never inside it. */
.meter {
  position: relative; display: block;
  height: 8px; border-radius: 2px;
  background: var(--track);
  overflow: hidden;
}
.meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 0 3px 3px 0;
}
.meter-fill.is-pos { background: var(--mark-pos); }
.meter-fill.is-neg { background: var(--mark-neg); }

/* ---- investability */
.invest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.invest-chips .chip + .chip { margin-left: 0; }
.statrows { display: grid; gap: 2px; }
.statrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 84px auto;
  gap: 6px 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}
.statrows > .statrow:first-child { border-top: 0; }
.statrow-txt { min-width: 0; }
.statrow-nm { display: block; font-size: 13px; color: var(--ink); }
.statrow-note { display: block; font: 400 10.5px/1.35 var(--mono); color: var(--ink-3); }
.statrow-val {
  font: 560 14px/1.2 var(--mono); font-variant-numeric: tabular-nums;
  color: var(--ink); white-space: nowrap;
}
.statrow-pct { text-align: right; white-space: nowrap; }
.statrow-pct b {
  display: block; font: 560 12.5px/1.15 var(--mono);
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* ---------------------------------------------------------------- pager */
.pager { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pager-pos { font: 400 12.5px/1 var(--mono); color: var(--ink-3); margin-right: auto; }
.pager .btn[disabled] { opacity: 0.4; cursor: default; }

.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: 13.5px; }

.board-foot {
  margin-top: 14px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-3); max-width: 92ch;
}
.board-foot strong { color: var(--ink-2); }

/* ---------------------------------------------------------------- sources / footer */
.sources { margin-top: 34px; }
.sources-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }

.sitefoot {
  margin-top: 40px; border-top: 1px solid var(--rule);
  padding: 20px 0 48px;
  font-size: 12.5px; color: var(--ink-3);
  display: grid; gap: 8px;
}

/* ---------------------------------------------------------------- methodology page */
/* minmax(0,1fr) + min-width:0, not a bare `grid`: an auto track takes its width from
   the widest item's min-content, and the metric table is far wider than a phone. That
   inflated every section to 482px at a 390px viewport, and because the body hides its
   own overflow the result was silently CLIPPED content rather than a scrollbar. The
   table is already in a .tablescroll — this lets it actually do its job. */
.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 24px; }
.doc > section { min-width: 0; }
.doc section { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px 24px 24px; }
.doc h2 { font-size: 18px; margin-bottom: 4px; }
.doc .lede { color: var(--ink-2); font-size: 14px; margin-bottom: 14px; }
.limits { display: grid; gap: 14px; counter-reset: lim; margin-top: 6px; }
.limit { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.limit-n { font: 500 11px/1.7 var(--mono); color: var(--ink-3); }
.limit h3 { font-size: 13.5px; }
.limit p { grid-column: 2; font-size: 13.5px; color: var(--ink-2); max-width: 72ch; }
table.doc-table { border-collapse: collapse; width: 100%; font-size: 13px; }
table.doc-table caption { text-align: left; padding-bottom: 8px; font-size: 12.5px; color: var(--ink-3); }
table.doc-table th, table.doc-table td { border-bottom: 1px solid var(--rule); padding: 7px 10px; text-align: right; }
table.doc-table th { font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
table.doc-table th.al, table.doc-table td.al { text-align: left; }
table.doc-table td { color: var(--ink-2); }
table.doc-table td.num, table.doc-table td.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.doc-table tbody tr.grp td { background: var(--surface-2); color: var(--ink); font-weight: 620; }
.tablescroll { overflow-x: auto; }

/* ---------------------------------------------------------------- responsive */
/* Below this width a band is too narrow to hold its own name without clipping, so the
   scale stops being positional and becomes a wrapping swatch legend instead. */
@media (max-width: 760px) {
  .gauge-scale { flex-wrap: wrap; gap: 5px 12px; }
  .gauge-scale span { flex: 0 0 auto !important; text-align: left; overflow: visible; }
  .gauge-scale i {
    display: inline-block; width: 9px; height: 9px; border-radius: 2px;
    margin-right: 5px; vertical-align: -1px;
  }
}

/* Below this the three-column bar row cannot hold a label, a readable track and a
   value side by side, so the label moves to its own line and the track keeps the
   full width. The two bars still share one axis — that is the whole point of them. */
@media (max-width: 700px) {
  .divchart { grid-template-columns: minmax(0, 1fr) 84px; row-gap: 14px; }
  .divlabel { grid-column: 1 / -1; }
  .divaxis { grid-column: 1 / 2; }
}

@media (max-width: 900px) {
  .regime-grid { grid-template-columns: 1fr; }
  .regime-temp { border-right: 0; border-bottom: 1px solid var(--rule); }
  .temp-figure { font-size: 52px; }
  .driver { grid-template-columns: 1fr; gap: 4px; }
  .driver-read { text-align: left; }
  .field input, .field select { min-width: 0; width: 100%; }
  .field { flex: 1 1 200px; }
}

/* Below this the meter cannot share a line with a phrase and a value without one of
   them being crushed, so the mark drops to its own full-width row underneath. The
   percentile stays printed as text either way — the bar was never the only read. */
@media (max-width: 620px) {
  .whyrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .whyrow .meter { grid-column: 1 / -1; grid-row: 2; }
  .statrow { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; }
  .statrow .meter { grid-column: 1 / -1; grid-row: 2; }
  .statrow-pct { grid-column: 1 / -1; text-align: left; }
  .statrow-pct b { display: inline; }
  .statrow-pct .whyrow-pctnote { display: inline; margin-left: 5px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 14px; }
  .profile, .why, .invest { padding: 14px 14px 16px; }
  .whycol { padding: 11px 12px 4px; }
  .warnbar-inner { padding: 9px 14px; }
  .masthead-inner { padding: 10px 14px; }
  .regime-temp, .regime-drivers { padding: 18px 16px; }
  .weights { padding: 14px 16px 18px; }
  .temp-figure { font-size: 46px; }

  .basket-head { padding: 18px 16px 0; }
  .kpi { padding: 13px 16px 14px; }
  .kpi-value { font-size: 24px; }
  .divfig { padding: 18px 16px 4px; }
  .basket-warn { padding: 13px 16px 15px; }
  .detail { padding: 16px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

@media print {
  .masthead, .controls, .pager, .expandbtn { display: none; }
  body { background: #fff; }
}


/* --- 1y->5y persistence -------------------------------------------------
   The shape of the expectation across horizons. Styled as EMPHASIS, not as a
   verdict: a fading expectation is a fact about the curve, not a judgement on
   the company, and plenty of sound businesses fade. Weight and a rule carry the
   distinction so it survives greyscale, print and forced-colours, where a
   colour-only signal would vanish. */
.cell-persist { font-variant-numeric: tabular-nums; }
.cell-persist.is-durable {
  font-weight: 620;
  box-shadow: inset 2px 0 0 var(--mark-pos, #2a78d6);
  padding-left: 6px;
}
.cell-persist.is-fading {
  color: var(--ink-2, #5b6673);
  box-shadow: inset 2px 0 0 var(--mark-neg, #c8413e);
  padding-left: 6px;
}
@media (prefers-reduced-motion: no-preference) { .cell-persist { transition: none; } }

/* The one nav item that is not public. The dot is decorative — the private state is carried by
   the word "Portfolio" plus screen-reader text, so it survives with images or colour off. */
.nav-private { display: inline-flex; align-items: center; gap: 5px; }
.nav-lock {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); opacity: .7; flex: 0 0 auto;
}

/* ---------------------------------------------------------------- track record */
.record { padding-bottom: 22px; }
.rec-fig { margin: 16px 0 4px; }
.rec-fig svg {
  display: block; width: 100%; height: 190px;
  overflow: visible; background: var(--surface-2); border-radius: var(--radius);
}
/* vector-effect keeps the stroke at 2px after the non-uniform viewBox scale */
.rec-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round; }
.rec-strat { stroke: var(--mark-pos); }
.rec-bench { stroke: var(--deemph); stroke-dasharray: 4 3; }
.rec-base { stroke: var(--rule-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rec-cap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  font-size: 11.5px; color: var(--ink-3); padding-top: 7px;
}
.rec-key { display: inline-flex; align-items: center; gap: 6px; }
.rec-sw { width: 14px; height: 0; border-top-width: 2px; border-top-style: solid; }
.rec-sw-strat { border-top-color: var(--mark-pos); }
.rec-sw-bench { border-top-color: var(--deemph); border-top-style: dashed; }
.rec-span { margin-left: auto; font-variant-numeric: tabular-nums; }

.rec-flag {
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  border-left: 3px solid var(--rule-strong); background: var(--surface-2);
  border-radius: var(--radius); padding: 9px 13px; margin-top: 10px;
}
.rec-flag-warn { border-left-color: var(--st-warn); color: var(--st-warn-ink); }
.rec-flag-stat { border-left-color: var(--mark-pos); color: var(--ink); }

.rec-holdings { margin-top: 14px; }
.rec-holdings-h {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 7px;
}
.rec-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 3px 8px; margin: 0 6px 6px 0; font-size: 12px; font-weight: 600;
  color: var(--ink-2); background: var(--surface-2);
}
.rec-chip-w { font-size: 10.5px; font-weight: 500; color: var(--ink-3);
  font-variant-numeric: tabular-nums; }

.rec-caveat { font-size: 11.5px; line-height: 1.55; color: var(--ink-3); margin-top: 12px; }
.rec-empty { padding: 18px 0; }
.rec-empty p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.rec-basket { margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }