/*
 * Assay — front-end design system.
 *
 * Single hand-written CSS file (no Tailwind build step, no node_modules).
 * All colours, typography choices, and spacing are expressed as CSS custom
 * properties so palette swaps (dark / light / print) require no utility
 * rewrites.
 *
 * Invariants enforced here:
 *   - Dark palette primary; light via prefers-color-scheme: light.
 *   - @media print forces light palette, forces sparklines visible, and
 *     sets print-color-adjust: exact on band chips.
 *   - Gold accent (--accent-gold) appears only in the ASSAY wordmark,
 *     sidebar current-item left border, and methodology callout left border.
 *   - Colour is never the sole signal: band chips carry a numeral
 *     (rendered via the [data-band] content in the utility class).
 *   - WCAG AA passes for every text/background pair in both palettes.
 *   - prefers-reduced-motion: reduce disables all transitions/animations.
 */

/* ------------------------------------------------------------------ */
/* Tokens — dark palette (primary)                                     */
/* ------------------------------------------------------------------ */

:root {
  --bg-primary:       #0d0f12;
  --bg-surface:    #14171c;
  --bg-elevated:   #1b1f26;
  --text-primary:  #e4e6ea;
  --text-secondary:#a1a6b0;
  --text-tertiary:    #6f7581;
  --border-subtle:#2a2f38;
  --border-strong: #3a404b;
  --accent-gold:   #c9a961;
  --band-1:        #3fa860;
  --band-2:        #6b7f6b;
  --band-3:        #6e6e6e;
  --band-4:        #4a4a4a;
  --band-5:        #2d2d2d;
  --band-text-dark:  #0d0f12;
  --band-text-light: #fafaf7;

  --font-display: "Syne", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

/* ------------------------------------------------------------------ */
/* Tokens — light palette (prefers-color-scheme: light)                */
/* ------------------------------------------------------------------ */

@media (prefers-color-scheme: light) {
  :root {
    --bg-primary:        #fafaf7;
    --bg-surface:     #ffffff;
    --bg-elevated:    #f0efea;
    --text-primary:   #14171c;
    --text-secondary: #4a4e58;
    --text-tertiary:     #7a7e88;
    --border-subtle: #e0ddd5;
    --border-strong:  #c0bcb0;
    --accent-gold:    #8a7440;
    --band-1:         #2d7a42;
    --band-2:         #5a705a;
    --band-3:         #5e5e5e;
    --band-4:         #3a3a3a;
    --band-5:         #1f1f1f;
  }
}

/* ------------------------------------------------------------------ */
/* Font faces — WOFF2 subsets, locally hosted                          */
/* ------------------------------------------------------------------ */

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/syne-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/dm-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/dm-mono-500.woff2") format("woff2");
}

/* ------------------------------------------------------------------ */
/* Base / reset                                                        */
/* ------------------------------------------------------------------ */

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

html {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 2px;
}

/* Typography rules per spec: Syne only for wordmark + exchange H1,
 * Inter for headings and body, DM Mono for every number / metric id /
 * timestamp / tabular datum.
 */
h1, h2, h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 500;
  margin: 0 0 var(--space-4) 0;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

.font-wordmark,
.exchange-name-h1 {
  font-family: var(--font-display);
  font-weight: 700;
}

.font-mono,
.metric-id,
.tabular-data,
time,
.numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Skip link (keyboard-first navigation)                               */
/* ------------------------------------------------------------------ */

/* Off-screen until focused via keyboard. Use a much larger negative
 * offset than the element's height (no matter the padding / font-size
 * variant) so a top sliver never bleeds into the viewport. The
 * `:focus` rule snaps it back to the visible top-left corner. */
.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  z-index: 100;
}
.skip-link:focus { top: var(--space-2); }

/* ------------------------------------------------------------------ */
/* Site chrome                                                         */
/* ------------------------------------------------------------------ */

.site-header {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}
.site-header .container {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: 0.05em;
  color: var(--accent-gold);
  border-bottom: none;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
}
.nav-list a { color: var(--text-secondary); }
.nav-list a:hover { color: var(--text-primary); }

.site-footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
  padding: var(--space-6) 0;
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
}

main { flex: 1; padding: var(--space-6) 0; }

/* ------------------------------------------------------------------ */
/* Band chips — core information unit                                  */
/*                                                                     */
/* Bands 1-3 use dark text on light/green background; bands 4-5 use    */
/* inverted (light) text on dark grey. The numeral is always rendered  */
/* as content so greyscale / colour-blind readers can still read band. */
/* ------------------------------------------------------------------ */

