/* ==========================================================================
   Anomaly Wealth — Mutual Fund Intelligence
   Institutional research interface. One dark theme, restrained palette,
   tabular numerics, dense tables.

   1  Tokens          6  Metrics
   2  Reset & type    7  Tables
   3  Shell & nav     8  Chart
   4  Search          9  Page modules
   5  Controls       10  Responsive
   ========================================================================== */

/* -- 1 Tokens ------------------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Canvas and elevation */
  --bg:               #0a0c0f;
  --surface:          #101318;
  --surface-secondary:#161a20;
  --surface-2:        var(--surface-secondary);
  --surface-raised:   #1b2026;

  /* Lines */
  --border:           #262c34;
  --border-subtle:    #1b2027;
  --border-strong:    #39424e;

  /* Text */
  --text:             #e6eaf0;
  --text-secondary:   #a3adba;
  --muted:            #8b95a3;

  /* Signal — used sparingly, always paired with a label or glyph */
  --accent:           #f0b429;
  --accent-soft:      #2e2515;
  --accent-line:      #6b5522;
  --positive:         #4bbf9a;
  --positive-soft:    #14291f;
  --negative:         #f1746b;
  --negative-soft:    #2c1a1b;
  --warning:          #d9a441;
  --info:             #7fa8cc;

  /* Type */
  --sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SFMono-Regular", "Roboto Mono", monospace;

  /* Rhythm */
  --gutter: 32px;
  --page:   1640px;
  --radius: 3px;
  --row:    34px;               /* one table row; scroll caps are multiples */
  --chrome: 134px;              /* sticky header height, for scroll anchors */
}

/* -- 2 Reset & typography ------------------------------------------------ */
* { box-sizing: border-box }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  scroll-padding-top: var(--chrome);
}

body { margin: 0; min-width: 280px; -webkit-font-smoothing: antialiased }

button, input, select { font: inherit }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent }

a { color: var(--text); text-decoration: none }
a:hover { color: var(--accent) }
a, button { transition: background-color .12s, color .12s, border-color .12s }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1, h2, h3, p { margin-top: 0 }
h1 { font-size: 30px; font-weight: 600; letter-spacing: -.6px; line-height: 1.18; margin-bottom: 10px }
h2 { font-size: 17px; font-weight: 600; letter-spacing: -.2px; margin-bottom: 6px }
h3 { font-size: 13px; font-weight: 600; margin: 0 }
p  { line-height: 1.6; color: var(--text-secondary) }

small, .caption { font-size: 11.5px; color: var(--muted); line-height: 1.5 }

