/* 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);
}

/* Commodity detail workspace */
.commodity-tabs {
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: thin;
}
.commodity-tabs a {
  border-bottom: 2px solid transparent;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--text-small);
  font-weight: 700;
  padding: var(--space-3) 0;
  text-decoration: none;
}
.commodity-tabs a:hover,
.commodity-tabs a:focus-visible { border-color: var(--brand-700); color: var(--ink); }
.commodity-actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.commodity-actions a,
.commodity-view-control a,
.commodity-datasets a {
  color: var(--ink);
  font-size: var(--text-small);
  font-weight: 700;
}
.commodity-data-controls {
  align-items: center;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}
.commodity-view-control,
.commodity-datasets { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.commodity-view-control a[aria-current="page"],
.commodity-datasets a[aria-current="page"] { color: var(--brand-700); text-decoration-thickness: 2px; }
.commodity-date-range {
  align-items: end;
  background: var(--brand-50);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding: var(--space-3);
}
.commodity-date-range label { color: var(--muted); font-size: var(--text-small); font-weight: 700; }
.commodity-date-range input { display: block; margin-top: var(--space-1); }
.commodity-date-range button { min-height: 2.5rem; }
.commodity-history-table { margin-top: var(--space-4); max-height: 34rem; overflow-y: auto; }
.commodity-risk,
.commodity-correlation,
.commodity-dataset-note,
.commodity-dataset-empty { border-top: 1px solid var(--hairline); margin: var(--space-4) 0 0; padding-top: var(--space-4); }
.commodity-risk dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commodity-risk dt { color: var(--muted); font-size: var(--text-small); }
.commodity-risk dd { font-size: var(--text-h3); font-weight: 700; margin: var(--space-1) 0 0; }
.commodity-correlation svg { height: auto; margin-top: var(--space-3); overflow: visible; width: 100%; }
.commodity-correlation svg text { fill: var(--muted); font-size: 2.4px; }
.commodity-correlation ul { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; padding: 0; }
.commodity-compare-form { display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: 30rem; }
.commodity-compare-form select { min-height: 8rem; }
.commodity-correlation-ranges { display: flex; gap: var(--space-3); }
.commodity-trading-summary,
.commodity-specifications,
.commodity-availability {
  border: 1px solid var(--hairline);
  margin-top: var(--space-5);
  padding: var(--space-5);
}
.commodity-trading-summary h2,
.commodity-specifications h2,
.commodity-availability h2 { margin-top: 0; }
.commodity-trading-summary dl,
.commodity-specifications dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-4) 0;
}
.commodity-trading-summary dl > div,
.commodity-specifications dl > div { border-top: 1px solid var(--hairline); padding: var(--space-3) 0; }
.commodity-trading-summary dt,
.commodity-specifications dt { color: var(--muted); font-size: var(--text-small); }
.commodity-trading-summary dd,
.commodity-specifications dd { font-weight: 700; margin: var(--space-1) 0 0; }
.commodity-resource-panel { border: 1px solid var(--hairline); margin-bottom: var(--space-5); padding: var(--space-5); }
.commodity-resource-panel h2 { margin-top: 0; }
.commodity-resource-panel h3 { font-size: var(--text-small); margin: var(--space-5) 0 var(--space-2); text-transform: uppercase; }
.commodity-resource-panel ul { list-style: none; margin: 0; padding: 0; }
.commodity-resource-panel li { border-top: 1px solid var(--hairline); padding: var(--space-3) 0; }
.commodity-resource-panel li p { color: var(--muted); margin: var(--space-1) 0 0; }
.commodity-activity-chart { border-top: 1px solid var(--hairline); margin: var(--space-4) 0; padding-top: var(--space-3); }
.commodity-activity-chart figcaption { display: flex; justify-content: space-between; }
.commodity-activity-chart figcaption span { color: var(--muted); font-size: var(--text-small); }
.commodity-activity-chart svg { height: auto; margin-top: var(--space-2); overflow: visible; width: 100%; }
.commodity-activity-chart svg line { stroke: var(--hairline); stroke-width: .4; }
.commodity-activity-chart svg polyline { fill: none; stroke: var(--brand-700); stroke-width: 1; vector-effect: non-scaling-stroke; }
.commodity-activity-chart svg text { fill: var(--muted); font-size: 2.6px; }
.commodity-factsheet { max-width: 58rem; padding-bottom: var(--space-8); padding-top: var(--space-7); }
.commodity-factsheet > section { border-top: 1px solid var(--hairline); margin-top: var(--space-6); padding-top: var(--space-5); }
.commodity-factsheet__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commodity-factsheet__grid > div { border-top: 1px solid var(--hairline); padding: var(--space-3) 0; }
.commodity-factsheet__grid dt { color: var(--muted); font-size: var(--text-small); }
.commodity-factsheet__grid dd { font-weight: 700; margin: var(--space-1) 0 0; }
.commodity-factsheet__chart { margin-top: var(--space-5); }
@media print { .site-header, .site-footer, .commodity-factsheet .commodity-actions { display: none !important; } .commodity-factsheet { max-width: none; padding: 0; } }
@media (max-width: 48rem) {
  .commodity-data-controls { align-items: flex-start; flex-direction: column; }
  .commodity-trading-summary dl,
  .commodity-specifications dl,
  .commodity-risk dl { grid-template-columns: 1fr; }
}

