:root {
  color-scheme: light;
  --page: #f7f9fb;
  --surface: #ffffff;
  --surface-soft: #f2f4f6;
  --surface-strong: #e7ecf2;
  --ink: #191f28;
  --ink-strong: #0b1018;
  --ink-soft: #4e5968;
  --ink-faint: #6b7684;
  --line: #e5e8eb;
  --line-strong: #d1d6db;
  --focus: #155eef;
  --brand: #3182f6;
  --brand-dark: #1b64da;
  --brand-soft: #eaf3ff;
  --brand-soft-strong: #d8eaff;
  --risk-on-text: #2055bc;
  --risk-on-mark: #2764d8;
  --risk-on: var(--risk-on-text);
  --risk-on-soft: #eef4ff;
  --transition-text: #7a4a00;
  --transition-mark: #b87713;
  --transition: var(--transition-text);
  --transition-soft: #fff4df;
  --risk-off-text: #a3385c;
  --risk-off-mark: #b54869;
  --risk-off: var(--risk-off-text);
  --risk-off-soft: #fff0f5;
  --positive: #008768;
  --negative: #e03131;
  --neutral: #6b7684;
  --status-ok-text: #006b52;
  --status-review-text: #805000;
  --chart-grid: #dfe5ec;
  --chart-text: #657386;
  --chart-risk-on: var(--risk-on-mark);
  --chart-transition: var(--transition-mark);
  --chart-risk-off: var(--risk-off-mark);
  --chart-panel: #fafbfd;
  --chart-regime-opacity: .08;
  --shadow: 0 8px 20px rgb(25 31 40 / 5%);
  --shadow-raised: 0 16px 36px rgb(25 31 40 / 8%);
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --content: 1320px;
  --site-nav-height: 59px;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
  --mono: var(--sans);
  --code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page: #111318;
  --surface: #181d26;
  --surface-soft: #242b38;
  --surface-strong: #303948;
  --ink: #f2f4f6;
  --ink-strong: #ffffff;
  --ink-soft: #c3ccda;
  --ink-faint: #a8b2c0;
  --line: #303948;
  --line-strong: #465368;
  --focus: #8ab8ff;
  --brand: #5da2ff;
  --brand-dark: #8ab8ff;
  --brand-soft: #182b44;
  --brand-soft-strong: #203452;
  --risk-on-text: #8eb1ff;
  --risk-on-mark: #2764d8;
  --risk-on: var(--risk-on-text);
  --risk-on-soft: #1d2f50;
  --transition-text: #f3c46f;
  --transition-mark: #b87713;
  --transition: var(--transition-text);
  --transition-soft: #46371d;
  --risk-off-text: #ff9abd;
  --risk-off-mark: #b54869;
  --risk-off: var(--risk-off-text);
  --risk-off-soft: #452634;
  --positive: #62d4a4;
  --negative: #ff8a8a;
  --neutral: #a8b2c0;
  --status-ok-text: #62d4a4;
  --status-review-text: #ffd166;
  --chart-grid: #303948;
  --chart-text: #a8b6c8;
  --chart-risk-on: var(--risk-on-text);
  --chart-transition: var(--transition-text);
  --chart-risk-off: var(--risk-off-text);
  --chart-panel: #1b212b;
  --chart-regime-opacity: .12;
  --shadow: 0 8px 20px rgb(0 0 0 / 16%);
  --shadow-raised: 0 16px 36px rgb(0 0 0 / 24%);
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-rendering: optimizeLegibility;
}

button,
input,
select {
  color: inherit;
  font: inherit;
}

button,
select,
input[type="date"] {
  min-height: 44px;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

code {
  font-family: var(--code);
  font-size: 0.9em;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-160%);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  font-weight: 750;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
}

.header-inner {
  display: flex;
  width: min(calc(100% - 40px), var(--content));
  min-height: 72px;
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--brand);
  border-radius: 11px;
  background: var(--brand);
  color: var(--surface);
  font-family: Georgia, serif;
  font-size: 21px;
  font-weight: 800;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.brand small {
  margin-top: 1px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.freshness {
  display: grid;
  line-height: 1.2;
  text-align: right;
}

.freshness-label {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.freshness strong {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 680;
}

.icon-button,
.button {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
}

.icon-button {
  width: 44px;
  padding: 0;
}

.icon-button:hover,
.button:hover {
  border-color: var(--line-strong);
  background: var(--surface-soft);
}

.button {
  min-height: 44px;
  padding: 0 17px;
}

.button-primary {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--surface);
}

.status-badge {
  display: inline-flex;
  min-height: 28px;
  padding: 4px 9px;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.status-symbol {
  display: inline-grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
}

.status-ok,
.status-low {
  border-color: var(--risk-on);
  background: var(--risk-on-soft);
  color: var(--risk-on);
}

.status-degraded,
.status-medium,
.status-stale {
  border-color: var(--transition);
  background: var(--transition-soft);
  color: var(--transition);
}

.status-error,
.status-blocked,
.status-high {
  border-color: var(--risk-off);
  background: var(--risk-off-soft);
  color: var(--risk-off);
}

.status-unknown {
  border-color: var(--line-strong);
  background: var(--surface-soft);
  color: var(--ink-soft);
}

main {
  min-height: calc(100vh - 72px);
}

.state-panel,
.dashboard-shell {
  width: min(calc(100% - 40px), var(--content));
  margin: 0 auto;
}

.state-panel {
  display: grid;
  min-height: 62vh;
  place-items: center;
}

.state-message {
  display: flex;
  width: min(100%, 680px);
  padding: 34px;
  align-items: flex-start;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.state-message h1 {
  margin: 0 0 8px;
  font-size: clamp(21px, 3vw, 28px);
  letter-spacing: -0.035em;
}

.state-message p {
  margin: 0;
  color: var(--ink-soft);
}

.state-message .button {
  margin-top: 20px;
}

.state-help {
  margin-top: 12px !important;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.state-icon,
.spinner {
  display: inline-grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 800;
}

.spinner {
  border-right-color: var(--focus);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dashboard-shell {
  padding: 44px 0 64px;
}

.control-bar {
  display: flex;
  margin-bottom: 24px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.title-group {
  max-width: 650px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.title-group h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 43px);
  font-weight: 780;
  letter-spacing: -0.055em;
  line-height: 1.12;
}

.subtitle,
.section-caption {
  color: var(--ink-soft);
}

.subtitle {
  max-width: 620px;
  margin: 11px 0 0;
  font-size: 14px;
}

.date-controls {
  display: flex;
  padding: 14px;
  align-items: flex-end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field-group {
  display: grid;
  gap: 5px;
}

.field-group label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.field-group small {
  max-width: 250px;
  color: var(--ink-faint);
  font-size: 10px;
}

select,
input[type="date"] {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  padding: 0 11px;
}

.compact-field select {
  width: 150px;
}

.step-buttons {
  display: flex;
  gap: 6px;
}

.alert-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.alert {
  display: flex;
  padding: 12px 15px;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
}

.alert strong {
  color: var(--ink);
}

.alert-warning {
  border-left-color: var(--transition);
}

.alert-error {
  border-left-color: var(--risk-off);
}

.card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: 16px;
  margin-bottom: 16px;
}

.regime-card,
.transition-card {
  padding: 24px;
}

.regime-card {
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--line-strong);
}

.regime-card.state-risk_on {
  border-top-color: var(--risk-on);
}

.regime-card.state-transition {
  border-top-color: var(--transition);
}

.regime-card.state-risk_off {
  border-top-color: var(--risk-off);
}

.card-kicker,
.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.card-kicker {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 760;
}

.horizon-label {
  display: inline-grid;
  min-width: 34px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
}

.regime-headline {
  display: flex;
  margin: 22px 0;
  align-items: center;
  gap: 15px;
}

.regime-symbol {
  display: inline-grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-soft);
  font-size: 26px;
  font-weight: 800;
}

.state-risk_on .regime-symbol {
  border-color: var(--risk-on);
  background: var(--risk-on-soft);
  color: var(--risk-on);
}

.state-transition .regime-symbol {
  border-color: var(--transition);
  background: var(--transition-soft);
  color: var(--transition);
}

.state-risk_off .regime-symbol {
  border-color: var(--risk-off);
  background: var(--risk-off-soft);
  color: var(--risk-off);
}

.regime-name {
  margin: 0;
  font-size: clamp(23px, 3vw, 32px);
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.15;
}

.regime-confidence {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.probability-list {
  display: grid;
  gap: 10px;
}

.probability-row {
  display: grid;
  grid-template-columns: 100px minmax(70px, 1fr) 50px;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.probability-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-weight: 650;
}

.state-dot {
  display: inline-grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 9px;
  line-height: 1;
}

.state-dot.risk_on { color: var(--risk-on); }
.state-dot.transition { color: var(--transition); }
.state-dot.risk_off { color: var(--risk-off); }

.probability-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}

.probability-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
}

.probability-fill.risk_on { background: var(--risk-on); }
.probability-fill.transition { background: var(--transition); }
.probability-fill.risk_off { background: var(--risk-off); }

.probability-value {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.card-footnote {
  color: var(--ink-faint);
  font-size: 11px;
}

.card-footnote {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.transition-value-row {
  display: flex;
  margin-top: 28px;
  align-items: baseline;
  gap: 10px;
}

.transition-value-row strong {
  font-family: var(--mono);
  font-size: clamp(34px, 5vw, 50px);
  letter-spacing: -0.06em;
  line-height: 1;
}

.transition-value-row span {
  color: var(--ink-soft);
  font-size: 12px;
}

.transition-meter {
  position: relative;
  height: 12px;
  margin: 22px 0 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}

.transition-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--transition);
  transition: width 240ms ease;
}

.transition-card.alert-high .transition-meter span { background: var(--risk-off); }
.transition-card.alert-low .transition-meter span { background: var(--risk-on); }

.card-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.analysis-grid,
.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(300px, 0.75fr);
  gap: 16px;
  margin-bottom: 16px;
}

.detail-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
}

.chart-card,
.factor-card,
.timeline-section,
.detail-grid > .card,
.model-section,
.health-section {
  padding: 24px;
}

.card-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.section-caption {
  margin: 6px 0 0;
  font-size: 12px;
}

.inline-field {
  flex: 0 0 auto;
}

.inline-field select {
  min-height: 38px;
}

.chart-legend {
  display: flex;
  margin: 20px 0 4px;
  flex-wrap: wrap;
  gap: 10px 20px;
  color: var(--ink-soft);
  font-size: 11px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.legend-line {
  width: 24px;
  height: 0;
  border-top: 3px solid currentColor;
}

.risk-on-line { color: var(--risk-on); }
.transition-line {
  border-top-style: dashed;
  color: var(--transition);
}
.risk-off-line {
  border-top-style: dotted;
  color: var(--risk-off);
}

.svg-chart-wrap {
  position: relative;
  min-height: 260px;
}

.probability-chart {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 260px;
  overflow: visible;
}

.chart-grid-line {
  stroke: var(--line);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--chart-text);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chart-date-label {
  fill: var(--chart-text);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.chart-series {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chart-series.risk_on { stroke: var(--risk-on); }
.chart-series.transition {
  stroke: var(--transition);
  stroke-dasharray: 10 6;
}
.chart-series.risk_off {
  stroke: var(--risk-off);
  stroke-dasharray: 2 7;
}

.chart-point {
  cursor: crosshair;
  fill: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-point.risk_on { stroke: var(--risk-on); }
.chart-point.transition { stroke: var(--transition); }
.chart-point.risk_off { stroke: var(--risk-off); }

.chart-point:hover,
.chart-point:focus {
  r: 5;
  stroke-width: 3;
}

.chart-selected-line {
  stroke: var(--ink-soft);
  stroke-dasharray: 4 5;
  stroke-width: 1.2;
}

.chart-tooltip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: 220px;
  padding: 9px 11px;
  pointer-events: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow);
  font-size: 11px;
  line-height: 1.45;
}

.data-details,
.feature-details {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

summary {
  width: fit-content;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 720;
}

.factor-axis {
  display: flex;
  margin: 28px 0 7px 118px;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.factor-list {
  display: grid;
  gap: 17px;
}

.factor-row {
  display: grid;
  grid-template-columns: 105px minmax(100px, 1fr) 48px;
  align-items: center;
  gap: 12px;
}

.factor-label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 680;
}

.factor-track {
  position: relative;
  height: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
}

.factor-track::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.factor-fill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-width: 2px;
  border-radius: 3px;
}

.factor-fill.positive {
  left: 50%;
  background: var(--positive);
}

.factor-fill.negative {
  right: 50%;
  background: var(--negative);
}

.factor-value {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
  text-align: right;
}

.empty-inline {
  margin: 20px 0 0;
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-faint);
  font-size: 12px;
  text-align: center;
}

.timeline-section,
.model-section,
.health-section {
  margin-bottom: 16px;
}

.timeline-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--ink-soft);
  font-size: 11px;
}

.timeline-track {
  display: flex;
  min-height: 58px;
  margin-top: 22px;
  padding: 3px;
  gap: 3px;
  overflow-x: auto;
}

.timeline-cell {
  display: grid;
  min-width: 8px;
  min-height: 48px;
  flex: 1 1 0;
  place-items: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0;
  font-weight: 850;
  line-height: 1;
}

.timeline-cell::after {
  font-size: 9px;
}

.timeline-cell.risk_on {
  border-color: var(--risk-on);
  background: var(--risk-on-soft);
  color: var(--risk-on);
}

.timeline-cell.risk_on::after { content: "↗"; }

.timeline-cell.transition {
  border-color: var(--transition);
  border-style: dashed;
  background: var(--transition-soft);
  color: var(--transition);
}

.timeline-cell.transition::after { content: "◆"; }

.timeline-cell.risk_off {
  border-color: var(--risk-off);
  border-style: double;
  background: var(--risk-off-soft);
  color: var(--risk-off);
}

.timeline-cell.risk_off::after { content: "↘"; }

.timeline-cell[aria-current="date"] {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.timeline-axis {
  display: flex;
  margin-top: 8px;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
}

.driver-list {
  display: grid;
  margin: 22px 0 0;
  padding: 0;
  gap: 13px;
  list-style: none;
  counter-reset: driver;
}

.driver-item {
  display: grid;
  grid-template-columns: 24px minmax(130px, 1fr) minmax(80px, 0.8fr) 68px;
  align-items: center;
  gap: 10px;
  counter-increment: driver;
}

.driver-item::before {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink-faint);
  content: counter(driver);
  font-family: var(--mono);
  font-size: 9px;
}

.driver-copy {
  min-width: 0;
}

.driver-copy strong,
.driver-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-copy strong {
  font-size: 12px;
}

.driver-copy span {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 10px;
}

.driver-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-strong);
}

.driver-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--neutral);
}

.driver-fill.risk_on { background: var(--risk-on); }
.driver-fill.transition { background: var(--transition); }
.driver-fill.risk_off { background: var(--risk-off); }

.driver-impact {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 720;
  text-align: right;
}

.metric-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0 0;
  gap: 10px;
}

.metric-list > div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.metric-list dt {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.5;
}

.metric-list dd {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 760;
}

.champion-summary {
  display: grid;
  min-width: 180px;
  padding: 10px 13px;
  border: 1px solid var(--risk-on);
  border-radius: 10px;
  background: var(--risk-on-soft);
  color: var(--risk-on);
}