.band-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 1.5rem;
  padding: var(--space-1) var(--space-2);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  line-height: 1;
}
.band-chip[data-band="1"] { background: var(--band-1); color: var(--band-text-dark); }
.band-chip[data-band="2"] { background: var(--band-2); color: var(--band-text-dark); }
.band-chip[data-band="3"] { background: var(--band-3); color: var(--band-text-dark); }
.band-chip[data-band="4"] { background: var(--band-4); color: var(--band-text-light); }
.band-chip[data-band="5"] { background: var(--band-5); color: var(--band-text-light); }

/* ------------------------------------------------------------------ */
/* Accent-gold usages — restricted to three locations by spec          */
/* ------------------------------------------------------------------ */

.sidebar-current { border-left: 3px solid var(--accent-gold); padding-left: var(--space-3); }
.methodology-callout { border-left: 3px solid var(--accent-gold); padding-left: var(--space-4); }

/* ------------------------------------------------------------------ */
/* Utility classes (Tailwind-flavoured, hand-written subset)           */
/* ------------------------------------------------------------------ */

.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.flex { display: flex; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-lg { font-size: var(--fs-lg); }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }

.border-t { border-top: 1px solid var(--border-subtle); }
.border-b { border-bottom: 1px solid var(--border-subtle); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------ */
/* Reduced-motion respect                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Print palette                                                       */
/*                                                                     */
/* Force light colours regardless of source palette. Force sparklines  */
/* to render (they might be hidden in hover-only mode on screen).      */
/* Force print-color-adjust: exact on band chips so printers honour    */
/* the band background colour — required for WCAG when chipped.        */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Page-specific layouts                                               */
/* ------------------------------------------------------------------ */

[x-cloak] { display: none !important; }

.numeric { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.metric-id { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); letter-spacing: 0.04em; }

/* Label row (rankings, reports, about, sample-report) ---------------- */

.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4) 0 var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.label-row-lhs { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.label-row-rhs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
/* `.page-title` is the canonical primary-page-title class for every
 * page on the site EXCEPT exchange detail (which uses
 * `.exchange-name-h1` for its Syne 700 hero). Standardised across
 * Rankings, Reports, About, Methodology, and Sample-report so the
 * H1 typography is identical regardless of which container
 * (`.label-row` vs `.page-head`) the page wraps it in. Do not
 * introduce alternative page-title classes; add a container class
 * if a different layout is needed. */
.page-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}
.meta-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.separator { color: var(--border-strong); }

/* Freshness indicator dots ------------------------------------------ */

.freshness-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}
.freshness-fresh { background: var(--band-1); box-shadow: 0 0 0 3px rgba(63, 168, 96, 0.16); }
.freshness-warn  { background: var(--accent-gold); box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16); }
.freshness-stale { background: var(--band-5); border: 1px solid var(--border-strong); }

/* Inline info banner (e.g. shadow-mode notice on rankings + exchange
 * detail). Muted info treatment, not an error state. */
.info-banner {
  margin: var(--space-3) 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border-left: 3px solid var(--border-strong);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.55;
}
.info-banner strong { color: var(--text-primary); font-weight: 500; }
.info-banner p { margin: 0; }
.info-banner p + p { margin-top: var(--space-2); }

/* "Today's signals" strip on the rankings page (WO-36). Muted info row
 * sitting above the table. Each list item is one independently
 * computed signal; the whole strip hides when none can be computed. */