/* --- Detail stats strip (TE pattern) ---------------------------------------- */

.market-detail-stats {
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--hairline);
}

.market-detail-stats__row {
  display: flex;
  gap: var(--space-8);
}

.market-detail-stats__cell {
  min-width: 0;
}

.market-detail-stats__label {
  color: var(--muted);
  font-size: var(--text-small);
  margin: 0 0 var(--space-1);
  font-weight: var(--weight-regular);
}

.market-detail-stats__value {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.2;
}

.market-detail-stats__stamp {
  color: var(--muted);
  font-size: var(--text-caption);
  margin: var(--space-2) 0 0;
}

/* Owner decision 2026-08-14: breadcrumb strips removed sitewide. The
   authoritative hide sits at the end of this file to beat later rules. */
.market-detail-breadcrumb {
  color: var(--muted);
  font-size: var(--text-caption);
  margin-bottom: var(--space-3);
}

.market-detail-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.market-detail-breadcrumb a:hover {
  color: var(--ink);
}

/* --- Chart range pills (TE pattern) ---------------------------------------- */

.market-chart-range {
  display: flex;
  gap: 0;
  margin-bottom: var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  width: fit-content;
}

.market-chart-range__tab {
  padding: var(--space-1) var(--space-3);
  border-right: 1px solid var(--hairline);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-decoration: none;
  background: var(--surface);
  transition: background-color var(--duration) var(--ease);
}

.market-chart-range__tab:last-child {
  border-right: 0;
}

.market-chart-range__tab:hover {
  background: var(--brand-50);
  color: var(--ink);
}

.market-chart-range__tab--active {
  background: var(--ink);
  color: var(--surface);
}

.market-chart-range__tab--active:hover {
  background: var(--ink);
  color: var(--surface);
}

.market-chart-actions {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-caption);
}

.market-chart-actions a {
  color: var(--muted);
  text-decoration: none;
}

.market-chart-actions a:hover {
  color: var(--ink);
}

/* --- Detail tab bar (TE pattern) ------------------------------------------- */

.market-detail-tabs {
  display: flex;
  gap: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-5);
  overflow-x: auto;
  scrollbar-width: thin;
}

.market-detail-tabs__tab {
  padding: var(--space-3) var(--space-4);
  border-bottom: 3px solid transparent;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.market-detail-tabs__tab:hover {
  color: var(--ink);
  border-bottom-color: var(--hairline);
}

.market-detail-tabs__tab--active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* --- Related items table (TE pattern) -------------------------------------- */

.market-related {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.market-related__title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-3);
}

/* --- Description block (TE pattern) ---------------------------------------- */

.market-description {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.market-description__title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  margin: 0 0 var(--space-2);
}

.market-description p {
  color: var(--muted);
  margin: 0;
  max-width: var(--measure);
}

.index-chart__range-change {
  margin-left: var(--space-2);
}

.board-table--related {
  font-size: var(--text-small);
}

.board-table--related .board-table__head th {
  font-size: var(--text-caption);
  padding: var(--space-2) var(--space-2);
}

.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: 0.02em;
  text-transform: none;
  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-shell::before,
.markets-nav-shell::after { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; width: 1.5rem; pointer-events: none; opacity: 0; transition: opacity .15s; }
.markets-nav-shell::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.markets-nav-shell::after { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }
.markets-nav-shell.can-scroll-start::before,
.markets-nav-shell.can-scroll-end::after { opacity: 1; }

.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--month,
.board-table--family .board-table__col--ytd,
.board-table--family .board-table__col--yoy { width: 8%; }
.board-table--family .board-table__col--date { width: 14%; }
.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__month,
.board-table__ytd,
.board-table__yoy,
.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);
}

/* Sparkline column: a bare trend polyline beside the series name,
   drawn from each series' own recent observations. */

.board-table__series {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.board-table__spark {
  flex: 0 0 56px;
  width: 56px;
  height: 22px;
  overflow: visible;
}

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

.board-table__identity {
  min-width: 0;
}

/* Heatmap cells: magnitude-tinted backgrounds on the change columns,
   tiered 1 (mild) through 3 (strong) per direction. */

.board-table__heat--up-1 { background: color-mix(in srgb, var(--success-fg) 6%, transparent); }
.board-table__heat--up-2 { background: color-mix(in srgb, var(--success-fg) 13%, transparent); }
.board-table__heat--up-3 { background: color-mix(in srgb, var(--success-fg) 22%, transparent); font-weight: var(--weight-semibold); }
.board-table__heat--down-1 { background: color-mix(in srgb, var(--danger-fg) 6%, transparent); }
.board-table__heat--down-2 { background: color-mix(in srgb, var(--danger-fg) 13%, transparent); }
.board-table__heat--down-3 { background: color-mix(in srgb, var(--danger-fg) 22%, transparent); font-weight: var(--weight-semibold); }

/* Zebra striping on the family boards, TradingEconomics-style; the
   subsection header rows keep their solid band. */

.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__series,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__last,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__change,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__percent,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__week,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__month,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__ytd,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__yoy,
.board-table--family tbody tr:nth-child(even):not(.board-table__subsection) .board-table__date {
  background: color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Heat cells sit centered in the column, like the reference board. */

.board-table__percent,
.board-table__week,
.board-table__month,
.board-table__ytd,
.board-table__yoy {
  text-align: center;
}

.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 {
  text-align: right;
}

.board-table__change,
.board-table__percent,
.board-table__month,
.board-table__ytd,
.board-table__yoy {
  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__week,
.board-table__row:hover .board-table__month,
.board-table__row:hover .board-table__ytd,
.board-table__row:hover .board-table__yoy,
.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;
}

/* --- Hero stat cells -------------------------------------------------------
   The quote renders as a TradingEconomics-style readout row: an Actual
   price cell, the change from the prior observation, then period-change
   cells (monthly, yearly) where the frequency supports them, and a
   full-width stamp line beneath. */

.index-quote--stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-8);
}

