/*
 * §11.10 / §11.12 — the authored financial scenes.
 *
 * One scene per Product route, each built from a DIFFERENT financial object (net-worth convergence,
 * allocation lens, fund x-ray, market bridge, monthly flow, holdings braid, health trace, research
 * workspace, compare plane, wealth map, trace pipeline, source matrix, data-boundary map). None of them is
 * "a big icon", none is a stock illustration and none can be swapped onto another route: the shapes differ
 * because the financial objects differ.
 *
 * Everything resolves through tokens.css. No gradient text, no glass, no glow, no animated background.
 */

/* ══ Shared figure shell ═════════════════════════════════════════════════════════════════════════ */

.oa-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  min-width: 0;
}

/* SVG `stroke` is an INHERITED property. A container that carries a stroke silently outlines every
   `<text>` beneath it — which is how the cash-flow scene shipped with white labels wrapped in a 1.6px
   cobalt outline. Figure text opts out explicitly, once, for every scene. */
.oa-fig text,
.oa-lh text,
.fin-chart__svg text {
  stroke: none;
}

.oa-fig__svg,
.oa-lens__ring,
.oa-lens__trace,
.oa-xray__chart,
.oa-braid__wires,
.oa-ht__svg,
.oa-tp__svg,
.oa-db__svg,
.oa-wm__svg,
.oa-lh__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* An inline glyph inside a scene keeps its authored control size (§11.7: 18-20px). A blanket
   `.oa-fig svg { width: 100% }` used to catch it too, and the research workspace shipped a full-width
   magnifying glass where a 20px search icon belonged. */
.oa-fig .oa-row-icon,
.oa-fig .oi {
  width: 20px;
  height: 20px;
  flex: none;
}

.oa-fig__cap {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--ls-meta);
  color: var(--oa-ink-2);
}

.oa-fig__meta-line {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--oa-ink-2);
  max-width: 60ch;
}

.oa-fig__label,
.oa-fig .oa-fig__label {
  font-family: var(--ff-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  fill: var(--oa-ink-2);
  color: var(--oa-ink-2);
}

.oa-fig__name { fill: var(--oa-ink-0); font-size: 15px; font-weight: 620; }
.oa-fig__meta { fill: var(--oa-ink-2); font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.oa-fig__amt { fill: var(--oa-ink-1); font-variant-numeric: tabular-nums lining-nums; }
.oa-fig__miss { fill: var(--oa-ink-3); font-style: italic; }
.oa-fig__amt-lg {
  fill: var(--oa-ink-0);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-fig__hero {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-fig__hero-html {
  font-family: var(--ff-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--oa-ink-0);
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-cur {
  font-size: 0.66em;
  font-weight: 600;
  color: var(--oa-ink-2);
  margin-right: 0.12em;
}

/* Controls: real buttons, >=44px, never hover-only. Pill radius is allowed here — this IS a filter. */
.oa-fig__ctls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.oa-fig__ctl {
  min-height: 44px;
  padding: 0 var(--sp-16);
  border: 1px solid var(--oa-line-1);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--oa-ink-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 550;
  cursor: pointer;
  transition: color var(--oa-ui) var(--ease-out), border-color var(--oa-ui) var(--ease-out),
    background-color var(--oa-ui) var(--ease-out);
}
.oa-fig__ctl:hover { color: var(--oa-ink-0); border-color: var(--oa-line-2); }
.oa-fig__ctl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-fig__ctl:active { background: var(--oa-surface-2); }
.oa-fig__ctl.is-active {
  color: var(--oa-ink-0);
  border-color: var(--oa-cobalt);
  background: var(--chip);
}

/* Isolation. Recede, never disappear: the whole object must stay legible. */
[data-scene-item] {
  transition: opacity var(--oa-state) var(--ease-out);
}
/* An unselected element RECEDES; it never becomes unreadable (§11.9: "content, state and meaning remain
   identical"). Group opacity would take the label down with the shape and a child cannot raise itself back
   above its group, so the dim is applied to the SHAPES and the text keeps a legible level of its own. */
[data-scene-item].is-dim rect,
[data-scene-item].is-dim circle,
[data-scene-item].is-dim path,
[data-scene-item].is-dim line,
[data-scene-item].is-dim polyline,
[data-scene-item].is-dim polygon { opacity: 0.28; }
[data-scene-item].is-dim text { opacity: 0.62; }
[data-scene-item].is-on { opacity: 1; }


/* ══ 1. Net Worth Convergence ════════════════════════════════════════════════════════════════════ */




/* ══ 2. Allocation Lens ══════════════════════════════════════════════════════════════════════════ */

.oa-lens {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--sp-32);
  align-items: center;
}


.oa-ring__seg--brand { stroke: var(--oa-cobalt); }
.oa-ring__seg--iris { stroke: var(--oa-iris); }
.oa-ring__seg--brand-300 { stroke: var(--brand-300); }
.oa-ring__seg--line { stroke: var(--oa-chart-cmp); }


.oa-lens__legend { display: flex; flex-direction: column; }
.oa-lens__row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-12);
  min-height: 44px;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--oa-line-0);
  background: none;
  color: var(--oa-ink-1);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  cursor: pointer;
}
.oa-lens__row:first-child { border-top: 0; }
.oa-lens__row:hover .oa-lens__name { color: var(--oa-ink-0); }
.oa-lens__row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-lens__row.is-active .oa-lens__name { color: var(--oa-ink-0); font-weight: 640; }
.oa-lens__swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--oa-chart-cmp); }
.oa-lens__swatch--brand { background: var(--oa-cobalt); }
.oa-lens__swatch--iris { background: var(--oa-iris); }
.oa-lens__swatch--brand-300 { background: var(--brand-300); }
.oa-lens__pct,
.oa-lens__amt { color: var(--oa-ink-2); }
.oa-lens__amt { color: var(--oa-ink-0); font-weight: 620; }

.oa-lens__holdings {
  margin-top: var(--sp-16);
  border-top: 1px solid var(--oa-line-1);
}
.oa-lens__hold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "name val pct" "meta val pct";
  column-gap: var(--sp-16);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--oa-line-0);
  font-size: var(--fs-14);
}
.oa-lens__hold:last-child { border-bottom: 0; }
.oa-lens__hold-name { grid-area: name; color: var(--oa-ink-0); font-weight: 600; }
.oa-lens__hold-meta { grid-area: meta; color: var(--oa-ink-3); font-size: var(--fs-meta); }
.oa-lens__hold-val { grid-area: val; align-self: center; color: var(--oa-ink-0); font-weight: 620; }
.oa-lens__hold-pct { grid-area: pct; align-self: center; color: var(--oa-ink-2); min-width: 3.5em; text-align: right; }

.oa-lens__foot { margin-top: var(--sp-24); display: flex; flex-direction: column; gap: var(--sp-8); }

