/* Tokens and shared components from Airfoil Lab (airfoilsim/styles.css), so the labs look like one family. */
:root {
  --paper: #EEF1F5;
  --surface: #FFFFFF;
  --ink: #182230;
  --ink-2: #4E5B6B;
  --ink-3: #8A95A3;
  --line: #D6DCE4;
  --grid: #E6EAF0;
  --blue: #2457A6;
  --blue-soft: #DCE6F6;
  --orange: #E4642A;
  --orange-soft: #FBE7DC;
  --teal: #178A7B;
  --tunnel: #10161F;
  --radius: 14px;
  --font: 'Instrument Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-block: 0 48px;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; }
p { margin: 0; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* header: dark banner matching the logo's own background (#0D0F12) */
.top {
  --banner: #0D0F12;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px;
  margin: 12px auto 20px;
  max-width: 1400px;
  background: var(--banner);
  color: #F2F4F7;
  border-radius: var(--radius);
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.brand-logo { height: 56px; width: auto; display: block; }
.who { color: #AEB8C4; font-size: 0.95rem; }
.who strong { color: #FFFFFF; font-weight: 600; }
.link { background: none; border: 0; padding: 0 2px; color: #FFA25C; text-decoration: underline; text-underline-offset: 2px; }
.top .link:focus-visible { outline-color: #FFA25C; }

/* layout */
/* Narrow: one column, in the order track, car, sheet, the driver's radio, what that does.
   Wide: the track and the sheet on the left, the car and its numbers pinned on the right. */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 1400px; margin: 0 auto; }
.col { display: contents; }
.panel { min-width: 0; }
#track-panel { order: 1; }
#car-panel { order: 2; }
#setup-panel { order: 3; }
#engineer-panel { order: 4; }
#car-detail { order: 5; }
/* On a phone the diagram moves into this slot at the top of the setup sheet, where it can stay put
   while the settings scroll past underneath. On a wide screen it goes back beside them. */
.diagram-slot { position: sticky; top: 0; z-index: 5; background: var(--surface); margin: -8px -4px 12px; padding: 8px 4px 6px; border-bottom: 1px solid var(--line); }
.diagram-slot:empty { display: none; }
@media (min-width: 1000px) {
  /* Two columns: the track and the sheet on the left, the car and what it does on the right.
     The right column is pinned, so the car and its numbers stay on screen however far you scroll
     the sheet. If the pair is taller than the window, that column scrolls on its own. */
  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'sheet car';
    align-items: start;
  }
  .col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .layout > .col:nth-child(1) { grid-area: sheet; }
  .layout > .col:nth-child(2) {
    grid-area: car; position: sticky; top: 12px;
    max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; scrollbar-width: thin;
  }
}
.panel[hidden] { display: none; }

/* panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.panel-head { margin-bottom: 14px; }
.hint { color: var(--ink-2); font-size: 0.95rem; margin-top: 4px; max-width: 60ch; }

/* canvases */
.canvas-wrap { position: relative; border-radius: 10px; overflow: hidden; }
.map-wrap { aspect-ratio: 11 / 8; background: var(--tunnel); margin-bottom: 16px; }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; -webkit-user-select: none; user-select: none; }

/* toolbar and buttons */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tool {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; min-height: 44px; font-weight: 500; color: var(--ink);
}
.tool:hover { border-color: var(--ink-3); }
.tool:disabled { opacity: 0.45; cursor: default; }
.tool.accent { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.tool[hidden] { display: none; }
.status { min-height: 1.4em; margin-top: 10px; font-size: 0.95rem; color: var(--ink-2); }
.status.error { color: #B3261E; }
.status.good { color: var(--teal); }

.readout { color: var(--ink-3); font-size: 0.85rem; margin-top: 10px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.primary {
  background: var(--orange); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 22px; min-height: 48px; font-weight: 600; font-size: 1.05rem; flex: 1 1 auto;
}
.primary:hover { filter: brightness(0.95); }
.primary:disabled { opacity: 0.5; cursor: default; }

/* results */
.hero-stat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.hero-value { font-size: 3.2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--orange); }
.hero-label { color: var(--ink-2); max-width: 30ch; }
.hero-label b { color: var(--ink); font-weight: 600; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 16px; margin: 0 0 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column; }
.stats dt { color: var(--ink-3); font-size: 0.85rem; }
.stats dd { margin: 0; font-weight: 600; font-size: 1.15rem; }
.stats dd small { font-weight: 400; color: var(--ink-3); font-size: 0.85rem; }
.chart-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.seg { background: var(--surface); border: 0; padding: 8px 14px; min-height: 40px; color: var(--ink-2); }
.seg.active { background: var(--ink); color: #fff; }
.seg:disabled { color: var(--ink-3); cursor: default; }
.chart { margin: 0; }
.chart figcaption { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 4px; }
.chart canvas { display: block; width: 100%; height: 200px; touch-action: pan-y; }

/* leaderboard */
.lb-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lb { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.lb th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: 0.85rem; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.lb td { padding: 8px; border-bottom: 1px solid var(--grid); vertical-align: middle; white-space: nowrap; }
.lb .num, .lb td.num { text-align: right; }
.lb tr.me td { background: var(--orange-soft); }
.lb tr.first td:first-child { color: var(--orange); font-weight: 700; }
.lb .empty { color: var(--ink-3); text-align: center; padding: 18px; white-space: normal; }
.lb tr.extra { display: none; }
.lb.expanded tr.extra { display: table-row; }
.lb-track { color: var(--ink-3); font-weight: 500; font-size: 1rem; }

/* dialog */
dialog {
  border: 0; border-radius: 18px; padding: 28px; max-width: min(92vw, 420px); width: 100%;
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(16,22,31,0.25);
}
dialog::backdrop { background: rgba(16,22,31,0.55); }
dialog form { display: flex; flex-direction: column; gap: 12px; }
.dialog-mark { width: 64px; height: 26px; fill: var(--blue); }
dialog h1 { font-size: 1.8rem; letter-spacing: -0.02em; }
dialog p { color: var(--ink-2); }
dialog label { font-weight: 500; margin-top: 6px; }
dialog input[type=text] {
  font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; min-height: 48px;
}
dialog .primary { margin-top: 6px; }

/* ---------- Setup Sheet ---------- */

/* track picker */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .tracks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.track-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 44px;
}
.track-card:hover { border-color: var(--ink-3); }
.track-card[aria-checked="true"] { border-color: var(--orange); background: var(--orange-soft); box-shadow: inset 0 0 0 1px var(--orange); }
.track-card svg { width: 100%; height: 64px; }
.track-card svg path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.track-card[aria-checked="true"] svg path { stroke: var(--orange); }
.track-name { font-weight: 600; }
.track-meta { color: var(--ink-3); font-size: 0.8rem; }
.track-char { color: var(--ink-2); font-size: 0.85rem; line-height: 1.3; }

/* prediction */
#predict-options .tool.picked { border-color: var(--orange); background: var(--orange-soft); color: var(--ink); font-weight: 600; }

/* sliders */
.sliders { display: flex; flex-direction: column; gap: 16px; }
.slider label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; }
.slider output { font-weight: 700; color: var(--orange); font-size: 1.1rem; }
.slider-hint { color: var(--ink-3); font-size: 0.85rem; font-weight: 400; margin: 2px 0 0; }
input[type=range] { width: 100%; margin: 8px 0 0; height: 32px; accent-color: var(--orange); touch-action: pan-y; }
input[type=range]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* DRS switch */
.switch { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { flex: none; width: 46px; height: 28px; border-radius: 14px; background: var(--line); position: relative; transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16,22,31,.3); transition: transform .15s; }
.switch input:checked + .switch-track { background: var(--teal); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--blue); outline-offset: 2px; }

/* rear wing section */
.wing-choice { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.wing-choice-label { display: block; font-weight: 600; margin-bottom: 8px; }
.wing-choice .chart-toggle { margin-bottom: 8px; }
.my-wing { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.my-wing[hidden] { display: none; }
.my-wing svg { width: 110px; height: 34px; flex: none; }
.my-wing path { fill: var(--blue-soft); stroke: var(--blue); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.my-wing p { color: var(--ink-2); font-size: 0.9rem; }
.paste summary { cursor: pointer; color: var(--blue); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.paste-row { display: flex; gap: 8px; margin-top: 8px; }
.paste-row input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.95rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; min-height: 44px; }

#aero-stats { margin: 0 0 12px; padding: 10px 0; }
#car-panel .actions { margin-top: 0; }
#car-panel .panel-head { margin-bottom: 10px; }
.racesim-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }

/* balance meter */
.balance { margin-bottom: 14px; }
.balance-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.balance-head b { color: var(--teal); }
.balance-head b.off { color: #B3261E; }
.balance-bar { position: relative; height: 12px; border-radius: 6px; background: linear-gradient(to right, var(--blue-soft), var(--grid) 40%, var(--grid) 60%, var(--orange-soft)); }
.balance-zone { position: absolute; left: 40%; width: 20%; top: 0; bottom: 0; border-left: 1px dashed var(--ink-3); border-right: 1px dashed var(--ink-3); }
.balance-dot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(16,22,31,.35); left: 50%; transition: left .15s; }
.balance-ends { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 0.8rem; margin-top: 6px; }
.balance-ends span:last-child { text-align: right; }

/* warnings, Shell Lab style: red is a real problem, amber is worth a look */
.warnings { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.warnings li { border-radius: 10px; padding: 10px 12px 10px 34px; font-size: 0.92rem; position: relative; }
.warnings li::before { content: ""; position: absolute; left: 12px; top: 15px; width: 12px; height: 12px; border-radius: 50%; }
.warnings li.red { background: #FCE8E6; color: #7A1C15; }
.warnings li.red::before { background: #B3261E; }
.warnings li.amber { background: #FFF4DE; color: #6B4A00; }
.warnings li.amber::before { background: #E0A100; }

/* lap */
.map-legend { position: absolute; left: 12px; bottom: 10px; font-size: 0.8rem; color: #B6C2D1; display: flex; align-items: center; gap: 6px; pointer-events: none; }
.map-legend .ramp { width: 44px; height: 8px; border-radius: 4px; background: linear-gradient(to right, #3B82F6, #9AA8BA, #F97316); }
.map-legend .drs-key { width: 18px; height: 0; border-top: 3px dashed #4FD1C5; margin-left: 10px; }
.delta-faster { color: var(--teal); font-weight: 600; }
.delta-slower { color: #B3261E; font-weight: 600; }

/* reveal */
.reveal-rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.reveal-row { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 10px; font-size: 0.95rem; }
.reveal-row .bar { height: 12px; border-radius: 6px; background: var(--grid); overflow: hidden; }
.reveal-row .bar i { display: block; height: 100%; background: var(--ink-3); border-radius: 6px; }
.reveal-row.here { font-weight: 600; }
.reveal-row.here .bar i { background: var(--orange); }
.reveal-row b { text-align: right; }
#reveal-body p { color: var(--ink-2); margin-top: 8px; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  .balance-dot, .switch-track, .switch-track::after { transition: none; }
}

/* Race engineer's setup */
.sheet-group { margin-bottom: 18px; }
.sheet-group h3 { font-size: 1rem; }
.sheet-hint { color: var(--ink-3); font-size: 0.85rem; margin: 2px 0 10px; }
.sheet-group .slider + .slider { margin-top: 14px; }
.advanced { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.advanced > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.adv-note { color: var(--ink-3); font-weight: 400; font-size: 0.85rem; }
.adv-group { margin-top: 14px; }
.adv-group h3 { font-size: 0.95rem; }
.adv-group > p { color: var(--ink-3); font-size: 0.85rem; margin-top: 2px; }
.adv-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; margin-top: 8px; }
.adv-item label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.92rem; font-weight: 500; gap: 8px; }
.adv-item output { font-weight: 700; color: var(--orange); }
.adv-item input[type=range] { margin-top: 4px; height: 28px; }
.adv-item p { color: var(--ink-3); font-size: 0.8rem; margin: 0; }

/* The car diagram */
.setup-diagram { width: 100%; height: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; display: block; }
.setup-diagram .lit { filter: drop-shadow(0 0 3px var(--orange)); }
.setup-diagram .lit line, .setup-diagram .lit rect, .setup-diagram .lit path, .setup-diagram .lit circle { stroke: var(--orange); }
.race-link { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }

/* What the setup does: one row per number, with the change against the standard setup */
.effects { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.e-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--grid); }
.e-row:last-child { border-bottom: 0; }
.e-name { color: var(--ink-2); font-size: 0.92rem; }
.e-name small { display: block; color: var(--ink-3); font-size: 0.78rem; }
.e-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.e-value small { color: var(--ink-3); font-weight: 400; font-size: 0.78rem; margin-left: 3px; }
.e-delta { font-size: 0.82rem; font-weight: 600; min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.e-delta.better { color: var(--teal); }
.e-delta.worse { color: #B3261E; }
.e-delta.same { color: var(--ink-3); font-weight: 400; }
.e-row.lit { background: var(--orange-soft); border-radius: 8px; padding-inline: 8px; }

/* What the driver said: the radio, the lines to pick from, and the answer */
.radio-row { display: flex; gap: 8px; }
.radio-row input {
  flex: 1; min-width: 0; padding: 9px 12px; font: inherit; font-size: 0.95rem;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
}
.radio-row input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.radio-or { color: var(--ink-3); font-size: 0.85rem; margin: 12px 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  text-align: left; padding: 7px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer; font: inherit; font-size: 0.88rem; color: var(--ink);
  max-width: 100%;
}
.chip:hover { border-color: var(--blue); background: var(--blue-soft); }
.chip small { display: block; color: var(--ink-3); font-size: 0.72rem; letter-spacing: 0.6px; text-transform: uppercase; }
.chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.verdict { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.v-radio { font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; }
.v-reading {
  display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; align-items: baseline;
  background: var(--blue-soft); border-radius: 10px; padding: 9px 12px;
}
.v-reading span { color: var(--ink-2); font-size: 0.88rem; }
.v-reading b { font-variant-numeric: tabular-nums; }
.v-say { font-size: 0.93rem; color: var(--ink-2); margin-top: 10px; }
.v-say.agree { border-left: 3px solid var(--teal); padding-left: 10px; }
.v-say.disagree { border-left: 3px solid var(--orange); padding-left: 10px; }
.v-note { font-size: 0.85rem; color: var(--ink-3); margin-top: 10px; }
.v-change { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.v-head { font-size: 0.72rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.v-move { font-size: 1.05rem; margin-top: 6px; }
.v-move .v-from { color: var(--ink-3); }
.v-move .v-to { color: var(--orange); font-weight: 700; }
.v-after { color: var(--ink-2); font-size: 0.9rem; margin-top: 2px; }
.v-costs { list-style: none; margin: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.v-costs li { font-size: 0.82rem; padding: 3px 9px; border-radius: 20px; background: var(--grid); font-variant-numeric: tabular-nums; }
.v-costs li.better { background: #E2F1EE; color: #10685D; }
.v-costs li.worse { background: #FBE3E1; color: #9C2B22; }

/* The parts you bolt on rather than dial in */
.choice { margin-top: 14px; }
.choice-label { display: block; font-weight: 600; margin-bottom: 6px; }
.choice .chart-toggle { display: flex; flex-wrap: wrap; margin-bottom: 4px; max-width: 100%; }
.choice .seg { flex: 1 1 auto; min-width: 0; white-space: nowrap; font-size: 0.92rem; }
.choice .seg + .seg { border-left: 1px solid var(--line); }
.choice .slider-hint { margin-top: 2px; }