.signals-strip {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin: var(--space-2) 0 var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.signals-strip-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.signals-strip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.signals-strip-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.signals-strip-key {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.signals-strip-value { color: var(--text-primary); }
.signals-strip-value .numeric { color: var(--text-primary); font-weight: 500; }

/* Footnote line under a data table (e.g. explaining the dash placeholder
 * for rows with insufficient data). */
.table-footnote {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  line-height: 1.55;
}

/* Rankings table ---------------------------------------------------- */

.rankings {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}
.rankings thead th {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: right;
  white-space: nowrap;
}
.rankings thead th.th-rank,
.rankings thead th.th-exchange { text-align: left; }
.rankings thead th:first-child { padding-left: 0; }
.rankings thead th:last-child  { padding-right: 0; }

.rankings tbody td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  text-align: right;
  vertical-align: middle;
}
.rankings tbody td:first-child { padding-left: 0; }
.rankings tbody td:last-child  { padding-right: 0; }
.rankings tbody tr:hover { background: var(--bg-surface); }

.td-rank     { text-align: left; color: var(--text-tertiary); width: 48px; }
.td-exchange { text-align: left; font-weight: 500; color: var(--text-primary); }
.td-exchange a { color: inherit; text-decoration: none; }
.td-exchange a:hover { color: var(--accent-gold); text-decoration: underline; }
.td-band     { text-align: left; }
.td-composite { color: var(--text-primary); font-weight: 500; }
.td-dim      { color: var(--text-secondary); }
.td-spark    { width: 80px; padding-right: 0; color: var(--text-secondary); }
.td-empty    { text-align: center; padding: var(--space-8) 0; color: var(--text-tertiary); }
.td-spark .sparkline { opacity: 0; transition: opacity 0.12s; }
.rankings tbody tr:hover .td-spark .sparkline { opacity: 1; }

/* Info blocks (rankings page footer) -------------------------------- */

.info-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: var(--space-8) 0 var(--space-6);
}
.info-block {
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
  background: var(--bg-surface);
}
.info-block h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-base);
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}
.info-block p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.info-block a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
  font-size: var(--fs-sm);
}
.info-block a:hover { border-bottom-color: var(--text-secondary); }

/* Breadcrumb (exchange detail) -------------------------------------- */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  padding: var(--space-3) 0 0;
}
.breadcrumb a { color: var(--text-tertiary); }
.breadcrumb a:hover { color: var(--text-secondary); }

/* Hero (exchange detail) -------------------------------------------- */

.hero {
  padding: var(--space-3) 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.exchange-name-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-3);
  color: var(--text-primary);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.hero-stats {
  display: flex;
  align-items: flex-end;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1;
}
.band-chip-large {
  width: 48px;
  height: 36px;
  font-size: 1.125rem;
}
.hero-sparkline {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  color: var(--text-secondary);
}
.hero-sparkline-label {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}

/* Detail layout (sidebar + main) ----------------------------------- */

.detail-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0 var(--space-8);
}
@media (max-width: 768px) {
  .detail-layout { grid-template-columns: 1fr; gap: var(--space-6); }
}

.detail-sidebar {
  position: sticky;
  top: var(--space-4);
  height: max-content;
}
.sidebar-h {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-3);
}
.sidebar-list { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.sidebar-list li { padding: 4px 0; font-size: 0.8125rem; }
.sidebar-list a { color: var(--text-secondary); }
.sidebar-list a:hover { color: var(--text-primary); }

/* Pair toggle -------------------------------------------------------- */

.pair-toggle {
  display: inline-flex;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.pair-toggle button {
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  padding: 6px var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.pair-toggle button.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

/* Commission card --------------------------------------------------- */

.commission-card {
  border: 1px solid var(--border-subtle);
  padding: var(--space-4);
}
.commission-label {
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-2);
}
.commission-card p {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.commission-link {
  display: block;
  text-align: center;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}
.commission-link:hover { border-color: var(--accent-gold); }

/* Dimension sections (detail page) ---------------------------------- */

.detail-main h2.section-title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--space-1);
}
.dimension-section { margin-bottom: var(--space-8); scroll-margin-top: var(--space-4); }
.dimension-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dimension-header-lhs { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.dimension-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.dimension-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--text-primary);
}
.dimension-weight {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
}
.dimension-score {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--text-primary);
}

.metric { border-bottom: 1px solid var(--border-subtle); padding: var(--space-4) 0; scroll-margin-top: var(--space-4); }
.metric:last-child { border-bottom: 0; }
.metric-row {
  display: grid;
  grid-template-columns: 56px 1fr 140px 60px 18px;
  align-items: center;
  gap: var(--space-4);
  cursor: pointer;
}
.metric-id-col { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
.metric-name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.metric-raw { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); text-align: right; }
.metric-score { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); text-align: right; }

/* Disclosure chevron at the end of every metric-row. Default state is
 * expanded (points down); collapsed adds `.is-collapsed` and the SVG
 * rotates 90deg counter-clockwise (points right, tree-disclosure
 * convention). */
.metric-chevron {
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, color 0.15s ease;
  transform: rotate(0deg);
}
.metric-chevron.is-collapsed {
  transform: rotate(-90deg);
}
.metric-row:hover .metric-chevron {
  color: var(--text-secondary);
}