@media (max-width: 900px) {
  .oa-lens { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  .oa-lens__ring { max-width: 240px; margin-inline: auto; }
}

/* ══ 3. Fund X-ray ═══════════════════════════════════════════════════════════════════════════════ */

.oa-xray { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-xray__head { display: flex; flex-direction: column; gap: 2px; }
.oa-xray__name {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--oa-ink-0);
}
.oa-xray__chart { width: 100%; height: auto; }
.oa-xray__fund { stroke: var(--oa-cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oa-xray__bench {
  stroke: var(--oa-ink-3);
  stroke-width: 1.8;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
  transition: opacity var(--oa-state) var(--ease-out);
}
[data-scene="fund-xray"][data-active="fund"] .oa-xray__bench,
[data-scene="fund-xray"][data-active="fund"] .oa-xray__key--bench { opacity: 0; }

.oa-xray__legend { display: flex; flex-wrap: wrap; gap: var(--sp-24); font-size: var(--fs-meta); }
.oa-xray__key { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--oa-ink-2); }
.oa-xray__key::before { content: ""; width: 18px; height: 2px; background: var(--oa-ink-3); }
.oa-xray__key--fund::before { background: var(--oa-cobalt); height: 3px; }

.oa-xray__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-16);
  border-top: 1px solid var(--oa-line-1);
  border-bottom: 1px solid var(--oa-line-1);
  padding-block: var(--sp-16);
}
.oa-xray__fact { display: flex; flex-direction: column; gap: 2px; }
.oa-xray__val {
  font-size: var(--fs-20);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--oa-ink-0);
}
.oa-xray__holds { display: flex; flex-direction: column; gap: var(--sp-8); }
.oa-xray__hold {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 3.5em;
  align-items: center;
  gap: var(--sp-12);
  font-size: var(--fs-14);
  color: var(--oa-ink-1);
}
.oa-xray__hold .oa-num { text-align: right; color: var(--oa-ink-2); }
@media (max-width: 720px) {
  .oa-xray__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ 4. Market Bridge ════════════════════════════════════════════════════════════════════════════ */

.oa-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.55fr) minmax(0, 0.85fr);
  gap: var(--sp-24);
  align-items: center;
}
.oa-bridge__side { display: flex; flex-direction: column; gap: var(--sp-24); }
.oa-bridge__lane { display: flex; flex-direction: column; gap: var(--sp-8); }
.oa-bridge__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nm vl" "mt vl";
  column-gap: var(--sp-12);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--oa-line-0);
  font-size: var(--fs-14);
}
.oa-bridge__nm { grid-area: nm; color: var(--oa-ink-0); font-weight: 600; }
.oa-bridge__mt { grid-area: mt; color: var(--oa-ink-3); font-size: var(--fs-meta); }
.oa-bridge__vl { grid-area: vl; align-self: center; color: var(--oa-ink-1); font-weight: 620; }
.oa-bridge__sum {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-meta);
  color: var(--oa-ink-2);
  padding-top: var(--sp-4);
}
.oa-bridge__mid { position: relative; display: flex; align-items: center; justify-content: center; }
.oa-bridge__wire { position: absolute; inset: 0; width: 100%; height: 100%; }
.oa-bridge__path { fill: none; stroke: var(--oa-cobalt); stroke-width: 1.6; opacity: 0.45; }
.oa-bridge__path--us { stroke: var(--oa-iris); }
.oa-bridge__fx {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  padding: var(--sp-12) var(--sp-16);
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-line-2);
  border-radius: var(--oa-r-control);
}
.oa-bridge__fxrate { font-size: var(--fs-20); font-weight: 700; color: var(--oa-ink-0); }
.oa-bridge__out { display: flex; flex-direction: column; gap: var(--sp-8); }
@media (max-width: 900px) {
  .oa-bridge { grid-template-columns: minmax(0, 1fr); }
  .oa-bridge__wire { display: none; }
}

/* ══ 5. Monthly Flow ═════════════════════════════════════════════════════════════════════════════ */

.oa-flow__spine,
.oa-flowb__path {
  fill: none;
  stroke: var(--oa-iris);
  stroke-width: 1.8;
  opacity: 0.5;
}
.oa-flow__spine { stroke: var(--oa-cobalt); opacity: 0.65; }
.oa-flowb__box { fill: var(--oa-surface-1); stroke: var(--oa-line-1); stroke-width: 1; }
.oa-flowb.is-on .oa-flowb__box { stroke: var(--oa-iris); }

/* ══ 6. Shared Holdings Braid ════════════════════════════════════════════════════════════════════ */

.oa-braid { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-braid__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: baseline;
  font-size: var(--fs-14);
  font-weight: 620;
  color: var(--oa-ink-0);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--oa-line-1);
}
.oa-braid__head > :last-child { text-align: right; }
.oa-braid__pct { color: var(--warning-text); font-weight: 700; }
.oa-braid__rows { display: flex; flex-direction: column; }
.oa-braid__row {
  display: grid;
  grid-template-columns: 52px minmax(24px, 1fr) auto minmax(24px, 1fr) 52px;
  align-items: center;
  gap: var(--sp-12);
  min-height: 46px;
  border-top: 1px solid var(--oa-line-0);
}
/* The connector is part of its row, not an overlay: thickness carries the shared weight contribution. */
.oa-braid__wire {
  height: var(--t);
  border-radius: calc(var(--t) / 2);
  background: var(--oa-chart-line);
  opacity: 0.55;
  transition: opacity var(--oa-state) var(--ease-out);
}
.oa-braid__row.is-dim .oa-braid__wire { opacity: 0.15; }
.oa-braid__a { text-align: left; color: var(--brand-text); font-weight: 620; }
.oa-braid__b { text-align: right; color: var(--iris-text); font-weight: 620; }
.oa-braid__nm { text-align: center; color: var(--oa-ink-2); }
.oa-braid__row.is-shared .oa-braid__nm { color: var(--oa-ink-0); font-weight: 620; }
[data-scene="holdings-braid"][data-active="shared"] .oa-braid__row:not(.is-shared) {
  opacity: 0.22;
}

/* ══ 7. Health Trace ═════════════════════════════════════════════════════════════════════════════ */

.oa-ht { display: flex; flex-direction: column; gap: var(--sp-24); }
.oa-ht__svg { width: 100%; height: auto; }
.oa-ht__spine { fill: none; stroke: var(--oa-iris); stroke-width: 2; }
.oa-ht__branch {
  fill: none;
  stroke: var(--oa-iris);
  stroke-width: 1.6;
  opacity: 0.4;
  transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-ht__branch.is-on { opacity: 1; stroke-width: 2.6; stroke: var(--oa-cobalt); }
.oa-ht__branch.is-dim { opacity: 0.12; }
.oa-ht__dot { fill: var(--oa-iris); }
.oa-ht__name {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 640;
}
.oa-ht__vt { fill: var(--positive-text); font-size: 15px; font-weight: 620; }
.oa-ht__stages { display: flex; flex-direction: column; gap: var(--sp-12); }
.oa-ht__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 60ch; }
.oa-ht__detail strong { color: var(--oa-ink-0); }
.oa-ht__findings { display: flex; flex-direction: column; }
.oa-ht__finding {
  display: grid;
  grid-template-areas: "n title" "n ev";
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--sp-12);
  row-gap: 2px;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
  border: 0;
  border-top: 1px solid var(--oa-line-1);
  border-left: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oa-ht__finding:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-ht__finding.is-active { border-left-color: var(--oa-cobalt); }
