/* lane-markets.css
   Market components for the markets lane: the category quote board on
   the /markets/ landing, the hero quote block, range
   stats rail, SVG chart, history table, price alert form, and the quiet
   source citation on the detail page. Imported into the components
   layer by manifest.css.
   Token values only: colors, spacing, fonts and measure come from
   css/01-settings.css :root (--space-*, --brand-*, --font-*,
   --hairline, --muted, --ink, --surface, --radius, --focus-ring,
   --measure, --text-*, --tracking-*, --control-h). No token is
   redefined here. Literals remain only where custom properties cannot
   reach: 1px hairlines, the board max width (a component-scoped custom
   property), and the 40rem media query (the plan breakpoint; @media
   cannot read var()). */

@layer components {

/* --- Direction colors ------------------------------------------------------
   Shared by board cells, detail quotes, and the stats rail. Flat and new
   carry no directional meaning. */

.index-change--up {
  color: var(--success-fg);
}

.index-change--down {
  color: var(--danger-fg);
}

.index-change--flat,
.index-change--new {
  color: var(--muted);
}

/* --- Quote board -----------------------------------------------------------
   Family-grouped table at terminal density: sticky series column, mono
   tabular numerics, signed deltas with arrows plus color, group
   signposts inside the table, per-row last-updated stamps. The board is
   wider than prose measure so rows scan; the scroll wrapper carries the
   width so narrow screens scroll instead of crushing cells. */

.board-table-scroll {
  --board-max: 100%;
  max-width: var(--board-max);
  margin: var(--space-3) 0 0;
  overflow-x: auto;
}

.board-table-scroll:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: var(--space-1);
}

.board-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-small);
}

.board-table__head th small {
  display: block;
  max-width: 12rem;
  margin-top: var(--space-1);
  color: var(--muted);
  font-weight: var(--weight-regular);
  line-height: 1.25;
  text-transform: none;
}

.board-table__mobile-unit { display: none; }

/* Sticky series column: the first column stays pinned while the numeric
   columns scroll on narrow screens, with an opaque surface behind it. */

.board-table__row th:first-child,
.board-table__row td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  box-shadow: inset -1px 0 0 var(--hairline);
  z-index: 1;
}

.board-table__head th:first-child {
  background: var(--paper);
}

