/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: modern-minimal · macrostructure: Workbench
 * page variation: stat readout + chart work surfaces
 * theme: Cobalt-derived · design-system: design.md · designed-as-app
 */
@import "site-shell.css";

.hero::after {
  content: none;
}

.hero > .wrap {
  grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr);
}

.statusline {
  align-self: stretch;
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding-inline-start: var(--space-lg);
  border-inline-start: var(--rule-fine) solid var(--color-rule);
}

.statusline .pill {
  width: fit-content;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: var(--color-transparent);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.statusline .pill::before {
  content: "";
  width: var(--space-xs);
  height: var(--space-xs);
  margin-inline-end: var(--space-xs);
  background: var(--color-success);
}

.statusline .pill.pending::before {
  background: var(--color-warning);
}

.kpis {
  padding-block-start: var(--space-lg);
}

.kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
}

.market-card {
  border-radius: var(--radius-card);
}

.market-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
}

.market-title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.market-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  display: grid;
  place-items: center;
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 600;
}

.market-body {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 0.7fr);
  gap: var(--space-lg);
  padding: var(--space-md);
}

.chart-shell {
  min-width: 0;
}

.chart-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-end: var(--space-xs);
}

.chart-top b {
  font-size: var(--text-sm);
}

.legend {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.legend i {
  display: inline-block;
  width: var(--space-lg);
  height: var(--rule-fine);
  margin-inline-end: var(--space-2xs);
  vertical-align: middle;
  background: var(--color-ink);
}

.chart-scroll {
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}

.chart {
  position: relative;
  min-width: 42rem;
  height: 20rem;
  padding: var(--space-sm);
}

.chart.long-history {
  min-width: 66rem;
}

.chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-empty {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
  color: var(--color-muted);
  text-align: center;
}

.chart-help {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.side {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-block: var(--rule-hair) solid var(--color-rule);
}

.fact {
  padding-block: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.fact:last-child {
  border-block-end: 0;
}

.fact span {
  display: block;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.fact strong {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-md);
}

.fact p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.source {
  padding-block: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-warning-soft);
}

.source b {
  color: var(--color-warning);
  font-size: var(--text-sm);
}

.source p,
.source a {
  margin: var(--space-2xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.source a {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: var(--space-xs);
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.market-insight {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-inline: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

.insight-column {
  padding: var(--space-md);
}

.insight-column + .insight-column {
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.insight-column span {
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 600;
}

.insight-column.recent span {
  color: var(--color-success);
}

.insight-column p {
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.insight-sources {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}

.insight-sources b,
.insight-sources a,
.insight-sources small {
  font-size: var(--text-xs);
}

.insight-sources a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.insight-sources small {
  width: 100%;
  color: var(--color-muted);
}

details.audit {
  border-block-start: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
}

details.audit summary {
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-neutral);
  font-size: var(--text-sm);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

details.audit summary::after {
  content: "+";
  float: inline-end;
  color: var(--color-accent);
  font-family: var(--font-outlier);
}

details.audit[open] summary::after {
  content: "−";
}

.audit-body {
  padding: 0 var(--space-md) var(--space-md);
}

.data-table {
  min-width: 40rem;
}

.data-table.jepx-table {
  min-width: 65rem;
}

.benchmark-note {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.benchmark-note > b {
  display: block;
  color: var(--color-ink);
}

.benchmark-note p {
  margin-block: var(--space-xs) 0;
}

.benchmark-note p b {
  color: var(--color-neutral);
}

.benchmark-note small {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
}

.auction-card {
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--rule-fine) solid var(--color-success);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.auction-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
}

.auction-card-head span {
  color: var(--color-success);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 600;
}

.auction-card-head h3 {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-lg);
}

.auction-card-head p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.auction-card-head a {
  min-height: 2.75rem;
  display: inline-flex;
  flex: none;
  align-items: center;
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.auction-latest {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-inline: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.auction-latest > div {
  padding: var(--space-sm);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.auction-latest > div:first-child {
  border-inline-start: 0;
}

.auction-latest span,
.auction-latest small {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.auction-latest strong {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.auction-latest small {
  margin-block-start: var(--space-2xs);
}

.auction-insight,
.risk-practice-insight {
  margin: var(--space-md);
  padding: var(--space-md);
  border-inline-start: var(--rule-fine) solid var(--color-success);
  background: var(--color-success-soft);
}

.risk-practice-insight {
  margin-inline: 0;
}

.auction-insight b,
.risk-practice-insight b {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.auction-insight p,
.risk-practice-insight p {
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.auction-insight small,
.risk-practice-insight small {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.auction-insight a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.auction-card > .chart-scroll {
  margin: var(--space-md);
}

.auction-card > .chart-help {
  margin: calc(var(--space-md) * -1 + var(--space-xs)) var(--space-md) var(--space-md);
}

.auction-chart {
  position: relative;
  min-width: 58rem;
  height: 22rem;
  padding: var(--space-sm);
}

.auction-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.nonfossil-table {
  min-width: 62rem;
}

.supply-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding-block: var(--space-sm);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.supply-toolbar label {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.supply-toolbar select {
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
}

.supply-toolbar span {
  margin-inline-start: auto;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.supply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.supply-card {
  min-width: 0;
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--rule-fine) solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.supply-card + .supply-card {
  border-block-start-color: var(--color-violet);
}

.supply-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block-end: var(--space-sm);
}

.supply-card-head span,
.supply-card-head small {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.supply-card-head h3 {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-md);
}

.supply-chart {
  position: relative;
  min-width: 48rem;
  height: 22rem;
  padding: var(--space-sm);
}

.supply-chart canvas {
  width: 100% !important;
  height: 100% !important;
}

.supply-insight {
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border-inline-start: var(--rule-fine) solid var(--color-success);
  background: var(--color-success-soft);
}

.supply-insight b {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.supply-insight p {
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.supply-insight small {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.supply-caveats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.supply-caveats > div {
  padding: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.supply-caveats > div:first-child {
  border-inline-start: 0;
}

.supply-caveats b {
  font-size: var(--text-sm);
}

.supply-caveats p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.supply-caveats a {
  display: block;
  min-height: 2.75rem;
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.spread-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.spread-card {
  overflow: hidden;
  border: var(--rule-hair) solid var(--color-rule);
  border-block-start: var(--rule-fine) solid var(--color-warning);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.spread-card.spark {
  border-block-start-color: var(--color-success);
}

.spread-content {
  padding: var(--space-md);
}

.spread-content h3 {
  font-size: var(--text-lg);
}

.spread-definition {
  margin: var(--space-2xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.spread-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block: var(--space-md);
}

.spread-kpi span {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.spread-kpi strong {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.formula {
  flex: none;
  padding: var(--space-xs);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.formula-detail {
  margin-block-end: var(--space-md);
  padding: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}

.formula-detail b {
  display: block;
  margin-block-end: var(--space-xs);
  font-size: var(--text-sm);
}

.formula-detail code {
  display: block;
  color: var(--color-ink);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.formula-detail p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.formula-detail p code {
  display: inline;
}

.spread-breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
  padding: var(--space-sm);
  border-block: var(--rule-hair) solid var(--color-rule);
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.spread-breakdown b {
  width: 100%;
  font-size: var(--text-xs);
}

.spread-breakdown i {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-style: normal;
}

.spread-insight {
  margin-block-start: var(--space-md);
  padding: var(--space-sm);
  border-inline-start: var(--rule-fine) solid var(--color-accent);
  background: var(--color-accent-soft);
}

.spread-card.spark .spread-insight {
  border-inline-start-color: var(--color-success);
  background: var(--color-success-soft);
}

.spread-insight b {
  font-size: var(--text-sm);
}

.spread-insight p {
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

.spread-context {
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.spread-context h3 {
  font-size: var(--text-md);
}

.spread-context p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.spread-context a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  margin-block-start: var(--space-xs);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
}

.spread-chart {
  position: relative;
  min-width: 34rem;
  height: 16rem;
  padding: var(--space-sm);
}

.ir-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-block-end: var(--space-md);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.ir-metric {
  padding: var(--space-md);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.ir-metric:first-child {
  border-inline-start: 0;
}

.ir-metric span {
  display: block;
  color: var(--color-violet);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.ir-metric strong {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.ir-metric small {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.ir-table-card {
  border-radius: var(--radius-card);
}

.ir-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.ir-table {
  min-width: 62rem;
}

.ir-table td:first-child {
  color: var(--color-ink);
  font-weight: 700;
}

.ir-table small {
  display: block;
  margin-block-start: var(--space-3xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.ir-table a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
}

.ir-footnote {
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-block: var(--rule-hair) solid var(--color-rule);
}

.method {
  padding: var(--space-lg);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.method:first-child {
  border-inline-start: 0;
}

.method span {
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.method h3 {
  margin-block-start: var(--space-xs);
  font-size: var(--text-md);
}

.method p {
  margin: var(--space-xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

@media (hover: hover) and (pointer: fine) {
  .source a:hover,
  .ir-table a:hover,
  .auction-card-head a:hover {
    color: var(--color-ink);
  }

  details.audit summary:hover {
    background: var(--color-paper-3);
  }
}

@media (max-width: 72rem) {
  .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .kpi:nth-child(4) {
    border-inline-start: 0;
  }

  .kpi:nth-child(n + 4) {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 64rem) {
  .market-body,
  .spread-grid,
  .supply-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: var(--rule-hair) solid var(--color-rule);
  }

  .fact,
  .source {
    padding: var(--space-sm);
    border: 0;
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }

  .fact:nth-child(odd) {
    border-inline-end: var(--rule-hair) solid var(--color-rule);
  }

  .ir-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ir-metric:nth-child(3) {
    border-inline-start: 0;
  }

  .ir-metric:nth-child(n + 3) {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 52rem) {
  .hero > .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .statusline {
    padding-block-start: var(--space-md);
    padding-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule);
    border-inline-start: 0;
  }

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

  .kpi:nth-child(3),
  .kpi:nth-child(5) {
    border-inline-start: 0;
  }

  .kpi:nth-child(n + 3) {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  .market-head,
  .market-body,
  .spread-content,
  .auction-card-head {
    padding: var(--space-sm);
  }

  .auction-latest {
    margin-inline: var(--space-sm);
  }

  .auction-card > .chart-scroll {
    margin: var(--space-sm);
  }

  .auction-card > .chart-help {
    margin: calc(var(--space-sm) * -1 + var(--space-xs)) var(--space-sm) var(--space-sm);
  }

  .chart {
    height: 18rem;
  }

  .market-insight {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: var(--space-sm);
  }

  .insight-column + .insight-column {
    border-block-start: var(--rule-hair) solid var(--color-rule);
    border-inline-start: 0;
  }

  .method-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .supply-caveats {
    grid-template-columns: minmax(0, 1fr);
  }

  .supply-caveats > div,
  .supply-caveats > div:first-child {
    border-inline-start: 0;
  }

  .supply-caveats > div + div {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  .method {
    border-inline-start: 0;
  }

  .method + .method {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 30rem) {
  .market-title {
    display: block;
  }

  .market-icon {
    margin-block-end: var(--space-xs);
  }

  .side {
    grid-template-columns: minmax(0, 1fr);
  }

  .auction-card-head {
    display: block;
  }

  .auction-card-head a {
    margin-block-start: var(--space-xs);
  }

  .auction-latest {
    grid-template-columns: minmax(0, 1fr);
  }

  .auction-latest > div,
  .auction-latest > div:first-child {
    border-inline-start: 0;
  }

  .auction-latest > div + div {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  .fact:nth-child(odd) {
    border-inline-end: 0;
  }

  .ir-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .ir-metric,
  .ir-metric:nth-child(3) {
    border-inline-start: 0;
  }

  .ir-metric + .ir-metric {
    border-block-start: var(--rule-hair) solid var(--color-rule);
  }

  .spread-kpi {
    display: block;
  }

  .formula {
    width: fit-content;
    margin-block-start: var(--space-sm);
  }

  .supply-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .supply-toolbar span {
    width: 100%;
    margin-inline-start: 0;
  }

  .supply-card-head {
    display: block;
  }

  .supply-card-head small {
    display: block;
    margin-block-start: var(--space-xs);
  }
}

.compact-section {
  padding-block-start: var(--space-lg);
}

.data-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.data-health-card {
  min-width: 0;
  padding: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
}

.data-health-card span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.data-health-card span::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-muted);
}

.data-health-card span.current::before {
  background: var(--color-success);
}

.data-health-card span.warning::before {
  background: var(--color-warning);
}

.data-health-card span.stale::before {
  background: var(--color-danger);
}

.data-health-card b {
  display: block;
  margin-block-start: var(--space-xs);
  font-family: var(--font-display);
}

.data-health-card p {
  margin: var(--space-2xs) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.risk-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-input);
}

.risk-toolbar label {
  color: var(--color-neutral);
  font-size: var(--text-sm);
  font-weight: 700;
}

.risk-toolbar select {
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  background: var(--color-paper);
  border: var(--rule-fine) solid var(--color-rule-2);
  border-radius: var(--radius-input);
  color: var(--color-ink);
  font: inherit;
}

.risk-toolbar span {
  margin-inline-start: auto;
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
}

.interval-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-block-end: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.interval-kpi {
  min-width: 0;
  padding: var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
}

.interval-kpi:last-child {
  border-inline-end: 0;
}

.interval-kpi span {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.interval-kpi strong {
  display: block;
  margin-block-start: var(--space-2xs);
  font-family: var(--font-outlier);
  font-size: clamp(1.2rem, 2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
}

.interval-kpi small {
  display: block;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.interval-card {
  margin-block-start: var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.interval-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.interval-card-head span {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.interval-card-head small {
  color: var(--color-muted);
}

.heatmap-scroll {
  overflow-x: auto;
  padding: var(--space-md);
}

.heatmap-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-family: var(--font-outlier);
  font-size: 0.625rem;
}

.heatmap-table th {
  height: 1.5rem;
  color: var(--color-muted);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.heatmap-table th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-width: 5.75rem;
  background: var(--color-paper);
  text-align: start;
}

.heatmap-cell {
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  border-radius: 2px;
}

.interval-card .table-scroll {
  padding: 0 var(--space-md) var(--space-md);
}

.interval-empty {
  padding: var(--space-lg);
  color: var(--color-neutral);
  font-size: var(--text-sm);
}

@media (max-width: 64rem) {
  .data-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interval-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interval-kpi {
    border-block-end: var(--rule-hair) solid var(--color-rule);
  }
}

@media (max-width: 52rem) {
  .data-health-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .risk-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .risk-toolbar span {
    margin-inline-start: 0;
  }

  .interval-card-head {
    display: block;
  }

  .interval-card-head small {
    display: block;
    margin-block-start: var(--space-xs);
  }
}

@media (max-width: 30rem) {
  .interval-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .interval-kpi {
    border-inline-end: 0;
  }
}

.market-depth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.depth-card {
  min-width: 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.depth-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.depth-card-head span {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.depth-card-head small {
  color: var(--color-muted);
  font-family: var(--font-outlier);
  font-size: var(--text-xs);
  text-align: end;
}

.depth-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.depth-kpi {
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.depth-kpi:nth-child(2n) {
  border-inline-end: 0;
}

.depth-kpi span,
.depth-kpi small {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.depth-kpi strong {
  display: block;
  margin-block: var(--space-3xs);
  font-family: var(--font-outlier);
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

.depth-chart {
  position: relative;
  height: 19rem;
  padding: var(--space-md);
}

.sensitivity-toolbar {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.sensitivity-toolbar button {
  min-height: 2.5rem;
  padding-inline: var(--space-sm);
  background: var(--color-paper);
  color: var(--color-neutral);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
}

.sensitivity-toolbar button.active {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
}

.market-depth-insight {
  margin-block-start: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-accent-soft);
  border-inline-start: var(--rule-thick) solid var(--color-accent);
  border-radius: var(--radius-input);
}

.market-depth-insight p {
  margin: var(--space-xs) 0 0;
  color: var(--color-neutral);
}

.market-depth-insight small {
  display: block;
  margin-block-start: var(--space-xs);
  color: var(--color-muted);
}

.depth-card .audit {
  margin: 0 var(--space-md) var(--space-md);
}

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

@media (max-width: 52rem) {
  .depth-card-head {
    display: block;
  }

  .depth-card-head small {
    display: block;
    margin-block-start: var(--space-xs);
    text-align: start;
  }
}

@media (max-width: 30rem) {
  .depth-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .depth-kpi {
    border-inline-end: 0;
  }

  .sensitivity-toolbar {
    overflow-x: auto;
  }

  .sensitivity-toolbar button {
    flex: 0 0 auto;
  }
}

.balance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-block: var(--space-lg) var(--space-md);
}

.balance-toolbar strong {
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.balance-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-block-end: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
}

.balance-kpi {
  min-width: 0;
  padding: var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.balance-kpi span,
.balance-kpi small {
  display: block;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.balance-kpi strong {
  display: block;
  margin-block: var(--space-3xs);
  font-family: var(--font-outlier);
  font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
  font-variant-numeric: tabular-nums;
}

.balance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.balance-card {
  min-width: 0;
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.balance-card-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
}

.balance-card-head span,
.balance-card-head small {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.balance-card-head h3 {
  margin: var(--space-3xs) 0 0;
}

.balance-chart {
  position: relative;
  height: 22rem;
  padding: var(--space-md);
}

.balance-insight {
  margin-block: var(--space-lg);
  padding: var(--space-lg);
  background: var(--color-accent-soft);
  border-inline-start: var(--rule-thick) solid var(--color-accent);
  border-radius: var(--radius-input);
}

.balance-insight p {
  margin: var(--space-xs) 0 0;
}

.balance-table small {
  color: var(--color-muted);
}

@media (max-width: 64rem) {
  .balance-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .balance-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 38rem) {
  .balance-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .balance-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .balance-chart {
    height: 18rem;
  }
}