.index-quote--stats .index-quote__cell {
  min-width: 9rem;
}

.index-quote--stats .index-quote__label {
  margin-bottom: var(--space-1);
}

.index-quote--stats .index-quote__figure {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
}

.index-quote--stats .index-quote__change {
  margin-top: var(--space-1);
  font-size: var(--text-h4);
}

.index-quote--stats .index-quote__stamp {
  flex-basis: 100%;
  margin-top: var(--space-2);
}

/* --- 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: 1px solid var(--hairline);
}

.market-chart-panel__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  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-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.index-chart__range {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.index-chart__range-meta {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  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__point:focus { stroke: var(--focus-ring); stroke-width: 1; outline: none; }
.market-comparison__baseline { stroke: var(--ink) !important; stroke-width: .35 !important; }
.market-comparison__data { margin-top: var(--space-3); }

.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 {
  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: 0.02em;
  text-transform: none;
  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 {
  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, 1fr);
    align-items: start;
  }

  .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: 1;
    grid-row: auto;
    margin: var(--space-3) 0 0;
    padding-left: 0;
    border-left: 0;
  }
}

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

/* Detail page: full-width TE-style column. Boxed side sections become
   flat bordered sections stacked in order. */

.market-detail-main {
  padding-bottom: var(--space-5);
}

.index-cite,
.commodity-specifications,
.commodity-availability,
.commodity-resource-panel,
.alert-section {
  border-top: 1px solid var(--hairline);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
}

.index-cite__title,
.alert-section__title {
  font-size: var(--text-h3);
  margin-top: 0;
}

.index-cite__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin-top: var(--space-4);
}

.index-cite__list > div {
  border-top: 1px solid var(--hairline);
  padding: var(--space-3) 0;
}

.index-cite__list dt {
  color: var(--muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

.index-cite__list dd {
  font-weight: var(--weight-semibold);
  margin: var(--space-1) 0 0;
}

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

@media (max-width: 40rem) {
  .index-cite__list {
    grid-template-columns: 1fr;
  }
}

@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,
  .board-table__week,
  .board-table__ytd,
  .board-table__yoy { 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__week,
  .board-table__month,
  .board-table__ytd,
  .board-table__yoy,
  .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); }
@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-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; } }

/* Compact quote workspace: family tabs, view tabs, one full-width table. */
body:has(.markets-workspace) { background: var(--surface); }
body:has(.markets-workspace) main { min-height: calc(100vh - var(--header-h)); }

.markets-workspace {
  width: min(calc(100% - (2 * var(--space-5))), var(--wrap-max));
  margin-inline: auto;
  padding-bottom: var(--space-5);
  color: var(--ink);
  font-family: var(--font-sans);
}

.markets-workspace__context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}

.markets-workspace__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.markets-workspace__context nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  white-space: nowrap;
}

.markets-workspace__context a { color: var(--brand-700); text-decoration: none; }
.markets-workspace__context a:hover { text-decoration: underline; }
.markets-workspace__context nav span[aria-current="page"] { color: var(--muted); }
.markets-workspace__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.markets-workspace__date { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }

.markets-workspace__status { margin: 2px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; }

.markets-workspace__toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 25;
  background: var(--surface);
}

.markets-workspace__families,
.markets-workspace__modes {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  background: var(--surface);
  border: 0; border-bottom: 1px solid var(--hairline);
  scrollbar-width: thin;
  white-space: nowrap;
}

.markets-workspace__families {
  min-height: 40px;
}

.markets-workspace__families a,
.markets-workspace__families button,
.markets-workspace__modes a,
.markets-workspace__modes > span {
  display: inline-flex;
  align-items: center;
  min-height: inherit;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
}

.markets-workspace__families a.is-active,
.markets-workspace__modes a.is-active {
  background: var(--brand-50);
  box-shadow: inset 0 2px 0 var(--brand-600);
}

.markets-workspace__families a:hover,
.markets-workspace__families button:hover,
.markets-workspace__modes a:hover { background: var(--brand-50); }

.markets-workspace__export {
  margin-left: auto;
  cursor: pointer;
}

.markets-workspace__modes {
  width: max-content;
  min-width: min(100%, 34rem);
  min-height: 39px;
}

.markets-workspace__currency-groups {
  width: 100%;
  border-top: 0;
}