.oa-ht__f-title { grid-area: title; align-self: end; color: var(--oa-ink-0); font-size: var(--fs-14); font-weight: 620; }
.oa-ht__f-ev { grid-area: ev; align-self: start; color: var(--oa-chart-desc); font-size: var(--fs-meta); }
.oa-ht__finding--warning .oa-ht__f-title::before,
.oa-ht__finding--positive .oa-ht__f-title::before,
.oa-ht__finding--neutral .oa-ht__f-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: var(--sp-8);
  background: var(--oa-ink-3);
  vertical-align: 1px;
}
.oa-ht__finding--warning .oa-ht__f-title::before { background: var(--warning); }
.oa-ht__finding--positive .oa-ht__f-title::before { background: var(--positive); }

/* ══ 8. Research workspace ═══════════════════════════════════════════════════════════════════════ */

.oa-rw {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  grid-template-areas: "search search" "list drawer";
  gap: var(--sp-16) var(--sp-24);
}
.oa-rw__search {
  grid-area: search;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 52px;
  padding-inline: var(--sp-16);
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-line-2);
  border-radius: var(--oa-r-control);
}
.oa-rw__q { color: var(--oa-ink-0); font-size: var(--fs-body-l); flex: 1; }
.oa-rw__count { color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__list { grid-area: list; display: flex; flex-direction: column; }
.oa-rw__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nm vl" "mt vl";
  column-gap: var(--sp-12);
  min-height: 60px;
  padding: var(--sp-12) 0;
  border: 0;
  border-top: 1px solid var(--oa-line-0);
  border-left: 2px solid transparent;
  padding-left: var(--sp-12);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oa-rw__row:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.oa-rw__nm { grid-area: nm; color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); }
.oa-rw__mt { grid-area: mt; color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__vl { grid-area: vl; align-self: center; color: var(--oa-ink-1); font-weight: 620; font-size: var(--fs-14); }
.oa-rw__drawer {
  grid-area: drawer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-16);
  background: var(--oa-surface-1);
  border: 1px solid var(--oa-line-1);
  border-radius: var(--oa-r-surface);
}
.oa-rw__title { color: var(--oa-ink-0); font-weight: 650; font-size: var(--fs-16); }
.oa-rw__facts { display: flex; flex-direction: column; gap: var(--sp-4); }
.oa-rw__fact {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-12);
  font-size: var(--fs-meta);
  color: var(--oa-ink-2);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--oa-line-0);
}
.oa-rw__fact > :last-child { color: var(--oa-ink-0); font-weight: 600; }
.oa-rw__add {
  margin-top: var(--sp-8);
  align-self: flex-start;
  padding: var(--sp-8) var(--sp-16);
  border-radius: var(--oa-r-control);
  background: var(--oa-cobalt);
  color: #fff;
  font-size: var(--fs-14);
  font-weight: 600;
}
@media (max-width: 900px) {
  .oa-rw { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "list" "drawer"; }
}

/* ══ 9. Compare plane ════════════════════════════════════════════════════════════════════════════ */

.oa-cp { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-cp__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); }
.oa-cp .oa-table-shell { overflow-x: auto; }
.oa-cp .oa-table th[scope="row"] { position: sticky; left: 0; background: var(--oa-surface-0); }

/* ══ 10. Wealth map ══════════════════════════════════════════════════════════════════════════════ */

.oa-wm {
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-32);
  align-items: center;
}
.oa-wm__svg { width: 100%; max-width: none; }
@media (max-width: 1100px) {
  .oa-wm { grid-template-columns: minmax(0, 1fr); }
  .oa-wm__svg { max-width: 460px; margin-inline: auto; }
}
.oa-wm__ring { stroke: var(--oa-line-1); stroke-width: 1; }
.oa-wm__dot { fill: var(--oa-cobalt); transition: r var(--oa-state) var(--ease-out), opacity var(--oa-state) var(--ease-out); }
.oa-wm__dot.is-on { r: 10; }
.oa-wm__dot.is-dim { opacity: .3; }
.oa-wm__tick {
  fill: var(--oa-ink-2);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 620;
  letter-spacing: -0.005em;
  transition: fill var(--oa-state) var(--ease-out), opacity var(--oa-state) var(--ease-out);
}
.oa-wm__tick.is-on { fill: var(--oa-ink-0); }
.oa-wm__tick.is-dim { opacity: .62; }
.oa-wm__hub { fill: var(--oa-surface-2); stroke: var(--oa-cobalt); stroke-width: 1.5; }
.oa-wm__hub-val {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-wm__spoke {
  fill: none;
  stroke: var(--oa-cobalt);
  stroke-width: 1.4;
  opacity: 0.35;
  transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-wm__spoke.is-on { opacity: 1; stroke-width: 2.4; }
.oa-wm__spoke.is-dim { opacity: 0.12; }
.oa-wm__nodes { display: flex; flex-direction: column; }
.oa-wm__node {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-height: 56px;
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--oa-line-1);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.oa-wm__node:hover,
.oa-wm__node:focus-visible {
  border-left-color: var(--oa-cobalt);
  background: var(--chip);
}
.oa-wm__nm { color: var(--oa-ink-0); font-weight: 640; font-size: var(--fs-16); }
.oa-wm__dt { color: var(--oa-ink-2); font-size: var(--fs-14); }
@media (max-width: 900px) {
  .oa-wm { grid-template-columns: minmax(0, 1fr); }
  .oa-wm__svg { max-width: 260px; margin-inline: auto; }
}

/* ══ 11. Trace pipeline ══════════════════════════════════════════════════════════════════════════ */

.oa-tp { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-tp__spine { fill: none; stroke: var(--oa-iris); stroke-width: 2; }
.oa-tp__dot { fill: var(--oa-cobalt); }
.oa-tp__stage.is-on .oa-tp__dot { r: 11; }
.oa-tp__nm { fill: var(--oa-ink-0); font-family: var(--ff-display); font-size: 14px; font-weight: 640; }
.oa-tp__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 62ch; }
.oa-tp__detail strong { color: var(--oa-ink-0); }

/* ══ 12. Source matrix ═══════════════════════════════════════════════════════════════════════════ */

.oa-state {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--oa-ink-2);
}
.oa-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--oa-ink-3);
}
.oa-state--live { color: var(--positive-text); }
.oa-state--live::before { background: var(--positive); }
.oa-state--partial { color: var(--warning-text); }
.oa-state--partial::before { background: var(--warning); }

/* ══ 13. Data boundary map ═══════════════════════════════════════════════════════════════════════ */