/* Every figure on the site is tabular so columns align when values change. */
.num, .metric strong, .rank-list strong, .comparison-value strong,
.activity-summary strong, .chart-readout strong, td, th {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Label voice: small, spaced, uppercase. Deliberately NOT monospace — the
   slashed zero in the Windows/macOS mono faces reads as a B at these sizes,
   and every label here carries a year or a figure. */
.eyebrow, .rank-caption, .data-status span, .search-group, .method-index {
  text-transform: uppercase;
  letter-spacing: 1.4px;
  font-variant-numeric: tabular-nums;
}

/* Paired with a word or a glyph everywhere it is used: colour is never the
   only carrier of direction. The class names match presentation.sign(). */
.up   { color: var(--positive) }
.down { color: var(--negative) }
.flat { color: var(--text-secondary) }

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.skip:focus {
  clip: auto; width: auto; height: auto; left: 12px; top: 12px;
  background: var(--surface); padding: 12px; z-index: 100;
}

[hidden] { display: none !important }

/* -- 3 Shell & navigation ------------------------------------------------ */
.shell {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.command {
  max-width: var(--page); margin: auto;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
}

.brand { display: flex; gap: 11px; align-items: center; flex-shrink: 0 }

/* Square amber lockup. Letters keep normal spacing so the mark stays legible. */
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #17130a;
  font: 700 13px/1 var(--sans); letter-spacing: .5px;
  border-radius: var(--radius);
}

.brand-text { display: block; font-size: 12px; font-weight: 650; letter-spacing: 1px }
.brand-text small {
  display: block; font-weight: 400; font-size: 11.5px;
  letter-spacing: .1px; color: var(--text-secondary); margin-top: 3px;
}

.data-status { padding-left: 20px; border-left: 1px solid var(--border); white-space: nowrap }
.data-status span { display: block; font-size: 9px; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 4px }
.data-status strong { font-size: 12px; font-weight: 600; letter-spacing: .4px; font-variant-numeric: tabular-nums }

.trade { font-size: 12px; color: var(--text-secondary); white-space: nowrap }

.navigation {
  max-width: var(--page); margin: auto;
  display: flex; justify-content: space-between; padding: 0 var(--gutter);
}

.desktop-nav { display: flex; gap: 22px }
.desktop-nav a {
  display: block; padding: 12px 0; font-size: 12px;
  color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.desktop-nav a[aria-current] { color: var(--accent); border-color: var(--accent) }

.nav-note { font-size: 11px; color: var(--muted); align-self: center }
.mobile-nav { display: none }

main { max-width: var(--page); margin: auto; padding: 24px var(--gutter) 60px }
main > * { min-width: 0 }

footer { border-top: 1px solid var(--border); padding: 22px var(--gutter); max-width: var(--page); margin: auto }
.footer-row {
  display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.footer-row strong { font-size: 10px; font-weight: 500; color: var(--text-secondary); letter-spacing: .8px }
.footer-row nav { display: flex; gap: 20px }
footer p { font-size: 10px; line-height: 1.8; max-width: 1120px; color: var(--muted); margin: 16px 0 0 }

/* -- 4 Global search ----------------------------------------------------- */
.global-search { position: relative; flex: 1; max-width: 520px; margin-left: auto }

.global-search form {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); background: var(--surface);
  padding: 0 12px; border-radius: var(--radius);
}
.global-search form:focus-within { border-color: var(--accent) }
.global-search form > span { font-size: 15px; color: var(--muted); line-height: 1 }
.global-search input[type=search] {
  flex: 1; border: 0; background: transparent; width: 100%;
  padding: 10px 0; color: var(--text); outline: none; min-width: 0;
}

kbd {
  font: 11px var(--mono); border: 1px solid var(--border);
  color: var(--muted); padding: 1px 5px; border-radius: 2px;
}

.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  background: var(--surface-secondary); border: 1px solid var(--border-strong);
  box-shadow: 0 16px 40px #000a; max-height: 420px; overflow: auto; padding: 5px;
  border-radius: var(--radius);
}
.search-results a { display: block; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle) }
.search-results a:last-child { border-bottom: 0 }
.search-results a:hover, .search-results a:focus { background: var(--surface-raised); color: var(--accent) }
.search-results small { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .3px }
.search-results p { padding: 12px; margin: 0; font-size: 12px }
.search-group { padding: 8px 12px 6px; font-size: 9.5px; color: var(--muted) }

/* -- 5 Controls ---------------------------------------------------------- */
.button {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 36px; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #17130a;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.button:hover { background: #ffc94d; color: #17130a }
.button.secondary { background: var(--surface); border-color: var(--border); color: var(--text-secondary) }
.button.secondary:hover { border-color: var(--border-strong); color: var(--text) }

input[type=search], select {
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); background: var(--surface); padding: 9px 11px; min-width: 0;
}
input::placeholder { color: var(--muted); opacity: 1 }