/* Expand / collapse all toolbar at the top of detail-main. */
.metrics-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--space-3);
}
.metrics-toggle-all {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.metrics-toggle-all:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.metric-detail {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-4) 0 var(--space-1) 72px;
}
@media (max-width: 768px) {
  .metric-detail { grid-template-columns: 1fr; padding-left: 0; }
}
.metric-prose p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
}
.metric-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-tertiary); }
.metric-spark {
  border: 1px solid var(--border-subtle);
  padding: var(--space-3);
  color: var(--text-secondary);
}
.metric-spark-label {
  font-size: 0.625rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  display: flex;
  justify-content: space-between;
}
.metric-spark-label .numeric { color: var(--text-primary); text-transform: none; letter-spacing: 0; }

/* Print: force every metric expanded ------------------------------- */

@media print {
  .metric-detail { display: grid !important; }
  .pair-toggle, .commission-card, .breadcrumb { display: none !important; }
}

/* History (detail page) -------------------------------------------- */

.history-section { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.history-section h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.history { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.history th {
  text-align: left;
  padding: var(--space-2) 0;
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-bottom: 1px solid var(--border-subtle);
}
.history th.r { text-align: right; }
.history td {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
.history td.r { text-align: right; color: var(--text-secondary); }

/* Methodology page (P3) -------------------------------------------- */

/* Aligned with `.label-row`'s top/bottom padding so the gap from
 * the page H1 down to the bottom border reads the same on
 * Methodology as on the Rankings / Reports / About / Sample-report
 * pages (which use `.label-row`). The previous `var(--space-8) 0
 * var(--space-6)` gave methodology ~2x the breathing room. */
.page-head {
  padding: var(--space-4) 0 var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-3);
}
/* `.page-h1` removed: superseded by the canonical `.page-title` class.
 * Methodology page now uses `.page-title` like every other page. */
.lede {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 var(--space-4);
}
.page-head-meta {
  display: flex;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}

.doc-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) 0 var(--space-8);
}
@media (max-width: 768px) {
  .doc-layout { grid-template-columns: 1fr; }
  /* The sticky+scrollable TOC overlaps the reading column at mobile
   * widths; the long-form doc reads fine without it on small screens. */
  .doc-toc { display: none; }
}
.doc-toc {
  position: sticky;
  top: var(--space-4);
  height: max-content;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  /* Reserve `var(--space-2)` of left padding so `.toc-current`'s
   * `margin-left: calc(-1 * var(--space-2))` compensation lands
   * INSIDE this container's content area. Without it, the negative
   * margin pushes the active link 8px past the doc-toc left edge,
   * where `overflow-y: auto` (CSS spec coerces overflow-x to clip
   * when overflow-y is non-visible) clips the leading character —
   * the "S" of "Summary" being the case operator-flagged repeatedly. */
  padding-left: var(--space-2);
}
.toc-list { list-style: none; padding: 0; margin: 0; }
.toc-list > li { margin-bottom: 2px; }
.toc-list > li > a {
  display: block;
  padding: 6px 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}
.toc-list > li > a:hover { color: var(--text-primary); }
.toc-sublist {
  list-style: none;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-subtle);
  margin: 2px 0 var(--space-2);
}
.toc-sublist li a {
  display: block;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.toc-sublist li a:hover { color: var(--text-secondary); }
.nav-deferred {
  opacity: 0.4;
  font-style: italic;
}

.doc-main { max-width: 680px; }
.doc-main section { margin-bottom: var(--space-8); scroll-margin-top: var(--space-4); }
/* Body H2 (doc-main + prose-column). Single typography rule so the
 * heading-to-rule gap and the rule's visual weight are identical
 * across the methodology body and the About / Reports prose columns.
 * Page-specific margins (different vertical-rhythm strategies on
 * each layout) live in the per-container overrides below. */
.doc-main h2,
.prose-column h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text-primary);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 40%, transparent);
}
.doc-main h2 { margin: 0 0 var(--space-4); }
.doc-main h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--text-primary);
  margin: var(--space-6) 0 var(--space-2);
  scroll-margin-top: var(--space-4);
}
.doc-main h3 .metric-id { margin-right: var(--space-2); }
.doc-main h4,
.micro-head {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: var(--space-4) 0 var(--space-2);
}
.doc-main p { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-3); }
.doc-main p strong, .doc-main li strong { color: var(--text-primary); font-weight: 500; }
.doc-main ul, .doc-main ol { margin: 0 0 var(--space-4) var(--space-4); color: var(--text-secondary); }
.doc-main li { margin-bottom: var(--space-1); line-height: 1.65; }
.doc-main a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}
.doc-main a:hover { border-bottom-color: var(--text-secondary); }