.markets-workspace__modes a,
.markets-workspace__modes > span {
  gap: 5px;
  padding-inline: 12px;
  font-size: 12px;
}

.market-quotes-scroll {
  width: 100%;
  margin-top: 12px;
  overflow-x: auto;
}

.market-quotes {
  width: 100%;
  min-width: 720px;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.market-quotes--currencies { min-width: 880px; }
.market-quotes__col-name { width: 26%; }
.market-quotes--currencies .market-quotes__col-name { width: 13%; }
.market-quotes__col-price { width: 13%; }

.market-quotes tbody tr.market-quotes__category-header {
  height: 40px;
}
.market-quotes tbody tr.market-quotes__category-header,
.market-quotes tbody tr.market-quotes__category-header:nth-child(even),
.market-quotes tbody tr.market-quotes__category-header:hover,
.market-quotes tbody tr.market-quotes__category-header:hover > th {
  background: var(--brand-100);
}
.market-quotes tbody tr.market-quotes__category-header th {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: var(--brand-100);
  color: var(--brand-800);
  border-bottom: 1px solid var(--hairline);
  height: 40px;
}
.market-quotes__col-change { width: 14%; }
.market-quotes__col-percent { width: 11%; }
.market-quotes__col-weekly { width: 10%; }
.market-quotes__col-monthly { width: 10%; }
.market-quotes__col-ytd { width: 11%; }
.market-quotes__col-yoy { width: 10%; }
.market-quotes__col-date { width: 10%; }
.market-quotes--currencies .market-quotes__col-date { width: 10%; }

.market-quotes thead th {
  height: 34px;
  padding: 0 10px;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

.market-quotes thead th:first-child { text-align: left; }
.market-quotes thead th:not(:first-child) { text-align: right; }

.market-quotes thead a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.market-quotes thead th:first-child a { justify-content: flex-start; }
.market-quotes thead th:not(:first-child) a { justify-content: flex-end; }
.market-quotes thead a:hover { color: var(--brand-700); }
.market-quotes thead a span { color: var(--muted); font-size: .75rem; }
.market-quotes thead th[aria-sort="ascending"] a span,
.market-quotes thead th[aria-sort="descending"] a span { color: var(--brand-700); }

.market-quotes tbody tr { height: 40px; }

.market-quotes tbody th,
.market-quotes tbody td {
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.market-quotes tbody th {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
}

.market-quotes tbody th a {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-overflow: ellipsis;
}

.market-quotes__flag {
  display: inline-block;
  margin-right: 6px;
  font-size: 14px;
  line-height: 1;
  vertical-align: -1px;
}

.market-quotes tbody th a:hover { text-decoration: underline; }

.market-quotes tbody th small {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
}

.market-quotes--currencies tbody th small { display: none; }

.market-quotes tbody td.market-quotes__change { text-align: right; }
.market-quotes tbody td.market-quotes__direction--up { color: var(--success); }
.market-quotes tbody td.market-quotes__direction--down { color: var(--danger); }
.market-quotes tbody td.market-quotes__price,
.market-quotes tbody td.market-quotes__heat,
.market-quotes tbody td.market-quotes__date { text-align: right; }

.market-quotes tbody td { font-variant-numeric: tabular-nums; }

.term-chart__figure { position: relative; }

.index-chart__tooltip {
  position: absolute;
  transform: translate(-50%, -100%);
  padding: 2px var(--space-2);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: var(--surface);
  color: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
}

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

.fx-matrix__table td a { color: var(--ink); text-decoration: none; }
.fx-matrix__table td a:hover { text-decoration: underline; }

.market-quotes__spark { display: inline-block; float: right; margin-top: 2px; }
.market-quotes__spark polyline { stroke: var(--brand-600); stroke-width: 1; }

.market-quotes__group-meta { margin-left: var(--space-2); font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }

.market-quotes__footer { margin: var(--space-2) 0 0; color: var(--muted); font-size: 12px; }

.markets-workspace__tools { display: flex; gap: var(--space-2); align-items: center; margin-left: auto; }

.markets-workspace__filter {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1 var(--font-sans);
}

.markets-workspace__filter:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 2px var(--brand-100); }

.market-movers--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 80rem) {
  .market-movers--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.market-movers__value { color: var(--muted); font-variant-numeric: tabular-nums; }

.market-summary {
  display: flex;
  gap: 0;
  margin: 0 0 var(--space-4);
  padding: 0;
  overflow-x: auto;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  list-style: none;
}

.market-summary__item { flex: 0 0 auto; }

.market-summary__item + .market-summary__item { border-left: 1px solid var(--hairline); }

.market-summary__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.market-summary__link:hover { background: var(--brand-50); }

.market-summary__name { font-size: 11px; font-weight: var(--weight-semibold); color: var(--muted); }

.market-summary__value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.market-summary__change { font-size: 11px; font-variant-numeric: tabular-nums; }

.market-summary__period { font-size: 10px; color: var(--muted); }

.market-summary__change--big { font-weight: var(--weight-semibold); }

.market-summary__change.market-quotes__direction--up { color: var(--success); }
.market-summary__change.market-quotes__direction--down { color: var(--danger); }

.market-movers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0 0 var(--space-5);
}

.market-movers__title {
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: var(--weight-semibold);
}

.market-movers__list { margin: 0; padding: 0; list-style: none; }

.market-movers__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  height: 34px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}