.badge {
  display: inline-block; border: 1px solid var(--border); border-radius: 2px;
  font-size: 10px; padding: 4px 7px; color: var(--text-secondary);
  white-space: nowrap; font-weight: 400;
}
/* Direction badges carry both a glyph and a word, so colour is never the only cue. */
.badge.up   { color: var(--positive); border-color: #2c5849; background: var(--positive-soft) }
.badge.down { color: var(--negative); border-color: #5c3230; background: var(--negative-soft) }
.badge.flag { color: var(--warning); border-color: var(--accent-line); background: var(--accent-soft) }

.tabs {
  display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin;
  border-bottom: 1px solid var(--border); margin-bottom: 20px; padding-bottom: 8px;
}
.tabs a {
  white-space: nowrap; padding: 8px 11px; font-size: 12px;
  color: var(--text-secondary); border-radius: var(--radius);
}
.tabs a[aria-current] { background: var(--accent-soft); color: var(--accent) }
.tabs a:hover { background: var(--surface-secondary) }

.notice {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; background: var(--surface);
  border: 1px solid var(--border); border-left: 2px solid var(--border-strong);
  margin-bottom: 20px; border-radius: var(--radius);
}
.notice p { font-size: 12px; margin: 0 }
.notice.review { border-left-color: var(--warning) }

.disclosure {
  border: 1px solid var(--border); background: var(--surface);
  padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius);
}
.disclosure summary { cursor: pointer; font-size: 13px; font-weight: 500 }
.disclosure summary span { color: var(--muted); font-size: 11px; font-weight: 400; margin-left: 12px }
.disclosure[open] summary { margin-bottom: 18px }
.disclosure p { max-width: 900px; font-size: 12.5px }
.disclosure > a { color: var(--accent); font-size: 12px }

.state-filter, .month-select {
  display: flex; align-items: flex-end; gap: 10px; font-size: 11px;
}
.state-filter { align-items: center; margin-bottom: 14px }

/* Coverage meter: a native <meter>, so the bar needs no inline style under CSP. */
.coverage-meter {
  width: 52px; height: 5px; margin-left: 8px; vertical-align: middle;
  appearance: none; -webkit-appearance: none; background: var(--border-subtle); border: 0;
}
.coverage-meter::-webkit-meter-bar { background: var(--border-subtle); border: 0; height: 5px }
.coverage-meter::-webkit-meter-optimum-value { background: var(--accent-line) }
.coverage-meter::-moz-meter-bar { background: var(--accent-line) }

/* -- 6 Metric strips ----------------------------------------------------- */
.kpis, .activity-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border); background: var(--surface);
  margin-bottom: 26px; border-radius: var(--radius); overflow: hidden;
}

.metric { min-width: 0; padding: 16px 20px; border-right: 1px solid var(--border) }
.metric:last-child { border-right: 0 }
.metric-label { display: block; color: var(--text-secondary); font-size: 11px; margin-bottom: 9px }
.metric strong {
  display: block; font-size: 27px; font-weight: 550;
  letter-spacing: -.7px; line-height: 1.15;
}
.metric small { display: block; font-size: 11px; margin-top: 7px }
.metric .date-value { font-size: 21px; letter-spacing: -.3px }
.date-value span { color: var(--muted) }

.activity-strip { background: transparent }
.activity-strip .metric { padding: 14px 20px }
.activity-strip strong { font-size: 21px }

/* A compact secondary figure beside the headline value. */
.metric-delta { font-size: 12px; font-weight: 500; margin-left: 9px; letter-spacing: 0 }

.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 14px;
}
.section-heading h2 { margin: 0 }
.section-heading p { font-size: 12px; margin: 5px 0 0 }
.section-heading > a { color: var(--accent); font-size: 12px; flex-shrink: 0; white-space: nowrap }

.caption { margin: 10px 0 20px }

.panel {
  min-width: 0; background: var(--surface); padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 22px;
}
.panel.flush { padding-bottom: 6px }

/* -- 7 Tables ------------------------------------------------------------ */
.tablewrap {
  max-width: 100%; overflow: auto; position: relative;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) var(--surface);
}
/* Capped tables scroll. Row height varies with wrapped cells, so the edge is
   faded: a partial row then reads as "more below", never as a clipped render. */
.tablewrap[data-rows] {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), #0000);
  mask-image: linear-gradient(#000 calc(100% - 26px), #0000);
}
.tablewrap[data-rows="12"] { max-height: calc(var(--row) * 12 + 34px) }
.tablewrap[data-rows="16"] { max-height: calc(var(--row) * 16 + 34px) }
.tablewrap[data-rows="20"] { max-height: calc(var(--row) * 22 + 34px) }

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px }

th, td {
  padding: 8px 10px; border-bottom: 1px solid var(--border-subtle);
  text-align: right; white-space: nowrap; height: var(--row);
}

th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-secondary);
  font-size: 10px; font-weight: 500; color: var(--text-secondary);
  letter-spacing: .3px; text-transform: uppercase;
}