.dim-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
@media (max-width: 600px) { .dim-grid { grid-template-columns: 1fr; } }
.dim-card { border: 1px solid var(--border-subtle); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; }
.dim-label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.06em; margin-bottom: 4px; }
.dim-name { font-weight: 500; font-size: var(--fs-sm); color: var(--text-primary); margin-bottom: var(--space-2); }
.dim-desc { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; }
.dim-metrics { margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.04em; }
.dim-meta { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-tertiary); display: flex; justify-content: space-between; }
.metric-deferred-inline { opacity: 0.45; font-style: italic; }
.dimension-metrics-list { margin: calc(-1 * var(--space-2)) 0 var(--space-4) 0; font-size: 0.8125rem; color: var(--text-tertiary); }
.dimension-commentary { margin: 0 0 var(--space-4) 0; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.55; }

/* Mobile: collapse rankings table to rank/exchange/(band)/(composite); the
 * dimension columns + sparkline cell are hidden, and tapping a row toggles
 * a per-row breakdown panel. The exchange-name link stays clickable for
 * direct navigation to the detail page. */
.ranking-row-detail { display: none; }
.ranking-row-detail-list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); font-size: 0.8125rem; }
.ranking-row-detail-list dt { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.ranking-row-detail-list dd { margin: 0; color: var(--text-secondary); }
@media (max-width: 768px) {
  .rankings .th-dim,
  .rankings .th-spark,
  .rankings .td-dim,
  .rankings .td-spark { display: none; }
  .ranking-row-detail { display: table-row; }
  .ranking-row-detail td { padding: var(--space-3) var(--space-3) var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); }
  .ranking-row td:not(.td-exchange) { cursor: pointer; }
}

/* Methodology page: permalink anchor on H3 hover (citation aid). */
.permalink {
  margin-left: var(--space-2);
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-weight: 400;
  text-decoration: none;
  border-bottom: none;
  opacity: 0;
  transition: opacity 0.12s;
}
h3:hover > .permalink,
.permalink:focus-visible { opacity: 1; }
.permalink:hover { color: var(--text-primary); }

/* Methodology TOC current-section highlight. Driven by Alpine intersection
 * observer in `methodology.html`; mirrors the `.nav-deferred` style hook. */
.toc-current {
  color: var(--text-primary);
  border-left: 2px solid var(--accent-gold);
  padding-left: var(--space-2);
  margin-left: calc(-1 * var(--space-2));
}

/* Exchange detail expanded metric row: the band label sits before the
 * methodology link in the prose column. */
.metric-band-label { margin: 0 0 var(--space-2); }
.metric-band-label-inner {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px var(--space-2);
  border-radius: 2px;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}
.metric-band-label-inner.band-label-atypical { border-color: var(--accent-gold); }

/* Print: methodology TOC becomes a linear list at the top of the document. */
@media print {
  .doc-toc {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    margin-bottom: var(--space-6);
  }
  .doc-layout { grid-template-columns: 1fr; gap: var(--space-4); }
  .toc-list { columns: 2; column-gap: var(--space-6); }
  .permalink { display: none; }
}