.market-movers__row a {
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market-movers__row a:hover { text-decoration: underline; }

.market-movers__pct { font-variant-numeric: tabular-nums; }

.market-movers__pct.market-quotes__direction--up { color: var(--success); }
.market-movers__pct.market-quotes__direction--down { color: var(--danger); }

.markets-workspace__tab-count { font-size: 11px; color: var(--muted); }

@media (max-width: 48rem) {
  .market-movers { grid-template-columns: minmax(0, 1fr); }
  .market-movers--four { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  .market-quotes__col-change,
  .market-quotes thead th:nth-child(3),
  .market-quotes tbody td.market-quotes__change { display: none; }
  .market-quotes { min-width: 0; }
}

.market-quotes tbody tr:nth-child(even) > th,
.market-quotes tbody tr:nth-child(even) > td:not(.market-quotes__heat) {
  background: #f8f9fa;
}

.market-quotes tbody tr:hover > th,
.market-quotes tbody tr:hover > td:not(.market-quotes__heat) {
  background: var(--brand-50);
}


.markets-workspace__empty { margin: var(--space-5) 0; }
.markets-workspace__empty-cell { padding: var(--space-7) var(--space-4); text-align: center; color: var(--muted); font-size: 14px; }

.markets-workspace__panel {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--surface);
  max-width: 38rem;
}

.markets-workspace__panel-title {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.markets-workspace__panel-intro {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.markets-workspace__form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.markets-workspace__form-label {
  flex-basis: 100%;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--muted);
}

.markets-workspace__form-input {
  flex: 1 1 16rem;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 400 14px/1 var(--font-sans);
}

.markets-workspace__form-input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.markets-workspace__form-submit {
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 4px;
  background: var(--brand-700);
  color: #fff;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
}

.markets-workspace__form-submit:hover { background: var(--brand-800); }

.markets-workspace__form-submit--danger {
  background: var(--danger);
  font-size: 12px;
  padding: 0 var(--space-3);
  min-height: 32px;
}

.markets-workspace__form-submit--danger:hover { background: var(--danger-strong, #8f1d17); }

.alert-form__errors,
.alert-form__error {
  color: var(--danger);
}

.alert-form__errors {
  margin-bottom: var(--space-3);
}

.alert-form__error {
  margin: var(--space-1) 0 0;
  font-size: 12px;
}

@media (max-width: 48rem) {
  .markets-workspace {
    width: min(calc(100% - (2 * var(--space-3))), var(--wrap-max));
  }
  .markets-workspace__context { align-items: flex-start; flex-direction: column; gap: 2px; padding-block: 10px; }
  .markets-workspace__date { font-size: .75rem; }
  .markets-workspace__modes { margin-top: 6px; }
  .market-quotes-scroll { margin-top: 10px; }
  .market-quotes { min-width: 620px; }
  .market-quotes__optional { display: none; }
  .market-quotes__col-name { width: 28%; }
  .market-quotes__col-date { width: 14%; }
  .market-quotes thead th:first-child,
  .market-quotes tbody tr:not(.market-quotes__category-header) > th:first-child {
    position: sticky;
    inset-inline-start: 0;
    border-inline-end: 1px solid var(--hairline);
  }
  .market-quotes thead th:first-child {
    z-index: 3;
    background: var(--paper);
  }
  .market-quotes tbody tr:not(.market-quotes__category-header) > th:first-child {
    z-index: 2;
    background: var(--surface);
  }
  .market-quotes tbody tr:nth-child(even):not(.market-quotes__category-header) > th:first-child {
    background: #f8f9fa;
  }
  .market-quotes tbody tr:not(.market-quotes__category-header):hover > th:first-child {
    background: var(--brand-50);
  }
  .market-quotes tbody th:first-child a:focus-visible {
    outline: 2px solid var(--brand-700);
    outline-offset: 2px;
  }
}

}

/* ==========================================================================
   Detail page — two-column market terminal (reference-mirror)
   Desktop: main column ~2/3 + 250px right rail; rail collapses below 56rem.
   Blue instrument bar, 24px tabs, five-cell 9-10px/12-14px stats strip,
   one compact chart toolbar, blue-filled chart with fine grid + right axis,
   inline timeframe links, dense comparison table, and a rail of compact
   search / related-commodities board / markets news. 1px #d9dde3 borders,
   no shadows, no boxes, no oversized type.
   ========================================================================== */

:root {
  --term-blue: var(--brand-700);          /* 777 deep green — instrument bar, chart line */
  --term-blue-deep: var(--brand-900);     /* darker green — active states */
  --term-blue-fill: rgba(20, 92, 67, 0.14);  /* green chart area fill */
  --term-border: var(--hairline);         /* d8dfdb — 777 hairline */
  --term-grid: var(--muted-bg);           /* ecefec — 777 muted background for chart grid */
  --heat-up-min: #ebfbef;
  --heat-up-max: #34d65f;
  --heat-down-min: #feebeb;
  --heat-down-max: #f93639;
}

/* --- Instrument bar ------------------------------------------------------- */

.term-instrument {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
  padding: 8px var(--space-3);
  background: var(--term-blue);
  color: #fff;
}

.term-instrument__name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term-instrument__unit {
  margin-left: var(--space-2);
  font-size: 10px;
  font-weight: var(--weight-regular);
  opacity: 0.85;
}

.term-instrument__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.term-instrument__links a {
  color: #fff;
  font-size: 11px;
  opacity: 0.92;
  text-decoration: none;
}

.term-instrument__links a:hover,
.term-instrument__links a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

/* --- 24px detail tabs ------------------------------------------------------ */

.term-tabs {
  display: flex;
  height: 24px;
  border: 1px solid var(--term-border);
  border-top: 0;
  background: var(--surface);
}

.term-tabs__tab {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-right: 1px solid var(--term-border);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--muted);
  text-decoration: none;
}

.term-tabs__tab:last-child { border-right: 0; }
.term-tabs__tab:hover { background: var(--brand-50); color: var(--ink); }

.term-tabs__tab:first-child {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--term-blue);
}

/* --- Five-cell stat row ---------------------------------------------------- */

.term-stats {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--term-border);
}