/* First column is the row's identity: left aligned, pinned, width-bounded. */
th:first-child, td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--surface);
  min-width: 170px; max-width: 330px; white-space: normal; overflow-wrap: anywhere; z-index: 1;
}
th:first-child { z-index: 3; background: var(--surface-secondary) }
td:first-child a { font-weight: 500; line-height: 1.45; display: block }
td a:hover { text-decoration: underline }

td { transition: background-color .1s }
tbody tr:hover td { background: var(--surface-raised) }
tbody tr:hover td:first-child { background: var(--surface-raised) }
tbody tr:last-child td { border-bottom: 0 }

.cell-meta { display: block; font-size: 10px; letter-spacing: .4px; margin-top: 3px; color: var(--muted) }
/* Annotation under a primary figure: a share, a percentage, a denominator. */
.cell-note { display: block; font-size: 10px; margin-top: 3px; color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums }
.text-cell { text-align: left; max-width: 220px; white-space: normal }
.emphasis { color: var(--accent); font-weight: 600 }
.secondary-cell { color: var(--muted) }

/* Sort affordance lives in the header button, state shown by the arrow. */
th button {
  padding: 0; background: none; border: none; color: inherit; cursor: pointer;
  text-align: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap;
}
th button::after { content: ' ↕'; opacity: .4 }
th[aria-sort=ascending] button::after  { content: ' ↑'; opacity: 1; color: var(--accent) }
th[aria-sort=descending] button::after { content: ' ↓'; opacity: 1; color: var(--accent) }

caption { text-align: left; font-size: 11px; padding: 0 0 10px; color: var(--muted); line-height: 1.5; white-space: normal }

.empty td {
  text-align: center !important; padding: 34px 16px; color: var(--muted);
  white-space: normal; position: static; line-height: 1.6; height: auto;
}

.table-tools {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 12px; font-size: 11px;
}
.table-tools label { color: var(--text-secondary) }
.table-tools input { font-size: 12px; max-width: 300px; flex: 1; min-width: 140px }
.table-count { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums }

.pagination {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding-top: 16px; font-size: 11px; color: var(--muted);
}
.pagination > div { display: flex; gap: 8px }

/* -- 8 Chart ------------------------------------------------------------- */
.chart { min-height: 320px }
.chart-loading { padding: 100px 0; text-align: center; color: var(--muted) }

.chart-tabs { display: flex; gap: 3px; margin-bottom: 12px }
.chart-tabs button {
  cursor: pointer; background: none; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 11px; border-radius: var(--radius); padding: 6px 11px;
}
.chart-tabs button[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line) }

.chart-readout {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; min-height: 34px; font-size: 11px; color: var(--text-secondary);
}
.chart-readout strong { color: var(--text); font-size: 15px; font-weight: 500 }
.chart-readout .flag { font-size: 10.5px; color: var(--warning) }

.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y }
.chart text { fill: var(--muted); font: 10px var(--sans) }
.chart .axis-label { font-size: 9.5px; font-variant-numeric: tabular-nums }
.chart .grid-line { stroke: var(--border-subtle); stroke-width: 1 }
.chart .base-line { stroke: var(--border); stroke-width: 1 }
.chart .series { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round }
.chart .chart-area { fill: url(#chart-fade) }
.chart .crosshair { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3 }
.chart .point { fill: var(--accent); stroke: var(--bg); stroke-width: 2 }
.chart .review-mark { fill: var(--warning); opacity: .8 }

.chart-range {
  width: 100%; accent-color: var(--accent); margin: 4px 0; cursor: ew-resize;
  appearance: none; -webkit-appearance: none; height: 20px; background: transparent;
}
.chart-range::-webkit-slider-runnable-track { height: 2px; background: var(--border) }
.chart-range::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 10px; height: 10px;
  border-radius: 50%; background: var(--accent); margin-top: -4px;
}
.chart-range::-moz-range-track { height: 2px; background: var(--border) }
.chart-range::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--accent) }

.chart-caption { font-size: 10px; color: var(--muted); margin: 4px 0 0 }
.chart .chart-retry { margin: 10px auto; display: block }

/* -- 9 Page modules ------------------------------------------------------ */