.callout {
  background: var(--bg-surface);
  border-left: 2px solid var(--accent-gold);
  padding: var(--space-4) var(--space-4);
  margin: var(--space-4) 0;
}
.callout-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--accent-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.meta-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0 var(--space-3); font-size: 0.8125rem; }
.meta-table th, .meta-table td { text-align: left; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.meta-table th[scope="row"] { color: var(--text-primary); font-weight: 500; width: 38%; }
.meta-table td { color: var(--text-secondary); }
.meta-table th[scope="col"] {
  font-weight: 500;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.placeholder {
  padding: var(--space-4) var(--space-6);
  border: 1px dashed var(--border-subtle);
  color: var(--text-tertiary);
  font-size: 0.8125rem;
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.metric-deferred {
  border: 1px dashed var(--border-subtle);
  border-radius: 4px;
  padding: var(--space-4);
  opacity: 0.6;
  margin-bottom: var(--space-6);
}
.metric-deferred p {
  margin-bottom: var(--space-2);
  color: var(--text-secondary);
}

/* Reports / About / Sample-report — prose column ------------------- */

/* Hero/lede wrapper that sits between `.label-row` and `.prose-column`.
 * Full content width so a long opening paragraph can stretch to the page
 * edge rather than wrap inside the 680px reading column. Mirrors the
 * `.page-head` lede on the methodology page. */
.page-lede {
  padding: var(--space-6) 0 var(--space-2);
}
.page-lede .lede {
  margin: 0;
  color: var(--text-primary);
  font-weight: 500;
}

.prose-column {
  max-width: 680px;
  padding: var(--space-6) 0;
}
/* `.prose-wide` opts a prose-styled body out of the 680px reading
 * column. Used on the About and Reports pages where the design wants
 * full container width, matching the Rankings / exchange-detail
 * pages. The Methodology long-form docs deliberately keep the
 * narrower constraint via plain `.prose-column`. */
.prose-wide { max-width: none; }
.prose-column .lede { color: var(--text-primary); font-weight: 500; }
/* H2 typography is unified with `.doc-main h2` higher up in this
 * file; only the per-container margin overrides live here. */
.prose-column h2 { margin: var(--space-6) 0 var(--space-3); }
.prose-column p { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-3); }
/* Mirrors `.doc-main ul/ol/li` from the methodology page so lists in
 * About/Reports pick up the same indentation, font weight, and colour
 * as the surrounding paragraphs (rather than rendering flush-left and
 * appearing visually heavier than body text). */
.prose-column ul,
.prose-column ol { font-size: var(--fs-base); color: var(--text-secondary); line-height: 1.7; margin: 0 0 var(--space-4) var(--space-4); }
.prose-column li { margin-bottom: var(--space-1); line-height: 1.65; }
.prose-column a {
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  padding-bottom: 1px;
}
.prose-column a:hover { border-bottom-color: var(--text-secondary); }
.depth-list dt { font-weight: 500; color: var(--text-primary); margin-top: var(--space-3); font-size: var(--fs-base); }
.depth-list dd { margin: 0 0 var(--space-3) 0; font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.65; }
.commission-flow { margin: 0 0 var(--space-4) var(--space-6); color: var(--text-secondary); }
.commission-flow li { margin-bottom: var(--space-2); line-height: 1.6; }
.firewall-block {
  border-left: 2px solid var(--accent-gold);
  background: var(--bg-surface);
  padding: var(--space-4) var(--space-4);
  margin: var(--space-3) 0;
}
.firewall-block p { color: var(--text-primary); font-weight: 500; margin: 0; }
.commission-form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.commission-form label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: block;
}
.commission-form input,
.commission-form select,
.commission-form textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
.commission-form button {
  justify-self: start;
  padding: var(--space-3) var(--space-6);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.commission-form button:hover { border-color: var(--accent-gold); }
.commission-form button:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--border-subtle); }
.commission-form input:disabled,
.commission-form select:disabled,
.commission-form textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.form-note { font-size: var(--fs-sm); color: var(--text-tertiary); }
.form-banner {
  border-left: 2px solid var(--accent-gold);
  background: var(--bg-surface);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.form-banner p { margin: 0; }
.form-error {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  border-left: 2px solid var(--accent-gold);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
}
.form-confirmation {
  border-left: 2px solid var(--accent-gold);
  background: var(--bg-surface);
  padding: var(--space-4);
  font-size: var(--fs-base);
  color: var(--text-primary);
}
.form-confirmation p { margin: 0 0 var(--space-2) 0; }
.form-confirmation p:last-child { margin-bottom: 0; color: var(--text-secondary); font-size: var(--fs-sm); }

.primary-link {
  display: inline-block;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  margin: var(--space-3) 0;
}
.primary-link:hover { border-color: var(--accent-gold); }

@media print {
  :root {
    --bg-primary:        #ffffff;
    --bg-surface:     #ffffff;
    --bg-elevated:    #f5f4ef;
    --text-primary:   #14171c;
    --text-secondary: #4a4e58;
    --text-tertiary:     #7a7e88;
    --border-subtle: #c0bcb0;
    --border-strong:  #8a857a;
    --accent-gold:    #8a7440;
    --band-1:         #2d7a42;
    --band-2:         #5a705a;
    --band-3:         #5e5e5e;
    --band-4:         #3a3a3a;
    --band-5:         #1f1f1f;
  }

  .sparkline { display: block !important; }

  .band-chip {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .site-header,
  .site-footer { border-color: var(--border-subtle); }

  a { border-bottom-color: transparent; }
}