.champion-summary span {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.champion-summary strong {
  margin-top: 2px;
  color: var(--ink);
  font-size: 13px;
}

.model-heading-controls {
  display: flex;
  min-width: 0;
  flex: 0 1 auto;
  align-items: end;
  gap: 10px;
}

.model-forecast-field {
  min-width: 250px;
}

.model-forecast-field select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.model-forecast-explorer {
  min-width: 0;
  margin-top: 20px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.model-forecast-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.model-forecast-heading h3 {
  margin: 4px 0 0;
  color: var(--ink-strong);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.model-forecast-role {
  display: inline-flex;
  min-height: 22px;
  padding: 3px 7px;
  align-items: center;
  border: 1px solid var(--brand);
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.model-forecast-role.is-comparison {
  border-color: var(--transition);
  background: var(--transition-soft);
  color: var(--transition);
}

.model-forecast-role.is-fallback {
  border-style: dashed;
}

.model-forecast-state {
  display: flex;
  min-width: 190px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.model-forecast-symbol {
  color: var(--brand);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.model-forecast-state > div {
  display: grid;
  gap: 2px;
}

.model-forecast-state strong {
  font-size: 15px;
}

.model-forecast-state span:last-child {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
}

.model-forecast-body {
  display: grid;
  margin-top: 15px;
  grid-template-columns: minmax(280px, 1.15fr) minmax(300px, 0.85fr);
  align-items: stretch;
  gap: 16px;
}

.model-forecast-body .probability-list {
  margin: 0;
}

.model-forecast-metrics {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.model-forecast-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}

.model-forecast-metrics dt {
  color: var(--ink-faint);
  font-size: 9px;
}

.model-forecast-metrics dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
}

.table-scroll {
  margin-top: 19px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.02em;
}

td:not(:nth-child(2)) {
  font-family: var(--mono);
}

tr.is-champion td {
  background: var(--risk-on-soft);
}

.champion-label {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid var(--risk-on);
  border-radius: 5px;
  color: var(--risk-on);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
  vertical-align: middle;
}

.source-name {
  font-family: var(--sans) !important;
  font-weight: 720;
}

.source-detail {
  display: block;
  margin-top: 2px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.feature-catalog {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 15px;
  gap: 10px;
}

.feature-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.feature-group h3 {
  margin: 0;
  font-size: 12px;
}

.feature-group p {
  margin: 5px 0 0;
  color: var(--ink-soft);
  font-size: 10px;
}

.feature-tags {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 5px;
}

.feature-tag {
  display: inline-block;
  max-width: 100%;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-footer {
  display: flex;
  padding: 24px 4px 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
}

.dashboard-footer > p {
  max-width: 620px;
  margin: 0;
}

.footer-meta {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
}

.footer-meta div {
  display: grid;
}

.footer-meta dt {
  font-size: 9px;
  font-weight: 750;
}

.footer-meta dd {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
}

.noscript-message {
  position: fixed;
  z-index: 999;
  right: 20px;
  bottom: 20px;
  left: 20px;
  padding: 15px;
  border: 2px solid var(--risk-off);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  text-align: center;
}

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

@media (max-width: 1020px) {
  .control-bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .date-controls {
    width: 100%;
  }

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

  .transition-card {
    grid-column: 1 / -1;
  }

  .analysis-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .factor-card {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .header-inner,
  .state-panel,
  .dashboard-shell {
    width: min(calc(100% - 24px), var(--content));
  }

  .header-inner {
    min-height: 62px;
  }

  .brand small,
  .freshness,
  #header-health {
    display: none;
  }

  .dashboard-shell {
    padding-top: 28px;
  }

  .date-controls {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .date-controls .field-group:first-child {
    grid-column: 1 / -1;
  }

  .compact-field select {
    width: 100%;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .transition-card {
    grid-column: auto;
  }

  .regime-card,
  .transition-card,
  .chart-card,
  .factor-card,
  .timeline-section,
  .detail-grid > .card,
  .model-section,
  .health-section {
    padding: 19px;
    border-radius: 16px;
  }

  .card-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .inline-field {
    width: 100%;
  }

  .inline-field select {
    width: 100%;
  }

  .svg-chart-wrap,
  .probability-chart {
    min-height: 225px;
  }

  .chart-legend {
    gap: 7px 12px;
  }

  .timeline-track {
    min-height: 46px;
    gap: 2px;
  }

  .timeline-cell {
    min-height: 38px;
  }

  .timeline-cell::after {
    font-size: 0;
  }

  .timeline-cell[aria-current="date"]::after {
    font-size: 8px;
  }

  .driver-item {
    grid-template-columns: 22px minmax(110px, 1fr) 64px;
  }

  .driver-track {
    display: none;
  }

  .feature-catalog {
    grid-template-columns: 1fr;
  }

  .dashboard-footer,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }
}

@media (max-width: 460px) {
  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand > span:last-child {
    display: none;
  }

  .header-actions {
    gap: 6px;
  }

  #header-mode {
    padding-inline: 7px;
    font-size: 9px;
  }

  .date-controls {
    grid-template-columns: 1fr;
  }

  .date-controls .field-group:first-child {
    grid-column: auto;
  }

  .step-buttons {
    width: 100%;
  }

  .step-buttons .icon-button {
    width: 50%;
  }

  .probability-row {
    grid-template-columns: 86px minmax(55px, 1fr) 44px;
  }

  .factor-axis {
    margin-left: 91px;
  }

  .factor-row {
    grid-template-columns: 78px minmax(80px, 1fr) 42px;
    gap: 7px;
  }

  .metric-list {
    grid-template-columns: 1fr;
  }
}

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

@media print {
  .site-header,
  .date-controls,
  .data-details,
  .feature-details > summary {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  .dashboard-shell {
    width: 100%;
    padding: 0;
  }

  .card {
    break-inside: avoid;
    box-shadow: none;
  }

  .feature-details[open] .feature-catalog {
    display: grid;
  }
}

.dashboard-section,
.timeline-section,
.forecast-window-section {
  scroll-margin-top: calc(var(--site-nav-height) + 64px);
}

@media (min-width: 1021px) {
  .page-header {
    padding-block: 14px;
  }

  .page-header h1 {
    font-size: clamp(31px, 2.8vw, 38px);
  }

  .header-status-strip article {
    min-height: 56px;
  }

  .dashboard-shell {
    padding-top: 14px;
  }

  .overview-section .control-bar {
    margin-bottom: 12px;
    align-items: stretch;
    justify-content: space-between;
  }

  .overview-section .forecast-layer-field {
    width: min(320px, 28vw);
    margin: 0;
    align-content: center;
  }

  .regime-card,
  .transition-card {
    min-height: 228px;
    padding: 16px;
  }

  .regime-headline {
    margin: 11px 0 9px;
  }

  .hero-grid .probability-list {
    gap: 6px;
  }

  .transition-value-row {
    margin-top: 12px;
  }

  .transition-meter {
    margin: 10px 0 9px;
  }

  .transition-horizon-row {
    padding: 7px 9px;
  }

  .compact-definition-details > summary {
    min-height: 44px;
  }

  .conditional-stats-section {
    padding: 16px;
  }
}

/* 2026-08 readability and comparison pass */

.page-header h1,
.section-heading h2,
.card-heading h2 {
  word-break: keep-all;
  text-wrap: balance;
}

.date-controls {
  display: grid;
  width: min(100%, 640px);
  padding: 12px 14px;
  grid-template-columns: minmax(180px, 1.15fr) minmax(160px, 0.95fr) auto auto;
  grid-template-areas:
    "date week steps latest"
    "note note note note";
  align-items: end;
  gap: 8px 12px;
}

.date-controls .date-field { grid-area: date; }
.date-controls .compact-field { grid-area: week; }
.date-controls .step-control { grid-area: steps; }
.date-controls .latest-control { grid-area: latest; }

.date-controls .field-group,
.control-action-group {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.control-label {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 750;
}

.date-controls :is(input, select, button),
.step-buttons {
  min-height: 44px;
}

.date-controls input,
.date-controls select {
  width: 100%;
  height: 44px;
  font-size: 15px;
}

.date-controls .compact-field select {
  width: 100%;
}

.date-controls .step-buttons {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 6px;
}

.date-controls .step-buttons .icon-button {
  width: 44px;
  height: 44px;
}

.date-controls .latest-button {
  height: 44px;
  padding-inline: 16px;
}

.control-note {
  grid-area: note;
  min-height: 14px;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.4;
}

.overview-section .hero-grid,
.overview-section .probability-shift-card {
  grid-column: 1 / -1;
}

.hero-grid .probability-list {
  display: none;
}

.probability-shift-card {
  min-width: 0;
  padding: 15px 20px;
}

.probability-shift-heading,
.model-loss-figure figcaption {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.probability-shift-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 17px;
  letter-spacing: -0.025em;
}

.shift-legend,
.loss-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: var(--ink-soft);
  font-size: 10px;
}

.shift-legend span,
.loss-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shift-marker,
.loss-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink-soft);
  background: var(--surface);
}

.shift-marker.current,
.loss-marker.selection {
  border-radius: 50%;
}

.shift-marker.forecast,
.loss-marker.holdout {
  border-radius: 2px;
  background: var(--ink-soft);
  transform: rotate(45deg);
}

.probability-shifts,
.model-loss-chart {
  display: grid;
  margin-top: 12px;
  gap: 5px;
}

.probability-shifts {
  gap: 2px;
}

.probability-shift-row {
  display: grid;
  min-height: 36px;
  padding: 4px 8px;
  grid-template-columns: 124px minmax(220px, 1fr) 210px;
  align-items: center;
  gap: 14px;
  border-radius: var(--radius-sm);
}

.probability-shift-row:hover {
  background: var(--surface-soft);
}

.probability-shift-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
}

.probability-shift-track,
.model-loss-track {
  position: relative;
  display: block;
  height: 18px;
}

.probability-shift-track::before,
.model-loss-track::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 2px solid var(--line);
  content: "";
}

.probability-shift-connector,
.model-loss-connector {
  position: absolute;
  top: calc(50% - 1px);
  height: 3px;
  min-width: 2px;
  border-radius: 999px;
  background: currentColor;
}

.probability-shift-row.risk_on { color: var(--risk-on); }
.probability-shift-row.transition { color: var(--transition); }
.probability-shift-row.risk_off { color: var(--risk-off); }

.probability-shift-point,
.model-loss-point {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  background: var(--surface);
  transform: translate(-50%, -50%);
}

.probability-shift-point.current,
.model-loss-point.selection {
  border-radius: 50%;
}

.probability-shift-point.forecast,
.model-loss-point.holdout {
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.probability-shift-values,
.model-loss-values {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.probability-shift-values strong,
.model-loss-values strong {
  font-size: 11px;
}

.probability-shift-delta,
.model-loss-values span {
  min-width: 58px;
  color: var(--ink-soft);
  text-align: right;
}

.fixed-axis {
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.probability-shift-axis {
  margin: 2px 224px 0 146px;
}

.chart-point {
  pointer-events: none;
  opacity: 0.12;
  transition: opacity 120ms ease;
}

.chart-point.is-active {
  r: 5px;
  opacity: 1;
  stroke-width: 3;
}

.chart-tooltip {
  display: none !important;
}

.driver-axis {
  display: flex;
  width: min(42%, 230px);
  margin: 18px 68px -8px auto;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
}

.driver-track {
  position: relative;
  height: 12px;
  overflow: visible;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.driver-track::after {
  position: absolute;
  z-index: 2;
  top: -3px;
  bottom: -3px;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.driver-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  height: auto;
}

.driver-fill.positive {
  left: 50%;
  border-radius: 0 3px 3px 0;
}

.driver-fill.negative {
  right: 50%;
  border-radius: 3px 0 0 3px;
}

.model-loss-figure {
  min-width: 0;
  margin: 22px 0 0;
  padding: 18px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.model-loss-figure figcaption {
  align-items: baseline;
}

.model-loss-figure figcaption strong {
  color: var(--ink-strong);
  font-size: 14px;
}

.model-loss-figure figcaption span {
  color: var(--ink-faint);
  font-size: 10px;
}

.model-loss-figure .loss-legend {
  margin-top: 8px;
  justify-content: flex-end;
}

.model-loss-row {
  display: grid;
  min-height: 48px;
  padding: 6px 8px;
  grid-template-columns: 220px minmax(230px, 1fr) 170px;
  align-items: center;
  gap: 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}

.model-loss-row:hover {
  background: var(--surface);
}

.model-loss-row.is-champion {
  color: var(--ink-soft);
}


.model-loss-label {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.model-loss-label strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-loss-label span {
  color: var(--ink-faint);
  font-size: 9px;
}

.model-loss-axis {
  margin: 2px 184px 0 242px;
}

.table-scroll {
  border: 1px solid var(--line);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

th,
td {
  height: 48px;
  padding: 9px 12px;
  box-sizing: border-box;
}

th {
  height: 44px;
  background: var(--surface-soft);
}

#leaderboard-table th:first-child,
#leaderboard-table td:first-child {
  width: 64px;
  text-align: center;
}

#leaderboard-table th:nth-child(n + 3),
#leaderboard-table td:nth-child(n + 3) {
  text-align: right;
}

#leaderboard-table th:first-child,
#leaderboard-table td:first-child,
#leaderboard-table th:nth-child(2),
#leaderboard-table td:nth-child(2) {
  position: sticky;
}

#leaderboard-table th:first-child,
#leaderboard-table td:first-child {
  left: 0;
}

#leaderboard-table th:nth-child(2),
#leaderboard-table td:nth-child(2) {
  left: 64px;
}

#leaderboard-table th:first-child,
#leaderboard-table th:nth-child(2) {
  z-index: 4;
  background: var(--surface-soft);
}

#leaderboard-table td:first-child,
#leaderboard-table td:nth-child(2) {
  z-index: 2;
  background: var(--surface);
}

#leaderboard-table tr.is-champion td:first-child,
#leaderboard-table tr.is-champion td:nth-child(2) {
  background: var(--brand-soft);
}

#leaderboard-table tr.is-holdout-best:not(.is-champion) td:first-child,
#leaderboard-table tr.is-holdout-best:not(.is-champion) td:nth-child(2) {
  background: color-mix(in srgb, var(--risk-on-soft) 60%, var(--surface));
}

.model-name-cell {
  font-weight: 700;
}

.model-code {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.champion-label,
.holdout-label {
  min-height: 18px;
  padding-block: 1px;
  line-height: 14px;
}

.model-review-details,
.research-notice-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.model-review-details > summary,
.research-notice-details > summary {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  color: var(--ink-soft);
  list-style: none;
}

.model-review-details > summary::-webkit-details-marker,
.research-notice-details > summary::-webkit-details-marker {
  display: none;
}

.model-review-details > summary::after,
.research-notice-details > summary::after {
  margin-left: auto;
  color: var(--ink-faint);
  content: "+";
  font-family: var(--mono);
  font-size: 16px;
}

.model-review-details[open] > summary::after,
.research-notice-details[open] > summary::after {
  content: "−";
}

.model-review-details .model-diagnostic,
.research-notice-body {
  margin: 0 0 14px;
}

.research-notice-body {
  display: grid;
  gap: 12px;
}

.research-notice-body .provider-disclaimer {
  margin: 0;
}

@media (min-width: 761px) {
  .health-section table {
    min-width: 0;
    table-layout: fixed;
  }

  .health-section th:nth-child(1) { width: 21%; }
  .health-section th:nth-child(2) { width: 13%; }
  .health-section th:nth-child(3) { width: 18%; }
  .health-section th:nth-child(4) { width: 25%; }
  .health-section th:nth-child(5) { width: 23%; }

  .health-section td {
    height: auto;
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .health-section .source-name {
    min-width: 0;
  }
}

@media (max-width: 1120px) {
  .date-controls {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .model-heading-controls,
  .model-forecast-field,
  .model-forecast-field select {
    width: 100%;
    min-width: 0;
  }

  .model-heading-controls {
    display: grid;
    grid-template-columns: 1fr;
  }

  .model-forecast-heading {
    align-items: flex-start;
  }

  .model-forecast-body {
    grid-template-columns: 1fr;
  }

  .date-controls {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "date week"
      "steps latest"
      "note note";
  }

  .date-controls .step-control,
  .date-controls .latest-control {
    grid-column: auto;
  }

  .date-controls .step-buttons {
    grid-template-columns: repeat(2, minmax(44px, 1fr));
  }

  .date-controls .step-buttons .icon-button,
  .date-controls .latest-button {
    width: 100%;
  }

  .probability-shift-heading,
  .model-loss-figure figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .probability-shift-row,
  .model-loss-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .probability-shift-track,
  .model-loss-track {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline: 6px;
  }

  .probability-shift-values,
  .model-loss-values {
    grid-column: 2;
    grid-row: 1;
  }

  .probability-shift-axis,
  .model-loss-axis {
    margin: 2px 6px 0;
  }

  .model-loss-figure {
    padding-inline: 12px;
  }

  .driver-axis {
    width: calc(100% - 102px);
    margin-right: 44px;
  }

  .health-section table {
    min-width: 760px;
  }
}

@media (max-width: 460px) {
  .model-forecast-explorer {
    padding: 14px 12px;
  }

  .model-forecast-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .model-forecast-state {
    min-width: 0;
    justify-content: flex-start;
  }

  .model-forecast-metrics {
    grid-template-columns: 1fr;
  }

  .probability-shift-card,
  .model-loss-figure {
    padding: 14px 12px;
  }

  .probability-shift-row,
  .model-loss-row {
    padding-inline: 4px;
  }

  .model-loss-values {
    align-items: flex-end;
    flex-direction: column;
    gap: 1px;
  }

  .driver-axis {
    width: calc(100% - 56px);
    margin-right: 0;
  }
}

@media print {
  .model-review-details > summary,
  .research-notice-details > summary {
    display: none;
  }

  .model-review-details > *,
  .research-notice-details > * {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Quant Research shared visual system
   The selectors below bridge the regime-specific components to the public
   research pages without changing the data or rendering contracts above.
   -------------------------------------------------------------------------- */

html {
  scroll-padding-top: calc(var(--site-nav-height) + 14px);
}

body {
  padding-top: var(--site-nav-height);
  overflow-x: clip;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--brand-dark);
}

button,
input,
select,
summary {
  accent-color: var(--brand);
}

.skip-link {
  z-index: 1400;
  border-radius: var(--radius-sm);
  background: var(--ink-strong);
}

/* Shared project navigation */

.site-nav {
  position: fixed;
  z-index: 1200;
  inset: 0 0 auto;
  min-height: var(--site-nav-height);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 1px 0 rgb(15 23 42 / 3%);
  color: var(--ink-soft);
  backdrop-filter: blur(14px);
}

.site-nav-inner {
  display: grid;
  width: min(var(--content), calc(100% - 32px));
  min-height: calc(var(--site-nav-height) - 1px);
  margin-inline: auto;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
}

.site-nav-brand,
.site-nav-links a,
.theme-toggle {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
}

.site-nav-brand {
  justify-content: flex-start;
  padding: 0;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 700;
}

.site-nav-links {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.site-nav-links a {
  flex: 0 0 auto;
  padding: 8px 9px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
}

.site-nav-links a:hover,
.site-nav-links a:focus-visible,
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--surface-soft);
  color: var(--ink-strong);
}

.site-nav-links a.is-active,
.site-nav-links a[aria-current="page"] {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.theme-toggle {
  position: relative;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}

.theme-toggle-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.theme-toggle-icon::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

#theme-toggle-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

/* Page identity and global status */

.page-header,
.section-nav,
.state-panel,
.dashboard-shell {
  width: min(var(--content), calc(100% - 40px));
  margin-inline: auto;
}

.page-header {
  display: grid;
  margin-top: 14px;
  padding: 26px;
  grid-template-columns: minmax(0, 1.2fr) minmax(500px, 0.8fr);
  align-items: center;
  gap: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

.page-header-copy {
  min-width: 0;
}

.page-header .eyebrow,
.section-heading .eyebrow,
.card-heading .eyebrow {
  color: var(--brand-dark);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.015em;
}

.page-header h1 {
  max-width: 900px;
  margin: 6px 0 12px;
  color: var(--ink-strong);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.page-header-copy > p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.65;
}

.header-status-strip {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.header-status-strip article {
  display: grid;
  min-width: 0;
  min-height: 74px;
  padding: 12px 14px;
  align-content: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.header-status-strip article > span {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 680;
}

.header-status-strip article > strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}

.header-status-strip .status-badge {
  max-width: 100%;
}

.section-nav {
  display: flex;
  margin-top: 10px;
  padding: 0;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.section-nav a {
  display: inline-flex;
  min-width: 44px;
  min-height: 38px;
  flex: 0 0 auto;
  padding: 8px 12px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.section-nav a:hover,
.section-nav a:focus-visible {
  border-color: var(--line);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

main {
  min-height: calc(100vh - var(--site-nav-height));
}

.dashboard-shell {
  padding: 30px 0 64px;
}

.dashboard-section,
.timeline-section {
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.section-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: clamp(27px, 3vw, 32px);
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.overview-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: end;
}

.overview-heading {
  min-width: 0;
}

.overview-heading .subtitle {
  margin-top: 8px;
}

.overview-section .control-bar {
  margin: 0;
  align-items: flex-end;
  justify-content: flex-end;
}

.overview-section .hero-grid,
.overview-section .model-diagnostic,
.overview-section .alert-stack {
  grid-column: 1 / -1;
}

/* Inputs and action surfaces */

.date-controls {
  padding: 12px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.field-group label {
  color: var(--ink-soft);
  font-size: 11px;
}

.field-group small {
  line-height: 1.35;
}

select,
input[type="date"] {
  min-width: 0;
  border-color: var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

select:hover,
input[type="date"]:hover {
  border-color: var(--brand);
}

.icon-button,
.button {
  border-radius: var(--radius-sm);
}

.button-primary {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

.latest-button {
  padding-inline: 14px;
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  background: var(--brand-soft);
  color: var(--brand-dark);
  white-space: nowrap;
}

/* Results-first cards */

.card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.hero-grid {
  gap: 12px;
  margin-bottom: 0;
}

.regime-card,
.transition-card,
.chart-card,
.factor-card,
.timeline-section,
.detail-grid > .card,
.model-section,
.health-section {
  padding: 20px;
}

.regime-card {
  border-top-width: 3px;
}

.regime-symbol {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-lg);
  font-size: 24px;
}

.state-transition .regime-symbol,
.state-dot.transition {
  border-style: dashed;
}

.state-risk_off .regime-symbol,
.state-dot.risk_off {
  border-style: double;
}

.regime-name {
  overflow-wrap: anywhere;
  font-size: clamp(23px, 2.25vw, 29px);
}

.horizon-label {
  border-radius: var(--radius-sm);
}

.forecast-status {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 700;
}

.transition-card {
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft));
}

.transition-meter {
  height: 10px;
  border-radius: 999px;
}

.transition-card.alert-medium {
  border-color: color-mix(in srgb, var(--transition) 45%, var(--line));
}

.transition-card.alert-high {
  border-color: color-mix(in srgb, var(--risk-off) 55%, var(--line));
}

.status-badge {
  min-height: 28px;
  border-radius: 999px;
}

/* Honest model and data warnings */

.model-diagnostic:empty,
.alert-stack:empty {
  display: none;
}

.model-diagnostic:not(:empty) {
  display: grid;
  min-width: 0;
  padding: 13px 15px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--transition) 45%, var(--line));
  border-left: 4px solid var(--transition);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--transition-soft) 72%, var(--surface));
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.model-diagnostic :is(h2, h3, strong) {
  color: var(--ink);
}

.model-diagnostic :is(h2, h3, p, dl) {
  margin-block: 0;
}

.model-diagnostic dl,
.diagnostic-metrics,
.model-diagnostic-metrics {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 14px;
}

.model-diagnostic dl > div,
.diagnostic-metric,
.model-diagnostic-metrics > div {
  display: grid;
  gap: 1px;
}

.model-diagnostic dt,
.diagnostic-metric span,
.model-diagnostic-metrics span {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
}

.model-diagnostic dd,
.diagnostic-metric strong,
.model-diagnostic-metrics strong {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
}

.alert-stack {
  gap: 7px;
  margin-bottom: 0;
}

.alert {
  min-width: 0;
  padding: 10px 13px;
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: 12px;
  line-height: 1.55;
}

.alert > div,
.alert-copy {
  min-width: 0;
  overflow-wrap: anywhere;
}

details.alert {
  display: block;
}

details.alert > summary,
.alert-summary {
  display: flex;
  width: 100%;
  min-height: 24px;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  list-style: none;
}

details.alert > summary::-webkit-details-marker {
  display: none;
}

details.alert > summary::after {
  margin-left: auto;
  color: var(--ink-faint);
  content: "+";
  font-family: var(--mono);
  font-weight: 800;
}

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

.alert-detail,
.alert-details,
.alert-detail-list {
  margin: 9px 0 0 25px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  color: var(--ink-soft);
}

/* Chart context, keyboard focus, and exact readout */

.analysis-grid,
.detail-grid {
  gap: 12px;
  margin-bottom: 12px;
}

.chart-context-row {
  display: grid;
  margin: 16px 0 8px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.chart-context-row .chart-legend {
  margin: 0;
}

.chart-selection-readout {
  display: grid;
  min-width: min(100%, 400px);
  padding: 10px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.chart-readout-date {
  display: grid;
  min-width: 92px;
  gap: 2px;
}

.chart-readout-date span,
.chart-selection-readout dt {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 700;
}

.chart-readout-date strong {
  font-family: var(--mono);
  font-size: 11px;
}

.chart-selection-readout dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chart-selection-readout dl > div {
  display: grid;
  gap: 2px;
}

.chart-selection-readout dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
}

.svg-chart-wrap {
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
}

.svg-chart-wrap:focus-visible {
  border-color: var(--focus);
  outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent);
  outline-offset: 2px;
}

.chart-grid-line {
  stroke: var(--chart-grid);
  stroke-opacity: .68;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.chart-axis-label,
.chart-date-label {
  fill: var(--chart-text);
}

.chart-series {
  stroke-width: 2.5;
}

.chart-selected-line {
  stroke: var(--ink-soft);
  stroke-width: 1.4;
}

.chart-tooltip {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
}

.interaction-hint {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 10px;
  line-height: 1.5;
}

.timeline-section {
  margin-bottom: 12px;
}

.timeline-track {
  scrollbar-width: thin;
}

.timeline-cell {
  border-radius: 3px;
}

.timeline-cell[aria-current="date"] {
  outline-color: var(--ink-strong);
}

/* Evidence cards and tables */

.metric-list > div,
.feature-group {
  border-radius: var(--radius-sm);
}

.table-scroll {
  max-width: 100%;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  scrollbar-width: thin;
}

table {
  background: var(--surface);
}

th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--surface);
  color: var(--ink-faint);
}

tbody tr:hover td {
  background: color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

#leaderboard-table {
  min-width: 820px;
}

.health-section table {
  min-width: 760px;
}

.champion-summary {
  border-color: var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

tr.is-champion td {
  background: var(--brand-soft);
}

tr.is-champion td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}

.champion-label {
  border-color: var(--brand);
  border-radius: 4px;
  color: var(--brand-dark);
}

#leaderboard-body tr:first-child:not(.is-champion) td:first-child,
tr.is-holdout-best td:first-child {
  box-shadow: inset 3px 0 0 var(--risk-on);
}

tr.is-holdout-best td {
  background: color-mix(in srgb, var(--risk-on-soft) 60%, var(--surface));
}

.holdout-label {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 5px;
  border: 1px solid var(--risk-on);
  border-radius: 4px;
  color: var(--risk-on);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 800;
}

.source-name {
  min-width: 210px;
}

.source-detail,
.feature-tag {
  overflow-wrap: anywhere;
}

/* Footer and page movement */

.dashboard-footer {
  margin-top: 4px;
}

.provider-disclaimer {
  max-width: 940px;
  padding-left: 12px;
  border-left: 3px solid var(--brand);
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.65;
}

.provider-disclaimer a {
  font-weight: 700;
}

.page-jump-nav {
  position: fixed;
  z-index: 1000;
  right: clamp(10px, 2vw, 26px);
  bottom: clamp(12px, 3vw, 28px);
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.page-jump-nav a {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 17px;
  font-weight: 750;
  text-decoration: none;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.page-jump-nav a:hover,
.page-jump-nav a:focus-visible {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  color: #fff;
}

/* Tablet */

@media (max-width: 1120px) {
  .page-header {
    grid-template-columns: 1fr;
  }

  .header-status-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .overview-section {
    grid-template-columns: 1fr;
  }

  .overview-section .control-bar {
    grid-column: 1;
    justify-content: flex-start;
  }

  .date-controls {
    width: 100%;
  }

  .model-diagnostic:not(:empty) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .model-diagnostic :is(dl, .diagnostic-metrics, .model-diagnostic-metrics) {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* Shared mobile navigation and one-column dashboard */

@media (max-width: 760px) {
  :root {
    --site-nav-height: 101px;
  }

  html {
    scroll-padding-top: calc(var(--site-nav-height) + 12px);
  }

  .site-nav-inner {
    width: calc(100% - 24px);
    min-height: 100px;
    padding-bottom: 6px;
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: 50px 44px;
    gap: 0 8px;
  }

  .site-nav-brand {
    grid-area: 1 / 1;
  }

  .theme-toggle {
    grid-area: 1 / 2;
  }

  .site-nav-links {
    grid-area: 2 / 1 / auto / -1;
    padding-bottom: 2px;
  }

  .page-header,
  .section-nav,
  .state-panel,
  .dashboard-shell {
    width: calc(100% - 24px);
  }

  .page-header {
    margin-top: 12px;
    padding: 18px;
    gap: 18px;
  }

  .page-header h1 {
    font-size: clamp(32px, 8.4vw, 40px);
  }

  .page-header-copy > p:last-child {
    font-size: 13px;
  }

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

  .header-status-strip article {
    min-height: 78px;
    padding: 11px 12px;
  }

  #header-health {
    display: inline-flex;
  }

  .section-nav {
    flex-wrap: nowrap;
  }

  .dashboard-shell {
    padding-top: 24px;
  }

  .overview-section,
  .analysis-grid,
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-section .control-bar {
    width: 100%;
  }

  .date-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .date-controls .field-group:first-child {
    grid-column: 1 / -1;
  }

  .date-controls .compact-field {
    grid-column: 1;
  }

  .step-buttons {
    grid-column: 2;
  }

  .date-controls .latest-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .compact-field select {
    width: 100%;
  }

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

  .transition-card {
    grid-column: auto;
  }

  .regime-card,
  .transition-card,
  .chart-card,
  .factor-card,
  .timeline-section,
  .detail-grid > .card,
  .model-section,
  .health-section {
    padding: 16px;
    border-radius: var(--radius-lg);
  }

  .model-diagnostic:not(:empty) {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .model-diagnostic :is(dl, .diagnostic-metrics, .model-diagnostic-metrics) {
    grid-column: 1 / -1;
  }

  .chart-context-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .chart-selection-readout {
    width: 100%;
    min-width: 0;
  }

  .svg-chart-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }


  .driver-item {
    grid-template-columns: 22px minmax(0, 1fr) 58px;
  }

  .driver-track {
    display: none;
  }

  .feature-catalog {
    grid-template-columns: 1fr;
  }

  .dashboard-footer,
  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }

  .page-jump-nav {
    position: static;
    display: flex;
    width: calc(100% - 24px);
    margin: 0 auto 14px;
    justify-content: flex-end;
    pointer-events: auto;
  }
}

@media (max-width: 460px) {
  .page-header,
  .section-nav,
  .state-panel,
  .dashboard-shell {
    width: calc(100% - 24px);
  }

  .page-header {
    padding: 16px;
  }

  .header-status-strip {
    gap: 7px;
  }

  .header-status-strip article {
    min-height: 82px;
    padding: 10px;
  }

  .header-status-strip article > strong {
    font-size: 11px;
  }

  .status-badge {
    padding-inline: 7px;
    font-size: 10px;
  }

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

  .date-controls .field-group:first-child,
  .date-controls .compact-field,
  .step-buttons,
  .date-controls .latest-button {
    grid-column: 1;
  }

  .step-buttons {
    width: 100%;
  }

  .step-buttons .icon-button {
    width: 50%;
  }

  .regime-headline {
    align-items: flex-start;
  }

  .regime-name {
    font-size: 23px;
  }

  .probability-row {
    grid-template-columns: 84px minmax(50px, 1fr) 44px;
  }

  .chart-selection-readout {
    grid-template-columns: 1fr;
  }

  .chart-selection-readout dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric-list {
    grid-template-columns: 1fr;
  }

  .factor-axis {
    margin-left: 91px;
  }

  .factor-row {
    grid-template-columns: 78px minmax(0, 1fr) 42px;
  }

  .alert-detail,
  .alert-details,
  .alert-detail-list {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav *,
  .site-nav *::before,
  .site-nav *::after,
  .page-jump-nav *,
  .transition-meter span {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  :root {
    --site-nav-height: 0px;
  }

  .site-nav,
  .section-nav,
  .date-controls,
  .page-jump-nav,
  .data-details,
  .feature-details > summary,
  .interaction-hint {
    display: none !important;
  }

  body {
    padding-top: 0;
    overflow: visible;
    background: #fff;
    color: #000;
    print-color-adjust: exact;
  }

  .page-header,
  .dashboard-shell {
    width: 100%;
  }

  .page-header {
    margin: 0 0 18px;
    padding: 16px;
    grid-template-columns: 1fr;
    box-shadow: none;
  }

  .header-status-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .card,
  .model-diagnostic,
  .alert {
    break-inside: avoid;
    box-shadow: none;
  }

  .svg-chart-wrap {
    overflow: visible;
  }

}

/* Final responsive placement overrides: keep the shared control baseline intact. */

.date-controls > .field-group.date-field { grid-area: date; }
.date-controls > .field-group.compact-field { grid-area: week; }
.date-controls > .control-action-group.step-control { grid-area: steps; }
.date-controls > .control-action-group.latest-control { grid-area: latest; }
.date-controls > .control-note { grid-area: note; }

@media (max-width: 760px) {
  .date-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "date week"
      "steps latest"
      "note note";
    align-items: end;
  }

  .date-controls > .field-group.date-field,
  .date-controls > .field-group.compact-field,
  .date-controls > .control-action-group.step-control,
  .date-controls > .control-action-group.latest-control {
    grid-column: auto;
  }

  .date-controls .step-buttons {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(44px, 1fr));
  }

  .date-controls .step-buttons .icon-button,
  .date-controls .latest-button {
    width: 100%;
  }

  .probability-shift-row,
  .model-loss-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
  }

  .probability-shift-track,
  .model-loss-track {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-inline: 6px;
  }

  .probability-shift-values,
  .model-loss-values {
    grid-column: 2;
    grid-row: 1;
  }

}

/* Model evaluation accents are diagnostic, not market-regime colors. */

.model-loss-row.is-holdout-best:not(.is-champion) {
  color: var(--ink-soft);
}

#leaderboard-body tr:first-child:not(.is-champion) td:first-child,
tr.is-holdout-best td:first-child {
  box-shadow: inset 3px 0 0 var(--transition);
}

tr.is-holdout-best td,
#leaderboard-table tr.is-holdout-best:not(.is-champion) td:first-child,
#leaderboard-table tr.is-holdout-best:not(.is-champion) td:nth-child(2) {
  background: color-mix(in srgb, var(--transition-soft) 60%, var(--surface));
}

.holdout-label {
  border-color: var(--transition);
  color: var(--transition);
}

/* Axis labels align to the exact plotted track, including row padding. */

.probability-shift-axis {
  margin-right: 232px;
}

.model-loss-axis {
  margin-right: 192px;
}

@media (max-width: 760px) {
  .probability-shift-axis,
  .model-loss-axis {
    margin: 2px 14px 0;
  }

  #leaderboard-table {
    min-width: 978px;
    table-layout: fixed;
  }

  #leaderboard-table th:first-child,
  #leaderboard-table td:first-child {
    position: static;
    width: 48px;
  }

  #leaderboard-table th:nth-child(2),
  #leaderboard-table td:nth-child(2) {
    left: 0;
    width: 180px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .health-section table {
    width: 900px;
    min-width: 900px;
    table-layout: fixed;
  }

  .health-section th:nth-child(1) { width: 190px; }
  .health-section th:nth-child(2) { width: 100px; }
  .health-section th:nth-child(3) { width: 150px; }
  .health-section th:nth-child(4) { width: 240px; }
  .health-section th:nth-child(5) { width: 220px; }

  .health-section td {
    height: auto;
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .health-section .source-name {
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .probability-shift-axis,
  .model-loss-axis {
    margin-inline: 10px;
  }
}

/* The ranking axis and guide ticks share the exact track columns. */
#models .model-loss-figure { --loss-label-width: 210px; --loss-value-width: 110px; --loss-gap: 18px; }
#models .model-loss-row {
  --loss-row-padding: 10px;
  min-height: 58px;
  padding: 10px 10px;
  grid-template-columns: var(--loss-label-width) minmax(0, 1fr) var(--loss-value-width);
  gap: var(--loss-gap);
  border: 1px solid transparent;
  border-radius: 5px;
}
#models .model-loss-row:hover { background: var(--surface-soft); }
#models .model-loss-label strong { font: 600 12px/1.45 var(--sans); white-space: normal; overflow-wrap: anywhere; }
#models .model-loss-label span { font-size: 10px; line-height: 1.45; }
#models .model-loss-values { flex-direction: column; align-items: flex-end; gap: 2px; }
#models .model-loss-values strong { font-size: 14px; font-weight: 650; }
#models .model-loss-values span { min-width: 0; font-size: 10px; }
#models .model-loss-track { height: 24px; margin: 0; grid-column: auto; grid-row: auto; }
#models .model-loss-track::before { border-top-width: 1px; }
#models .model-loss-point { width: 9px; height: 9px; border-width: 1.5px; }
#models .model-loss-axis { margin: 8px calc(var(--loss-value-width) + var(--loss-gap) + 11px) 0 calc(var(--loss-label-width) + var(--loss-gap) + 11px); font: 10px var(--mono); font-variant-numeric: tabular-nums; }
.model-loss-grid { position: absolute; inset: 0; pointer-events: none; }
.model-loss-grid > :is(span, i) { position: absolute; top: 1px; bottom: 1px; border-left: 1px solid var(--line); }
@media (max-width: 1000px) {
  #models .model-loss-figure { --loss-label-width: 176px; --loss-value-width: 92px; --loss-gap: 12px; }
}
@media (max-width: 600px) {
  #models .model-loss-figure { padding-inline: 10px; }
  #models .model-loss-row { --loss-row-padding: 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 10px 8px; }
  #models .model-loss-label strong { font-size: 11px; }
  #models .model-loss-values { grid-column: 2; grid-row: 1; }
  #models .model-loss-track { grid-column: 1 / -1; grid-row: 2; margin-inline: 5px; }
  #models .model-loss-axis { margin: 6px 14px 0; }
}

/* V3 additive stay/switch surfaces. */

.transition-value-row {
  align-items: flex-end;
}

.transition-value-row #transition-value-label {
  max-width: 210px;
  line-height: 1.45;
}

.transition-horizon-bars {
  display: grid;
  margin: 16px 0;
  gap: 12px;
}

.transition-horizon-row {
  display: grid;
  gap: 6px;
}

.transition-horizon-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 10px;
}

.transition-horizon-heading > span {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.4;
}

.transition-horizon-heading > strong {
  font-family: var(--mono);
  font-size: 12px;
}

.transition-fallback-label {
  grid-column: 1 / -1;
  width: max-content;
  padding: 1px 5px;
  border: 1px dashed var(--transition);
  border-radius: 4px;
  color: var(--transition);
  font-size: 8px;
  font-weight: 750;
}

.transition-horizon-meter {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}

.transition-horizon-meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 240ms ease;
}

.transition-horizon-row:nth-child(2) .transition-horizon-meter {
  border-style: double;
}

.transition-model-section {
  margin-bottom: 16px;
  padding: 20px;
}

.transition-model-heading {
  align-items: end;
}

.transition-horizon-field select {
  min-width: 116px;
  min-height: 44px;
}

.transition-model-summary {
  display: grid;
  margin: 18px 0 14px;
  padding: 14px;
  grid-template-columns: minmax(180px, 0.65fr) minmax(0, 1.35fr);
  align-items: stretch;
  gap: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.transition-model-identity {
  display: grid;
  align-content: center;
}

.transition-model-identity > span,
.transition-model-identity > small {
  color: var(--ink-faint);
  font-size: 10px;
}

.transition-model-identity > strong {
  margin: 3px 0;
  overflow-wrap: anywhere;
  font-size: 16px;
}

.transition-model-metrics,
.shadow-nowcast-metrics {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.transition-model-metrics > div,
.shadow-nowcast-metrics > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface);
}

.transition-model-metrics dt,
.shadow-nowcast-metrics dt {
  color: var(--ink-faint);
  font-size: 9px;
}

.transition-model-metrics dd,
.shadow-nowcast-metrics dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

#transition-leaderboard-table {
  min-width: 1040px;
}

#transition-leaderboard-table th:nth-child(n + 3),
#transition-leaderboard-table td:nth-child(n + 3) {
  text-align: right;
}

#transition-leaderboard-table td:first-child {
  min-width: 180px;
  font-weight: 700;
}