.board-table__head th {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

.markets-ticker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  border-block: 1px solid var(--ink);
  background: var(--surface);
  white-space: nowrap;
  scrollbar-width: thin;
}
.markets-ticker__viewport { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.markets-ticker__viewport::-webkit-scrollbar { display: none; }
.markets-ticker__control { width: 2.5rem; border: 0; border-right: 1px solid var(--ink); background: var(--ink); color: var(--surface); font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.markets-ticker__control--next { border-right: 0; border-left: 1px solid var(--ink); }
.markets-ticker__control:disabled { color: var(--muted); cursor: default; }
.markets-ticker__control:not(:disabled):hover, .markets-ticker__control:not(:disabled):focus-visible { background: var(--brand-700); }
.markets-ticker__track { display: flex; min-width: max-content; min-height: 2.5rem; }
.markets-ticker__label, .markets-ticker__item { display: inline-flex; align-items: center; }
.markets-ticker__label {
  padding-inline: var(--space-3);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.markets-ticker__item {
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-right: 1px solid var(--hairline);
  color: var(--ink);
  font-size: var(--text-caption);
  text-decoration: none;
}
.markets-ticker__item:hover, .markets-ticker__item:focus-visible { background: var(--brand-50); }
.markets-ticker__name { font-weight: var(--weight-semibold); }
.markets-ticker__value, .markets-ticker__change { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.markets-nav-shell {
  position: sticky;
  top: 0;
  z-index: 25;
  width: 100%;
  max-width: 100vw;
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
}

.markets-nav {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: var(--wrap);
  margin-top: 0;
  margin-inline: auto;
  overflow-x: auto;
  padding: 0;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}

.markets-nav__title {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-3);
  border-right: 1px solid var(--ink);
  background: var(--ink);
  color: var(--surface);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.markets-hero.markets-hero--compact {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
}

.markets-hero.markets-hero--compact .pub-hero__kicker,
.markets-hero.markets-hero--compact .pub-hero__title,
.markets-hero.markets-hero--compact .pub-hero__lede {
  color: var(--ink);
}

.markets-hero.markets-hero--compact .pub-hero__title {
  max-width: none;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -.04em;
}

.markets-hero.markets-hero--compact .pub-hero__lede {
  max-width: 52rem;
  margin: var(--space-3) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.45;
}

.markets-nav__link {
  flex: 0 0 auto;
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-4);
  border-bottom: 3px solid transparent;
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.markets-nav__link:hover,
.markets-nav__link:focus-visible {
  color: var(--ink);
}

.markets-nav__link.is-active {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.markets-nav__link:focus-visible {
  border-radius: 0;
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.markets-board-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--space-4);
  padding-top: var(--space-6);
}

.markets-board-heading h2,
.markets-board-heading p {
  margin: 0;
}

.markets-board-heading h2 {
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-h2);
}

.markets-board-heading > p,
.markets-board-heading__eyebrow {
  color: var(--muted);
  font-size: var(--text-caption);
}

.markets-family-tables { margin-top: var(--space-4); }
.markets-family-table + .markets-family-table { margin-top: var(--space-7); }
.markets-family-table__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-2); border-top: 4px solid var(--ink); }
.markets-family-table__head h3, .markets-family-table__head span { margin: 0; }
.markets-family-table__head h3 { font-family: var(--font-sans); font-size: var(--text-h3); }
.markets-family-table__head h3 a { color: var(--ink); }
.markets-family-table__head > span { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-caption); text-transform: uppercase; }
.markets-family-table .board-table-scroll { margin-top: 0; }
.board-table--family { table-layout: fixed; border-top: 1px solid var(--ink); }
.board-table--family .board-table__col--series { width: 42%; }
.board-table--family .board-table__col--unit { width: 10%; }
.board-table--family .board-table__col--last { width: 13%; }
.board-table--family .board-table__col--change { width: 10%; }
.board-table--family .board-table__col--percent { width: 9%; }
.board-table--family .board-table__col--week { width: 8%; text-align: right; }
.board-table--family .board-table__col--date { width: 16%; }
.board-table--currencies .board-table__col--series { width: 35%; }
.board-table--currencies .board-table__col--last { width: 14%; }
.board-table__week { padding: var(--space-2); border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.board-table__subsection th { padding: var(--space-2); border-bottom: 1px solid var(--ink); background: var(--paper); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-align: left; text-transform: uppercase; }
.market-status { display: inline-flex; margin-left: var(--space-1); padding: 0 var(--space-1); border: 1px solid currentColor; font-family: var(--font-mono); font-size: .625rem; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.market-status--stale { color: var(--danger-fg); }
.market-status--partial, .market-status--revised { color: var(--muted); }
.market-status--current { color: var(--success-fg); }

.markets-board-heading__eyebrow {
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.markets-anchor {
  scroll-margin-top: var(--header-h);
}

.board-table__col--last,
.board-table__col--change,
.board-table__col--percent,
.board-table__col--date {
  text-align: right;
}

/* Series cells keep the fuller padding for the two-line name and stamp;
   the numeric and trend cells are compressed so rows scan at terminal
   density. The shared transition keeps the hover wash gradual. */

.board-table__series {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--duration) var(--ease);
}

.board-table__last,
.board-table__change,
.board-table__percent,
.board-table__date {
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--hairline);
  transition: background-color var(--duration) var(--ease);
}

.board-table__series {
  text-align: left;
  font-weight: var(--weight-semibold);
}

.board-table__link {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-body);
}

.board-table__link:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.board-table__flag {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--muted);
  white-space: nowrap;
}