.term-stats__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

.term-stats__row--cols-2 { grid-template-columns: repeat(2, 1fr); }
.term-stats__row--cols-3 { grid-template-columns: repeat(3, 1fr); }
.term-stats__row--cols-4 { grid-template-columns: repeat(4, 1fr); }
.term-stats__row--cols-5 { grid-template-columns: repeat(5, 1fr); }

.term-stats__cell {
  min-width: 0;
  padding-right: var(--space-3);
  border-right: 1px solid var(--term-border);
}

.term-stats__cell:last-child { border-right: 0; }

.term-stats__label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.term-stats__value {
  margin: 0;
  font-size: 13px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.term-stats__value--actual {
  font-size: 18px;
}

.term-stats__note {
  display: block;
  font-size: 10px;
  font-weight: var(--weight-regular);
  color: var(--muted);
}

.term-stats__stamp {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 10px;
}

/* --- Two-column grid -------------------------------------------------------- */

.term-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5) 0 0;
}

.term-main { min-width: 0; }
.term-rail { min-width: 0; }

@media (max-width: 48rem) {
  .term-grid { grid-template-columns: minmax(0, 1fr); }
  .term-rail {
    padding-top: var(--space-4);
    border-top: 1px solid var(--term-border);
  }
}

/* --- Compact chart toolbar --------------------------------------------------- */

.term-chart-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 24px;
  padding: 2px var(--space-3);
  border: 1px solid var(--term-border);
  border-bottom: 0;
  background: var(--surface);
}

.term-chart-tools__title {
  margin: 0;
  font-size: 12px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.term-chart-tools__actions {
  display: flex;
  gap: var(--space-3);
}

.term-chart-tools__actions a {
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
}

.term-chart-tools__actions a:hover { color: var(--term-blue); }

/* --- Blue-filled chart -------------------------------------------------------- */

.term-chart__figure {
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-2);
  border: 1px solid var(--term-border);
  background: var(--surface);
}

.term-chart__figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.term-chart__area {
  fill: var(--term-blue-fill);
  stroke: none;
}

.term-chart__figure polyline {
  fill: none;
  stroke: var(--term-blue);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.term-chart__figure .index-chart__grid {
  stroke: var(--term-grid);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.term-chart__figure .index-chart__baseline {
  stroke: var(--term-border);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

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

.term-chart__figure .index-chart__current {
  fill: var(--term-blue-deep);
  font-size: 1.15px;
  font-weight: var(--weight-semibold);
}

.term-chart__figure .index-chart__point {
  fill: var(--term-blue);
  stroke: var(--surface);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
}

.term-chart__foot {
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: 10px;
}

/* --- Inline timeframe links --------------------------------------------------- */

.term-timeframe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: var(--space-4) 0 0;
}

.term-timeframe__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px var(--space-2);
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
}

.term-timeframe__link + .term-timeframe__link::before {
  content: "\00b7";
  margin-right: var(--space-3);
  color: var(--hairline);
}

.term-timeframe__link:hover { color: var(--term-blue); }

.term-timeframe__link[aria-current="page"] {
  color: var(--term-blue-deep);
  font-weight: var(--weight-bold);
  box-shadow: inset 0 -2px 0 var(--term-blue);
}

/* --- Summary card --------------------------------------------------------------- */

.term-summary {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  max-height: 126px;
  overflow-y: auto;
  border: 1px solid var(--term-border);
  background: var(--surface);
}

.term-summary__title {
  margin: 0 0 var(--space-1);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.term-summary p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted-fg);
}

/* --- Dense comparison table ------------------------------------------------------ */

.term-compare {
  margin-top: var(--space-5);
}