/* 9.1 Page head */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 4px 0 22px }
.pagehead > div { min-width: 0 }
.pagehead p:last-child { margin-bottom: 0 }
.pagehead > .button, .pagehead > form, .pagehead > .badge { flex-shrink: 0 }
.eyebrow { font-size: 10px; color: var(--accent); margin-bottom: 10px }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11px; color: var(--muted); margin-bottom: 18px }
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; color: var(--text-secondary); letter-spacing: .3px }
.ticker { padding: 4px 8px; background: var(--surface-secondary); color: var(--text); border: 1px solid var(--border); border-radius: 2px }

/* 9.2 Overview — the month's activity leads, coverage follows */
.lede { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 22px }
.lede-item { font-size: 12px; color: var(--text-secondary) }
.lede-item strong { font-size: 19px; font-weight: 550; color: var(--text); margin-right: 6px }
.lede-note { margin-left: auto; font-size: 11px; color: var(--muted) }
.lede-note a { color: var(--accent) }

.rank-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius); overflow: hidden;
}
.rank-panel { min-width: 0; border-right: 1px solid var(--border); padding: 15px 16px 10px }
.rank-panel:nth-child(3n) { border-right: 0 }
.rank-panel:nth-child(-n+3) { border-bottom: 1px solid var(--border) }
.rank-title, .rank-caption { display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.rank-title a { color: var(--accent); font-size: 13px }
.rank-caption { font-size: 9px; color: var(--muted); letter-spacing: .8px; margin: 12px 0 2px }

.rank-list { padding: 0; margin: 0; list-style: none }
.rank-list li + li { border-top: 1px solid var(--border-subtle) }
.rank-list a {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline; padding: 8px 0;
}
.rank-number { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums }
.rank-company { font-size: 12px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere }
.rank-company small { display: block; font-weight: 400; font-size: 10px; margin-top: 2px }
.rank-list strong { font-size: 14px; font-weight: 550; white-space: nowrap }
.rank-list li.empty { padding: 14px 0; font-size: 11px; color: var(--muted); list-style: none }

/* Coverage context: a quiet strip, not a marketing column. */
.coverage-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-top: 26px;
}
.coverage-cell { padding: 14px 18px; border-right: 1px solid var(--border); min-width: 0 }
.coverage-cell:last-child { border-right: 0 }
/* Direct child only: a descendant selector here would also turn the status dot
   and the date-range dash into blocks. */
.coverage-cell > span { display: block; font-size: 10.5px; color: var(--muted); margin-bottom: 7px }
.coverage-cell strong { font-size: 17px; font-weight: 550 }
.coverage-cell .date-value { font-size: 15px; white-space: nowrap }
.coverage-cell small { display: block; margin-top: 5px }
.coverage-cell a { color: var(--accent); font-size: 11px }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--positive); display: inline-block; margin-right: 8px }

/* 9.3 Stock detail */
.ownership-layout { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(250px, 1fr); gap: 22px }
.chart-panel { margin-bottom: 22px }

.comparison-panel { padding: 16px 0 20px 2px }
.comparison-value { padding: 14px 0; border-bottom: 1px solid var(--border) }
.comparison-value > span, .comparison-value small { display: block; font-size: 11px; color: var(--text-secondary) }
.comparison-value strong { font-size: 25px; font-weight: 500; display: block; margin: 8px 0 }
.comparison-value .pct { font-size: 13px; color: var(--muted); margin-left: 8px; font-weight: 400 }
.comparison-panel p { font-size: 12px; margin: 16px 0 10px }
.comparison-panel > a { color: var(--accent); font-size: 12px }

/* Panels size to their own content: a short table must not leave a tall
   empty box beside a long one. */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start }
.grid2 > .panel { margin-bottom: 0 }

/* 9.4 Explorer filters */
.explorer-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin: 0 0 22px;
}
.explorer-field { display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.explorer-field label { font-size: 10.5px; color: var(--muted); letter-spacing: .3px }
.explorer-field.grow { flex: 1; min-width: 220px; max-width: 460px }
.explorer-field input { width: 100% }
.explorer-search { margin: 0 0 22px; max-width: 620px }
.explorer-search label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 7px }
.explorer-search > div { display: flex; gap: 8px; align-items: center }
.explorer-search input { flex: 1 }