#transition-leaderboard-table td:nth-child(2) {
  min-width: 168px;
}

#transition-leaderboard-table tr.is-selected-transition-model td {
  background: var(--brand-soft);
}

#transition-leaderboard-table tr.is-selected-transition-model td:first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}

.shadow-nowcast-summary {
  display: grid;
  margin: 0 0 14px;
  padding: 14px;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.shadow-nowcast-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.shadow-nowcast-heading strong {
  display: block;
  font-size: 13px;
}

.shadow-nowcast-heading p {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
}

.method-badge {
  display: inline-flex;
  min-height: 26px;
  padding: 4px 7px;
  align-items: center;
  border: 1px dashed var(--ink-faint);
  border-radius: 5px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 750;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .transition-model-heading {
    display: grid;
    grid-template-columns: 1fr;
  }

  .transition-horizon-field,
  .transition-horizon-field select {
    width: 100%;
  }

  .transition-model-summary {
    grid-template-columns: 1fr;
  }

  .transition-model-metrics,
  .shadow-nowcast-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 460px) {
  .transition-value-row {
    display: grid;
  }

  .transition-value-row #transition-value-label {
    max-width: none;
  }

  .transition-model-section {
    padding: 16px;
  }

  .transition-model-metrics,
  .shadow-nowcast-metrics {
    grid-template-columns: 1fr;
  }

  .shadow-nowcast-heading {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .transition-horizon-meter > span {
    transition-duration: 0.01ms !important;
  }
}

/* Compact research surface: keep status and units visible, move operations below. */

.header-status-strip {
  grid-template-columns: minmax(120px, 0.9fr) minmax(180px, 1.35fr) minmax(108px, 0.75fr);
}

.header-result-status {
  align-content: center;
}

.header-status-badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

#header-mode[hidden] {
  display: none;
}