.term-compare__title {
  margin: 0 0 var(--space-2);
  font-size: 13px;
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.board-table--compare { font-size: 12px; }

.board-table--compare .board-table__head th {
  padding: 4px var(--space-2);
  font-size: 10px;
}

.board-table--compare .board-table__row th,
.board-table--compare .board-table__row td {
  height: 26px;
  padding: 4px var(--space-2);
  border-bottom: 1px solid var(--term-border);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.term-heat {
  display: inline-block;
  padding: 0 5px;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}

.term-heat--up { color: var(--success-fg); background: var(--success-bg); }
.term-heat--down { color: var(--danger-fg); background: var(--danger-bg); }

.term-text--up { color: var(--success-fg); }
.term-text--down { color: var(--danger-fg); }

/* --- Right rail: search / related board / news ------------------------------------ */

.term-search {
  display: block;
  margin-bottom: var(--space-4);
}

.term-search input {
  width: 100%;
  height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--term-border);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
}

.term-search input:focus {
  border-color: var(--term-blue);
  outline: 2px solid var(--term-blue);
  outline-offset: 1px;
}

.term-rail__title {
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.term-board {
  margin-bottom: var(--space-5);
}

.term-board__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.term-board__table thead th {
  padding: 3px var(--space-1);
  border-bottom: 1px solid var(--term-border);
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.term-board__table tbody td,
.term-board__table tbody th {
  height: 22px;
  padding: 3px var(--space-1);
  border-bottom: 1px solid var(--hairline);
  font-variant-numeric: tabular-nums;
}

.term-board__table tbody th a {
  color: var(--ink);
  text-decoration: none;
}

.term-board__table tbody th a:hover {
  color: var(--term-blue);
  text-decoration: underline;
}

.term-news__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.term-news__item {
  padding: 2px 0;
  border-bottom: 1px solid var(--hairline);
}

.term-news__item a {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
}

.term-news__item a:hover {
  color: var(--term-blue);
  text-decoration: underline;
}

.term-news__item time {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 9px;
}

/* --- Sparse continuation sections --------------------------------------------------- */

.market-detail-breadcrumb {
  margin: var(--space-3) 0 var(--space-2);
  font-size: 11px;
}

#term-stats,
#commodity-data,
#term-summary,
#history,
#news-rail,
#series-methodology,
#term-alert {
  scroll-margin-top: calc(var(--header-h) + var(--space-3));
}

.index-history,
.index-cite,
.alert-section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--term-border);
}

.index-history__title,
.index-cite__title,
.alert-section__title {
  font-size: 13px;
}

@media (max-width: 40rem) {
  .term-instrument {
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 4px var(--space-3);
  }
  .term-instrument__links { flex-wrap: wrap; }
  .term-stats__row { grid-template-columns: repeat(2, 1fr); }
  .term-stats__cell:nth-child(even) { border-right: 0; }
  .term-stats__cell:last-child:nth-child(odd) { border-right: 0; }
}

/* ---- CSP-clean heatmap tones (replaces inline style="color:...") ----
   Ten discrete shade steps per direction, matching the previous server-side
   interpolation exactly (rng 1-10; rng 10 = full color, rng 1 = 90% white).
   Full selectors keep equal specificity with the direction rules and win on
   source order. Appended after the responsive block so the tone classes also
   win inside media queries, preserving the old inline-style behavior. */
.market-quotes tbody td.market-quotes__heat--up-1,
.market-quotes tbody td.market-quotes__heat--up-2,
.market-quotes tbody td.market-quotes__heat--up-3,
.market-quotes tbody td.market-quotes__heat--up-4,
.market-quotes tbody td.market-quotes__heat--up-5 { color: var(--success); }
.market-quotes tbody td.market-quotes__heat--up-6,
.market-quotes tbody td.market-quotes__heat--up-7,
.market-quotes tbody td.market-quotes__heat--up-8,
.market-quotes tbody td.market-quotes__heat--up-9,
.market-quotes tbody td.market-quotes__heat--up-10 { color: var(--success); font-weight: var(--weight-semibold); }
.market-quotes tbody td.market-quotes__heat--down-1,
.market-quotes tbody td.market-quotes__heat--down-2,
.market-quotes tbody td.market-quotes__heat--down-3,
.market-quotes tbody td.market-quotes__heat--down-4,
.market-quotes tbody td.market-quotes__heat--down-5 { color: var(--danger); }
.market-quotes tbody td.market-quotes__heat--down-6,
.market-quotes tbody td.market-quotes__heat--down-7,
.market-quotes tbody td.market-quotes__heat--down-8,
.market-quotes tbody td.market-quotes__heat--down-9,
.market-quotes tbody td.market-quotes__heat--down-10 { color: var(--danger); font-weight: var(--weight-semibold); }

/* Owner decision 2026-08-14: breadcrumb strips removed sitewide. Placed last
   so later display declarations cannot resurrect the strip. */
.market-detail-breadcrumb,
nav[aria-label="Markets breadcrumb"] {
  display: none !important;
}

/* Cross-rate matrix (Bloomberg-style bracket, USD/CAD/CNY). */
.fx-matrix {
  margin-block: 24px 8px;
}

.fx-matrix__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.fx-matrix__head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
}

.fx-matrix__head p {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #607069);
}

.fx-matrix__scroll {
  overflow-x: auto;
}

.fx-matrix__table {
  width: 100%;
  max-width: 480px;
  border-collapse: collapse;
  font-family: var(--font-mono, ui-monospace, "IBM Plex Mono", monospace);
  font-size: 13px;
  line-height: 1.4;
}