.board-table__stamp {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.board-table__last {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-table__figure {
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
}

.board-table__change,
.board-table__percent {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-table__change--partial {
  color: var(--muted);
}

.board-table__note {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
}

.board-table__date {
  text-align: right;
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board-table__link:focus-visible,
.market-detail-breadcrumb a:focus-visible,
.index-range__tab:focus-visible,
.index-chart__download:focus-visible,
.market-continuation a:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.board-table__row:hover .board-table__series,
.board-table__row:hover .board-table__last,
.board-table__row:hover .board-table__change,
.board-table__row:hover .board-table__percent,
.board-table__row:hover .board-table__date {
  background: var(--brand-50);
}

@media (max-width: 40rem) {
  .markets-hero { overflow: hidden; }

  .markets-hero .pub-hero__lede {
    width: 100%;
    overflow-wrap: anywhere;
  }

  /* Mobile touch target: full row link height meets the control minimum. */
  .board-table__link {
    display: block;
    min-height: var(--control-h);
    padding: var(--space-3) 0;
  }

  .board-table__col--date,
  .board-table__date {
    display: none;
  }
}

/* --- Hero quote ------------------------------------------------------------
   The detail hero number block: one big tabular figure, as-of stamp,
   and a change line with arrow, absolute, percent, and comparison date.
   Data register: sans title, mono tabular figure, tighter and quieter
   than the editorial serif hero. */

.pub-hero:has(.index-quote) .pub-hero__title {
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-tight);
}

.market-detail-hero .o-wrap {
  max-width: none;
}

.markets-hero .pub-hero__lede {
  max-width: 48rem;
}

.market-detail-hero .o-wrap {
  display: grid;
  gap: var(--space-3) var(--space-8);
}

.market-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.market-detail-breadcrumb a {
  color: inherit;
}

.market-detail-hero .pub-hero__title {
  max-width: 22ch;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: .98;
}

.market-detail-hero__definition {
  max-width: 44rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--text-small);
}

.index-quote__label {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.index-quote {
  margin: var(--space-5) 0 0;
}

.index-quote__flag {
  margin-left: var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  color: var(--muted);
  white-space: nowrap;
}

.index-quote__figure {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.index-quote__stamp {
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  color: var(--muted);
}

.index-quote__source {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-small);
  color: var(--muted);
}

.index-quote__source span {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.index-quote__change {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
}

.index-quote__change--up {
  color: var(--success-fg);
}

.index-quote__change--down {
  color: var(--danger-fg);
}

.index-quote__change--flat {
  color: var(--muted-fg);
}

.index-quote__change--partial {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.index-quote__abs,
.index-quote__percent {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Stats rail ------------------------------------------------------------
   Ruled band under the hero: period high and low with dates, then the
   period change cells. Two columns on small screens, one row from the
   plan breakpoint up. */

.stats-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-4);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

@media (min-width: 40rem) {
  .stats-rail {
    grid-template-columns: repeat(5, 1fr);
  }
}

.stats-rail__cell {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.stats-rail__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.stats-rail__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.stats-rail__value--na {
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.stats-rail__sub {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption);
  color: var(--muted);
}

/* --- Range tabs ------------------------------------------------------------
   Quiet period switcher for the chart window. Plain links, no JS; the
   selected tab carries aria-current and a filled pill. */

.index-range {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  max-width: none;
  margin: var(--space-4) 0 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.index-range__label {
  margin-right: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.index-range__tab {
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-bottom: 2px solid var(--hairline);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  text-decoration: none;
}

.index-range__tab:hover {
  border-bottom-color: var(--brand-700);
  color: var(--brand-700);
}

.index-range__tab--active {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.market-chart-panel {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 3px solid var(--ink);
}

.market-chart-panel__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.market-chart-panel__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.market-chart-panel__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-h2);
}

/* --- Chart -----------------------------------------------------------------
   Server-rendered SVG in a card: header row with title and range, the
   plot with gridlines, baseline axis, y and x labels, and a footer
   caption. Stroke widths are 1px drawing details, the hairline
   exception; vector-effect keeps them constant under viewBox scaling. */

.index-chart {
  max-width: none;
  margin: var(--space-3) 0 0;
  padding: var(--space-4) 0 var(--space-3);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.index-chart__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.index-chart__title {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.index-chart__range {
  font-size: var(--text-caption);
  color: var(--muted);
}

.index-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.index-chart polyline {
  fill: none;
  stroke: var(--brand-700);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.index-chart svg text {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.index-chart__grid {
  stroke: var(--hairline);
  stroke-width: 0.3;
}

.index-chart__baseline {
  stroke: var(--ink);
  stroke-width: 0.5;
}

.index-chart__label {
  fill: var(--muted);
  font-size: 3px;
}

.index-chart__current {
  fill: currentColor;
  font-size: 3.2px;
}

.index-chart__point {
  fill: var(--brand-700);
  stroke: none;
}

.index-chart__download {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding-inline: var(--space-3);
  border: 1px solid var(--hairline);
  background: var(--surface);
  font-weight: var(--weight-semibold);
}

.index-chart__point--partial {
  fill: var(--surface);
  stroke: var(--brand-700);
  stroke-width: 0.8;
}

.index-chart__download {
  color: var(--ink);
  text-decoration: none;
}

.index-chart__download:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.index-chart__foot {
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-small);
  color: var(--muted);
}

/* --- History table --------------------------------------------------------- */

.index-history {
  max-width: none;
  margin: var(--space-7) 0 0;
}

.index-history__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.index-history__note {
  max-width: var(--measure);
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-small);
  line-height: var(--leading-body);
}

.index-table {
  max-width: var(--measure);
}

.index-table__status {
  font-size: var(--text-small);
  color: var(--muted);
}

.index-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.index-status::before {
  width: var(--space-2);
  height: var(--space-2);
  border: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.index-status--partial::before {
  border-style: dashed;
}

.index-status--revised {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

/* --- Price alert form ------------------------------------------------------ */

.alert-section {
  max-width: var(--measure);
  margin: var(--space-7) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.alert-section__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.alert-section__intro {
  margin: 0 0 var(--space-4);
  font-size: var(--text-small);
  color: var(--muted);
}

.alert-form {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 40rem) {
  .alert-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .alert-form__field--email,
  .alert-form__note,
  .alert-form__privacy,
  .alert-form__submit {
    grid-column: 1 / -1;
  }

  .alert-form__submit {
    justify-self: end;
    width: auto;
  }
}

.alert-form__field {
  display: grid;
  gap: var(--space-1);
}

.alert-form__label {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.alert-form__hint {
  font-weight: var(--weight-regular);
  letter-spacing: normal;
  text-transform: none;
}

.alert-form__input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-small);
}

.alert-form__input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.alert-form__submit {
  width: 100%;
}

.alert-form__note,
.alert-form__privacy {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--muted);
}

.alert-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Source citation -------------------------------------------------------
   Quiet footer note: hairline rule, caption title, small muted text.
   No card chrome, it is the last thing on the page. */

.index-cite {
  max-width: var(--measure);
  margin: var(--space-6) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  color: var(--muted);
}

.index-cite__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.index-cite p {
  margin: var(--space-1) 0;
  font-size: var(--text-small);
}

.index-cite__list {
  margin: 0;
}

.index-cite__list > div {
  display: grid;
  grid-template-columns: minmax(6rem, 8rem) 1fr;
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.index-cite__list dt {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.index-cite__list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.market-continuation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.market-continuation a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
}

@media (min-width: 64rem) {
  .market-detail-hero .o-wrap {
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, .75fr);
    align-items: end;
  }

  .market-detail-hero .market-detail-breadcrumb,
  .market-detail-hero .pub-hero__kicker,
  .market-detail-hero .pub-hero__title,
  .market-detail-hero__definition {
    grid-column: 1;
  }

  .market-detail-hero .index-quote {
    grid-column: 2;
    grid-row: 1 / span 4;
    margin: 0;
    padding-left: var(--space-6);
    border-left: 1px solid var(--hairline);
  }
}

.market-detail-grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

.market-detail-main,
.market-detail-side {
  min-width: 0;
}

.market-detail-main .index-chart,
.market-detail-main .index-history,
.market-detail-main .index-table {
  max-width: none;
}

.market-detail-side .alert-section,
.market-detail-side .index-cite {
  max-width: none;
  margin-top: var(--space-6);
}

@media (min-width: 64rem) {
  .market-detail-grid {
    grid-template-columns: minmax(0, 1.65fr) minmax(19rem, .75fr);
    align-items: start;
  }

  .market-detail-side {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
  }
}

@media (max-width: 40rem) {
  .markets-hero.markets-hero--compact {
    padding-block: var(--space-5);
  }

  .markets-hero.markets-hero--compact .pub-hero__title {
    max-width: 100%;
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    overflow-wrap: anywhere;
  }

  .markets-hero.markets-hero--compact .pub-hero__lede {
    font-size: var(--text-body);
  }

  .markets-nav {
    margin-top: 0;
  }

  .markets-board-heading {
    align-items: start;
    flex-wrap: wrap;
    padding-top: var(--space-5);
  }

  .markets-board-heading > p {
    display: none;
  }

  .board-table-scroll { display: block; }
  .board-table__unit,
  .board-table__change { display: none; }
  .board-table__mobile-unit { display: inline; font-size: inherit; }

  .stats-rail {
    gap: 0;
    padding: 0;
  }

  .stats-rail__cell {
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--hairline);
  }

  .stats-rail__value {
    font-size: var(--text-h4);
  }

  .index-chart {
    margin-top: var(--space-5);
    padding: var(--space-3) 0;
  }

  .index-chart svg {
    min-width: 0;
  }

  .market-chart-panel__tools {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .index-chart__download {
    flex: 0 0 auto;
  }

  .index-cite__list > div {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .board-table__series,
  .board-table__last,
  .board-table__change,
  .board-table__percent,
  .board-table__date {
    transition: none;
  }
}

/* Shared submarket family navigation ------------------------------------- */
.market-family-nav-shell { overflow-x: auto; border-block: 1px solid var(--ink); background: var(--surface); scrollbar-width: thin; }
.market-family-nav { display: flex; min-width: max-content; margin-inline: auto; }
.market-family-nav a { display: inline-flex; align-items: center; min-height: var(--control-h); padding-inline: var(--space-4); border-bottom: 4px solid transparent; color: var(--ink); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none; }
.market-family-nav a:first-child { padding-left: 0; }
.market-family-nav a:hover, .market-family-nav a:focus-visible, .market-family-nav a.is-active { border-bottom-color: var(--ink); }
.currency-hero { padding-block: var(--space-6); border-bottom: 1px solid var(--ink); background: var(--surface); color: var(--ink); }
.currency-hero__kicker, .currency-section-head p { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.currency-hero h1 { max-width: none; margin: 0; color: inherit; font-family: var(--font-sans); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: -.04em; }
.currency-page { padding-block: var(--space-6) var(--space-8); }
.currency-page__intro { max-width: 60rem; margin: calc(-1 * var(--space-1)) 0 var(--space-5); color: var(--muted); }
.currency-section-head, .currency-toolbar { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.currency-section-head h2, .currency-matrix-section h2 { margin: 0; font-family: var(--font-sans); }
.currency-section-head > a, .currency-toolbar > a { color: var(--ink); font-weight: var(--weight-semibold); }
.currency-toolbar { align-items: center; padding-bottom: var(--space-3); border-bottom: 1px solid var(--ink); }
.currency-toolbar [role="group"] { display: flex; }
.currency-toolbar [role="group"] a { padding: var(--space-2) var(--space-3); border: 1px solid var(--ink); color: var(--ink); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none; }
.currency-toolbar [role="group"] a + a { border-left: 0; }
.currency-toolbar [role="group"] a[aria-current="page"] { background: var(--ink); color: var(--surface); }
.currency-table-scroll, .cross-matrix-scroll { overflow-x: auto; border-top: 3px solid var(--ink); scrollbar-width: thin; }
.currency-table, .cross-matrix { width: 100%; min-width: 48rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.currency-table th, .currency-table td, .cross-matrix th, .cross-matrix td { padding: var(--space-3); border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.currency-table thead th, .cross-matrix thead th { background: var(--ink); color: var(--surface); font-family: var(--font-mono); font-size: var(--text-caption); letter-spacing: var(--tracking-caps); text-align: right; text-transform: uppercase; }
.currency-table thead th:first-child, .cross-matrix thead th:first-child { text-align: left; }
.currency-table thead a, .board-table__head a { color: inherit; text-decoration: none; }
.currency-table thead a:hover, .currency-table thead a:focus-visible, .board-table__head a:hover, .board-table__head a:focus-visible { text-decoration: underline; }
.currency-table thead th[aria-sort="ascending"] a::after, .board-table__head th[aria-sort="ascending"] a::after { content: " \2191"; }
.currency-table thead th[aria-sort="descending"] a::after, .board-table__head th[aria-sort="descending"] a::after { content: " \2193"; }
.currency-table tbody th { text-align: left; }
.currency-table tbody th a { color: var(--ink); font-family: var(--font-mono); font-weight: var(--weight-semibold); text-decoration: none; }
.currency-table tbody th a:hover { text-decoration: underline; }
.currency-table tbody th small { display: block; margin-top: var(--space-1); color: var(--muted); font-weight: var(--weight-regular); }
.currency-table .num, .cross-matrix td { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
.currency-table tbody tr:hover { background: var(--brand-50); }
.currency-matrix-section + .currency-matrix-section { margin-top: var(--space-7); }
.currency-matrix-section h2 { margin-bottom: var(--space-3); }
.currency-region-grid { display: grid; gap: var(--space-5); margin-top: var(--space-7); }
.currency-region-grid section { padding-top: var(--space-3); border-top: 3px solid var(--ink); }
.currency-region-grid h2 { margin: 0; }
.currency-region-grid h2 a { color: var(--ink); }
.currency-region-grid ul { margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.currency-region-grid li { border-bottom: 1px solid var(--hairline); }
.currency-region-grid li a { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); padding-block: var(--space-3); color: var(--ink); font-family: var(--font-mono); text-decoration: none; }
.currency-matrix-preview, .currency-matrix-section { margin-top: var(--space-7); }
.cross-matrix { min-width: 44rem; }
.cross-matrix caption { padding: var(--space-3) 0; color: var(--muted); font-size: var(--text-small); text-align: left; }
.cross-matrix tbody th { position: sticky; left: 0; background: var(--surface); font-family: var(--font-mono); text-align: left; }
.cross-matrix td a { color: var(--ink); text-decoration: none; }
.cross-matrix td a:hover { text-decoration: underline; }
.currency-disclaimer { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--ink); color: var(--muted); font-size: var(--text-small); }
.currency-benchmarks { margin-top: var(--space-7); padding-top: var(--space-3); border-top: 4px solid var(--ink); }
.currency-range { display: flex; border: 1px solid var(--ink); }
.currency-range a { min-width: 3rem; padding: var(--space-2) var(--space-3); border-left: 1px solid var(--ink); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-small); font-weight: var(--weight-semibold); text-align: center; text-decoration: none; }
.currency-range a:first-child { border-left: 0; }
.currency-range a:hover, .currency-range a:focus-visible, .currency-range a[aria-current="page"] { background: var(--ink); color: var(--surface); }
.currency-benchmark-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--ink); }
.currency-benchmark-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.currency-benchmark-grid a:nth-child(2n) { border-right: 0; }
.currency-benchmark-grid a:hover strong { text-decoration: underline; }
.currency-benchmark-grid span, .currency-benchmark-grid small { display: block; }
.currency-benchmark-grid small { margin-top: var(--space-1); color: var(--muted); }
.currency-benchmark-grid b { font-family: var(--font-mono); font-size: var(--text-h4); white-space: nowrap; }
.currency-benchmark-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: var(--text-small); }
.market-pulse { margin-top: var(--space-7); border-top: 4px solid var(--ink); }
.market-pulse > header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--ink); }
.market-pulse > header p, .market-pulse > header h2 { margin: 0; }
.market-pulse > header p, .market-pulse article > span { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.market-pulse__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.market-pulse article { min-height: 8rem; padding: var(--space-4); border-bottom: 1px solid var(--ink); }
.market-pulse article + article { border-left: 1px solid var(--ink); }
.market-pulse article a { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); color: var(--ink); text-decoration: none; }
.market-pulse article a:hover strong { text-decoration: underline; }
.market-pulse article b { font-family: var(--font-mono); white-space: nowrap; }
.market-pulse article p { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-small); }
.market-pulse__movements { border-bottom: 1px solid var(--ink); }
.market-pulse__movements > div { display: grid; grid-template-columns: 8rem 1fr 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--hairline); }
.market-pulse__movements > div:last-child { border-bottom: 0; }
.market-pulse__movements a { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.market-pulse__movements b { font-family: var(--font-mono); white-space: nowrap; }
.market-pulse__movement-head { background: var(--paper); font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.market-data-note { display: grid; grid-template-columns: 10rem minmax(0, var(--measure)); gap: var(--space-4); margin-block: var(--space-6) var(--space-8); padding-top: var(--space-3); border-top: 1px solid var(--ink); font-size: var(--text-small); }
.market-data-note p { margin: 0; color: var(--muted); }
.market-comparison { margin-top: var(--space-8); border-top: 4px solid var(--ink); }
.market-comparison__head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--ink); }
.market-comparison__head p, .market-comparison__head h2 { margin: 0; }
.market-comparison__head p { font-family: var(--font-mono); font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.market-comparison__head nav { display: flex; border: 1px solid var(--ink); }
.market-comparison__head nav a { padding: var(--space-2) var(--space-3); border-left: 1px solid var(--ink); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-small); font-weight: var(--weight-semibold); text-decoration: none; }
.market-comparison__head nav a:first-child { border-left: 0; }
.market-comparison__head nav a:hover, .market-comparison__head nav a:focus-visible, .market-comparison__head nav a[aria-current="page"] { background: var(--ink); color: var(--surface); }
.market-comparison__form { display: grid; grid-template-columns: minmax(15rem, 2fr) auto; gap: var(--space-2) var(--space-3); max-width: 42rem; padding-block: var(--space-4); }
.market-comparison__form label { grid-column: 1 / -1; font-weight: var(--weight-semibold); }
.market-comparison__form input[type="search"] { grid-column: 1 / -1; min-height: var(--control-h); padding-inline: var(--space-3); border: 1px solid var(--ink); }
.market-comparison__form select { min-height: 8rem; padding: var(--space-2); border: 1px solid var(--ink); background: var(--surface); color: var(--ink); }
.market-comparison__form button { align-self: end; min-height: var(--control-h); padding-inline: var(--space-4); border: 1px solid var(--ink); background: var(--ink); color: var(--surface); font-weight: var(--weight-semibold); }
.market-comparison__chart { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, .8fr); gap: var(--space-5); padding-block: var(--space-4); border-top: 1px solid var(--ink); }
.market-comparison__chart svg { width: 100%; min-height: 18rem; }
.market-comparison__chart svg line { stroke: var(--muted); stroke-width: .15; }
.market-comparison__chart svg text { fill: var(--muted); font-family: var(--font-mono); font-size: 2.2px; }
.market-comparison__grid text { text-anchor: end; }
.market-comparison__axis-title { font-size: 2px !important; letter-spacing: .08em; text-transform: uppercase; }
.market-comparison__line { fill: none; stroke-width: .65; vector-effect: non-scaling-stroke; }
.market-comparison__line--1, .market-comparison__key--1 { stroke: var(--ink); background: var(--ink); }
.market-comparison__line--2, .market-comparison__key--2 { stroke: var(--brand-700); background: var(--brand-700); }
.market-comparison__line--3, .market-comparison__key--3 { stroke: var(--danger-fg); background: var(--danger-fg); }
.market-comparison__line--4, .market-comparison__key--4 { stroke: var(--success-fg); background: var(--success-fg); }
.market-comparison__line--5, .market-comparison__key--5 { stroke: var(--muted); background: var(--muted); }
.market-comparison__chart ul { margin: 0; padding: 0; list-style: none; }
.market-comparison__chart li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-2); align-items: center; padding-block: var(--space-2); border-bottom: 1px solid var(--hairline); }
.market-comparison__key { width: .75rem; height: .75rem; }
.market-comparison__chart li b { font-family: var(--font-mono); }
.market-comparison__chart li small { grid-column: 2 / -1; color: var(--muted); }
.market-comparison__note, .market-comparison__empty { color: var(--muted); font-size: var(--text-small); }
.methodology-page { display: grid; gap: var(--space-5); }
.methodology-page section { max-width: var(--measure); padding-top: var(--space-3); border-top: 3px solid var(--ink); }
.currency-pair-quote { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-5); padding-bottom: var(--space-5); border-bottom: 3px solid var(--ink); }
.currency-pair-quote > p:first-child, .currency-pair-quote h2, .currency-pair-quote > p, .currency-pair-quote small { grid-column: 1; }
.currency-pair-quote h2 { margin: 0; font-family: var(--font-mono); font-size: var(--text-h1); }
.currency-pair-quote > strong { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-mono); font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1; }
.currency-pair-quote > span { grid-column: 2; font-family: var(--font-mono); font-size: var(--text-h3); text-align: right; }
@media (min-width: 48rem) { .currency-region-grid { grid-template-columns: repeat(3, 1fr); } .methodology-page { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .currency-section-head, .currency-toolbar { align-items: flex-start; flex-direction: column; } .currency-pair-quote { display: block; } .currency-pair-quote > strong, .currency-pair-quote > span { display: block; margin-top: var(--space-2); text-align: left; } .currency-range { max-width: 100%; overflow-x: auto; } .currency-benchmark-grid { grid-template-columns: 1fr; } .currency-benchmark-grid a { border-right: 0; } .market-comparison__head { align-items: flex-start; flex-direction: column; } .market-comparison__head nav { max-width: 100%; overflow-x: auto; } .market-comparison__form, .market-comparison__chart { grid-template-columns: 1fr; } .market-pulse__movements > div { grid-template-columns: 1fr; } .market-pulse__movement-head { display: none !important; } .market-pulse__grid { grid-template-columns: 1fr; } .market-pulse article + article { border-left: 0; } .market-data-note { grid-template-columns: 1fr; } }

}