.control-note.is-visible {
  min-height: 14px;
}

.table-scroll[tabindex="0"]:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.operations-section {
  margin-bottom: 12px;
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.operations-details {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.operations-details > summary {
  min-height: 74px;
  padding: 14px 20px;
  gap: 16px;
  cursor: pointer;
}

.operations-details > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.operations-details > summary small {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.operations-details > summary strong {
  color: var(--ink-strong);
  font-size: 15px;
}

.operations-details > summary #source-freshness {
  margin-left: auto;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  text-align: right;
}

.operations-details > summary::after {
  flex: 0 0 auto;
}

.operations-details .operations-body {
  margin: 0;
  padding: 0 20px 20px;
  gap: 14px;
}

.operations-body .alert-stack:empty {
  display: none;
}

.operations-section table {
  min-width: 760px;
}

.method-rights {
  display: grid;
  padding: 14px;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.method-rights h3,
.method-rights p,
.method-rights ul {
  margin: 0;
}

.method-rights h3 {
  color: var(--ink-strong);
  font-size: 12px;
}

.method-line,
.method-notices,
.publication-gate {
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
}

.method-notices {
  padding-left: 18px;
}

.method-notices li + li {
  margin-top: 3px;
}

.publication-gate {
  padding-top: 7px;
  border-top: 1px solid var(--line);
}

.publication-gate strong {
  margin-right: 6px;
  color: var(--ink-strong);
}

.method-rights .provider-disclaimer {
  max-width: none;
  padding-left: 0;
  border-left: 0;
  font-size: 9px;
  line-height: 1.55;
}

.operations-meta {
  padding-top: 12px;
  justify-content: flex-start;
  border-top: 1px solid var(--line);
}

.dashboard-footer {
  padding-top: 14px;
}

@media (min-width: 761px) {
  .operations-section table {
    min-width: 0;
    table-layout: fixed;
  }

  .operations-section th:nth-child(1) { width: 21%; }
  .operations-section th:nth-child(2) { width: 13%; }
  .operations-section th:nth-child(3) { width: 18%; }
  .operations-section th:nth-child(4) { width: 25%; }
  .operations-section th:nth-child(5) { width: 23%; }

  .operations-section td {
    height: auto;
    min-height: 48px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .operations-section .source-name {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .header-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-result-status {
    grid-column: 1 / -1;
    min-height: 62px;
  }

  .operations-details > summary {
    min-height: 68px;
    padding: 12px 14px;
  }

  .operations-details > summary #source-freshness {
    max-width: 140px;
  }

  .operations-details .operations-body {
    padding: 0 14px 14px;
  }

  .operations-section table {
    width: 900px;
    min-width: 900px;
    table-layout: fixed;
  }

  .operations-section th:nth-child(1) { width: 190px; }
  .operations-section th:nth-child(2) { width: 100px; }
  .operations-section th:nth-child(3) { width: 150px; }
  .operations-section th:nth-child(4) { width: 240px; }
  .operations-section th:nth-child(5) { width: 220px; }
}

@media print {
  .header-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .operations-details > summary {
    display: none;
  }

  .operations-details > .operations-body {
    display: grid;
  }
}

/* 2026-08-14 results-first layout: equal cards, wide history, compact detail. */

.page-header {
  padding: 18px 20px;
  grid-template-columns: minmax(0, 1fr) minmax(500px, 0.92fr);
  gap: 20px;
}

.page-header h1 {
  margin: 4px 0 0;
  font-size: clamp(32px, 3.1vw, 42px);
}

.header-status-strip article {
  min-height: 60px;
  padding: 9px 12px;
}

.dashboard-shell {
  padding-top: 22px;
}

.overview-section {
  display: block;
}

.overview-section .control-bar {
  width: 100%;
  margin-bottom: 14px;
  justify-content: flex-start;
}

.hero-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.regime-card,
.transition-card {
  display: flex;
  min-height: 264px;
  padding: 18px;
  flex-direction: column;
}

.regime-headline {
  margin: 16px 0 14px;
}

.regime-name {
  font-size: clamp(22px, 2vw, 27px);
}

.hero-grid .probability-list {
  display: grid;
  margin-top: auto;
  gap: 8px;
}

.probability-row {
  grid-template-columns: 86px minmax(54px, 1fr) 46px;
  gap: 7px;
}

.transition-value-row {
  margin-top: 18px;
}

.transition-value-row strong {
  font-size: clamp(34px, 3.8vw, 44px);
}

.transition-meter {
  margin: 14px 0 12px;
}

.transition-horizon-bars {
  margin: auto 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.transition-horizon-row {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.probability-shift-card[hidden] {
  display: none !important;
}

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

#history .chart-card,
#history .factor-card {
  grid-column: 1 / -1;
}

.svg-chart-wrap {
  min-height: 250px;
}

.probability-chart {
  min-height: 250px;
}

.chart-point {
  opacity: 0;
  pointer-events: none;
}

.chart-point.is-active {
  opacity: 1;
}

.factor-card .factor-axis {
  display: none;
}

.factor-list {
  margin-top: 16px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.factor-row {
  padding: 11px 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 18px;
  gap: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.factor-label {
  grid-column: 1;
  grid-row: 1;
}

.factor-value {
  grid-column: 2;
  grid-row: 1;
}

.factor-track {
  grid-column: 1 / -1;
  grid-row: 2;
  background: var(--surface);
}

.compact-table-details {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.compact-table-details > summary {
  display: flex;
  width: 100%;
  min-height: 44px;
  padding: 10px 2px;
  align-items: center;
  color: var(--ink-soft);
}

.compact-table-details > summary::after {
  margin-left: auto;
  content: "+";
  font-family: var(--mono);
  font-weight: 800;
}

.compact-table-details[open] > summary::after {
  content: "−";
}

.compact-table-details > .table-scroll {
  margin-top: 2px;
}

@media (max-width: 1120px) {
  .page-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .header-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .hero-grid > .transition-card {
    grid-column: auto;
  }

  .regime-card,
  .transition-card {
    min-height: 278px;
    padding: 16px;
  }

  .probability-row {
    grid-template-columns: 76px minmax(36px, 1fr) 42px;
  }

  .transition-horizon-bars {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
}

@media (max-width: 760px) {
  .page-header {
    gap: 12px;
  }

  .page-header h1 {
    font-size: clamp(29px, 8vw, 34px);
  }

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

  .header-status-strip article:first-child {
    display: none;
  }

  .header-result-status {
    grid-column: auto;
    min-height: 60px;
  }

  .dashboard-shell {
    padding-top: 18px;
  }

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

  .regime-card,
  .transition-card {
    min-height: 0;
  }

  .transition-horizon-bars {
    margin-top: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .probability-chart {
    min-height: 230px;
  }

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

@media (max-width: 460px) {
  .factor-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Result-first header and compact provider links. */

.header-status-strip {
  grid-template-columns: minmax(150px, 0.85fr) minmax(260px, 1.35fr);
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-links a {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.source-links a:hover,
.source-links a:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 760px) {
  .header-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-status-strip article:first-child {
    display: grid;
  }
}

@media print {
  .probability-shift-card[hidden] {
    display: none !important;
  }

  .compact-table-details > summary {
    display: none;
  }

  .compact-table-details > .table-scroll {
    display: block;
  }

}

/* v5 semantic extensions; appended after the frozen v4 layout overrides. */

.v5-only[hidden] {
  display: none !important;
}

.header-status-strip {
  grid-template-columns: minmax(130px, 0.72fr) minmax(220px, 1.2fr) minmax(180px, 0.9fr);
}

#header-model-health {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

#header-model-health > span:first-child {
  flex: 0 0 auto;
  white-space: nowrap;
}

#header-data-as-of {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.model-health-chip,
.support-chip,
.metric-chip {
  display: inline-flex;
  min-height: 24px;
  padding: 3px 7px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.25;
  white-space: nowrap;
}

.model-health-chip.is-ok,
.support-chip.is-ok {
  border-color: color-mix(in srgb, var(--risk-on) 42%, var(--line));
  background: var(--risk-on-soft);
  color: var(--status-ok-text);
}

.model-health-chip.is-review,
.support-chip.is-limited {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--transition) 55%, var(--line));
  color: var(--status-review-text);
}

.transition-horizon-row {
  display: grid;
  align-content: start;
  gap: 7px;
}

.transition-horizon-detail {
  display: grid;
  gap: 5px;
  color: var(--ink-faint);
  font-size: 10px;
}

.transition-horizon-comparison {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.transition-horizon-comparison strong {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
}

.direction-mass-list {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: 5px;
}

.direction-mass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
  white-space: nowrap;
}

.direction-mass .state-dot {
  width: 14px;
  height: 14px;
  font-size: 8px;
}

.context-status-row {
  display: flex;
  margin: 2px 0 12px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 11px;
}

.duration-baselines {
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.duration-baseline {
  display: grid;
  padding: 9px 10px;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.duration-baseline span {
  color: var(--ink-faint);
  font-size: 10px;
}

.duration-baseline strong {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 14px;
}

.conditional-stats-section {
  margin-bottom: 12px;
  padding: 20px;
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.conditional-stats-heading {
  align-items: end;
}

.conditional-stat-controls {
  display: flex;
  align-items: end;
  gap: 10px;
}

.conditional-stat-controls select {
  min-width: 124px;
}

.conditional-comparison-heading {
  display: flex;
  margin-top: 18px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.conditional-comparison-heading strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.conditional-comparison-heading span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
}

.conditional-regime-legend {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--ink-soft);
  font-size: 10px;
}

.conditional-regime-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.conditional-regime-legend .legend-line {
  width: 24px;
}

.conditional-stat-grid {
  display: grid;
  margin-top: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.conditional-asset-card {
  display: grid;
  min-width: 0;
  padding: 14px 16px;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.conditional-asset-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.conditional-asset-heading strong {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 14px;
}

.conditional-asset-heading span {
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conditional-regime-list {
  display: grid;
  gap: 8px;
}

.conditional-regime-row {
  display: grid;
  min-width: 0;
  grid-template-columns: 82px minmax(100px, 1fr) 62px;
  align-items: center;
  gap: 8px;
}

.conditional-regime-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 10px;
}

.conditional-regime-label b {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 9px;
}

.conditional-regime-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conditional-regime-row.state-risk_on .conditional-regime-label { color: var(--risk-on); }
.conditional-regime-row.state-transition .conditional-regime-label { color: var(--transition); }
.conditional-regime-row.state-transition .conditional-regime-label b { border-style: dashed; }
.conditional-regime-row.state-risk_off .conditional-regime-label { color: var(--risk-off); }
.conditional-regime-row.state-risk_off .conditional-regime-label b { border-style: double; }

.conditional-regime-row.is-limited {
  opacity: 0.72;
}

.conditional-return-track {
  position: relative;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}

.conditional-return-track::after {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.conditional-return-fill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  min-width: 2px;
  border-radius: 2px;
}

.conditional-return-fill.is-positive {
  left: 50%;
}

.conditional-return-fill.is-negative {
  right: 50%;
}

.conditional-return-fill.state-risk_on { background: var(--risk-on); }
.conditional-return-fill.state-transition { background: var(--transition); }
.conditional-return-fill.state-risk_off { background: var(--risk-off); }

.conditional-return-value {
  display: grid;
  color: var(--ink-soft);
  gap: 1px;
  text-align: right;
}

.conditional-return-value strong {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 740;
}

.conditional-return-value small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
}

.conditional-regime-row.state-risk_on .conditional-return-value strong { color: var(--risk-on); }
.conditional-regime-row.state-transition .conditional-return-value strong { color: var(--transition); }
.conditional-regime-row.state-risk_off .conditional-return-value strong { color: var(--risk-off); }

.conditional-detail-toolbar {
  display: flex;
  min-height: 52px;
  padding: 8px 2px 4px;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.conditional-detail-toolbar > span {
  align-self: center;
  color: var(--ink-faint);
  font-size: 10px;
}

.conditional-detail-toolbar select {
  min-width: 190px;
}

#conditional-stat-table {
  width: 100%;
  min-width: 1160px;
  table-layout: fixed;
}

#conditional-stat-table .conditional-col-state { width: 120px; }
#conditional-stat-table .conditional-col-return { width: 118px; }
#conditional-stat-table .conditional-col-rate { width: 112px; }
#conditional-stat-table .conditional-col-interval { width: 176px; }
#conditional-stat-table .conditional-col-risk { width: 122px; }
#conditional-stat-table .conditional-col-sample { width: 140px; }

#conditional-stat-table th:not(:first-child),
#conditional-stat-table td:not(:first-child) {
  text-align: right;
}

#conditional-stat-table th:first-child,
#conditional-stat-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
  font-family: var(--sans);
  font-weight: 720;
}

#conditional-stat-table thead th:first-child {
  z-index: 3;
}

#conditional-stat-table tbody tr:hover td:first-child {
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.conditional-table-scroll {
  max-width: 100%;
  padding-bottom: 5px;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
}

.conditional-table-scroll::-webkit-scrollbar {
  height: 11px;
}

.conditional-table-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--surface-soft);
}

.conditional-table-scroll::-webkit-scrollbar-thumb {
  border: 3px solid var(--surface-soft);
  border-radius: 999px;
  background: var(--line-strong);
}

.table-scroll-guide {
  display: none;
  margin: 10px 0 -9px;
  color: var(--ink-faint);
  font-size: 10px;
  text-align: right;
}

@media (max-width: 1240px) {
  .table-scroll-guide {
    display: block;
  }
}

@media (max-width: 1120px) {
  .header-status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

}

@media (max-width: 760px) {
  .header-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-status-strip article:last-child {
    grid-column: 1 / -1;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .header-status-strip article:last-child > strong {
    text-align: right;
  }

  .conditional-stats-heading,
  .conditional-stat-controls,
  .conditional-detail-toolbar {
    align-items: stretch;
  }

  .conditional-stats-section {
    padding: 16px;
  }

  .conditional-stats-heading {
    display: grid;
    gap: 12px;
  }

  .conditional-stat-controls {
    display: block;
  }

  .conditional-stat-controls select {
    width: 100%;
    min-width: 0;
  }

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

  .conditional-detail-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .conditional-detail-toolbar select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 460px) {
  .duration-baselines {
    grid-template-columns: minmax(0, 1fr);
  }

  .conditional-comparison-heading {
    display: grid;
    gap: 3px;
  }

  .conditional-asset-card {
    padding-inline: 12px;
  }

  .conditional-regime-row {
    grid-template-columns: 70px minmax(60px, 1fr) 54px;
    gap: 6px;
  }

  .conditional-regime-label {
    gap: 4px;
    font-size: 9px;
  }
}

@media print {
  .conditional-stat-controls {
    display: none;
  }

  .conditional-detail-toolbar {
    display: none;
  }

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

/* V5 model and FX research status. */

.fx-ablation-status {
  display: grid;
  margin: 10px 0 14px;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.55;
}

.fx-ablation-status strong {
  color: var(--ink);
  font-size: 12px;
}

.model-evidence-summary {
  display: grid;
  margin: 2px 0 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.model-evidence-item {
  display: grid;
  min-width: 0;
  padding: 10px 12px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.model-evidence-item > span {
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 760;
}

.model-evidence-item > strong {
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
}

.model-evidence-item.is-review {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--transition) 48%, var(--line));
}

.model-evidence-item.is-provisional > strong,
.model-evidence-item.is-review > strong {
  color: var(--transition);
}

.research-evidence-section {
  margin-bottom: 12px;
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.research-evidence-details > summary::after {
  margin-left: 0;
}

.research-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.research-evidence-block {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.research-evidence-block h3,
.research-evidence-copy {
  margin: 0;
}

.operations-freshness {
  margin: 0;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  text-align: right;
}

.research-evidence-block h3 {
  color: var(--ink-strong);
  font-size: 13px;
}

.research-evidence-copy {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.6;
}

.research-fact-grid {
  display: grid;
  margin: 10px 0 0;
  gap: 8px;
}

.research-fact-grid > div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 10px;
}

.research-fact-grid dt {
  color: var(--ink-faint);
  font-size: 10px;
}

.research-fact-grid dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
}

.research-model-block .model-evidence-summary {
  margin: 12px 0 0;
  grid-template-columns: minmax(0, 1fr);
}

.research-model-block .model-evidence-item,
.research-metric-list > div,
.research-transition-item {
  background: var(--surface);
}

.research-metric-list {
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.research-metric-list > div {
  padding: 10px;
}

.research-metric-list dd {
  font-size: 13px;
}

.research-transition-grid {
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.research-transition-item {
  display: grid;
  min-width: 0;
  padding: 10px;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.research-transition-item > strong {
  color: var(--ink);
  font-size: 11px;
}

@media (max-width: 760px) {
  .research-evidence-grid,
  .research-transition-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

}

/* Forecast layer controls and balanced context cards. */

.forecast-layer-field {
  width: min(100%, 320px);
  margin: 0 0 12px auto;
  padding: 10px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.forecast-layer-field label {
  color: var(--ink-strong);
  white-space: nowrap;
}

.forecast-layer-field select {
  width: 100%;
  min-height: 40px;
}

.history-heading-controls {
  display: flex;
  min-width: 0;
  align-items: end;
  gap: 10px;
}

.history-heading-controls select {
  width: 100%;
}

#evidence.detail-grid {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  align-items: stretch;
}

#evidence > .evidence-drivers-card {
  grid-column: span 6;
}

#evidence > .market-context-card {
  grid-column: span 4;
}

#evidence > #duration-context-card,
#evidence > #fx-context-card {
  grid-column: span 5;
}

#duration-context-card,
#fx-context-card {
  position: relative;
  display: flex;
  flex-direction: column;
}

#duration-context-card .metric-list,
#fx-context-card .metric-list {
  margin-top: 16px;
  gap: 12px;
}

#duration-context-card .metric-list > div,
#fx-context-card .metric-list > div,
#duration-context-card .duration-baseline {
  display: flex;
  min-height: 88px;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
}

#duration-context-card .metric-list dt,
#fx-context-card .metric-list dt,
#duration-context-card .duration-baseline span {
  overflow: visible;
  line-height: 1.5;
  text-overflow: clip;
  white-space: normal;
}

#duration-context-card .duration-baselines {
  margin-top: 12px;
}

#fx-context-card .context-status-row {
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
}

#fx-coverage > :first-child {
  display: none;
}

#market-context dt {
  overflow: visible;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

#market-context .metric-percentile {
  display: block;
  margin-top: 5px;
  color: var(--ink-faint);
  font-size: 9px;
}

@media (max-width: 760px) {
  .forecast-layer-field {
    width: 100%;
    margin-left: 0;
  }

  #history .card-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .history-heading-controls {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(92px, 0.7fr);
    align-items: end;
    gap: 8px;
  }

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

  #evidence > .evidence-drivers-card,
  #evidence > .market-context-card,
  #evidence > #duration-context-card,
  #evidence > #fx-context-card {
    grid-column: 1;
  }

  #fx-context-card .context-status-row {
    top: 16px;
    right: 16px;
  }

  /* Keep the weekly marks visually narrow while each real button remains a
     WCAG-sized keyboard/touch target on a 390px viewport. */
  .timeline-track {
    gap: 0;
  }

  .timeline-cell {
    position: relative;
    min-width: 24px;
    min-height: 38px;
    padding: 0;
    overflow: visible;
    border-color: transparent;
    background: transparent;
    touch-action: manipulation;
  }

  .timeline-cell::before {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 8px;
    border: 1px solid transparent;
    border-radius: 3px;
    content: "";
    transform: translateX(-50%);
  }

  .timeline-cell::after {
    position: relative;
    z-index: 1;
  }

  .timeline-cell.risk_on::before {
    border-color: var(--risk-on);
    background: var(--risk-on-soft);
  }

  .timeline-cell.transition::before {
    border-color: var(--transition);
    border-style: dashed;
    background: var(--transition-soft);
  }

  .timeline-cell.risk_off::before {
    border-color: var(--risk-off);
    border-style: double;
    background: var(--risk-off-soft);
  }

  .timeline-cell[aria-current="date"] {
    outline: 0;
  }

  .timeline-cell[aria-current="date"]::before {
    outline: 3px solid var(--ink-strong);
    outline-offset: 2px;
  }
}