.fx-matrix__table th,
.fx-matrix__table td {
  padding: 10px 14px;
  border: 1px solid var(--hairline, #d8dfdb);
  text-align: right;
  white-space: nowrap;
}

.fx-matrix__table thead th {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted, #607069);
  background: var(--surface, #fff);
}

.fx-matrix__table tbody th {
  font-family: var(--font-sans, "IBM Plex Sans", sans-serif);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  color: var(--ink, #13211c);
  background: var(--surface, #fff);
}

.fx-matrix__table .fx-matrix__corner {
  border: 0;
  background: transparent;
}

.fx-matrix__table .fx-matrix__diag {
  color: var(--brand-700, #145c43);
  font-weight: 700;
}

@media (max-width: 48rem) {
  .fx-matrix__head {
    flex-direction: column;
    gap: 4px;
  }
}

/* cross-rates tab jump: clear the sticky toolbar when anchored */
#fx-matrix-heading { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }

/* ---- currencies board: tab-row spacing and color polish (2026-08) ---- */
.markets-workspace__modes {
  width: 100%;
  min-height: 46px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
  gap: 6px;
}
.markets-workspace__currency-groups { border-top: 0; }
.markets-workspace__modes a {
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1 var(--font-sans);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.markets-workspace__modes a:hover { background: var(--brand-50); color: var(--brand-700); }
.markets-workspace__modes a.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--surface);
  box-shadow: none;
}
.fx-matrix { margin-top: var(--space-5); }
.market-quotes-scroll { margin-top: var(--space-5); }

/* ---- markets detail: title hierarchy, sentence-case table heads (2026-08) ---- */
.term-instrument__unit {
  display: block;
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: var(--weight-regular);
  opacity: 0.75;
}
.index-table thead th {
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
  font-size: var(--text-small);
}
.term-board__table thead th {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 10px;
}

/* ---- markets detail: hero rate, history export row (2026-08) ---- */
.term-stats__value--actual { font-size: 2rem; line-height: 1.1; }
.index-history__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.index-history__head .index-history__title { margin-bottom: 0; }
.index-history__export {
  color: var(--brand-700);
  font: 600 var(--text-small)/1.25rem var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}
.index-history__export:hover { text-decoration: underline; }

/* ---- markets detail: rail table alignment (2026-08) ---- */
.term-board__table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.term-board__table tbody td,
.term-board__table tbody th { height: 32px; }
.empty { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--hairline); border-radius: 2px; background: var(--surface); }
.empty .btn { margin-top: var(--space-3); }

/* ---- markets detail: dark terminal panel, single column (2026-08) ---- */
.term-instrument {
  display: block;
  padding: var(--space-4) var(--space-5);
  background: var(--brand-900);
  color: #fff;
}
.term-instrument__name {
  margin: 0 0 var(--space-3);
  font-size: 28px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.term-instrument__unit {
  display: block;
  margin: 2px 0 0;
  font-size: 14px;
  opacity: 0.7;
}
.term-stats {
  padding: 0;
  border-bottom: 0;
}
.term-stats__label { color: rgba(255, 255, 255, 0.62); }
.term-stats__value { color: #fff; }
.term-stats__value--actual { font-size: 2.25rem; line-height: 1.05; }
.term-stats__note { color: rgba(255, 255, 255, 0.5); }
.term-stats__stamp { color: rgba(255, 255, 255, 0.62); }
.term-instrument .index-change--up { color: #7ee2a8; }
.term-instrument .index-change--down { color: #ff9d95; }
.term-grid { grid-template-columns: minmax(0, 1fr); }
.term-board--band {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.term-news {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}
.term-news__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.term-news__item a { color: var(--ink); text-decoration: none; }
.term-news__item a:hover { color: var(--brand-700); }
.term-news__item time { color: var(--muted); font-size: var(--text-small); }
@media (max-width: 48rem) {
  .term-instrument { padding: var(--space-4) var(--space-4); }
  .term-stats__row { gap: var(--space-3); }
}

/* ---- markets detail: alert band spacing (2026-08) ---- */
.alert-section { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }

/* ---- markets detail: spacing and layout audit fixes (2026-08) ---- */
.term-tabs { margin-top: var(--space-5); }
.term-chart-tools { padding-inline: 0; }
.term-summary {
  margin: var(--space-5) 0 0;
  padding: 0;
  max-height: none;
  overflow: visible;
  border: 0;
  background: transparent;
}
.term-summary__title { margin: 0 0 var(--space-2); }
.term-board--band { margin-bottom: 0; }
.index-table { max-width: none; }
.term-stats__cell {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ---- markets detail: consolidated audit fixes (2026-08) ---- */
.term-instrument { border-radius: 2px; }
.term-instrument__name { font-size: 1.5rem; }
.term-stats__label { font-size: 11px; }
.term-stats__stamp { font-size: 11px; }
.term-chart-tools__title { font-size: 13px; }
.term-board--band .term-rail__title,
.term-news .term-rail__title {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--ink);
  border-bottom: 0;
  padding-bottom: 0;
}
.index-history__export { font-size: 12px; }
.index-table th:first-child,
.index-table td:first-child { width: 260px; }
.index-cite__list dt { width: 10rem; }

/* ---- markets detail: row heights (2026-08) ---- */
.board-table__row th,
.board-table__row td { height: 32px; }
.index-table tbody tr { height: 34px; }