/* Dynamic customer page bridge: keeps API-rendered regions in the design-demo language. */
.page-status { max-width: 1320px; margin: 12px auto 0; color: var(--ink-faint); font-size: 11px; }
.page-data-time { margin: 12px 0 0; color: var(--ink-faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.page-data-time strong { color: var(--ink-soft); font-weight: 650; }
.mode-notice { display: flex; gap: 12px; max-width: 1320px; margin: 14px auto 0; padding: 12px 15px; border: 1px solid oklch(0.86 0.055 78); border-radius: var(--radius-md); background: oklch(0.97 0.045 78); color: var(--ink-soft); font-size: 12px; }
.mode-notice-label { color: oklch(0.46 0.10 78); white-space: nowrap; }
.summary-section { margin-top: 22px; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); background: var(--surface); }
.summary-item { display: grid; gap: 2px; padding: 15px 18px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item + .summary-item { border-left: 0; }
.summary-item span { color: var(--ink-faint); font-size: 11px; }
.summary-item strong { color: var(--brand-deep); font-size: 23px; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: -0.03em; }
.summary-reconciliation { max-width: 1320px; margin: 10px auto 0; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--ink-soft); font-size: 11px; }
.summary-reconciliation-label { display: inline-block; margin-right: 10px; color: var(--brand-deep); font-weight: 650; }
.summary-reconciliation p { display: inline; margin: 0; }
.summary-reconciliation small { display: block; margin-top: 3px; color: var(--ink-faint); }
.focus-fixture-card { max-width: 1320px; margin: 24px auto 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.focus-fixture-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.focus-fixture-heading .eyebrow { margin-bottom: 6px; }
.focus-fixture-heading h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: -0.02em; }
.focus-fixture-heading p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 12px; }
.focus-fixture-content { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.focus-fixture-note { flex-basis: 100%; margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.focus-fixture-pill, .focus-fixture-state { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 11px; }
.focus-fixture-empty { color: var(--ink-faint); font-size: 11px; }
.focus-fixture-state.live { border-color: oklch(0.78 0.10 153); background: oklch(0.95 0.035 153); color: oklch(0.37 0.11 153); }
.focus-fixture-state.quiet { background: var(--surface-subtle); }
.focus-fixture-state.attention { border-color: oklch(0.86 0.055 78); background: oklch(0.97 0.045 78); color: oklch(0.46 0.10 78); }
.focus-fixture-card.match-card { padding: 20px; }
.focus-fixture-card .focus-fixture-heading { margin-bottom: 0; }
.focus-fixture-card .focus-fixture-content { margin-top: 15px; }
.upcoming-fixture-list { display: grid; flex-basis: 100%; width: 100%; margin-top: 2px; border-top: 1px solid var(--line); }
.upcoming-fixture-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 62px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.upcoming-fixture-row:last-child { border-bottom: 0; }
.upcoming-fixture-row:hover { background: var(--surface-subtle); }
.upcoming-fixture-index { color: var(--brand); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 700; }
.upcoming-fixture-main, .upcoming-fixture-kickoff { display: grid; gap: 2px; min-width: 0; }
.upcoming-fixture-main strong { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-fixture-main span, .upcoming-fixture-kickoff span { overflow: hidden; color: var(--ink-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-fixture-kickoff { justify-items: end; text-align: right; }
.upcoming-fixture-kickoff strong { color: var(--ink); font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 650; }
.opportunity-card { min-width: 0; margin: 24px auto 0; padding: 22px; }
.opportunity-card .classification-pill.flat { background: oklch(0.88 0.02 188); color: var(--ink-soft); }
.opportunity-card .classification-pill.watch { background: oklch(0.87 0.07 78); color: oklch(0.40 0.08 78); }
.opportunity-card .classification-pill { white-space: nowrap; }
.opportunity-fixture { display: grid; gap: 3px; margin-top: 18px; padding-bottom: 13px; border-bottom: 1px solid oklch(0.62 0.06 188 / 0.5); }
.opportunity-fixture strong { color: white; font-size: 15px; line-height: 1.35; }
.opportunity-fixture span { color: oklch(0.80 0.04 188); font-size: 10px; line-height: 1.45; }
.content-section { max-width: 1320px; margin: 31px auto 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.content-section .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 17px; }
.content-section .section-heading h2 { margin: 0 0 5px; font-size: 18px; letter-spacing: -0.02em; }
.content-section .section-heading p { max-width: 88ch; margin: 0; color: var(--ink-soft); font-size: 12px; }
.data-region { min-width: 0; }
.button { border-radius: var(--radius-sm); }
.icon-button { width: auto; min-width: 32px; padding-inline: 9px; }
.button-primary { background: var(--brand); border-color: var(--brand); }
.button-secondary { background: var(--surface); }
.arbitrage-toolbar, .query-panel, .notification-settings-grid { border-color: var(--line); border-radius: var(--radius-md); background: var(--surface-subtle); }
.arbitrage-policy { color: var(--ink-faint); font-size: 11px; }
.arbitrage-summary { border-color: var(--line); border-radius: var(--radius-sm); background: var(--surface-subtle); }
.table-wrap, .history-table-frame { border-color: var(--line); border-radius: var(--radius-sm); }
.data-table th { background: var(--surface-subtle); color: var(--ink-faint); }
.data-table td { color: var(--ink-soft); }
.fixture-detail, .fixture-history { margin-top: 18px; }
.simulation-section { box-shadow: none; }
.empty-state, .loading-state, .error-state { border-color: var(--line); border-radius: var(--radius-sm); }
.topbar + .page-heading { margin-inline: auto; max-width: 1320px; }
@media (min-width: 821px) {
  .main-content { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 0; align-content: start; }
  .main-content > .topbar { grid-area: topbar; }
  .main-content > .page-heading { grid-area: heading; }
  .main-content > .mode-notice { grid-area: notice; }
  .main-content > .page-status { grid-area: status; }
  .main-content > .summary-section { grid-area: summary; }
  .main-content > .focus-fixture-card { grid-area: focus; }
  .main-content > #opportunity-preview { grid-area: opportunity; }
  .main-content > #arbitrage { grid-area: arbitrage; min-width: 0; }
  .main-content > #platforms { grid-area: platforms; min-width: 0; }
  .main-content > #fixtures { grid-area: fixtures; }
  .main-content > #calculation-settings { grid-area: calculation; }
  .main-content > #notification-settings { grid-area: notification; }
  .main-content > #simulation { grid-area: simulation; }
  .main-content > #alerts { grid-area: alerts; }
  .main-content > .demo-footer { grid-area: footer; }
  /* Keep data sections on the reading axis. Narrow side-by-side columns made
     wide evidence tables look truncated and forced users to hunt for the
     platform coverage summary. */
  .main-content { grid-template-areas: "topbar" "heading" "notice" "status" "summary" "opportunity" "focus" "platforms" "arbitrage" "fixtures" "calculation" "notification" "simulation" "alerts" "footer"; }
  .main-content > .page-heading, .main-content > .mode-notice, .main-content > .page-status, .main-content > .summary-section, .main-content > .focus-fixture-card, .main-content > #opportunity-preview, .main-content > .content-section { width: 100%; margin-inline: 0; }
  .main-content > #arbitrage, .main-content > #platforms { margin-top: 24px; }
  .main-content > #platforms,
  .main-content > #arbitrage { min-width: 0; }
  .main-content > #focus-fixture,
  .main-content > #opportunity-preview { align-self: stretch; }
}
@media (max-width: 820px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-item:nth-child(2) { border-right: 0; }
  .summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .content-section { padding: 17px; }
  .focus-fixture-card { padding: 17px; }
  .opportunity-card { margin-top: 24px; padding: 17px; }
  .main-content { display: block; }
}
@media (max-width: 560px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-item { padding: 13px 12px; }
  .summary-item strong { font-size: 20px; }
  .content-section { margin-top: 24px; padding: 14px; }
  .content-section .section-heading { flex-direction: column; }
  .focus-fixture-heading { flex-direction: column; }
  .upcoming-fixture-row { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding-block: 11px; }
  .upcoming-fixture-kickoff { grid-column: 2; justify-items: start; text-align: left; }
}
/* Collection health is deliberately visible beside platform status. */
.collector-errors-panel { margin-top: 24px; }
.subsection-heading { margin-bottom: 12px; }
.subsection-heading h3 { margin: 0; }
.subsection-heading p { margin: 4px 0 0; color: var(--ink-soft); }
.collector-health-warning, .collector-health-ok {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 12px;
}
.collector-health-warning { color: #7a2e00; background: #fff1e8; border: 1px solid #f1b38d; }
.collector-health-ok { color: var(--ink-soft); background: color-mix(in oklab, var(--canvas) 92%, var(--line)); border: 1px solid var(--line); }