/* Year labels share each group's width with its weekly marks. */
.timeline-year-group { --timeline-week-width: 11px; display: flex; flex-direction: column; flex-basis: 0; flex-shrink: 0; min-width: calc(var(--timeline-week-count) * var(--timeline-week-width)); gap: 7px; }
.timeline-year-label { display: block; padding: 0 4px; color: var(--ink-faint); font: 500 11px var(--mono); font-variant-numeric: tabular-nums; text-align: left; }
.timeline-year-weeks { display: flex; flex: 1; gap: 1px; }
.timeline-year-weeks .timeline-cell { min-width: 10px; min-height: 44px; padding: 0; flex-shrink: 0; border-radius: 2px; }
.timeline-year-weeks .timeline-cell[aria-current="date"] { outline-width: 2px; outline-offset: 2px; }
@media (max-width: 760px) {
  .timeline-year-group { --timeline-week-width: 25px; gap: 6px; }
  .timeline-year-weeks .timeline-cell { min-width: 24px; min-height: 44px; }
}

/* Shared-origin comparison: observed membership above, selected forecast below. */

#history .history-heading-controls {
  margin-left: auto;
}

#history .history-heading-controls .inline-field {
  min-width: 120px;
}

#history .chart-context-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  margin: 18px 0 10px;
}

.chart-selection-readout {
  min-width: 0;
  padding: 14px 16px;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: stretch;
  gap: 18px;
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.chart-readout-date {
  align-content: center;
}

.chart-readout-date small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
}

.chart-readout-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(190px, .95fr);
  gap: 18px;
}

.chart-readout-series,
.chart-readout-diagnostics {
  min-width: 0;
}