.oa-db { display: flex; flex-direction: column; gap: var(--sp-16); }
.oa-db__box { fill: var(--oa-surface-2); stroke: var(--oa-line-2); stroke-width: 1; }
.oa-db__node.is-on .oa-db__box { stroke: var(--oa-cobalt); fill: var(--chip); }
.oa-db__nm { fill: var(--oa-ink-0); font-size: 15px; font-weight: 640; }
.oa-db__edge {
  fill: none;
  stroke: var(--oa-cobalt);
  stroke-width: 1.6;
  opacity: 0.35;
  marker-end: none;
  stroke-dasharray: 4 6;
}
.oa-db__detail { margin: 0; color: var(--oa-ink-1); font-size: var(--fs-14); max-width: 62ch; }
.oa-db__detail strong { color: var(--oa-ink-0); }

/* ══ Reduced motion — the scenes are already complete; only isolation transitions are removed. ════ */
@media (prefers-reduced-motion: reduce) {
  [data-scene-item],
  .oa-ring__seg,
  .oa-braid__row,
  .oa-xray__bench,
  .oa-ht__branch,
  .oa-wm__spoke {
    transition: none;
  }
}

/* ══ §11.11 Product index — one lead row, one paired strip, one previewing index ══════════════════
   NOT seven independent boxes competing equally, and not a card grid: the lead is an open row with an
   inline evidence sample, the pair is two visual halves divided by a hairline, and the four-row index
   resolves into ONE shared right-side viewport. */

.pindex .oa-h2 { margin-bottom: var(--sp-48); }

.pindex__lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: var(--sp-48);
  align-items: start;
  padding: var(--sp-32) 0;
  border-top: 1px solid var(--oa-line-1);
  border-bottom: 1px solid var(--oa-line-1);
  text-decoration: none;
  transition: border-color var(--oa-ui) var(--ease-out);
}
.pindex__lead:hover,
.pindex__lead:focus-visible { border-color: var(--oa-line-2); }
.pindex__lead-copy { display: flex; flex-direction: column; max-width: 46ch; }
.pindex__lead-title {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  color: var(--oa-ink-0);
}
.pindex__lead-body {
  margin-top: var(--sp-12);
  color: var(--oa-ink-2);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
}
.pindex__ev { display: flex; flex-direction: column; }
.pindex__ev-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
  border-top: 1px solid var(--oa-line-0);
  border-left: 2px solid var(--oa-cobalt);
}
.pindex__ev-row:first-child { border-top: 0; }
.pindex__ev-t { color: var(--oa-ink-0); font-size: var(--fs-14); font-weight: 620; }
.pindex__ev-d { color: var(--oa-ink-3); font-size: var(--fs-meta); }

.pindex__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid var(--oa-line-1);
}
.pindex__half {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-32) var(--sp-32) var(--sp-32) 0;
  text-decoration: none;
}
.pindex__half + .pindex__half {
  border-left: 1px solid var(--oa-line-1);
  padding-left: var(--sp-32);
}
.oa-mini { width: 100%; max-width: 260px; height: auto; margin-bottom: var(--sp-8); }
.oa-mini path,
.oa-mini polyline { stroke: var(--oa-cobalt); stroke-width: 1.8; opacity: 0.65; }
.oa-mini rect { fill: var(--oa-cobalt); opacity: 0.55; }
.oa-mini__neg { stroke: var(--negative) !important; }
.oa-mini__wire { stroke: var(--oa-iris) !important; stroke-dasharray: 3 5; }
.oa-mini__hub { fill: var(--chip); stroke: var(--oa-cobalt); stroke-width: 1.5; }
.oa-mini__track { stroke: var(--oa-line-1); }
.oa-mini__seg-a { stroke: var(--oa-cobalt); }
.oa-mini__seg-b { stroke: var(--oa-iris); }
.oa-mini__bar { fill: var(--oa-ink-3); opacity: 0.5; }

.pindex__name {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--oa-ink-0);
}
.pindex__desc { color: var(--oa-ink-2); font-size: var(--fs-14); line-height: var(--lh-body); max-width: 44ch; }

.pindex__index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: var(--sp-48);
  align-items: start;
}
.pindex__rows { display: flex; flex-direction: column; }
.pindex__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 72px;
  justify-content: center;
  padding: var(--sp-12) 0 var(--sp-12) var(--sp-16);
  border-bottom: 1px solid var(--oa-line-0);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: border-color var(--oa-ui) var(--ease-out), background-color var(--oa-ui) var(--ease-out);
}
.pindex__row:hover,
.pindex__row:focus-visible,
.pindex__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.pindex__row .pindex__name { font-size: var(--fs-16); }

.pindex__view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-24);
  background: var(--oa-surface-1);
  border: 1px solid var(--oa-line-1);
  border-radius: var(--oa-r-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), var(--oa-shadow-1);
  justify-content: center;
}
.pindex__panel { display: flex; flex-direction: column; gap: var(--sp-4); }
.pindex__ptitle { color: var(--oa-ink-0); font-weight: 640; font-size: var(--fs-16); }
.pindex__pmeta { color: var(--oa-ink-2); font-size: var(--fs-meta); }

@media (max-width: 900px) {
  .pindex__lead,
  .pindex__index { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }
  /* The mobile rhythm belongs in the sheet that OWNS these classes. figures.css loads after home.css, so
     the same overrides written there lost the cascade and the 48px + 32px desktop stack survived on a
     390px viewport as an 81px dead run under the H2. */
  .pindex .oa-h2 { margin-bottom: var(--sp-24); }
  .pindex__lead { padding: var(--sp-24) 0; }
  .pindex__pair { grid-template-columns: minmax(0, 1fr); }
  .pindex__half { padding: var(--sp-24) 0; }
  .pindex__half + .pindex__half { border-left: 0; border-top: 1px solid var(--oa-line-1); padding-left: 0; }
}

/* ══ §11.9 vs W-22 — the scene entrance must never shrink a TARGET below 44px ═════════════════════
   The §11.9(2) scene entrance is `opacity 0→1, translate 18px→0, scale .985→1`. A scene figure carries real
   controls, and a parent `scale(.985)` renders a 44px control at 43.34px for the whole 520ms — a user can
   click during that window, so for those 520ms the page violates the >=44px target floor (§9, §11.22, W-22).
   tests/web/scene-contract.spec.ts caught it at exactly 43.34px.

   The accessibility floor is a hard requirement and the .985 scale is a stylistic detail, so where they
   conflict the floor wins: an interactive FIGURE enters on opacity + translate only. Non-interactive
   `.oa-enter` blocks keep the full §11.9 entrance. */



/* ══ §11.8 — the sticky identity column ══════════════════════════════════════════════════════════
   W-38 pins the first column so the row identity survives a horizontal scroll. It must stay a COLUMN,
   not read as a filled block welded to the left edge: it takes the row's own ground and a single hairline
   rule, which is also §11.8's "no vertical grid lines except a deliberate frozen boundary". */
/* The sticky identity column only becomes a distinct surface WHEN the table is actually scrolled sideways.
   Painting it unconditionally gave every table a frozen-pane look on a viewport that never needed one. */
.overflow--table[data-overflow-sticky-col].has-start .oa-table tbody th:first-child,
.overflow--table[data-overflow-sticky-col].has-start .oa-table thead th:first-child {
  background: var(--oa-bg-0);
}

/* The decorative "performance trace" under the allocation ring had no axis, no scale and no label — a line
   pretending to be data. §11.21 bans decoration whose only purpose is to look like a product. Deleted. */
