/* Formula 1 pages: newspaper typography with a crisp, technical circuit accent. */
.f1-page {
  --f1-accent: var(--accent, #a51d2d);
  --f1-ink: var(--text, #191816);
  --f1-muted: var(--muted, #706b64);
  --f1-line: var(--line, #d5cfc3);
  --f1-card: var(--surface, #f8f6f1);
  color: var(--f1-ink);
}
.f1-page *, .f1-page *::before, .f1-page *::after { box-sizing: border-box; }

.f1-header { margin: 0 0 1.5rem; padding-bottom: 1.15rem; border-bottom: 3px double var(--f1-line); }
.f1-eyebrow { color: var(--f1-accent); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.f1-title { margin: .25rem 0 .3rem; font: 800 clamp(2rem, 5vw, 3.8rem)/1.02 Newsreader, Georgia, serif; letter-spacing: -.045em; }
.f1-subtitle { margin: 0; color: var(--f1-muted); max-width: 65ch; }
.f1-back { display: inline-block; margin: .6rem 0; color: var(--f1-accent); font-size: .8rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.f1-source { margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--f1-line); color: var(--f1-muted); font-size: .75rem; line-height: 1.55; }
.f1-empty { padding: 1rem; border: 1px dashed var(--f1-line); color: var(--f1-muted); font-size: .9rem; }
.f1-season-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.f1-status { margin: .75rem 0; color: var(--f1-muted); font-size: .9rem; }
.f1-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.f1-panel { grid-column: span 12; min-width: 0; padding: clamp(.9rem, 2vw, 1.35rem); border: 1px solid var(--f1-line); background: var(--f1-card); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.f1-page > section + section { margin-top: 1rem; }
.f1-panel h2, .f1-panel h3 { margin-top: 0; font-family: Newsreader, Georgia, serif; }
.f1-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: .8rem; }
.f1-stat { padding: .85rem; border: 1px solid var(--f1-line); background: color-mix(in srgb, var(--f1-card) 86%, var(--f1-accent) 14%); }
.f1-stat strong, .f1-stat span { display: block; }
.f1-stat strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.f1-stat span { color: var(--f1-muted); font-size: .75rem; }
.f1-table-wrap { overflow-x: auto; border: 1px solid var(--f1-line); }
.f1-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.f1-table th, .f1-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--f1-line); text-align: left; }
.f1-table th { color: var(--f1-muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.f1-calendar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr)); gap: .75rem; }
.f1-race-card { display: block; padding: .9rem; border: 1px solid var(--f1-line); border-left: 3px solid var(--f1-accent); color: inherit; background: var(--f1-card); transition: transform .16s ease, border-color .16s ease; }
.f1-race-card a { color: var(--f1-accent); font-weight: 700; text-underline-offset: .18em; }
.f1-race-card:hover { transform: translateY(-2px); border-color: var(--f1-accent); }

.f1-race-overview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.f1-race-overview h2 { margin-bottom: .3rem; }
.f1-session-note { margin: 0 0 .8rem; color: var(--f1-muted); font-size: .75rem; }
.f1-session-list { border-top: 1px solid var(--f1-line); }
.f1-session-row { display: flex; justify-content: space-between; gap: 1rem; padding: .58rem 0; border-bottom: 1px solid var(--f1-line); font-size: .82rem; }
.f1-session-name { font-weight: 700; }
.f1-session-time { color: var(--f1-muted); text-align: right; font-variant-numeric: tabular-nums; }
.f1-session-row-race { margin-top: .25rem; padding-top: .8rem; border-top: 2px solid var(--f1-accent); font-weight: 800; }
.f1-circuit-link { margin: .8rem 0 0; font-size: .82rem; }
.f1-race-circuit { min-width: 0; }
.f1-race-circuit h3 { margin: 0 0 .5rem; font-size: 1rem; }
.f1-circuit--compact { padding: .45rem; }
.f1-circuit--compact .f1-circuit-canvas { min-height: 140px; }
.f1-circuit--compact .f1-circuit-svg { height: clamp(150px, 22vw, 250px); }
.f1-circuit--compact .f1-circuit-controls { gap: .15rem; }
.f1-circuit--compact .f1-circuit-control { min-width: 1.75rem; min-height: 1.75rem; }
.f1-circuit--compact .f1-circuit-detail { padding: .4rem .5rem; }

.f1-circuit { --track: var(--f1-accent); margin: 0; min-width: 0; padding: .8rem; border: 1px solid var(--f1-line); background: var(--f1-card); }
.f1-circuit-canvas { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 190px; overflow: hidden; border: 1px solid var(--f1-line); border-radius: 3px; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--track) 7%, transparent), transparent 72%); }
.f1-circuit-svg { width: 100%; height: clamp(190px, 35vw, 460px); min-width: 0; overflow: visible; }
.f1-track-shadow, .f1-track-base, .f1-track-line { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.f1-track-shadow { stroke: color-mix(in srgb, var(--track) 18%, transparent); stroke-width: 15; }
.f1-track-base { stroke: var(--track); stroke-width: 6; }
.f1-track-line { stroke: color-mix(in srgb, var(--f1-card) 78%, white); stroke-width: 1.3; stroke-dasharray: 2 6; }
.f1-corner { cursor: pointer; outline: none; }
.f1-corner-hit { fill: transparent; pointer-events: all; }
.f1-corner-dot { fill: var(--f1-card); stroke: var(--track); stroke-width: 2; vector-effect: non-scaling-stroke; transition: r .14s ease, fill .14s ease; }
.f1-corner-label { fill: var(--f1-ink); font-family: 'DM Sans', sans-serif; font-weight: 800; pointer-events: none; }
.f1-corner:hover .f1-corner-dot, .f1-corner:focus .f1-corner-dot, .f1-corner.is-active .f1-corner-dot { fill: var(--track); stroke: var(--f1-card); stroke-width: 3; }
.f1-corner:hover .f1-corner-label, .f1-corner:focus .f1-corner-label, .f1-corner.is-active .f1-corner-label { fill: #fff; }
.f1-circuit-controls { position: absolute; right: .55rem; top: .55rem; display: flex; gap: .25rem; }
.f1-circuit-control { min-width: 2rem; min-height: 2rem; padding: .25rem .45rem; border: 1px solid var(--f1-line); border-radius: 3px; background: var(--f1-card); color: var(--f1-ink); font: 700 .75rem 'DM Sans', sans-serif; cursor: pointer; }
.f1-circuit-control:hover { border-color: var(--track); color: var(--track); }
.f1-circuit-detail { grid-column: 1 / -1; padding: .55rem .75rem; border-top: 1px solid var(--f1-line); color: var(--f1-muted); font-size: .75rem; }
.f1-circuit-fallback { margin: .5rem 0 0; color: var(--f1-muted); font-size: .85rem; }
.f1-circuit [hidden] { display: none !important; }
.f1-circuit :focus-visible, .f1-season-picker :focus-visible { outline: 2px solid var(--f1-accent); outline-offset: 3px; }

@media (min-width: 760px) {
  .f1-panel.f1-panel-half { grid-column: span 6; }
  .f1-panel.f1-panel-wide { grid-column: span 8; }
  .f1-panel.f1-panel-narrow { grid-column: span 4; }
}
@media (max-width: 520px) {
  .f1-circuit { padding: .5rem; }
  .f1-circuit-canvas { min-height: 150px; }
  .f1-circuit-svg { height: 230px; }
  .f1-table { min-width: 550px; }
}
@media (max-width: 700px) {
  .f1-race-overview { grid-template-columns: minmax(0, 1fr); }
  .f1-session-row { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .f1-race-card, .f1-corner-dot { transition: none; }
}