.sch-hero { padding-block: clamp(40px, 6vw, 72px) 10px }
.sch-hero h1 { font-size: clamp(54px, 9vw, 120px); font-style: italic }
.sch-hero h1 em { background: var(--amber); color: #14100a; padding: 0 12px; border-radius: 8px; font-style: italic }
.sch-hero .lede { color: #c6ccda; max-width: 62ch; margin-top: 18px; font-size: 18px }
.ctl { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; margin-top: 26px }
.ctl > div { min-width: 0 }
.ctl select { width: min(340px, 100%) }
.pills { display: flex; flex-wrap: wrap; gap: 8px }
.pill { font: 800 15px/1 var(--f-display); letter-spacing: .5px; border: 1.5px solid var(--line); background: transparent; color: var(--chalk); border-radius: 999px; padding: 10px 15px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center }
.pill[aria-pressed="true"] { background: var(--chalk); color: #0a0d14; border-color: var(--chalk) }
.pill i { font-style: normal; font: 700 12px var(--f-mono); opacity: .7 }
.t-prime { color: var(--green) } .t-early { color: var(--amber) } .t-night { color: #ff6b6b }
.tag { display: inline-flex; align-items: center; gap: 6px; font: 800 13px/1 var(--f-display); letter-spacing: .8px; text-transform: uppercase; border-radius: 6px; padding: 5px 8px; border: 1px solid currentColor }
.globe-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: stretch }
@media (max-width: 980px) { .globe-grid { grid-template-columns: minmax(0, 1fr) } }
.globe-wrap { position: relative; aspect-ratio: 1; max-height: 680px; width: 100%; margin: 0 auto }
.globe-wrap canvas { width: 100%; height: 100%; display: block }
.globe-tools { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 8px; flex-wrap: wrap }
.globe-key { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 4px; font: 600 11px var(--f-mono); color: var(--dim); letter-spacing: .5px; text-align: right }
.globe-key b { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; vertical-align: -1px }
.sel h2 { font-size: clamp(34px, 4.4vw, 54px) }
.sel .circ { width: 100%; max-height: 260px; margin: 8px 0 }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.fact { background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0 }
.fact small { display: block; font: 700 10.5px/1.2 var(--f-mono); letter-spacing: 1.2px; color: var(--dim); text-transform: uppercase }
.fact b { display: block; font: 900 30px/1.05 var(--f-display); margin-top: 4px; font-variant-numeric: tabular-nums }
.fact span { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; line-height: 1.35 }
.legline { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 14px 0 4px; padding: 12px 14px; border: 1px dashed rgba(255, 200, 61, .5); border-radius: 12px; font-size: 15px }
.legline b { font-family: var(--f-display); font-size: 22px }
.nav-r { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap }
/* logistics */
.legbars { display: grid; gap: 6px }
.legbar { display: grid; grid-template-columns: 34px minmax(90px, 220px) minmax(0, 1fr) 88px; gap: 10px; align-items: center; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 6px 8px; border-radius: 10px }
.legbar:hover, .legbar[aria-pressed="true"] { background: rgba(255, 255, 255, .05) }
.legbar .r { font: 800 15px var(--f-display); color: var(--dim) } .legbar .n { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.legbar .bar { height: 12px; border-radius: 99px; background: #151b2c; overflow: hidden } .legbar .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--purple)) }
.legbar.road .bar i { background: repeating-linear-gradient(90deg, var(--green) 0 8px, #1d7a48 8px 12px) }
.legbar .km { font: 700 13px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums }
@media (max-width: 640px) { .legbar { grid-template-columns: 26px minmax(0, 1fr) 70px } .legbar .bar { grid-column: 1 / -1; order: 5 } }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px } @media (max-width: 800px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
/* race cards */
.cards { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: grid; align-content: start; min-width: 0; scroll-margin-top: 90px }
.card.hot { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 20px 60px rgba(255, 200, 61, .12) }
.card.past { opacity: .72 } .card.hidden { display: none }
.card .top { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 8px; padding: 18px 18px 6px; align-items: center }
.card .rnd { font: 700 12px var(--f-mono); letter-spacing: 1.4px; color: var(--amber) }
.card h3 { font-size: 32px; margin: 4px 0 }
.card .circ { width: 100%; height: 120px }
.card .meta { padding: 0 18px 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.card .sess { padding: 0 18px 12px; display: grid; gap: 4px; font-size: 14px }
.card .sess div { display: grid; grid-template-columns: 112px 1fr auto; gap: 8px; padding: 5px 0; border-top: 1px solid var(--line) }
.card .sess .t { font: 600 13px var(--f-mono); font-variant-numeric: tabular-nums } .card .sess .k { color: var(--dim) }
.card .sess .z { font: 700 11px var(--f-mono); letter-spacing: .5px; color: #ff9d9d } .card .sess .z.ok { color: var(--dim) }
.card details { border-top: 1px solid var(--line) }
.card summary { cursor: pointer; padding: 14px 18px; font: 800 17px var(--f-display); letter-spacing: .6px; list-style: none; display: flex; justify-content: space-between }
.card summary::-webkit-details-marker { display: none } .card summary:after { content: '+'; font-size: 22px; line-height: .8; color: var(--amber) } .card details[open] summary:after { content: '−' }
.brief { padding: 0 18px 18px; display: grid; gap: 18px }
.brief h4 { font: 700 11px var(--f-mono); letter-spacing: 1.4px; color: var(--amber); text-transform: uppercase; margin: 0 0 8px }
.brief ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px } .brief li small { color: var(--dim) }
.mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px } .mini .fact b { font-size: 24px }
.meter { height: 8px; border-radius: 99px; background: #151b2c; overflow: hidden; margin-top: 8px } .meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--amber), #ff5a4d) }
.src { font: 500 11px var(--f-mono); color: var(--dim) }
.none { color: var(--dim); font-size: 14px; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px }
.wxrow { display: flex; gap: 8px; flex-wrap: wrap }
.updot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px }