/* 9.5 Methodology */
.pipeline {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  list-style: none; margin: 0 0 32px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.pipeline li {
  padding: 15px 14px; border-right: 1px solid var(--border);
  font-size: 11.5px; line-height: 1.45; background: var(--surface);
}
.pipeline li:last-child { border-right: 0 }
.pipeline li:last-child span { color: var(--positive) }
.pipeline span { display: block; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px }

.method-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 44px; margin-bottom: 36px }
.method-nav {
  align-self: start; position: sticky; top: var(--chrome);
  display: flex; flex-direction: column; gap: 12px; padding: 10px 0; font-size: 12px;
}
.method-nav a { color: var(--text-secondary) }
.method-nav a:hover { color: var(--accent) }
.method-content article {
  display: flex; gap: 22px; border-bottom: 1px solid var(--border);
  padding: 20px 0; scroll-margin-top: var(--chrome);
}
.method-content article:first-child { padding-top: 8px }
.method-index { font-size: 10.5px; color: var(--muted); padding-top: 3px }
.method-content p { max-width: 840px; font-size: 13.5px; margin-bottom: 0 }
.method-equation { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; align-items: center; margin-top: 18px }
.method-equation span { padding: 10px 12px; background: var(--surface-secondary); border: 1px solid var(--border); border-radius: 2px }
.method-equation strong { color: var(--accent) }

.coverage-directory { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px }
.coverage-directory a {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 12px;
}
.coverage-directory strong { font-weight: 400; color: var(--muted); white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums }

.prose { max-width: 800px }
.prose h2 { margin-top: 30px }
.prose a { color: var(--accent) }

.error-page { max-width: 700px; padding: 64px 0 96px }
.error-page h1 { font-size: 38px }
.error-page > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }

/* 9.6 Monthly flows */
.flow-rank { padding: 15px 18px 11px }
.flow-rank .rank-title h3 { margin: 0 }
.rank-unit {
  font-size: 9px; color: var(--muted); letter-spacing: 1.4px;
  text-transform: uppercase; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Same three-column measure as the ownership rank lists, for rows that are
   not links because a scheme category has no page of its own. */
.rank-row {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px; align-items: baseline; padding: 8px 0;
}
.chart .flow-bar { stroke: none }
.chart .flow-bar.up { fill: var(--positive) }
.chart .flow-bar.down { fill: var(--negative) }

/* -- 10 Responsive ------------------------------------------------------- */
@media (min-width: 1700px) {
  h1 { font-size: 34px }
  .rank-company { font-size: 12.5px }
}

@media (max-width: 1240px) {
  :root { --gutter: 22px }
  .command { gap: 16px }
  .trade, .nav-note { display: none }
  .rank-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .rank-panel:nth-child(3n) { border-right: 1px solid var(--border) }
  .rank-panel:nth-child(2n) { border-right: 0 }
  .rank-panel:nth-child(-n+4) { border-bottom: 1px solid var(--border) }
  .grid2 { gap: 18px }
  .panel { padding: 15px }
  .metric { padding: 15px }
  .metric strong { font-size: 24px }
  .pipeline { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .pipeline li { border-bottom: 1px solid var(--border) }
  .coverage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .coverage-cell:nth-child(2n) { border-right: 0 }
  .coverage-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border) }
}