.chart-readout-series.forecast {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.chart-readout-series-label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.chart-selection-readout .chart-readout-series dl,
.chart-selection-readout .chart-readout-diagnostics {
  display: grid;
  margin: 0;
  gap: 7px;
}

.chart-selection-readout .chart-readout-series dl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.chart-selection-readout .chart-readout-diagnostics {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.chart-selection-readout .chart-readout-diagnostics > div {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.chart-selection-readout .chart-readout-diagnostics dd {
  text-align: right;
  white-space: nowrap;
}

.chart-panel-bg { fill: var(--chart-panel); }
.chart-regime-band {
  fill-opacity: var(--chart-regime-opacity);
  stroke: none;
  pointer-events: none;
}
.chart-regime-band.risk_on { fill: var(--chart-risk-on); }
.chart-regime-band.transition { fill: var(--chart-transition); }
.chart-regime-band.risk_off { fill: var(--chart-risk-off); }
.chart-panel-kicker {
  fill: var(--chart-text);
  font: 600 10px var(--mono);
  letter-spacing: .07em;
}
.chart-panel-title {
  fill: var(--ink-strong);
  font: 650 13px var(--sans);
}
.chart-panel-divider,
.chart-axis-boundary {
  stroke: var(--line-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.chart-hover-line {
  stroke: var(--ink-faint);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
.chart-selected-band {
  fill: var(--brand);
  fill-opacity: .055;
  pointer-events: none;
}
.chart-selected-label { pointer-events: none; }
.chart-selected-label rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.chart-selected-label text { fill: var(--brand-dark); stroke: none; font: 600 11px var(--mono); }
.chart-endpoint-label {
  fill: var(--ink-strong);
  font: 650 12px var(--mono);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--chart-panel);
  stroke-width: 4;
  stroke-linejoin: round;
}
.chart-endpoint-dot {
  fill: var(--surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.chart-endpoint-leader {
  fill: none;
  stroke-width: 1;
  opacity: .65;
  vector-effect: non-scaling-stroke;
}
.chart-endpoint-dot.risk_on, .chart-endpoint-leader.risk_on { stroke: var(--chart-risk-on); }
.chart-endpoint-dot.transition, .chart-endpoint-leader.transition { stroke: var(--chart-transition); }
.chart-endpoint-dot.risk_off, .chart-endpoint-leader.risk_off { stroke: var(--chart-risk-off); }
.chart-endpoint-label.risk_on { fill: var(--chart-risk-on); }
.chart-endpoint-label.transition { fill: var(--chart-transition); }
.chart-endpoint-label.risk_off { fill: var(--chart-risk-off); }
#history .chart-selection-readout dt { font-size: 10px; font-weight: 500; }
#history .chart-selection-readout dd { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
#history .chart-readout-date strong { font-size: 13px; }
#history .chart-legend { gap: 8px 18px; font-size: 11px; }
#history .legend-regime-background { color: var(--ink-faint); font-size: 10px; }
#history .chart-readout-series.forecast { padding-left: 18px; }
#history .svg-chart-wrap { padding-block: 6px 4px; }
#history .probability-chart:not(.is-dense) .chart-point { opacity: .6; r: 2; }
#history .probability-chart.is-dense .chart-point:not(.is-active) { opacity: 0; }
#history .probability-chart .chart-point.is-active { opacity: 1; r: 4; stroke-width: 2; }


.chart-panel-separator {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.chart-series.observed {
  opacity: .88;
  stroke-width: 2;
}

.chart-series.forecast {
  stroke-width: 2.5;
}

.chart-outcome-label {
  fill: var(--chart-text);
  font-size: 9px;
  font-weight: 800;
}

.chart-outcome-baseline {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.actual-outcome-marker {
  stroke: var(--surface);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.actual-outcome-marker.risk_on { fill: var(--risk-on); }
.actual-outcome-marker.transition { fill: var(--transition); }
.actual-outcome-marker.risk_off { fill: var(--risk-off); }

.actual-outcome-marker.pending,
.actual-outcome-marker.missing,
.actual-outcome-marker.unavailable {
  fill: var(--surface);
  stroke: var(--ink-faint);
  stroke-dasharray: 2 2;
}

.actual-outcome-marker.is-active {
  stroke: var(--ink-strong);
  stroke-width: 2.6;
}

.legend-outcome-markers {
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 1px;
}

.chart-tooltip {
  max-width: 360px;
  white-space: pre-line;
}

#history-table-scroll table {
  min-width: 1120px;
}

#history-table-scroll thead tr:first-child th[colspan] {
  border-bottom-color: var(--line-strong);
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 980px) {
  #history .chart-selection-readout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #history .chart-readout-date { grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 14px; }
  #history .chart-readout-date > span { grid-column: 1 / -1; }
  #history .chart-readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 1fr); gap: 12px; }
}

@media (max-width: 760px) {
  #history .history-heading-controls,
  #history .history-heading-controls .inline-field {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  #history .history-heading-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  #history .chart-readout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-selection-readout .chart-readout-diagnostics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .chart-selection-readout .chart-readout-diagnostics > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  .chart-selection-readout .chart-readout-diagnostics dd {
    text-align: left;
  }

}

@media (max-width: 480px) {
  .chart-selection-readout {
    grid-template-columns: minmax(0, 1fr);
  }

  #history .chart-readout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #history .chart-selection-readout { padding: 12px; }
  #history .chart-readout-series.forecast { padding: 0 0 0 12px; border-top: 0; border-left: 1px solid var(--line); }
  #history .chart-selection-readout dd { font-size: 11px; }
  #history .chart-readout-date small { font-size: 9px; }

  #history .chart-readout-series {
    display: grid;
    grid-template-rows: 1fr auto;
  }

  #history .chart-selection-readout .chart-readout-series dl {
    grid-template-columns: minmax(0, 1fr);
  }

  #history .chart-readout-series dl > div {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 8px;
  }

  #history .chart-readout-series dt,
  #history .chart-readout-series dd {
    white-space: nowrap;
  }

  #history .chart-readout-series dd {
    text-align: right;
  }

  .chart-readout-series.forecast {
    padding: 10px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .chart-selection-readout .chart-readout-diagnostics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chart-selection-readout .chart-readout-diagnostics > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-selection-readout .chart-readout-diagnostics dd {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 460px) {
  #market-context,
  #duration-context,
  #fx-context,
  #duration-context-card .duration-baselines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #market-context > div,
  #duration-context-card .metric-list > div,
  #fx-context-card .metric-list > div,
  #duration-context-card .duration-baseline {
    min-height: 84px;
    padding: 14px;
  }
}

@media (max-width: 360px) {
  #market-context,
  #duration-context,
  #fx-context,
  #duration-context-card .duration-baselines {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 760px) {
  .conditional-stat-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .conditional-stat-controls .inline-field {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .conditional-stat-controls {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Payload-driven label and forecast-clock contracts. */

.contract-overview-grid {
  display: block;
  margin-top: 12px;
}

.definition-card {
  min-width: 0;
  padding: 18px;
}

.compact-card-heading {
  align-items: flex-start;
}

.compact-card-heading h2 {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-size: 17px;
  letter-spacing: -0.02em;
}

.compact-card-heading .card-kicker {
  display: block;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contract-chip {
  display: inline-flex;
  min-height: 28px;
  padding: 5px 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
}

.contract-chip.is-expired {
  border-color: color-mix(in srgb, var(--transition) 45%, var(--line));
  background: var(--transition-soft);
  color: var(--status-review-text);
}

.definition-facts,
.forecast-timing {
  display: grid;
  margin: 14px 0 0;
  gap: 8px;
}

.definition-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.definition-facts > div,
.forecast-timing > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.definition-facts dt,
.forecast-timing dt {
  color: var(--ink-faint);
  font-size: 9px;
  font-weight: 760;
}

.definition-facts dd,
.forecast-timing dd {
  margin: 4px 0 0;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.55;
}

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

.forecast-timing dd {
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 10px;
}

.forecast-window-section {
  margin-bottom: 12px;
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.forecast-window-details > summary::after {
  margin-left: 0;
}

.forecast-window-body .forecast-timing {
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero-grid.has-expired-current-forecast > #current-regime-card {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .forecast-window-body .forecast-timing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .definition-facts,
  .forecast-window-body .forecast-timing {
    grid-template-columns: minmax(0, 1fr);
  }

  .definition-card {
    padding: 15px;
  }

  .forecast-window-details > summary {
    flex-wrap: wrap;
  }

  .forecast-window-details > summary .contract-chip {
    margin-left: 0;
  }

  .forecast-window-details > summary::after {
    margin-left: auto;
  }
}

/* Decision-grade reading order, uncertainty, and responsive exploration. */

.section-nav {
  position: sticky;
  z-index: 1100;
  top: var(--site-nav-height);
  padding-block: 7px;
  background: color-mix(in srgb, var(--page) 94%, transparent);
  backdrop-filter: blur(12px);
}

.section-nav-action {
  min-width: 44px;
  min-height: 38px;
  padding: 8px 12px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}

.section-nav-action:hover,
.section-nav-action:focus-visible {
  background: var(--brand-soft);
}

.compact-definition-details {
  padding: 0;
}

.compact-definition-details > summary {
  display: flex;
  min-height: 50px;
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 750;
}

.compact-definition-details > summary::after {
  margin-left: 0;
}

.definition-details-body {
  padding: 0 14px 14px;
}

.section-unavailable {
  margin: 16px 0 0;
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
}

.transition-horizon-baseline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 10px;
}

.transition-horizon-baseline strong {
  color: var(--ink-soft);
  font-family: var(--mono);
}

.conditional-asset-heading {
  flex-wrap: wrap;
}

.conditional-benchmark-label {
  margin-left: auto;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft) !important;
  font-family: var(--mono);
  font-size: 10px !important;
  font-weight: 700;
}

.conditional-regime-row {
  grid-template-columns: 90px minmax(110px, 1fr) 118px;
}

.conditional-regime-label {
  font-size: 11px;
}

.conditional-return-track {
  height: 18px;
  overflow: hidden;
  border-radius: 5px;
}

.conditional-return-ci,
.conditional-return-point,
.conditional-return-benchmark {
  position: absolute;
  z-index: 3;
}

.conditional-return-ci {
  top: 50%;
  height: 3px;
  border-inline: 1px solid currentColor;
  transform: translateY(-50%);
}

.conditional-return-point {
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  box-shadow: 0 0 0 1px currentColor;
  transform: translate(-50%, -50%);
}

.conditional-return-ci.state-risk_on,
.conditional-return-point.state-risk_on { color: var(--risk-on-mark); background: var(--risk-on-mark); }
.conditional-return-ci.state-transition,
.conditional-return-point.state-transition { color: var(--transition-mark); background: var(--transition-mark); }
.conditional-return-ci.state-risk_off,
.conditional-return-point.state-risk_off { color: var(--risk-off-mark); background: var(--risk-off-mark); }

.conditional-return-benchmark {
  z-index: 2;
  top: 1px;
  bottom: 1px;
  width: 0;
  border-left: 2px dashed var(--ink-faint);
  transform: translateX(-1px);
}

.conditional-return-value strong {
  font-size: 12px;
}

.conditional-return-value small {
  font-size: 9px;
}

.conditional-excess {
  color: var(--ink-soft) !important;
}

.conditional-legend-ci {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 10px;
  border-top: 2px solid var(--ink-soft);
}

.conditional-legend-ci::after {
  position: absolute;
  top: -5px;
  left: 9px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--surface);
  border-radius: 50%;
  background: var(--ink-soft);
  content: "";
}

.history-scroll-guide {
  margin: 8px 0 0;
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
}

.history-range-labels {
  display: flex;
  margin-top: 5px;
  justify-content: space-between;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
}

.model-evidence-summary {
  margin-top: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.model-evidence-item.is-unavailable {
  border-style: dashed;
  color: var(--ink-faint);
}

.research-decision-block {
  grid-column: 1 / -1;
}

.decision-shadow-grid {
  display: grid;
  margin-top: 10px;
  grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr);
  align-items: start;
  gap: 10px;
}

.decision-shadow-track,
.decision-shadow-live {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.decision-shadow-track-heading,
.decision-shadow-live-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.decision-shadow-track-heading > strong,
.decision-shadow-live-heading > strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.decision-shadow-track-heading > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  text-align: right;
}

.decision-shadow-strategy-grid {
  display: grid;
  margin-top: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.decision-shadow-item {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.decision-shadow-item.is-shadow {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: var(--brand-soft);
}

.decision-shadow-item > strong {
  color: var(--ink-strong);
  font-size: 11px;
}

.decision-shadow-item dl {
  display: grid;
  margin: 8px 0 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.decision-shadow-item dl div {
  min-width: 0;
}

.decision-shadow-item dt {
  color: var(--ink-faint);
  font-size: 9px;
}

.decision-shadow-item dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

.decision-shadow-live {
  display: grid;
  align-content: start;
  gap: 10px;
  background: var(--surface-soft);
}

.decision-shadow-live-heading {
  align-items: flex-start;
  flex-wrap: wrap;
}

.decision-shadow-live-status {
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
}

.decision-shadow-live-facts {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.decision-shadow-live-facts > div {
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.decision-shadow-live-facts dt,
.decision-shadow-target-weights > span {
  color: var(--ink-faint);
  font-size: 9px;
}

.decision-shadow-live-facts dd {
  margin: 3px 0 0;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 750;
}

.decision-shadow-target-weights {
  display: grid;
  gap: 6px;
}

.decision-shadow-target-weights > strong,
.decision-shadow-target-weights small {
  color: var(--ink-soft);
  font-size: 10px;
}

.decision-shadow-weight-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.decision-shadow-weight-chips strong {
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-family: var(--mono);
  font-size: 10px;
}

.model-forecast-explorer.is-operating-model .model-forecast-state,
.model-forecast-explorer.is-operating-model #model-forecast-probabilities {
  display: none;
}

.model-forecast-explorer.is-operating-model .model-forecast-body {
  grid-template-columns: minmax(0, 1fr);
}

/* Payload colours are marks only. Text keeps the theme-tested tokens above. */
.probability-fill.risk_on,
.transition-card.alert-low .transition-meter span,
.driver-fill.risk_on { background: var(--risk-on-mark); }
.probability-fill.transition,
.transition-meter span,
.driver-fill.transition { background: var(--transition-mark); }
.probability-fill.risk_off,
.transition-card.alert-high .transition-meter span,
.driver-fill.risk_off { background: var(--risk-off-mark); }
.risk-on-line { color: var(--chart-risk-on); }
.transition-line { color: var(--chart-transition); }
.risk-off-line { color: var(--chart-risk-off); }
.chart-series.risk_on { stroke: var(--chart-risk-on); }
.chart-series.transition { stroke: var(--chart-transition); }
.chart-series.risk_off { stroke: var(--chart-risk-off); }
.chart-point.risk_on { stroke: var(--chart-risk-on); }
.chart-point.transition { stroke: var(--chart-transition); }
.chart-point.risk_off { stroke: var(--chart-risk-off); }
.actual-outcome-marker.risk_on { fill: var(--chart-risk-on); }
.actual-outcome-marker.transition { fill: var(--chart-transition); }
.actual-outcome-marker.risk_off { fill: var(--chart-risk-off); }

@media (max-width: 1120px) {
  .decision-shadow-strategy-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Decision workspace v3: compact hierarchy and comparison-first tables. */
.page-header {
  margin-top: 10px;
  padding: 14px 2px 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-header h1 {
  margin: 3px 0 0;
  font-size: clamp(29px, 3vw, 38px);
}

.header-status-strip {
  display: flex;
  align-items: center;
}

.header-status-strip article {
  display: flex;
  min-height: 0;
  padding: 0;
  align-items: baseline;
  gap: 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.header-status-strip article > span {
  font-size: 10px;
}

.header-status-strip article > strong {
  overflow-wrap: normal;
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}

.section-nav {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-nav a,
.section-nav-action {
  min-height: 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-shell {
  padding-top: 16px;
}

.overview-section .control-bar {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.date-controls {
  width: auto;
  padding: 0;
  grid-template-columns: minmax(210px, 260px) auto auto;
  grid-template-areas: "week steps latest";
  align-items: end;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.date-controls .compact-field select {
  width: 100%;
}

.hero-grid.has-expired-current-forecast:has(#decision-action-card:not([hidden])) {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
}

.hero-grid.has-expired-current-forecast:has(#decision-action-card:not([hidden])) > #current-regime-card,
.hero-grid.has-expired-current-forecast:has(#decision-action-card:not([hidden])) > #decision-action-card {
  grid-column: auto;
}

.hero-grid > .decision-action-card {
  padding: 18px 20px;
  align-content: start;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-left: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
  box-shadow: none;
}

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

.decision-action-facts {
  gap: 0;
  border-top: 1px solid var(--line);
}

.decision-action-facts > div {
  display: flex;
  min-width: 0;
  padding: 9px 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.decision-action-facts dt,
.decision-action-facts dd {
  font-size: 11px;
}

.decision-shadow-section {
  padding: 18px 20px 20px;
}

.decision-shadow-economic-summary {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
}

.decision-shadow-track {
  padding: 0;
  border: 0;
  background: transparent;
}

.decision-shadow-track-heading {
  margin-bottom: 10px;
}

.decision-shadow-table,
.conditional-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.decision-shadow-table {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.decision-shadow-table th,
.decision-shadow-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.decision-shadow-table thead th {
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.3;
}

.decision-shadow-table th:first-child {
  width: 92px;
  text-align: left;
}

.decision-shadow-table tbody th {
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 680;
}

.decision-shadow-table td {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 750;
}

.decision-shadow-table .is-shadow {
  background: color-mix(in srgb, var(--brand-soft) 64%, var(--surface));
  color: var(--brand-dark);
}

.decision-shadow-table tbody tr:last-child > * {
  border-bottom: 0;
}

.conditional-stats-section {
  padding: 18px 20px 20px;
}

.conditional-stats-heading {
  align-items: end;
}

.conditional-stat-controls {
  width: auto;
}

.conditional-comparison-heading {
  margin-top: 14px;
}

.conditional-stat-grid {
  display: block;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.conditional-matrix th,
.conditional-matrix td {
  min-width: 0;
  padding: 11px 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: right;
  vertical-align: middle;
}

.conditional-matrix tr > :last-child {
  border-right: 0;
}

.conditional-matrix tbody tr:last-child > * {
  border-bottom: 0;
}

.conditional-matrix thead th {
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 720;
}

.conditional-matrix thead th strong,
.conditional-matrix thead th small,
.conditional-matrix-cell strong,
.conditional-matrix-cell small,
.conditional-matrix-overall strong {
  display: block;
}

.conditional-matrix thead th small {
  min-height: 14px;
  margin-top: 2px;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 620;
}

.conditional-matrix-asset-head,
.conditional-matrix-asset {
  width: 118px;
  text-align: left !important;
}

.conditional-matrix-asset {
  background: var(--surface);
}

.conditional-matrix-asset strong {
  display: block;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 13px;
}

.conditional-matrix-asset small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-faint);
  font-size: 10px;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conditional-matrix-cell {
  background: var(--surface);
}

.conditional-matrix-cell.is-positive {
  background: color-mix(in srgb, var(--risk-on) var(--heat, 8%), var(--surface));
}

.conditional-matrix-cell.is-negative {
  background: color-mix(in srgb, var(--risk-off) var(--heat, 8%), var(--surface));
}

.conditional-matrix-cell strong,
.conditional-matrix-overall strong {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 760;
}

.conditional-matrix-cell small {
  margin-top: 3px;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 650;
}

.conditional-matrix-overall,
.conditional-matrix-overall-head {
  background: var(--surface-soft);
}

.conditional-matrix th.state-risk_on { color: var(--risk-on); }
.conditional-matrix th.state-transition { color: var(--transition); }
.conditional-matrix th.state-risk_off { color: var(--risk-off); }

@media (max-width: 760px) {
  :root {
    --site-nav-height: 57px;
  }

  .site-nav-inner {
    min-height: 56px;
    padding-bottom: 0;
    grid-template-rows: 56px;
  }

  .site-nav-links {
    display: none;
  }

  .page-header {
    width: min(var(--content), calc(100% - 28px));
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .page-header .eyebrow {
    display: none;
  }

  .page-header h1 {
    font-size: 27px;
  }

  .section-nav,
  .state-panel,
  .dashboard-shell {
    width: min(var(--content), calc(100% - 28px));
  }

  .header-status-strip article:last-child {
    display: flex;
    min-height: 0;
  }

  .hero-grid.has-expired-current-forecast:has(#decision-action-card:not([hidden])) {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .decision-shadow-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .decision-shadow-economic-summary {
    justify-self: start;
  }

  .decision-shadow-table th,
  .decision-shadow-table td {
    padding: 9px 6px;
  }

  .decision-shadow-table th:first-child {
    width: 58px;
  }

  .decision-shadow-table thead th,
  .decision-shadow-table tbody th {
    font-size: 10px;
  }

  .decision-shadow-table td {
    font-size: 12px;
  }

  .conditional-stat-controls {
    display: block;
  }

  .conditional-matrix th,
  .conditional-matrix td {
    padding: 9px 4px;
  }

  .conditional-matrix-asset-head,
  .conditional-matrix-asset {
    width: 54px;
  }

  .conditional-matrix-asset small,
  .conditional-matrix thead th small {
    display: none;
  }

  .conditional-matrix-cell small {
    display: block;
    margin-top: 1px;
    font-size: 8px;
    line-height: 1.15;
  }

  .conditional-matrix thead th,
  .conditional-matrix-cell strong,
  .conditional-matrix-overall strong {
    font-size: 10px;
  }

  .conditional-table-scroll {
    overflow: visible;
    padding-bottom: 0;
  }

  .table-scroll-guide {
    display: none;
  }

  #conditional-stat-table {
    min-width: 0;
    table-layout: fixed;
  }

  #conditional-stat-table col:nth-child(1) { width: 22%; }
  #conditional-stat-table col:nth-child(2) { width: 21%; }
  #conditional-stat-table col:nth-child(3) { width: 22%; }
  #conditional-stat-table col:nth-child(5) { width: 19%; }
  #conditional-stat-table col:nth-child(10) { width: 16%; }

  #conditional-stat-table :is(col, th, td):is(
    :nth-child(4),
    :nth-child(6),
    :nth-child(7),
    :nth-child(8),
    :nth-child(9)
  ) {
    display: none;
  }

  #conditional-stat-table th,
  #conditional-stat-table td {
    padding: 8px 3px;
    overflow-wrap: anywhere;
    font-size: 10px;
    line-height: 1.25;
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .date-controls {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "week week"
      "steps latest";
  }

  .overview-section .control-bar {
    align-items: stretch;
  }

  .conditional-stats-section,
  .decision-shadow-section {
    padding-inline: 13px;
  }
}

@media (max-width: 760px) {
  #history .probability-chart {
    width: 100%;
    min-width: 0;
  }

  #history .svg-chart-wrap.is-scroll-mode .probability-chart {
    width: var(--history-chart-mobile-width, 900px);
    min-width: var(--history-chart-mobile-width, 900px);
  }

  .conditional-stat-grid,
  .model-evidence-summary,
  .decision-shadow-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .conditional-asset-card {
    padding: 12px;
  }

  .conditional-regime-row {
    grid-template-columns: 78px minmax(72px, 1fr) 106px;
    gap: 6px;
  }

  .conditional-regime-label {
    font-size: 10px;
  }

  .conditional-benchmark-label {
    font-size: 9px !important;
  }
}

@media print {
  .section-nav {
    position: static;
  }

  #history .svg-chart-wrap.is-scroll-mode .probability-chart {
    width: 100%;
    min-width: 0;
  }
}

/* Keep the decision path visible in one desktop scan after legacy layout rules. */
@media (min-width: 1021px) {
  .page-header {
    padding-block: 14px;
  }

  .page-header h1 {
    font-size: clamp(31px, 2.8vw, 38px);
  }

  .header-status-strip article {
    min-height: 56px;
  }

  .dashboard-shell {
    padding-top: 14px;
  }

  .overview-section .control-bar {
    margin-bottom: 10px;
    align-items: stretch;
    justify-content: space-between;
  }

  .overview-section .forecast-layer-field {
    width: min(320px, 28vw);
    margin: 0;
    align-content: center;
  }

  .regime-card,
  .transition-card {
    min-height: 228px;
    padding: 16px;
  }

  .regime-headline {
    margin: 11px 0 9px;
  }

  .hero-grid .probability-list {
    gap: 6px;
  }

  .transition-value-row {
    margin-top: 12px;
  }

  .transition-meter {
    margin: 10px 0 9px;
  }

  .transition-horizon-row {
    padding: 7px 9px;
  }

  .compact-definition-details > summary {
    min-height: 44px;
  }

  .conditional-stats-section {
    padding: 16px;
  }
}

/* Investment-facing summary surfaces. Final overrides preserve their hierarchy. */
.header-status-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#header-analysis-coverage {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

#header-analysis-coverage > span:first-child {
  flex-basis: 100%;
}

.hero-grid > .decision-action-card {
  display: grid;
  min-height: 0;
  padding: 15px 17px;
  grid-column: 1 / -1;
  gap: 12px;
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
}

.decision-action-heading,
.decision-shadow-section-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.decision-action-heading > div,
.decision-shadow-section-heading > div {
  min-width: 0;
}

.decision-action-heading .card-kicker,
.decision-shadow-section-heading .card-kicker {
  display: block;
  margin-bottom: 5px;
}

.decision-action-heading h2,
.decision-shadow-section-heading h2 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.decision-action-summary {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
}

.decision-action-facts {
  display: grid;
  min-width: 0;
  margin: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.decision-action-facts > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.decision-action-facts dt {
  color: var(--ink-faint);
  font-size: 9px;
}

.decision-action-facts dd {
  margin: 3px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.45;
}

.decision-action-note {
  max-width: 310px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.55;
}

.decision-shadow-section {
  margin-bottom: 12px;
  padding: 18px;
  scroll-margin-top: calc(var(--site-nav-height) + 14px);
}

.decision-shadow-section-heading {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(420px, 1.28fr);
  align-items: stretch;
}

.decision-shadow-section-heading .section-caption {
  margin: 6px 0 0;
}

.decision-shadow-economic-summary {
  display: grid;
  min-width: 0;
  padding: 11px 13px;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.decision-shadow-economic-summary > strong {
  min-width: 0;
  color: var(--ink-strong);
  font-size: 12px;
  line-height: 1.4;
}

.decision-shadow-economic-summary > p {
  margin: 0;
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.55;
}

.conditional-support-summary {
  display: flex;
  min-width: 0;
  margin: 12px 0;
  padding: 9px 11px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1120px) {
  .conditional-stats-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .conditional-stat-controls {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .conditional-stat-controls .inline-field,
  .conditional-stat-controls select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 900px) {
  .decision-shadow-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .decision-action-note {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .header-status-strip article:last-child {
    display: grid;
    min-height: 60px;
    grid-column: auto;
    align-items: initial;
    justify-content: initial;
  }

  .header-status-strip article:last-child > strong {
    text-align: left;
  }

  .decision-action-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

  .decision-shadow-section {
    padding: 15px;
  }
}

@media (max-width: 460px) {
  .header-status-strip {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .decision-action-heading .support-chip {
    justify-self: start;
  }

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

@media print {
  .decision-action-card,
  .decision-shadow-section,
  .conditional-support-summary {
    break-inside: avoid;
  }
}

/* Decision view: keep methodology and diagnostic surfaces in the payload, not in the scan path. */
.meta-only-section,
.compact-hidden-control {
  display: none !important;
}

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

.header-status-strip article {
  min-height: 54px;
  padding: 9px 11px;
}

#header-analysis-coverage {
  display: grid;
  align-content: center;
  gap: 2px;
}

#header-analysis-coverage > span:first-child {
  flex-basis: auto;
}

#header-analysis-coverage small {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  line-height: 1.35;
}

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

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

.decision-shadow-section-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.decision-shadow-economic-summary {
  padding: 7px 9px;
}

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

.decision-shadow-track {
  padding: 10px;
}

.decision-shadow-strategy-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.decision-shadow-item {
  padding: 9px;
}

.decision-shadow-item dt {
  font-size: 10px;
}

.decision-shadow-item dd {
  font-size: 11px;
}

.conditional-regime-row {
  grid-template-columns: 82px minmax(100px, 1fr) 106px;
}

.conditional-return-value {
  gap: 1px;
}

.conditional-return-value small {
  line-height: 1.25;
}

@media (max-width: 760px) {
  .header-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-status-strip article:last-child {
    min-height: 54px;
  }

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

  .decision-shadow-section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

  .conditional-regime-row {
    grid-template-columns: 72px minmax(62px, 1fr) 96px;
  }
}

@media (max-width: 460px) {
  .header-status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-action-heading {
    grid-template-columns: minmax(0, 1fr) auto;
  }

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

  .decision-shadow-section-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .decision-shadow-economic-summary {
    justify-self: start;
  }

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

/* v3 conflict resolution: this block must remain after legacy investment rules. */
.hero-grid > .decision-action-card .decision-action-summary,
.hero-grid > .decision-action-card .decision-action-facts {
  grid-template-columns: minmax(0, 1fr);
}

.hero-grid > .decision-action-card .decision-action-facts > div {
  display: flex;
  padding: 9px 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.hero-grid > .decision-action-card .decision-action-facts dt,
.hero-grid > .decision-action-card .decision-action-facts dd {
  font-size: 11px;
}

.hero-grid > .decision-action-card {
  border-color: var(--line);
  border-left-color: var(--line-strong);
  background: var(--surface);
}

.hero-grid > .decision-action-card.is-actionable {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 48%, var(--surface));
}

#conditional-basis-field {
  display: grid;
}

#conditional-basis-field[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .hero-grid > #decision-action-card {
    order: 0;
  }
}

/* Forecast-first workspace; tokens allow an outlook shared by two views. */
.section-nav [data-dashboard-view],
.section-nav-action {
  display: inline-flex;
  min-height: 44px;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
}

.section-nav [data-dashboard-view][aria-current="page"] {
  background: var(--ink-strong);
  color: var(--surface);
  font-weight: 760;
}

#dashboard[data-active-view="execution"] [data-dashboard-view]:not([data-dashboard-view~="execution"]),
#dashboard[data-active-view="performance"] [data-dashboard-view]:not([data-dashboard-view~="performance"]),
#dashboard[data-active-view="assets"] [data-dashboard-view]:not([data-dashboard-view~="assets"]),
#dashboard[data-active-view="model"] [data-dashboard-view]:not([data-dashboard-view~="model"]),
#dashboard[data-active-view="transition"] [data-dashboard-view]:not([data-dashboard-view~="transition"]) {
  display: none !important;
}

#dashboard,
#dashboard > *,
.hero-grid > *,
.decision-action-summary > *,
.performance-visual,
.sector-ranking,
.model-health-strip > * {
  min-width: 0;
}

.hero-grid > #decision-action-card {
  order: 0;
}

.decision-action-timing {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  border: 0 !important;
}

.hero-grid > .decision-action-card .decision-action-timing > div {
  display: block;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.decision-allocation-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.decision-allocation-step {
  position: relative;
  min-width: 0;
  padding: 11px 13px;
  border-right: 1px solid var(--line);
}

.decision-allocation-step:last-child {
  border-right: 0;
}

.decision-allocation-step > span,
.decision-allocation-step > strong {
  display: block;
}

.decision-allocation-step > span {
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 680;
}

.decision-allocation-step > strong {
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}

.decision-allocation-step.is-target {
  background: color-mix(in srgb, var(--brand-soft) 64%, var(--surface));
}

.decision-observer-portfolio {
  display: flex;
  margin: 0;
  padding: 7px 2px 0;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--ink-faint);
  font-size: 11px;
}

.decision-observer-portfolio strong {
  color: var(--ink-soft);
  font-family: var(--mono);
}

.decision-shadow-track {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.performance-visual {
  --performance-label-width: 92px;
  --performance-value-width: 64px;
  --performance-bar-gap: 9px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.performance-visual-heading {
  display: flex;
  margin-bottom: 11px;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.performance-visual-heading > strong {
  color: var(--ink-strong);
  font-size: 13px;
}

.performance-visual-heading > span {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.performance-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.performance-scroll-guide {
  display: none;
}

.performance-chart-scroll {
  min-width: 0;
  max-width: 100%;
}

.performance-chart-scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.performance-grid-line,
.performance-zero-line {
  stroke: var(--chart-grid);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.performance-grid-line { stroke-opacity: .65; stroke-dasharray: 2 5; }

.performance-zero-line {
  stroke: var(--line-strong);
}

.performance-axis-label {
  fill: var(--chart-text);
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.performance-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.performance-summary-bars,
.performance-turnover-bars {
  display: grid;
  gap: 9px;
}

.performance-summary-bar,
.performance-turnover-row {
  display: grid;
  grid-template-columns: var(--performance-label-width, 92px) minmax(60px, 1fr) var(--performance-value-width, 64px);
  align-items: center;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 11px;
}

.performance-summary-bar > strong,
.performance-turnover-row > strong {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.performance-summary-track,
.performance-turnover-track {
  display: block;
  position: relative;
  height: 8px;
  overflow: visible;
  border-radius: 2px;
  background: var(--surface-soft);
}

.performance-summary-track i,
.performance-turnover-track i {
  position: absolute;
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #9aa4b2;
}

.performance-summary-bar.is-primary i,
.performance-turnover-row.is-primary i {
  background: var(--brand);
}

.performance-bridge {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.performance-bridge-step {
  position: relative;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.performance-bridge-step small,
.performance-bridge-step strong {
  display: block;
}

.performance-bridge-step small {
  color: var(--ink-faint);
  font-size: 11px;
}

.performance-bridge-step strong {
  margin-top: 3px;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 14px;
}

.performance-bridge-operator {
  position: absolute;
  top: 50%;
  left: -13px;
  width: 18px;
  transform: translateY(-50%);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
}

.performance-detail {
  margin: 0;
}

.performance-detail > summary {
  min-height: 44px;
  font-size: 11px;
}

.performance-detail-scroll {
  max-width: 100%;
}

.conditional-matrix-cell.is-uncertain {
  background: var(--surface-soft);
  color: var(--ink-soft);
}

.conditional-cell-sample,
.conditional-cell-interval {
  min-height: 0 !important;
  overflow-wrap: anywhere;
  font-size: 11px !important;
  line-height: 1.3;
}

.conditional-cell-interval {
  display: flex !important;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  column-gap: 4px;
  color: var(--ink-faint) !important;
  font-weight: 580 !important;
  overflow-wrap: normal;
  word-break: keep-all;
}

.conditional-ci-bound,
.conditional-ci-label,
.conditional-ci-empty {
  white-space: nowrap;
}

.conditional-uncertain-dot {
  color: var(--ink-strong);
  font-size: 15px;
  line-height: 0;
}

.sector-ranking {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.sector-ranking-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sector-ranking-heading h3 {
  margin: 0;
  color: var(--ink-strong);
  font-size: 15px;
}

.sector-ranking-heading p {
  margin: 3px 0 0;
  font-size: 11px;
}

.sector-ranking-grid {
  display: grid;
  margin-top: 12px;
  gap: 4px;
}

.sector-ranking-row {
  display: grid;
  min-height: 34px;
  padding: 4px 8px;
  grid-template-columns: 24px 48px minmax(100px, 1fr) 68px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
}

.sector-ranking-row.is-selected {
  background: color-mix(in srgb, var(--brand-soft) 68%, var(--surface));
}

.sector-rank,
.sector-score {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
}

.sector-symbol {
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 12px;
}

.sector-score-track {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 99px;
  background: transparent;
}

.sector-score-track::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.sector-score-track i {
  position: absolute;
  top: 2px;
  height: 6px;
  border-radius: 99px;
  background: #8d98a8;
}

.sector-ranking-row.is-selected .sector-score-track i {
  background: var(--brand);
}

.sector-score {
  text-align: right;
}

.sector-selection-marker {
  margin-left: 5px;
  color: var(--brand);
  font-size: 11px;
  font-style: normal;
}

.model-health-strip {
  display: grid;
  margin: 14px 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.model-health-strip::before {
  content: attr(data-subtitle);
  grid-column: 1 / -1;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
}

.model-health-metric {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
}

.model-health-metric > span,
.model-health-metric > strong,
.model-health-metric > small {
  display: block;
}

.model-health-metric > span,
.model-health-metric > small {
  color: var(--ink-faint);
  font-size: 11px;
}

.model-health-metric > strong {
  margin: 4px 0 2px;
  overflow-wrap: anywhere;
  color: var(--ink-strong);
  font-family: var(--mono);
  font-size: 14px;
}

@media (max-width: 900px) {
  .decision-action-timing {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .performance-comparison-grid,
  .model-health-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .section-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    overflow-x: auto;
  }

  .section-nav [data-dashboard-view],
  .section-nav-action {
    min-width: 64px;
    padding: 0 9px;
    font-size: 12px;
    white-space: nowrap;
  }

  .decision-action-timing,
  .decision-allocation-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .decision-allocation-step:nth-child(2) {
    border-right: 0;
  }

  .decision-allocation-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .performance-visual {
    padding: 11px;
  }

  .performance-chart {
    min-height: 150px;
  }

  .performance-wealth-card,
  .performance-drawdown-card {
    min-width: 0;
    max-width: 100%;
  }

  :is(.performance-wealth-card, .performance-drawdown-card) > .performance-chart-scroll {
    overflow-x: auto;
  }

  :is(.performance-wealth-card, .performance-drawdown-card) > .performance-chart-scroll > .performance-chart {
    width: 760px;
    min-width: 760px;
    min-height: 0;
  }

  .performance-scroll-guide {
    display: block;
    margin: 8px 0 0;
    color: var(--ink-soft);
    font-size: 11px;
  }

  .performance-visual-heading {
    display: grid;
    gap: 2px;
  }

  .performance-visual-heading > span {
    text-align: left;
  }

  .conditional-matrix-asset-head,
  .conditional-matrix-asset {
    width: 60px;
  }

  .conditional-matrix th,
  .conditional-matrix td {
    padding: 9px 5px;
  }

  .conditional-matrix thead th,
  .conditional-matrix-cell strong,
  .conditional-matrix-overall strong,
  .conditional-matrix-asset strong,
  .conditional-matrix-asset small,
  .conditional-matrix thead th small {
    font-size: 11px;
  }
}

@media (max-width: 460px) {
  .section-nav {
    width: calc(100% - 20px);
    grid-template-columns: repeat(4, minmax(66px, 1fr));
    gap: 3px;
  }

  .section-nav-action {
    display: none;
  }

  .dashboard-shell,
  .state-panel {
    width: calc(100% - 20px);
  }

  .decision-action-card,
  .decision-shadow-section,
  .conditional-stats-section,
  .model-section,
  .transition-model-section {
    padding: 13px !important;
  }

  .decision-action-timing,
  .decision-allocation-flow,
  .performance-comparison-grid,
  .model-health-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .decision-action-heading {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .decision-action-heading h2 {
    width: 100%;
    font-size: 16px;
    text-wrap: balance;
  }

  .decision-action-heading .support-chip {
    align-self: flex-start;
  }

  .decision-allocation-step {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .decision-allocation-step:last-child {
    border-bottom: 0;
  }

  .performance-summary-bar,
  .performance-turnover-row {
    grid-template-columns: var(--performance-label-width, 76px) minmax(52px, 1fr) var(--performance-value-width, 57px);
    gap: var(--performance-bar-gap, 6px);
  }

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

  .performance-bridge-operator {
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
  }

  .performance-detail-scroll {
    overflow-x: auto;
  }

  .decision-shadow-table {
    min-width: 520px;
  }

  .conditional-stat-grid {
    overflow: visible;
  }

  .conditional-matrix {
    table-layout: fixed;
  }

  .conditional-matrix-asset-head,
  .conditional-matrix-asset {
    width: 54px;
  }

  .conditional-matrix th,
  .conditional-matrix td {
    padding: 8px 3px;
  }

  .conditional-cell-sample,
  .conditional-cell-interval {
    letter-spacing: -0.03em;
  }

  .conditional-cell-interval {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    gap: 0;
  }

  .conditional-ci-label {
    display: none;
  }

  .sector-ranking-heading {
    display: grid;
  }

  .sector-ranking-row {
    grid-template-columns: 20px 42px minmax(70px, 1fr) 58px;
    gap: 5px;
  }
}

/* Navigation base inherited from the Hub and scoped to the shared menu. */
.quant-shared-nav {
  font: 15px/1.55 Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: 0;
  font-variant-numeric: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.quant-shared-nav__link { border: 1px solid transparent; }
.quant-shared-nav__theme { margin: 0; gap: 0; font-size: .88rem; font-weight: 650; }

/* Canonical Quant Research Hub navigation. Keep this block aligned with shared-nav.css. */
:root {
  --quant-shared-nav-height: 59px;
}

html {
  scroll-padding-top: calc(var(--quant-shared-nav-height) + 12px);
}

body.has-quant-shared-nav {
  padding-top: var(--quant-shared-nav-height);
}

body.has-quant-shared-nav .skip-link {
  z-index: 1300 !important;
}

.quant-shared-nav {
  --quant-nav-bg: rgba(255, 255, 255, 0.96);
  --quant-nav-line: #e2e8f0;
  --quant-nav-text: #536171;
  --quant-nav-strong: #111318;
  --quant-nav-hover: #f3f6f9;
  --quant-nav-active: #155eef;
  --quant-nav-active-bg: #eaf2ff;

  position: fixed !important;
  inset: 0 0 auto;
  z-index: 1200;
  display: block !important;
  width: 100% !important;
  min-height: 59px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--quant-nav-line) !important;
  border-radius: 0 !important;
  color: var(--quant-nav-text);
  background: var(--quant-nav-bg) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

:is(html, body)[data-theme="dark"] .quant-shared-nav,
[data-theme="dark"] .quant-shared-nav {
  --quant-nav-bg: rgba(24, 27, 34, 0.96);
  --quant-nav-line: #333a46;
  --quant-nav-text: #b5becb;
  --quant-nav-strong: #f2f4f6;
  --quant-nav-hover: #252b35;
  --quant-nav-active: #8ab8ff;
  --quant-nav-active-bg: #203452;
}

.quant-shared-nav__inner {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 44px;
  align-items: center;
  gap: 12px;
  width: min(1320px, calc(100% - 32px)) !important;
  min-height: 58px;
  margin-inline: auto !important;
  padding: 0 !important;
}

.quant-shared-nav__brand,
.quant-shared-nav__link,
.quant-shared-nav__theme {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none !important;
  white-space: nowrap;
}

.quant-shared-nav__brand {
  justify-content: flex-start;
  padding: 0 !important;
  color: var(--quant-nav-strong) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.quant-shared-nav__links {
  display: flex !important;
  align-items: center;
  gap: 2px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.quant-shared-nav__link {
  flex: 0 0 auto;
  padding: 8px 9px !important;
  color: var(--quant-nav-text) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.quant-shared-nav__link:hover,
.quant-shared-nav__link:focus-visible,
.quant-shared-nav__theme:hover,
.quant-shared-nav__theme:focus-visible {
  color: var(--quant-nav-strong) !important;
  background: var(--quant-nav-hover) !important;
}

.quant-shared-nav__brand[aria-current="page"],
.quant-shared-nav__brand.is-active,
.quant-shared-nav__link[aria-current="page"],
.quant-shared-nav__link.is-active {
  color: var(--quant-nav-active) !important;
  background: var(--quant-nav-active-bg) !important;
}

.quant-shared-nav__theme {
  width: 44px;
  min-width: 44px;
  padding: 0 !important;
  border: 1px solid var(--quant-nav-line) !important;
  color: var(--quant-nav-text) !important;
  background: transparent !important;
  cursor: pointer;
}

.quant-shared-nav__theme-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  box-shadow: none !important;
  transform: none !important;
}

.quant-shared-nav__theme-icon::before {
  display: none !important;
  content: none !important;
}

.quant-shared-nav__theme-icon::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.quant-shared-nav__theme-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.quant-shared-nav :is(a, button):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--quant-nav-active), transparent 55%);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  :root {
    --quant-shared-nav-height: 101px;
  }

  .quant-shared-nav__inner {
    grid-template-columns: minmax(0, 1fr) 44px;
    grid-template-rows: 50px 44px;
    gap: 0 8px;
    width: calc(100% - 24px) !important;
    padding-bottom: 6px !important;
  }

  .quant-shared-nav__brand {
    grid-column: 1;
    grid-row: 1;
  }

  .quant-shared-nav__theme {
    grid-column: 2;
    grid-row: 1;
  }

  .quant-shared-nav__links {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-bottom: 2px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .quant-shared-nav *,
  .quant-shared-nav *::before,
  .quant-shared-nav *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

:root { --site-nav-height: var(--quant-shared-nav-height); }

@media print {
  :root { --quant-shared-nav-height: 0px; }
  .quant-shared-nav { display: none !important; }
}

/* BEGIN quant-design-engine 0.4.0 — generated by scripts/sync-design-engine.mjs */
html[data-design-engine="0.4.0"] {
  --qe-bg: #f2f5f4 !important;
  --qe-surface: #ffffff !important;
  --qe-raised: #e9efed !important;
  --qe-text: #172725 !important;
  --qe-muted: #536762 !important;
  --qe-border: #c6d3ce !important;
  --qe-accent: #007e79 !important;
  --qe-positive: #227b53 !important;
  --qe-negative: #b44150 !important;
  --qe-card-inset: 24px !important;
  --qe-card-inset-mobile: 18px !important;
  --qe-card-radius: 12px !important;
  --qe-control-radius: 7px !important;
  --qe-section-gap: 22px !important;
  --qe-series-0: #007e79 !important;
  --qe-series-1: #966515 !important;
  --qe-series-2: #6556ab !important;
  --qe-series-3: #a5487d !important;
  --qe-series-4: #537e35 !important;
  --qe-series-5: #356fab !important;
  --bg: var(--qe-bg) !important;
  --page: var(--qe-bg) !important;
  --bg-2: var(--qe-bg) !important;
  --surface: var(--qe-surface) !important;
  --panel: var(--qe-surface) !important;
  --surface-raised: var(--qe-raised) !important;
  --surface-soft: var(--qe-raised) !important;
  --surface-strong: var(--qe-raised) !important;
  --ink: var(--qe-text) !important;
  --ink-strong: var(--qe-text) !important;
  --ink-soft: var(--qe-muted) !important;
  --ink-faint: var(--qe-muted) !important;
  --muted: var(--qe-muted) !important;
  --muted-strong: var(--qe-muted) !important;
  --line: var(--qe-border) !important;
  --line-strong: var(--qe-border) !important;
  --primary: var(--qe-accent) !important;
  --primary-strong: var(--qe-accent) !important;
  --brand: var(--qe-accent) !important;
  --brand-dark: var(--qe-accent) !important;
  --focus: var(--qe-accent) !important;
  --chart-panel: var(--qe-surface) !important;
  --chart-grid: var(--qe-border) !important;
  --chart-text: var(--qe-muted) !important;
  --qr-bg: var(--qe-bg) !important;
  --qr-surface: var(--qe-surface) !important;
  --qr-surface-raised: var(--qe-raised) !important;
  --qr-surface-soft: var(--qe-raised) !important;
  --qr-text: var(--qe-text) !important;
  --qr-text-strong: var(--qe-text) !important;
  --qr-text-muted: var(--qe-muted) !important;
  --qr-text-muted-strong: var(--qe-muted) !important;
  --qr-border: var(--qe-border) !important;
  --qr-border-strong: var(--qe-border) !important;
  --qr-primary: var(--qe-accent) !important;
  --qr-primary-strong: var(--qe-accent) !important;
  --qr-chart-focal: var(--qe-accent) !important;
  --primary-soft: color-mix(in srgb, var(--qe-accent) 12%, var(--qe-surface)) !important;
  --brand-soft: var(--primary-soft) !important;
  --qr-primary-soft: var(--primary-soft) !important;
  --shadow: none !important;
  --shadow-soft: none !important;
  --radius-lg: var(--qe-card-radius) !important;
}
html[data-design-engine="0.4.0"][data-theme="dark"] {
  --qe-bg: #101416 !important;
  --qe-surface: #171d20 !important;
  --qe-raised: #20282c !important;
  --qe-text: #edf3f2 !important;
  --qe-muted: #a6b4b6 !important;
  --qe-border: #364247 !important;
  --qe-accent: #69d3cf !important;
  --qe-positive: #78c6a3 !important;
  --qe-negative: #ee9298 !important;
  --qe-card-inset: 24px !important;
  --qe-card-inset-mobile: 18px !important;
  --qe-card-radius: 12px !important;
  --qe-control-radius: 7px !important;
  --qe-section-gap: 22px !important;
  --qe-series-0: #69d3cf !important;
  --qe-series-1: #dcb878 !important;
  --qe-series-2: #9ca9ee !important;
  --qe-series-3: #dd9bc3 !important;
  --qe-series-4: #92bb83 !important;
  --qe-series-5: #76afd9 !important;
  --bg: var(--qe-bg) !important;
  --page: var(--qe-bg) !important;
  --bg-2: var(--qe-bg) !important;
  --surface: var(--qe-surface) !important;
  --panel: var(--qe-surface) !important;
  --surface-raised: var(--qe-raised) !important;
  --surface-soft: var(--qe-raised) !important;
  --surface-strong: var(--qe-raised) !important;
  --ink: var(--qe-text) !important;
  --ink-strong: var(--qe-text) !important;
  --ink-soft: var(--qe-muted) !important;
  --ink-faint: var(--qe-muted) !important;
  --muted: var(--qe-muted) !important;
  --muted-strong: var(--qe-muted) !important;
  --line: var(--qe-border) !important;
  --line-strong: var(--qe-border) !important;
  --primary: var(--qe-accent) !important;
  --primary-strong: var(--qe-accent) !important;
  --brand: var(--qe-accent) !important;
  --brand-dark: var(--qe-accent) !important;
  --focus: var(--qe-accent) !important;
  --chart-panel: var(--qe-surface) !important;
  --chart-grid: var(--qe-border) !important;
  --chart-text: var(--qe-muted) !important;
  --qr-bg: var(--qe-bg) !important;
  --qr-surface: var(--qe-surface) !important;
  --qr-surface-raised: var(--qe-raised) !important;
  --qr-surface-soft: var(--qe-raised) !important;
  --qr-text: var(--qe-text) !important;
  --qr-text-strong: var(--qe-text) !important;
  --qr-text-muted: var(--qe-muted) !important;
  --qr-text-muted-strong: var(--qe-muted) !important;
  --qr-border: var(--qe-border) !important;
  --qr-border-strong: var(--qe-border) !important;
  --qr-primary: var(--qe-accent) !important;
  --qr-primary-strong: var(--qe-accent) !important;
  --qr-chart-focal: var(--qe-accent) !important;
  --primary-soft: color-mix(in srgb, var(--qe-accent) 12%, var(--qe-surface)) !important;
  --brand-soft: var(--primary-soft) !important;
  --qr-primary-soft: var(--primary-soft) !important;
  --shadow: none !important;
  --shadow-soft: none !important;
  --radius-lg: var(--qe-card-radius) !important;
}
html[data-design-engine="0.4.0"] body :is(.quant-shared-nav,.quant-common-nav,.site-nav) {
 --quant-nav-bg: var(--qe-surface) !important; --quant-nav-line: var(--qe-border) !important; --quant-nav-text: var(--qe-muted) !important; --quant-nav-strong: var(--qe-text) !important; --quant-nav-hover: var(--qe-raised) !important; --quant-nav-active: var(--qe-accent) !important; --quant-nav-active-bg: color-mix(in srgb,var(--qe-accent) 12%,var(--qe-surface)) !important;
}
html { accent-color: var(--qe-accent); }
body { background: var(--qe-bg); color: var(--qe-text); }
:where(button,a,input,select,summary):focus-visible { outline: 2px solid var(--qe-accent); outline-offset: 3px; }
html[data-design-engine="0.4.0"] :where(.card,.panel,.latest-card) { border-radius: var(--qe-card-radius); border-color: var(--qe-border); background: var(--qe-surface); box-shadow: none; padding: var(--qe-card-inset); min-width: 0; }
html[data-design-engine="0.4.0"] :where(.card,.panel,.latest-card) :where(h2,h3) { overflow-wrap: anywhere; line-height: 1.45; }
html[data-design-engine="0.4.0"] :where(.card,.panel,.latest-card) :where(strong,td,dd) { font-variant-numeric: tabular-nums; }
:where(.table-scroll,.table-wrap,.table-wrapper) { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: var(--qe-border) transparent; }
:where(table) { font-variant-numeric: tabular-nums; }
:where(th,td) { padding: 12px 14px; border-color: var(--qe-border); }
:where(thead th) { background: var(--qe-raised); }
:where(tbody tr):hover { background: color-mix(in srgb,var(--qe-accent) 5%,var(--qe-surface)); }
:where(.chart-facet,.chart-card,.chart-panel) { min-width: 0; }
:where(button,input,select) { border-radius: var(--qe-control-radius); }
.qe-chart-tools { position: relative; font-size: .82rem; flex: 0 0 auto; }
.qe-chart-tools summary { cursor: pointer; padding: 8px 12px; border: 1px solid var(--qe-border); border-radius: var(--qe-control-radius); }
.qe-chart-tools[open] > button { margin-top: 8px; }
.qe-chart-tools label { display: grid; gap: 6px; margin-top: 10px; }
html[data-design-engine="0.4.0"] .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
.chart-date-controls:has(> .sr-only):not(:has(label)) { min-height: 0; padding: 0; }
@media(max-width:640px) { html[data-design-engine="0.4.0"] :where(.card,.panel,.latest-card) { padding: var(--qe-card-inset-mobile); } :where(th,td) { padding: 11px 12px; } }
/* END quant-design-engine 0.4.0 */

html[data-design-engine="0.4.0"] body {background:var(--qe-bg) !important;color:var(--qe-text) !important;}
html[data-design-engine="0.4.0"] :is(.card,.panel,.latest-card) {background:var(--qe-surface) !important;border-color:var(--qe-border) !important;border-radius:var(--qe-card-radius) !important;}

html[data-design-engine="0.4.0"] .qe-native-tools summary {cursor:pointer; color:var(--qe-muted); font-size:12px; padding:8px 10px; border:1px solid var(--qe-border); border-radius:7px;}
html[data-design-engine="0.4.0"] .chart-facet:not(:has(.qe-native-tools[open])) :is(.chart-date-controls,.chart-latest-button) {display:none !important;}
html[data-design-engine="0.4.0"] .probability-value {white-space:nowrap; font-variant-numeric:tabular-nums;}
html[data-design-engine="0.4.0"] .probability-row {grid-template-columns:86px minmax(40px,1fr) minmax(64px,max-content);}

/* Research contracts: disclosure accessibility and table result continuity. */
html[data-design-engine="0.4.0"] :is(.qe-native-tools,.qe-chart-tools,.qe-table-tools)>summary {min-height:44px;box-sizing:border-box;align-content:center;cursor:pointer;padding:10px 12px;}
html[data-design-engine="0.4.0"] .qe-table-tools {display:inline-block;}
html[data-design-engine="0.4.0"] .qe-table-tools>summary {border:1px solid var(--qe-border);border-radius:var(--qe-control-radius);font-size:12px;}
html[data-design-engine="0.4.0"] .qe-table-tools[open]>button {display:block;margin-top:8px;}
html[data-design-engine="0.4.0"] .qe-filter-clear {min-height:44px;}
html[data-design-engine="0.4.0"] .qe-filter-clear[hidden] {display:none !important;}
@media(max-width:640px){html[data-design-engine="0.4.0"] :is(.table-sort,.history-series-controls button,.chart-series-controls button) {min-height:44px !important;}}

/* 0.4.1: chart canvas and axes fit the available column. */
.qe-history-wrap{overflow:hidden!important}.qe-history-wrap>svg{display:none!important}
.qe-responsive-chart{width:100%;min-width:0;max-width:100%;position:relative;overflow:hidden;touch-action:pan-y}
.qe-responsive-chart svg{min-width:0!important;max-width:none!important;aspect-ratio:auto!important}
.qe-reset{min-height:44px;margin:8px 0 0 auto;display:block}.qe-reset[hidden]{display:none!important}
.performance-chart-scroll:has(.qe-responsive-chart){overflow:hidden}.performance-chart-scroll .qe-responsive-chart{min-width:0!important}
.card{min-width:0}.card h2,.card h3{overflow-wrap:anywhere}.metric-value,.metric-card strong{font-variant-numeric:tabular-nums}
@media(max-width:600px){.card{padding:16px}.chart-card{padding:14px}.chart-readout-grid{grid-template-columns:1fr 1fr}.history-chart-toolbar{flex-wrap:wrap}.chart-panel-title{font-size:13px}}

.qe-outcomes{padding:10px 12px;color:var(--muted);font-size:12px}.qe-outcomes-strip{display:flex;gap:1px;margin-top:8px}.qe-outcomes-strip span{flex:1;min-width:0;height:10px;border:1px solid;border-radius:2px}

.qe-converted-performance .qr-measure,.qe-converted-performance .performance-legend{display:none!important}
.qe-converted-performance .performance-chart-scroll{overflow:hidden;min-width:0}

.qe-performance-range{margin:8px 0 0;font-size:12px;color:var(--muted)}.qe-performance-range summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.qe-performance-range input,.qe-performance-range button{min-height:44px;max-width:100%;margin:4px 6px 4px 0}.qe-performance-range p{margin:6px 0}

#history .chart-card{position:relative}#history .chart-card>.qd-focus-button{position:absolute;right:16px;top:16px;margin:0}#history .history-heading-controls{padding-right:44px}#history .chart-context-row{display:block}#history-chart-legend{gap:6px 12px}#history-chart-legend button{min-height:44px;padding:4px 7px;background:transparent!important;border:0!important;box-shadow:none!important;display:inline-flex;align-items:center;gap:6px;font-size:12px}#history-chart-legend button[data-qr-series-id="observedrisk_on"]{color:var(--risk-on)!important}#history-chart-legend button[data-qr-series-id="observedtransition"]{color:var(--transition)!important}#history-chart-legend button[data-qr-series-id="observedrisk_off"]{color:var(--risk-off)!important}#history-chart-legend button[aria-pressed="false"]{opacity:.4}#history-chart-legend .legend-line{display:inline-block;width:16px;height:0;border-top:2px solid currentColor;background:none}#history .chart-selection-readout{margin:12px 0}

html body #history .chart-card .qd-focus-button{position:absolute!important;right:16px!important;top:16px!important;margin:0!important;width:36px!important;min-width:36px!important;height:36px!important}html body #history .card-heading{display:flex!important;flex-direction:row!important;align-items:center!important;padding-right:44px;gap:12px}html body #history .history-heading-controls{padding:0;width:104px;flex:0 0 104px}html body #history .history-heading-controls label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html body #history .history-heading-controls select{min-height:44px;padding:8px;width:100%}html body #history #probability-chart-title{font-size:18px}

/* Pinned common shell 0.4.2 sha256:d3ef280dc5d36fad3b4e2b32d170e70fdc2b64fbde91e463e1c08bd11f3be485 */
/* Quant 0.4.2: shell roles only. Load explicitly after project styles. */
html[data-theme="dark"]{--qs-bg:#101416;--qs-surface:#171d20;--qs-raised:#20282c;--qs-text:#edf3f2;--qs-muted:#a6b4b6;--qs-border:#364247;--qs-accent:#69d3cf}
html[data-theme="light"]{--qs-bg:#f2f5f4;--qs-surface:#ffffff;--qs-raised:#e9efed;--qs-text:#172725;--qs-muted:#536762;--qs-border:#c6d3ce;--qs-accent:#007e79}
html:root[data-theme] body.qd-v04,html:root[data-theme][data-quant-silicon] body.qd-v04{--qd-bg:var(--qs-bg)!important;--qd-surface:var(--qs-surface)!important;--qd-raised:var(--qs-raised)!important;--qd-text:var(--qs-text)!important;--qd-muted:var(--qs-muted)!important;--qd-border:var(--qs-border)!important;--qd-accent:var(--qs-accent)!important;background:var(--qs-bg)!important;color:var(--qs-text)!important}
html[data-theme] body.qd-v04 :is(.qd-sidebar,.qd-shell){--qd-bg:var(--qs-bg)!important;--qd-surface:var(--qs-surface)!important;--qd-raised:var(--qs-raised)!important;--qd-text:var(--qs-text)!important;--qd-muted:var(--qs-muted)!important;--qd-border:var(--qs-border)!important;--qd-accent:var(--qs-accent)!important;--qd-soft:var(--qs-raised)!important;background:var(--qs-bg)!important;color:var(--qs-text)!important;border-color:var(--qs-border)!important}
/* Explicit neutral component roles; semantic series/topic colors are inherited. */
:root{--qs-card-padding:24px;--qs-card-gap:20px;--qs-section-gap:32px;--qs-card-radius:16px;--qs-line:color-mix(in srgb,var(--qs-text) 10%,transparent)}
html[data-theme] body [data-quant-card],html:root[data-theme] body.qd-v04 :is([data-quant-card],#quant-neutral-card-role){min-width:0;padding:var(--qs-card-padding)!important;border:1px solid var(--qs-line)!important;border-radius:var(--qs-card-radius)!important;background:var(--qs-surface)!important;box-shadow:none!important}
html[data-theme] body [data-quant-card] [data-quant-card],html:root[data-theme] body.qd-v04 :is([data-quant-card],#quant-neutral-card-role) [data-quant-card]{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
[data-quant-card]>:is(h2,h3,h4):first-child{margin-top:0}
[data-quant-section]{min-width:0;margin-block-start:var(--qs-section-gap)}
[data-quant-section]:first-child{margin-block-start:0}
[data-quant-card-grid]{display:grid;gap:var(--qs-card-gap)}
[data-quant-metrics]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:var(--qs-card-gap);font-variant-numeric:tabular-nums}
[data-quant-metrics] strong{font-size:clamp(20px,2vw,28px);line-height:1.25;letter-spacing:-.025em}
[data-quant-table-wrap]{max-width:100%;overflow:auto}
[data-quant-table]{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
[data-quant-table] :is(th,td){padding:12px 14px;border-bottom:1px solid var(--qs-line);line-height:1.6}
[data-quant-table] th{color:var(--qs-muted);font-size:12px;font-weight:600;text-align:left}
[data-quant-table] [data-numeric]{text-align:right}
@media(max-width:640px){:root{--qs-card-padding:20px;--qs-card-gap:16px;--qs-section-gap:24px}[data-quant-table] :is(th,td){padding:11px 12px}}

/* End pinned common shell 0.4.2 */

/* Common 0.4.2 card roles. Remote shared tokens remain the source of truth. */
html[data-design-engine] body [data-quant-card]{padding:var(--qs-card-padding,24px)!important;border-radius:var(--qs-card-radius,16px)!important;background:var(--qe-surface)!important;border:1px solid var(--qs-line,color-mix(in srgb,var(--qe-text) 10%,transparent))!important;box-shadow:none!important}
@media(max-width:600px){html[data-design-engine] body [data-quant-card]{padding:var(--qs-card-padding,20px)!important}}
html[data-design-engine] body .decision-shadow-track{padding:0;gap:var(--qs-card-gap,20px)}
html[data-design-engine] body .performance-visual{padding:0;border:0;background:transparent;box-shadow:none}
html[data-design-engine] body .performance-visual+.performance-visual{padding-top:24px;border-top:1px solid var(--qs-line,var(--line))}
html[data-design-engine] body .decision-shadow-grid{gap:var(--qs-section-gap,32px)}
html[data-design-engine] body .card-heading{margin-bottom:20px}
html[data-design-engine] body .performance-visual{border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important}

/* Plot gestures own zoom and range selection. */
html[data-theme] body :is(.qd-focus-button,.qd-focus-tools) {display:none!important}
[data-quant-touch-chart]:focus-visible {outline:2px solid var(--qs-focus);outline-offset:3px}
[data-quant-touch-chart][data-quant-gesture=compare] .qe-point-tooltip {visibility:hidden!important}