.oa-lens__foot { margin-top: var(--sp-16); }

/* ══ ONE plot grammar — every chart on the site reads the same way ═══════════════════════════════
   A stroke floating in a tinted box, with no baseline, no scale and no labelled ends, is a drawing of a
   chart. That is what shipped, and the owner named it. Every plot now sits directly on its band with a
   hairline baseline, quiet gridlines and labelled ends — no panel, so no chipped white edges. */

.oa-plot__axis { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-plot__grid { stroke: var(--oa-line-0); stroke-width: 1; }
.oa-plot__tick {
  fill: var(--oa-ink-3);
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.oa-plot__key {
  fill: var(--oa-ink-2);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 640;
}
.oa-plot__key--b { fill: var(--oa-ink-3); }
.oa-plot__a { stroke: var(--oa-cobalt); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oa-plot__b {
  stroke: var(--oa-ink-3);
  stroke-width: 1.8;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oa-plot__mark { fill: var(--oa-iris); }
.oa-plot__block { fill: var(--oa-cobalt); }
.oa-plot__dot { fill: var(--oa-cobalt); }
.oa-plot__gap { stroke: var(--warning); stroke-width: 2; }
.oa-plot__div { fill: var(--positive); }
.oa-plot__hold { fill: var(--oa-cobalt); opacity: 0.4; }
.oa-plot__hold--b { fill: var(--oa-iris); opacity: 0.4; }
.oa-plot__braid { stroke: var(--oa-cobalt); stroke-width: 2.4; opacity: 0.6; }
.oa-plot__track { fill: var(--oa-line-0); }
.oa-plot__now { fill: var(--oa-cobalt); }

/* ══ Class fixes from the owner's page-by-page review ════════════════════════════════════════════ */

/* The Health-trace stage detail is one line for `Read` and two for `Calculate`, so switching stages made
   the whole block jump. The panel reserves the tallest state; content swaps without moving anything. */
.oa-ht__stages { min-height: 108px; }
.oa-ht__detail { min-height: 44px; }

/* The wealth-map tick labels sat outside the SVG box and spilled 45px past it. The viewBox now carries the
   label ring, and the figure clips nothing. */
.oa-wm__svg { overflow: visible; }

/* The product index rows are BUTTONS now (a preview control must not navigate), so they need the button
   reset — otherwise they inherit the UA's centred, bordered, grey control look. */
button.pindex__row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--oa-line-0);
  border-left: 2px solid transparent;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
button.pindex__row:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }

.pindex__after {
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
  border-top: 1px solid var(--oa-line-1);
}

/* Health-trace evidence anchors — every branch ends on one, so no line runs off into empty space. */
.oa-ht__branchg.is-on .oa-ht__branchg.is-dim { opacity: 0.28; }
.oa-ht__branchg.is-on 
/* Chart annotations. FT's own reader testing found minimalist charts ranked LOWEST — readers preferred
   several well-placed annotations, because text is where attention goes first. With a handful of points the
   professional choice is data labels over gridline-reading, so each plot states the number that matters at
   the place it happens. */
.oa-plot__note {
  fill: var(--oa-ink-1);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 620;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-plot__note--b { fill: var(--oa-ink-3); font-weight: 550; }
.oa-plot__note--lead { fill: var(--oa-ink-2); font-weight: 600; font-size: 12.5px; }

/* ══ NET WORTH CONVERGENCE — auditor §4 ══════════════════════════════════════════════════════════
   "The current four-lines-into-a-circle looks like somebody opened MS Paint." Measured lanes: 6px
   track on #20283A at 3px radius, a cobalt/iris fill, liabilities in the negative semantic, and every
   connector merging through ONE narrow central spine into the amount. */
.oa-nw__svg { width: 100%; height: auto; overflow: visible; }
.oa-nw__name {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 620;
}
.oa-nw__amt {
  fill: var(--oa-ink-1);
  font-size: 14px;
  font-weight: 620;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-nw__amt--miss { fill: var(--oa-ink-3); font-style: italic; font-weight: 450; }
.oa-nw__track { fill: var(--oa-chart-track); }
.oa-nw__fill { fill: var(--oa-chart-bar); }
.oa-nw__lane--neg .oa-nw__fill { fill: var(--negative); }
/* A lane with no dated valuation is an OPEN GAP, never a zero — omitting it would overstate net worth.
   Drawn as a dashed empty slot the full width of the track, so the absence is legible rather than blank. */
.oa-nw__lane--gap .oa-nw__fill {
  fill: none;
  stroke: var(--oa-line-2);
  stroke-width: 1.25;
  stroke-dasharray: 5 4;
}
.oa-nw__wire {
  fill: none;
  stroke: var(--oa-chart-bar);
  stroke-width: 1.5;
  opacity: 0.55;
  transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-nw__wire--neg { stroke: var(--negative); }
.oa-nw__wire--gap { stroke: var(--oa-line-2); stroke-dasharray: 4 4; }
.oa-nw__spine { stroke: var(--oa-line-2); stroke-width: 1.25; }
.oa-nw__total {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-nw__asof { fill: var(--oa-ink-2); font-size: 12px; }
/* Isolating a lane fades the others to .30 and leaves the net-worth number exactly where it was. */
.oa-nw__lane,
.oa-nw__wire { transition: opacity var(--oa-state) var(--ease-out); }
.oa-nw__wire.is-dim { opacity: 0.3; }
.oa-nw__lane.is-dim rect { opacity: 0.3; }
.oa-nw__lane.is-dim text { opacity: 0.62; }
.oa-nw__wire.is-on { opacity: 1; stroke-width: 2.25; }
.oa-nw__lane.is-on .oa-nw__amt { fill: var(--oa-ink-0); }

/* ══ ALLOCATION LENS — auditor §5 ════════════════════════════════════════════════════════════════
   40% ring / 60% ranked rows; one cobalt-to-iris tonal family, never six rainbow colours; selecting a
   sector expands its segment by 3px and tints only its row. */
.oa-lens__ring { width: 100%; max-width: 240px; }
.oa-ring__track { stroke: var(--oa-chart-track); }
.oa-ring__seg {
  transition: opacity var(--oa-state) var(--ease-out), stroke-width var(--oa-state) var(--ease-out);
}
.oa-ring__seg.is-dim { opacity: 0.3; }
.oa-ring__seg.is-on { stroke-width: 38; }
.oa-lens__centre {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-lens__row.is-active { background: rgba(120, 103, 242, 0.07); }
.oa-lens__holdings > .oa-fig__label { padding-block: var(--sp-12) var(--sp-4); }

/* ══ FUND X-RAY — auditor §6 ═════════════════════════════════════════════════════════════════════
   Holdings are measured bars on a #20283A track, filled #687CFF, selected #9A71FF. No glowing magenta. */
.oa-xray__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-16) var(--sp-24);
  padding-block: var(--sp-16);
  border-block: 1px solid var(--oa-line-0);
}
.oa-xray__hold {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 3fr) 46px;
  align-items: center;
  gap: var(--sp-16);
  min-height: 34px;
}
.oa-xray__hnm { color: var(--oa-ink-1); font-size: var(--fs-14); }
.oa-xray__hpct {
  color: var(--oa-ink-0);
  font-size: var(--fs-14);
  font-weight: 650;
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-xray__bar {
  display: block;
  height: 8px;
  border-radius: 3px;
  background: var(--oa-chart-track);
  overflow: hidden;
}
.oa-xray__bar-fill {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: 3px;
  background: var(--oa-chart-bar);
}
.oa-xray__hold:hover .oa-xray__bar-fill { background: var(--oa-chart-bar-sel); }

/* Monthly-flow node: a bounded canvas for a value INSIDE a diagram — the one legitimate rectangle in
   a flow, per the container test (a chart requiring a visual boundary gets a panel). */
.oa-node__box {
  fill: var(--oa-surface-1);
  stroke: var(--oa-line-1);
  stroke-width: 1;
}
.oa-node__box--out {
  fill: var(--oa-surface-2);
  stroke: var(--oa-line-2);
}

/* ══ LEARN EDITORIAL DIAGRAMS — auditor §7 ═══════════════════════════════════════════════════════
   "For Learn, do not use dashboard charts. Use editorial diagrams." One dominant dark graphic per
   article: labelled axes, cash-flow markers large enough to read, annotations connected by hairlines,
   and one key takeaway set INTO the diagram with no card around it. */
.oa-lh__axis { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-lh__axt {
  fill: var(--oa-chart-axis);
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}
.oa-lh__line {
  stroke: var(--oa-chart-line);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oa-lh__line--b { stroke: var(--oa-chart-cmp); stroke-width: 1.5; }
.oa-lh__end { fill: var(--oa-chart-pt); stroke: var(--oa-chart-pt-ring); stroke-width: 3; }
.oa-lh__stem { stroke: var(--oa-chart-cmp); stroke-width: 1.25; }
.oa-lh__cf { fill: var(--oa-iris); }
.oa-lh__cflab {
  fill: var(--oa-chart-axis);
  font-size: 12px;
  font-weight: 500;
}
.oa-lh__note {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 620;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-lh__note--b { fill: var(--oa-ink-2); font-weight: 520; }
.oa-lh__leader { stroke: var(--oa-line-2); stroke-width: 1; }
.oa-lh__brk { stroke: var(--oa-chart-line); stroke-width: 1.5; fill: none; }
.oa-lh__brk--b { stroke: var(--oa-chart-cmp); }
.oa-lh__brkl {
  fill: var(--oa-ink-1);
  font-family: var(--ff-display);
  font-size: 12.5px;
  font-weight: 600;
}
/* The takeaway is TYPE, not a box. */
.oa-lh__take {
  fill: var(--oa-ink-1);
  font-size: 13.5px;
  font-weight: 500;
}
.oa-lh__gap { stroke: var(--warning); stroke-width: 2; }
.oa-lh__div { fill: var(--positive); }
.oa-lh__lump { fill: var(--oa-chart-bar); }
.oa-lh__hold { fill: var(--oa-chart-bar); opacity: 0.42; }
.oa-lh__hold--b { fill: var(--oa-iris); opacity: 0.42; }
.oa-lh__braid { stroke: var(--oa-chart-line); stroke-width: var(--w); opacity: 0.62; }
.oa-lh__track { fill: var(--oa-chart-track); }
.oa-lh__now { fill: var(--oa-chart-bar); }
/* The trace ends in numbered evidence anchors that match the numbered finding rows beneath it, so the
   diagram POINTS AT the evidence instead of restating it in type too small to read. */
.oa-ht__anchor {
  fill: var(--oa-surface-2);
  stroke: var(--oa-chart-line);
  stroke-width: 1.5;
}
.oa-ht__anchor-n {
  fill: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 650;
}
.oa-ht__branchg.is-on .oa-ht__anchor { fill: var(--oa-cobalt); stroke: var(--oa-cobalt); }
.oa-ht__branchg.is-dim { opacity: 0.28; }
.oa-ht__f-n {
  grid-area: n;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--oa-chart-line);
  color: var(--oa-ink-0);
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 650;
}
.oa-ht__finding.is-active .oa-ht__f-n {
  background: var(--oa-cobalt);
  border-color: var(--oa-cobalt);
  color: var(--on-brand);
}

/* An element removed by a scene toggle (`Fund only` drops the benchmark series; `India` drops the US
   lane). It collapses rather than leaving a hole — the plot has a fixed viewBox, so a hidden series
   cannot reflow the chart either — and it leaves the accessibility tree with the pixels. */
.is-off { display: none; }


/* ── W-09 — the LIVE Research workspace ──────────────────────────────────────────────────────────────────────
   Same `.oa-rw` component as the fixture preview. The live variant is the whole research flow: category-first
   browsing, a scannable list whose three return columns are the sort controls, a compare toggle on every row,
   a preview that stays alongside while the list scrolls (the PAGE scrolls — there is no inner scroll box, which
   is where the scrollbar-on-the-text defect came from), a docked basket with removable chips, and the compare
   sheet. Grid areas are re-declared so the browse, state and basket rows span both columns. */
.oa-rw--live {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.75fr);
  /* The tray docks under the RESULTS column only. Spanning both columns put it over the preview's action
     button on a short viewport (1280x720: 'the tray intercepts pointer events', 2026-09-03). */
  grid-template-areas: "search search" "browse browse" "state state" "table drawer" "tray drawer";
  align-items: start;
}
.oa-rw--live .oa-rw__search { position: relative; }
.oa-rw__input {
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  color: var(--oa-ink-0);
  font: inherit;
  font-size: var(--fs-body-l);
  appearance: none;
}
.oa-rw__input::placeholder { color: var(--oa-ink-3); }
.oa-rw__input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }
/* The ring goes on the whole search bar, not the bare input: the input has no border of its own, so a ring
   drawn on it would float inside the bar with nothing to describe. */
.oa-rw__input:focus { outline: none; }
.oa-rw--live .oa-rw__search:focus-within {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--oa-cobalt);
}
.oa-rw--live .stateregion { grid-area: state; }

/* ── browse: asset class, then that class's categories with their scheme counts ── */
.oa-rw__browse { grid-area: browse; display: flex; flex-direction: column; gap: var(--sp-12); }
.oa-rw__seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-self: flex-start;
  padding: 4px;
  background: var(--oa-surface-0);
  border: 1px solid var(--oa-line-1);
  border-radius: var(--oa-r-control);
}
.oa-rw__segbtn {
  position: relative;
  min-height: 36px;
  padding: 0 var(--sp-16);
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--oa-ink-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.oa-rw__segbtn::before { content: ""; position: absolute; inset: -4px 0; }   /* 36px control, 44px target */
.oa-rw__segbtn:hover { color: var(--oa-ink-0); }
.oa-rw__segbtn[aria-pressed="true"] {
  background: var(--oa-surface-2);
  color: var(--oa-ink-0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.oa-rw__segbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__cats { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.oa-rw__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 36px;
  padding: 0 var(--sp-12);
  border: 1px solid var(--oa-line-1);
  border-radius: var(--r-full);
  background: var(--oa-surface-1);
  color: var(--oa-ink-1);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.oa-rw__chip::before { content: ""; position: absolute; inset: -4px 0; }
.oa-rw__chip:hover { border-color: var(--oa-line-2); color: var(--oa-ink-0); }
.oa-rw__chip[aria-pressed="true"] { background: var(--chip); border-color: var(--oa-cobalt); color: var(--oa-ink-0); }
.oa-rw__chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__chipn { color: var(--oa-ink-3); font-weight: 500; }
.oa-rw__chip[aria-pressed="true"] .oa-rw__chipn { color: var(--oa-ink-2); }

/* ── the list: a scannable table whose numeric headers ARE the sort controls ── */
.oa-rw__table { grid-area: table; display: flex; flex-direction: column; min-width: 0; }
.oa-rw__tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding-bottom: var(--sp-12);
}
.oa-rw__plan {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--oa-line-1);
  border-radius: 10px;
  background: var(--oa-surface-0);
}
.oa-rw__planbtn {
  position: relative;
  height: 30px;
  padding-inline: 11px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--oa-ink-2);
  font: inherit;
  font-size: var(--fs-meta);
  font-weight: 620;
  cursor: pointer;
}
.oa-rw__planbtn::before { content: ""; position: absolute; inset: -7px 0; }
.oa-rw__planbtn:hover { color: var(--oa-ink-0); }
.oa-rw__planbtn[aria-pressed="true"] { background: var(--oa-surface-2); color: var(--oa-ink-0); }
.oa-rw__planbtn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.oa-rw__shown { color: var(--oa-ink-3); font-size: var(--fs-meta); }

.oa-rw--live .oa-rw__head,
.oa-rw--live .oa-rw__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px 64px 44px;
  grid-template-areas: none;
  column-gap: var(--sp-8);
  align-items: center;
}
/* The reader's own period is a fourth column that exists only while a period is set. */
.oa-rw--live:not(.is-custom) [data-k="rc"],
.oa-rw--live:not(.is-custom) [data-rw-sort="rc"] { display: none; }
.oa-rw--live.is-custom .oa-rw__head,
.oa-rw--live.is-custom .oa-rw__row { grid-template-columns: minmax(0, 1fr) 64px 64px 64px 108px 44px; }
.oa-rw__hsort[data-rw-sort="rc"] { white-space: nowrap; }
.oa-rw__r[data-k="rc"] { color: var(--oa-cobalt); }
:root[data-theme="light"] .oa-rw__r[data-k="rc"] { color: var(--oa-cobalt-hover); }
.oa-rw__custom { flex-basis: 100%; padding: var(--sp-4) 0 0; }
.oa-rw__custom[hidden] { display: none; }
.oa-rw__head {
  padding: 0 var(--sp-8) var(--sp-8) var(--sp-12);
  border-bottom: 1px solid var(--oa-line-1);
  color: var(--oa-ink-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.oa-rw__hsort {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 4px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.oa-rw__hsort::before { content: ""; position: absolute; inset: -6px -4px; }
.oa-rw__hsort:hover,
.oa-rw__hsort[aria-pressed="true"] { color: var(--oa-ink-0); }
.oa-rw__hsort:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__hdir {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0;
}
.oa-rw__hsort[data-rw-dir="desc"] .oa-rw__hdir { opacity: 1; }
.oa-rw__hsort[data-rw-dir="asc"] .oa-rw__hdir { opacity: 1; transform: rotate(180deg); }

/* No inner scroll box: the page scrolls, the preview stays alongside (sticky), the scrollbar is the
   window's own — never glued to the row text. */
.oa-rw--live .oa-rw__list { display: flex; flex-direction: column; }
.oa-rw--live .oa-rw__row {
  min-height: 60px;
  padding: 0 var(--sp-8) 0 0;
  border: 0;
  border-top: 1px solid var(--oa-line-0);
  border-left: 2px solid transparent;
  background: none;
  cursor: default;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.oa-rw--live .oa-rw__row:first-child { border-top-color: transparent; }
.oa-rw--live .oa-rw__row:hover { background: var(--chip); }
.oa-rw--live .oa-rw__row.is-active { border-left-color: var(--oa-cobalt); background: var(--chip); }
.oa-rw__open {
  display: grid;
  /* The fixture row places `.oa-rw__nm` / `.oa-rw__mt` by named area; without these areas the two spans
     resolve to the same implicit cell and print on top of each other. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "nm" "mt";
  justify-items: stretch;   /* the spans fill the column so their ellipsis can clip; text-align keeps them left */
  gap: 2px;
  min-width: 0;
  min-height: 60px;
  padding: var(--sp-8) var(--sp-12);
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.oa-rw__open:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.oa-rw__open .oa-rw__nm,
.oa-rw__open .oa-rw__mt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oa-rw__r {
  justify-self: end;
  color: var(--oa-ink-0);
  font-size: var(--fs-14);
  font-weight: 620;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-rw__pick {
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--oa-line-2);
  border-radius: 10px;                 /* the site's icon-button shape (the nav toggle is 44px / 12px) */
  background: var(--oa-surface-1);
  color: var(--oa-ink-1);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.oa-rw__pick::before { content: ""; position: absolute; inset: -4px; }
.oa-rw__pick:hover { border-color: var(--oa-cobalt); color: var(--oa-ink-0); }
.oa-rw__pick[aria-pressed="true"] { background: var(--oa-cobalt); border-color: var(--oa-cobalt); color: #fff; }
.oa-rw__pick:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__more {
  align-self: center;
  margin-top: var(--sp-12);
  min-height: 44px;
  padding: 0 var(--sp-24);
  border: 1px solid var(--oa-line-2);
  border-radius: var(--oa-r-control);
  background: var(--oa-surface-1);
  color: var(--oa-ink-0);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.oa-rw__more:hover { border-color: var(--oa-cobalt); }
.oa-rw__more:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* The preview travels with the reader. `.oa-rw__drawer` presentation is owned HERE (it was split with
   scenes.css's panel group once, which the ownership gate now refuses). */
.oa-rw--live .oa-rw__drawer {
  position: sticky;
  top: calc(var(--nav-h) + var(--sp-16));
  /* Never taller than the viewport: a sticky panel taller than the screen keeps its bottom (the action row)
     out of reach until the results column ends. The panel scrolls inside itself instead. */
  max-height: calc(100dvh - var(--nav-h) - var(--sp-16) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), var(--oa-shadow-1);
}
/* ...and the header (label, name, plan line, the action row) is pinned at the panel's top: 'Add to compare' is on
   screen the moment a fund is picked and stays there while the facts scroll inside the panel. */
.oa-rw--live .oa-rw__dhead {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  margin: calc(-1 * var(--sp-16)) calc(-1 * var(--sp-16)) 0;
  padding: var(--sp-16) var(--sp-16) var(--sp-12);
  background: inherit;
  border-bottom: 1px solid var(--oa-line-0);
}
.oa-rw--live .oa-rw__dhead .oa-rw__actions { margin-top: var(--sp-4); }
:root[data-theme="light"] .oa-rw__drawer {
  background: var(--oa-surface-0);
  border-color: var(--oa-line-0);
  box-shadow: var(--shadow-md);
}
.oa-rw__add[aria-pressed="true"] {
  background: var(--chip);
  color: var(--oa-ink-0);
  border-color: var(--oa-cobalt);
}

.oa-rw__sub { color: var(--oa-ink-2); font-size: var(--fs-meta); }
.oa-rw__charttitle {
  margin-top: var(--sp-4);
  color: var(--oa-ink-3);
  font-size: var(--fs-label);
  font-weight: var(--fw-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Up to four real observations, four labelled bars, on a real zero baseline. An inline SVG (like every
   other chart on the site), not a stack of styled divs: bars are graphics, and the density probe counts a
   graphic where it counted a 100px run of empty spans. Not a line: a line between 1Y, 3Y and 5Y would draw
   values the fund never published (§12.1). */
.oa-rw__chart { display: block; width: 100%; height: auto; margin-top: var(--sp-8); overflow: visible; }
.oa-rw__baseline { stroke: var(--oa-line-1); stroke-width: 1; }
.oa-rw__barfill { fill: var(--oa-chart-bar); }
.oa-rw__bar.is-neg .oa-rw__barfill { fill: var(--oa-negative); }
.oa-rw__chart text { stroke: none; font-family: var(--ff-body); }
.oa-rw__barval {
  fill: var(--oa-ink-0);
  font-size: 12.5px;
  font-weight: 620;
  font-variant-numeric: tabular-nums lining-nums;
}
.oa-rw__barkey { fill: var(--oa-ink-3); font-size: 11px; font-weight: 500; }

.oa-rw__actions { display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; margin-top: var(--sp-8); }
.oa-rw__actions .oa-rw__add { margin-top: 0; }
/* A real <button> now, so it needs the reset the styled <span> never did. */
button.oa-rw__add {
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  transition: background-color var(--dur-button-hover) var(--ease-standard);
}
button.oa-rw__add:hover:not(:disabled) { background: var(--oa-cobalt-hover); }
button.oa-rw__add:active:not(:disabled) { background: var(--oa-cobalt-pressed); }
button.oa-rw__add:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button.oa-rw__add:disabled {
  background: var(--chip);
  color: var(--oa-ink-2);
  border-color: var(--oa-line-1);
  cursor: default;
}
.oa-rw__absent {
  margin: var(--sp-8) 0 0;
  color: var(--oa-ink-3);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
}

/* ── the basket: docked at the bottom of the viewport while the workspace is on screen, chips you can
   remove one by one, one Clear, one Compare. It is the selection's only home; the sheet reads it. ── */
.oa-rw__tray {
  grid-area: tray;
  position: sticky;
  bottom: var(--sp-16);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  flex-wrap: wrap;
  padding: var(--sp-12) var(--sp-16);
  background: var(--oa-surface-2);
  border: 1px solid var(--oa-line-2);
  border-radius: var(--oa-r-surface);
  box-shadow: var(--shadow-lg);
}
.oa-rw__traylbl { color: var(--oa-ink-0); font-weight: 620; font-size: var(--fs-14); white-space: nowrap; }
.oa-rw__traychips { display: flex; flex-wrap: wrap; gap: var(--sp-8); flex: 1; min-width: 0; }
.oa-rw__trayclear {
  min-height: 44px;
  padding: 0 var(--sp-12);
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--oa-ink-2);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
}
.oa-rw__trayclear:hover { color: var(--oa-ink-0); background: var(--oa-surface-3); }
.oa-rw__trayclear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-rw__traygo { margin-left: auto; }
.oa-rw__traygo[aria-disabled="true"] { opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .oa-rw__tray:not([hidden]) { animation: oa-rw-tray-in var(--dur-emphasized) var(--ease-standard) both; }
  @keyframes oa-rw-tray-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* ── the compare sheet: a real <dialog>. The browser owns the top layer, the backdrop, Esc, focus
   containment and the inert page behind it. Same surface grammar as every panel on the site. ── */
.oa-sheet {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--oa-line-2);
  border-radius: var(--oa-r-plane);
  background: var(--oa-surface-1);
  color: var(--oa-ink-0);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.oa-sheet[open] { display: flex; flex-direction: column; }
.oa-sheet::backdrop { background: rgba(6, 9, 16, .62); }
:root[data-theme="light"] .oa-sheet::backdrop { background: rgba(17, 22, 31, .42); }
.oa-sheet__head {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) var(--sp-24);
  border-bottom: 1px solid var(--oa-line-1);
  background: var(--oa-surface-2);
}
.oa-sheet__id { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.oa-sheet__title {
  margin: 0;
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--oa-ink-0);
}
.oa-sheet__link { font-size: var(--fs-14); white-space: nowrap; }
.oa-sheet__close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--oa-line-2);
  border-radius: var(--r-12);
  background: var(--oa-surface-1);
  color: var(--oa-ink-1);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.oa-sheet__close::before { content: ""; position: absolute; inset: -4px; }
.oa-sheet__close:hover { color: var(--oa-ink-0); border-color: var(--oa-cobalt); }
.oa-sheet__close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.oa-sheet__body { overflow-y: auto; padding: var(--sp-24); overscroll-behavior: contain; }
.oa-sheet__body .oa-fig { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .oa-sheet[open] { animation: oa-sheet-in var(--dur-emphasized) var(--ease-standard); }
  .oa-sheet[open]::backdrop { animation: oa-sheet-fade var(--dur-standard) linear; }
  @keyframes oa-sheet-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes oa-sheet-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media (max-width: 720px) {
  /* Pinned to all four edges of the top layer, so it is the whole screen exactly — not `100vw`, which
     measures a hair short of the layout viewport on a phone. */
  .oa-sheet { inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .oa-sheet__head { padding: var(--sp-12) var(--sp-16); }
  .oa-sheet__link { display: none; }
  .oa-sheet__body { padding: var(--sp-16); }
}

@media (max-width: 900px) {
  .oa-rw--live {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "search" "browse" "state" "table" "drawer" "tray";
  }
  .oa-rw--live .oa-rw__drawer { position: static; max-height: none; overflow: visible; }
  .oa-rw--live .oa-rw__dhead { position: static; }
  .oa-rw--live .oa-rw__head,
  .oa-rw--live .oa-rw__row,
  .oa-rw--live.is-custom .oa-rw__head,
  .oa-rw--live.is-custom .oa-rw__row { grid-template-columns: minmax(0, 1fr) 72px 44px; }
  .oa-rw__r[data-k="r1"],
  .oa-rw__r[data-k="r5"],
  .oa-rw__hsort[data-rw-sort="r1"],
  .oa-rw__hsort[data-rw-sort="r5"] { display: none; }
  /* On a phone one number fits: the 3Y column, or the reader's period when one is set. */
  .oa-rw--live.is-custom .oa-rw__r[data-k="r3"],
  .oa-rw--live.is-custom .oa-rw__hsort[data-rw-sort="r3"] { display: none; }
}