@media (max-width: 860px) {
  :root { --chrome: 172px }
  .command { padding: 12px 18px; flex-wrap: wrap; gap: 12px }
  .brand { flex: 1 }
  .data-status { margin-left: auto }
  .global-search { order: 3; flex-basis: 100%; max-width: none; margin: 0 }
  .desktop-nav { display: none }
  .navigation { padding: 0 18px }

  .mobile-nav { display: block; width: 100%; padding: 0 }
  .mobile-nav summary {
    padding: 11px 0; cursor: pointer; font-size: 12px; list-style: none;
    display: flex; justify-content: space-between;
  }
  .mobile-nav summary::-webkit-details-marker { display: none }
  .mobile-nav nav { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px 0 14px }
  .mobile-nav a { padding: 11px; font-size: 12px; background: var(--surface); border-radius: var(--radius) }
  .mobile-nav a[aria-current] { color: var(--accent); background: var(--accent-soft) }

  main { padding: 20px 18px 36px }
  .flow-rank { padding: 14px 15px 10px }
  .pagehead { align-items: flex-start; flex-direction: column; gap: 16px }
  h1 { font-size: 26px }
  .pagehead p { font-size: 13px }

  .kpis, .activity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .metric:nth-child(2) { border-right: 0 }
  .kpis .metric:nth-child(-n+2), .activity-strip .metric:nth-child(-n+2) { border-bottom: 1px solid var(--border) }

  .ownership-layout, .grid2 { grid-template-columns: minmax(0, 1fr); gap: 0 }
  .grid2 > .panel { margin-bottom: 20px }
  .comparison-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 0 0 20px }
  .comparison-panel > .eyebrow, .comparison-panel > p, .comparison-panel > a { grid-column: 1 / -1 }
  .comparison-panel > .eyebrow { margin: 0 }

  .method-layout { grid-template-columns: minmax(0, 1fr); gap: 16px }
  .method-nav {
    position: static; flex-direction: row; flex-wrap: wrap; gap: 12px;
    border-bottom: 1px solid var(--border); padding-bottom: 18px;
  }
  .method-nav > .eyebrow { width: 100%; margin: 0 }
  .method-content article { gap: 14px }
  .coverage-directory { grid-template-columns: 1fr }

  .lede-note { margin-left: 0; width: 100% }
  .section-heading { align-items: flex-start }
  .notice { align-items: flex-start; flex-direction: column; gap: 10px }
  footer { padding: 22px 18px }
  .table-tools label { width: 100% }
  .table-tools input { max-width: none }
  .pagination { align-items: flex-start; flex-wrap: wrap }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .explorer-field.grow { max-width: none; flex-basis: 100% }
}

@media (max-width: 520px) {
  :root { --chrome: 20px }
  .shell { position: relative }
  .command { padding: 12px 14px }
  .navigation { padding: 0 14px }
  .brand-text { font-size: 10.5px; letter-spacing: .6px }
  .brand-text small { font-size: 10px }
  .brand-mark { width: 30px; height: 30px; font-size: 11.5px }
  .data-status { padding-left: 10px }
  .data-status strong { font-size: 10px }
  .data-status span { font-size: 8px }
  .global-search input[type=search] { font-size: 12px }

  main { padding: 18px 14px 32px }
  h1 { font-size: 24px; overflow-wrap: anywhere }
  .pagehead { margin-bottom: 20px }

  .rank-grid, .coverage-strip { grid-template-columns: 1fr }
  .rank-panel, .coverage-cell { border-right: 0; border-bottom: 1px solid var(--border) }
  .rank-panel:last-child, .coverage-cell:last-child { border-bottom: 0 }
  .rank-list li:nth-child(n+5) { display: none }
  /* The flows page ranks six categories and says so in its caption, so it
     shows all six rather than quietly dropping two on a phone. */
  .flow-rank .rank-list li:nth-child(n+5) { display: list-item }

  .metric { padding: 14px 12px }
  .metric-label { font-size: 10px; margin-bottom: 8px }
  .metric strong { font-size: 22px }
  .metric .date-value { font-size: 18px }
  .metric small { font-size: 10px }
  .panel { padding: 13px 12px }
  .section-heading h2 { font-size: 15px }
  .lede-item strong { font-size: 17px }

  th, td { padding: 8px }
  th:first-child, td:first-child { min-width: 140px; max-width: 170px }
  .tablewrap[data-rows] { max-height: calc(var(--row) * 12 + 30px) }

  .comparison-value strong { font-size: 22px }
  .chart-tabs button { padding: 7px 9px; font-size: 10px }
  .chart { min-height: 280px }
  .chart-readout { flex-wrap: wrap; gap: 4px; margin-bottom: 8px }
  .chart-readout strong { font-size: 13px }
  .disclosure { padding: 14px 12px }
  .pipeline li { padding: 13px }
  .method-content p { font-size: 13px }
  .error-page { padding: 36px 0 64px }
  .error-page h1 { font-size: 30px }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important }
}