/* HLRN Race Intelligence — readable typography pass (2026-10-20)
   Scoped to Race Intelligence .shell; no scoring, card data, or photo changes.
   Loaded after the legacy/theme CSS so both modes retain their color systems. */

:root {
  --ri-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ri-font-display: "Barlow Condensed", "Arial Narrow", "Arial", sans-serif;
}

body .shell,
body .shell :is(button, input, select, textarea, table) {
  font-family: var(--ri-font-body) !important;
}
body .shell {
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body .shell :is(
  .brand-title, .section-label, .card-title, .deep-title, .detail-name,
  .story-title, .box-title, .deep-box h4, .card-tag,
  .cc-command-title, .compact-overview-title, .compact-board-head,
  .v3-contenders-head, .story-copy h3
) {
  font-family: var(--ri-font-display) !important;
}
body .shell :is(.ri-card-metrics b, .stat-value, .deep-metric strong, .score-num) {
  font-variant-numeric: tabular-nums;
}

/* Featured Intelligence: names/summary are readable text, not microscopic labels. */
body .shell .intel-card .card-title {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .055em !important;
  margin-top: 16px !important;
}
body .shell .intel-card .card-driver {
  font-family: var(--ri-font-body) !important;
  font-size: clamp(19px, 1.65vw, 24px) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: -.025em !important;
  line-height: 1.22 !important;
  margin-top: 6px !important;
}
body .shell .intel-card .ri-card-team {
  font-family: var(--ri-font-body) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: .02em !important;
  overflow-wrap: anywhere;
}
body .shell .intel-card .card-reason {
  font-family: var(--ri-font-body) !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  line-height: 1.55 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  margin-top: 12px !important;
  text-wrap: pretty;
}
body .shell .intel-card .card-tag {
  font-family: var(--ri-font-display) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .055em !important;
  padding: 7px 9px !important;
}
body .shell .intel-card .card-stat {
  font-family: var(--ri-font-body) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

/* Five metrics per card: readable labels that wrap naturally, not 6px text. */
body .shell .ri-card-metrics > div {
  padding: 10px 5px !important;
  min-width: 0;
}
body .shell .ri-card-metrics span {
  font-family: var(--ri-font-display) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .035em !important;
  line-height: 1.25 !important;
  opacity: .88 !important;
  overflow-wrap: normal;
  white-space: normal !important;
}
body .shell .ri-card-metrics b {
  font-family: var(--ri-font-body) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body .shell .ri-card-form {
  gap: 9px !important;
  flex-wrap: wrap;
}
body .shell .ri-card-form > span {
  font-family: var(--ri-font-display) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  letter-spacing: .04em !important;
  opacity: .9 !important;
}
body .shell .ri-form-chip {
  font-family: var(--ri-font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  min-width: 30px;
  min-height: 27px;
}
body .shell .ri-form-empty {
  font-size: 12px !important;
}

/* Deep dive: lead with driver/title, then a comfortable editorial paragraph. */
body .shell .category-deep .deep-head {
  padding: 21px 22px !important;
  gap: 20px !important;
}
body .shell .category-deep .deep-label,
body .shell .detail-wrap .detail-eyebrow {
  font-family: var(--ri-font-display) !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: .07em !important;
}
body .shell .category-deep .deep-title {
  font-size: clamp(26px, 2.3vw, 34px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  font-style: normal !important;
  letter-spacing: -.015em !important;
}
body .shell .category-deep .deep-summary,
body .shell .detail-wrap .detail-category {
  font-family: var(--ri-font-body) !important;
  font-size: 15px !important;
  font-weight: 450 !important;
  line-height: 1.6 !important;
  max-width: 78ch;
  margin-top: 8px !important;
  text-wrap: pretty;
}
body .shell .deep-pill {
  font-family: var(--ri-font-body) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: .03em !important;
  padding: 10px 12px !important;
}
body .shell .deep-metric {
  padding: 15px 16px !important;
}
body .shell .deep-metric span {
  font-family: var(--ri-font-display) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .045em !important;
  line-height: 1.3 !important;
}
body .shell .deep-metric strong {
  font-family: var(--ri-font-body) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-top: 5px !important;
}
body .shell .category-deep .deep-body {
  padding: 17px !important;
  gap: 16px !important;
}
body .shell .deep-box {
  padding: 16px !important;
}
body .shell .deep-box h4 {
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  line-height: 1.25 !important;
  font-style: normal !important;
  margin-bottom: 12px !important;
}
body .shell .deep-point {
  font-family: var(--ri-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.52 !important;
  padding: 10px 8px !important;
}
body .shell .deep-race {
  font-family: var(--ri-font-body) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  padding: 10px 9px !important;
}
body .shell .deep-race b {
  font-size: 12px !important;
}
body .shell .deep-action {
  font-family: var(--ri-font-body) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  padding: 13px 15px !important;
}

/* The second, detailed driver view uses the same type hierarchy. */
body .shell .detail-head {
  padding: 21px 23px !important;
}
body .shell .detail-name {
  font-size: clamp(27px, 2.8vw, 37px) !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
}
body .shell .score-num {
  font-family: var(--ri-font-body) !important;
  font-size: 35px !important;
  font-weight: 800 !important;
}
body .shell .score-label,
body .shell .stat-label {
  font-family: var(--ri-font-display) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.28 !important;
  letter-spacing: .045em !important;
}
body .shell .stat {
  padding: 14px 15px !important;
}
body .shell .stat-value {
  font-family: var(--ri-font-body) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
}
body .shell .detail-body {
  gap: 17px !important;
  padding: 17px !important;
}
body .shell .detail-box {
  padding: 16px !important;
}
body .shell .detail-box .box-title {
  font-size: 17px !important;
  font-style: normal !important;
  line-height: 1.3 !important;
}
body .shell .race,
body .shell .trend-row {
  font-family: var(--ri-font-body) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  padding: 10px 9px !important;
}
body .shell .race .race-track,
body .shell .trend-row strong {
  font-weight: 700 !important;
}
body .shell .race .mini-label {
  font-size: 10px !important;
  line-height: 1.25 !important;
}

/* Storylines, navigation and the compact race-command summary. */
body .shell .toolbar .section-label,
body .shell .compact-board-head strong,
body .shell .story-title {
  font-size: clamp(23px, 2.25vw, 31px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}
body .shell .story-copy .story-kicker {
  font-family: var(--ri-font-display) !important;
  font-size: 12px !important;
}
body .shell .story-copy h3,
body .shell .story-copy h3 a {
  font-family: var(--ri-font-display) !important;
  font-size: 23px !important;
  line-height: 1.14 !important;
  letter-spacing: .005em !important;
}
body .shell .story-copy p {
  font-family: var(--ri-font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
}
body .shell .story-copy .story-stat {
  font-size: 11px !important;
}
body .shell :is(.compact-overview-stat, .cc-command-stat) {
  line-height: 1.35;
}
body .shell :is(.league-btn, .refresh, .compact-tab, .deep-action) {
  font-family: var(--ri-font-body) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}
body .shell :is(.section-label, .story-title, .deep-title, .detail-name) {
  overflow-wrap: anywhere;
}

/* Respect the existing Sunday/Monday day-night palette while increasing contrast. */
html[data-hlrn-theme="dark"] body .shell .intel-card .card-reason,
html[data-hlrn-theme="dark"] body .shell :is(.deep-summary, .detail-category, .deep-point, .deep-action) {
  color: #d9e0e9 !important;
}
html[data-hlrn-theme="dark"] body .shell :is(.stat-label, .deep-metric span, .score-label) {
  color: #c3ccd7 !important;
  -webkit-text-fill-color: #c3ccd7 !important;
}
html[data-hlrn-theme="light"] body .shell .intel-card .card-reason,
html[data-hlrn-theme="light"] body .shell :is(.deep-summary, .detail-category, .deep-point, .deep-action) {
  color: #384454 !important;
}
html[data-hlrn-theme="light"] body .shell :is(.stat-label, .deep-metric span, .score-label) {
  color: #526074 !important;
  -webkit-text-fill-color: #526074 !important;
}

/* Responsive scale: never squeeze five full metrics into tiny phone cards. */
@media (max-width: 900px) {
  body .shell .ri-card-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body .shell .deep-body {
    grid-template-columns: 1fr !important;
  }
  body .shell .deep-metric strong { font-size: 19px !important; }
}
@media (max-width: 560px) {
  body .shell .intel-card .card-driver { font-size: 22px !important; }
  body .shell .intel-card .card-reason { font-size: 14px !important; }
  body .shell .intel-card .card-title { font-size: 12px !important; }
  body .shell .ri-card-metrics span { font-size: 11px !important; }
  body .shell .ri-card-metrics b { font-size: 14px !important; }
  body .shell .category-deep .deep-head,
  body .shell .detail-head { padding: 17px !important; }
  body .shell .category-deep .deep-body { padding: 10px !important; }
  body .shell .deep-box { padding: 13px !important; }
  body .shell .deep-race { min-width: 440px; }
  body .shell .story-copy h3 { font-size: 20px !important; }
}