/* PITWALL v6 — "Livery".
   One signature shape: the 12° racing slash (buttons, position chips, section marks).
   Team colour takes over whatever is on stage. Surfaces separate by tone, not outlines.
   Display & numbers: condensed Archivo. Labels: Plex Sans, sentence case. Timing: Plex Mono. */
:root{
  --ink:#0E1114; --s1:#161A1F; --s2:#1D2228; --s3:#262D35; --s4:#303842;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.12);
  --fg:#F3F4F5; --fg2:#AEB5BD; --mut:#7D858F; --dim:#59616B;
  --red:#D83B32; --red-hi:#EE4A40; --red-soft:rgba(216,59,50,.14);
  --amber:#D3A654; --amber-soft:rgba(211,166,84,.14);
  --green:#4FB477; --green-soft:rgba(79,180,119,.14);
  --crit:#F0564B; --purple:#9B86D8;
  --tc:#D83B32; --tc2:#F3F4F5;
  --slash:12deg;
  --r:6px; --r2:3px;
  --fd:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --fu:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fm:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* legacy aliases so every existing screen picks up the new palette */
  --bg:var(--ink); --div:var(--line2); --div-soft:var(--line); --hair:rgba(255,255,255,.05);
  --accent:var(--red); --accent-hi:var(--red-hi); --accent-soft:var(--red-soft);
  --warn:var(--amber); --ok:var(--green);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--ink); color:var(--fg); font-family:var(--fu); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overscroll-behavior:none}
#root{height:100%; display:flex; flex-direction:column; min-height:0}
button{font-family:inherit; color:inherit; cursor:pointer; -webkit-user-select:none; user-select:none}
button:disabled{cursor:not-allowed}
:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--s4); border-radius:4px}
::-webkit-scrollbar-track{background:transparent}
.num,.mono{font-family:var(--fm); font-variant-numeric:tabular-nums}
h1,h2,h3{margin:0; text-wrap:balance}
.app{height:100%; display:flex; flex-direction:column; min-height:0}
.screen{flex:1; min-height:0; display:flex; flex-direction:column}
.scroller{flex:1; min-height:0; overflow-y:auto; padding-inline:20px; padding-block:24px 40px}
.wrap{width:100%; max-width:1240px; margin:0 auto}
.spacer{margin-left:auto}

/* ---------- type ---------- */
.display{font-family:var(--fd); font-weight:800; font-stretch:88%; letter-spacing:-.02em; line-height:.95}
.lbl,.eyebrow{font-family:var(--fu); font-size:12.5px; font-weight:500; color:var(--fg2); letter-spacing:0; text-transform:none}
.kicker{display:inline-flex; align-items:center; gap:10px; font-family:var(--fd); font-weight:700; font-stretch:92%;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg2)}
.kicker::before{content:''; width:18px; height:4px; background:var(--tc); transform:skewX(calc(var(--slash) * -1))}
.sec-head{display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:22px}
.sec-head h2{font-family:var(--fd); font-weight:800; font-stretch:88%; font-size:clamp(28px,4.4vw,42px);
  line-height:1; letter-spacing:-.02em}
.sec-head p{margin:0; color:var(--fg2); font-size:15px; max-width:58ch; line-height:1.55}
.sect{display:flex; align-items:baseline; gap:12px; margin-bottom:12px}
.sect h3{font-family:var(--fd); font-weight:700; font-stretch:92%; font-size:17px; letter-spacing:.01em}
.sect .meta{margin-left:auto; font-size:13px; color:var(--mut)}

/* ---------- surfaces ---------- */
.card,.panel{background:var(--s1); border-radius:var(--r); padding:18px 20px}
.card h3,.panel > .ph h3{font-family:var(--fd); font-weight:700; font-stretch:92%; font-size:17px; letter-spacing:.01em;
  color:var(--fg); margin:0 0 14px; padding:0; border:none; text-transform:none; display:flex; align-items:center; gap:10px}
.card h3::before,.panel > .ph h3::before{content:''; width:14px; height:4px; background:var(--tc);
  transform:skewX(calc(var(--slash) * -1)); flex:0 0 auto}
.panel{padding:0; overflow:hidden}
.panel > .ph{display:flex; align-items:center; padding:16px 18px 6px}
.panel > .ph h3{margin:0}
.panel > .ph .meta{margin-left:auto; font-size:12.5px; color:var(--mut)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 26px;
  border:none; border-radius:var(--r2); font-family:var(--fd); font-weight:700; font-stretch:92%; font-size:16px;
  letter-spacing:.04em; text-transform:uppercase; transition:background .14s, transform .08s, color .14s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn.primary{background:var(--red); color:#fff; clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%); padding-right:38px}
.btn.primary:hover:not(:disabled){background:var(--red-hi)}
.btn.ghost{background:var(--s2); color:var(--fg)}
.btn.ghost:hover:not(:disabled){background:var(--s3)}
.btn.quiet{background:transparent; color:var(--fg2); padding-inline:14px}
.btn.quiet:hover{color:var(--fg)}
.btn:disabled{background:var(--s2); color:var(--dim)}
.btn .arrow{font-family:var(--fu); font-weight:400; font-size:18px; line-height:1}
.go{display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; padding:14px 40px 14px 24px;
  border:none; border-radius:var(--r2); background:var(--red); color:#fff; font-family:var(--fd); font-weight:800;
  font-stretch:92%; font-size:18px; letter-spacing:.06em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 100%,0 100%)}
.go:hover:not(:disabled){background:var(--red-hi)}
.go:disabled{background:var(--s2); color:var(--dim)}
.back{display:inline-flex; align-items:center; gap:6px; min-height:38px; background:transparent; border:none;
  padding:6px 10px 6px 4px; font-family:var(--fu); font-size:14px; font-weight:500; color:var(--fg2)}
.back::before{content:'‹'; font-size:22px; line-height:1; margin-top:-2px}
.back:hover{color:var(--fg)}
.gear{display:grid; place-content:center; width:40px; height:40px; flex:0 0 auto; margin-left:8px;
  background:transparent; border:none; border-radius:50%; color:var(--fg2)}
.gear:hover{color:var(--fg); background:var(--s2)}

/* segmented control — big, touchable, sentence case */
.chiprow{display:flex; gap:4px; padding:4px; background:var(--ink); border-radius:var(--r)}
.chip{flex:1 1 0; min-width:0; min-height:40px; border:none; border-radius:4px; background:transparent;
  padding:8px 4px; font-family:var(--fu); font-size:13.5px; font-weight:500; color:var(--fg2); text-align:center;
  transition:background .12s, color .12s}
.chip:hover:not(:disabled){background:var(--s2); color:var(--fg)}
.chip.on{background:var(--cc,var(--fg)); color:var(--ink); font-weight:700}
.chip:disabled{opacity:.35}

/* ---------- top bar ---------- */
.topbar{display:flex; align-items:center; gap:12px; padding:10px 16px; flex:0 0 auto; background:var(--ink);
  border-bottom:1px solid var(--line)}
.topbar .brand{font-family:var(--fd); font-weight:900; font-stretch:90%; font-size:18px; letter-spacing:-.01em; font-style:italic}
.topbar .brand i{color:var(--red); font-style:italic}
.topbar .eyebrow{font-size:13px}
.home-top .brand{font-family:var(--fd); font-weight:900; font-style:italic; font-size:18px}

/* ---------- team identity ---------- */
.badge{display:inline-grid; place-content:center; flex:0 0 auto; width:38px; height:26px; background:var(--tc); color:var(--tc2);
  font-family:var(--fd); font-weight:900; font-style:italic; font-size:13px; letter-spacing:-.02em;
  clip-path:polygon(18% 0,100% 0,82% 100%,0 100%)}
.badge.lg{width:64px; height:42px; font-size:21px}
.carart{display:block; width:100%; height:auto}
.numtag{font-family:var(--fd); font-weight:900; font-style:italic; color:var(--tc)}

/* ---------- home ---------- */
.home{position:relative; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; background:var(--ink); display:flex; flex-direction:column}
.home-top{position:relative; z-index:2; display:flex; align-items:center; gap:12px; padding:14px 22px}
.home-stage{position:relative; flex:1; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); align-items:center;
  gap:20px; padding:10px 22px 0; max-width:1320px; width:100%; margin:0 auto}
.home-copy{position:relative; z-index:2; padding-bottom:40px}
.home-title{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:88%; font-size:clamp(64px,11vw,148px);
  line-height:.84; letter-spacing:-.045em; margin:14px 0 0}
.home-title span{color:var(--red)}
.home-sub{display:flex; align-items:center; gap:14px; margin-top:14px; font-family:var(--fd); font-weight:700; font-stretch:92%;
  font-size:clamp(16px,2vw,21px); letter-spacing:.14em; text-transform:uppercase; color:var(--fg2)}
.home-sub::before{content:''; width:44px; height:5px; background:var(--red); transform:skewX(calc(var(--slash) * -1))}
.home-lede{margin:22px 0 0; max-width:42ch; font-size:16px; color:var(--fg2); line-height:1.6}
.home-actions{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:30px}
.home-actions .row{display:flex; flex-wrap:wrap; gap:10px}
.home-cont{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left}
.home-cont small{font-family:var(--fu); font-weight:500; font-size:13px; letter-spacing:0; text-transform:none; opacity:.85}
.home-links{display:flex; gap:4px; margin-top:6px}
.home-art{position:relative; z-index:1; align-self:center; margin-right:-12%; margin-top:40px}
.home-art .carart{filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.home-art .bignum{position:absolute; right:4%; top:-4%; font-family:var(--fd); font-weight:900; font-style:italic;
  font-size:clamp(120px,22vw,300px); line-height:.8; color:var(--s2); letter-spacing:-.06em; z-index:-1}
.home-kerb{height:14px; flex:0 0 auto; background:repeating-linear-gradient(90deg,var(--red) 0 46px,#ECEDEE 46px 92px);
  clip-path:polygon(0 30%,100% 0,100% 100%,0 100%); opacity:.92}
.home-strip{display:flex; flex-wrap:wrap; gap:6px 26px; padding:14px 22px 18px; background:var(--s1); font-size:13.5px; color:var(--fg2)}
.home-strip b{color:var(--fg); font-family:var(--fd); font-weight:700; font-size:16px; margin-right:6px}

/* ---------- team selection ---------- */
.ts{display:flex; flex-direction:column; gap:18px}
.ts-stage{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:10px 30px;
  align-items:center; padding:30px 30px 10px; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(115deg, color-mix(in srgb, var(--tc) 26%, var(--s1)) 0%, var(--s1) 58%)}
.ts-stage::after{content:''; position:absolute; right:-6%; top:0; bottom:0; width:42%; background:var(--tc); opacity:.08;
  transform:skewX(calc(var(--slash) * -1))}
.ts-id{position:relative; z-index:1; min-width:0}
.ts-name{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:86%; font-size:clamp(34px,5vw,58px);
  line-height:.92; letter-spacing:-.03em; margin-top:12px}
.ts-tag{display:inline-block; margin-top:14px; padding:6px 16px 6px 12px; background:var(--tc); color:var(--tc2);
  font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.ts-pitch{margin:14px 0 0; color:var(--fg2); font-size:15.5px; line-height:1.55; max-width:46ch}
.ts-car{position:relative; z-index:1; min-width:0}
.ts-car .carart{filter:drop-shadow(0 20px 24px rgba(0,0,0,.5))}
.ts-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tchip{display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:20px; font-size:13.5px; font-weight:500;
  background:rgba(255,255,255,.06)}
.tchip.plus{color:#BDE8CC} .tchip.plus::before{content:'▲'; font-size:9px; color:var(--green)}
.tchip.minus{color:#F2D2A0} .tchip.minus::before{content:'▼'; font-size:9px; color:var(--amber)}
.ts-body{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:18px}
.attr{display:grid; grid-template-columns:minmax(118px,auto) minmax(0,1fr) 42px; gap:6px 14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line)}
.attr:last-child{border-bottom:none}
.attr .an{font-weight:600; font-size:15px}
.attr .ad{grid-column:1/-1; font-size:13px; color:var(--mut); margin-top:-3px}
.attr .av{font-family:var(--fd); font-weight:800; font-size:20px; text-align:right; font-variant-numeric:tabular-nums}
.abar{position:relative; height:8px; background:var(--s3); border-radius:4px}
.abar i{position:absolute; left:0; top:0; bottom:0; border-radius:4px; background:var(--tc)}
.abar b{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--fg2); opacity:.7}
.legend-avg{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--mut); margin-top:10px}
.legend-avg::before{content:''; width:2px; height:14px; background:var(--fg2); opacity:.7}
.drivers2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.dcard{background:var(--s2); border-radius:var(--r); padding:14px 16px; min-width:0; position:relative; overflow:hidden}
.dcard .dnum{position:absolute; right:10px; top:-8px; font-family:var(--fd); font-weight:900; font-style:italic; font-size:64px;
  color:var(--tc); opacity:.25; line-height:1}
.dcard .dname{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:19px; line-height:1.1; position:relative}
.dcard .dbest{font-size:13px; color:var(--fg2); margin-top:4px; position:relative}
.dstats{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; position:relative}
.dstats div{background:var(--ink); border-radius:4px; padding:7px 8px}
.dstats .k{display:block; font-size:11.5px; color:var(--mut)}
.dstats .v{display:block; font-family:var(--fd); font-weight:800; font-size:19px; font-variant-numeric:tabular-nums}
.facts4{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.fact4{background:var(--s2); border-radius:var(--r); padding:12px 14px}
.fact4 .k{font-size:12.5px; color:var(--mut)}
.fact4 .v{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:22px; line-height:1.2; margin-top:2px}
.fact4 .s{font-size:12.5px; color:var(--fg2); margin-top:2px}
.garage{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px}
.gcard{position:relative; display:flex; flex-direction:column; align-items:stretch; gap:4px; min-width:0; padding:10px 10px 12px;
  border:none; border-radius:var(--r); background:var(--s1); text-align:left; transition:background .14s, transform .14s}
.gcard:hover{background:var(--s2)}
.gcard.on{background:var(--s2); box-shadow:inset 0 -4px 0 var(--tc)}
.gcard .gn{font-family:var(--fd); font-weight:800; font-stretch:90%; font-size:15px; line-height:1.15; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.gcard .gs{font-size:12px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ts-cta{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 20px;
  background:var(--ink); border-top:1px solid var(--line)}
.ts-cta .sum{font-size:14px; color:var(--fg2)}
.ts-cta .sum b{color:var(--fg)}
.ts-cta .go{width:auto; min-width:280px; margin-left:auto}

/* ---------- career hub ---------- */
.hub6{display:grid; grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr); gap:16px; align-items:start}
.nr{position:relative; border-radius:var(--r); overflow:hidden; background:var(--s1); display:flex; flex-direction:column}
.nr-top{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:10px 18px; padding:24px 24px 6px; align-items:center}
.nr-name{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:86%; font-size:clamp(34px,5vw,56px);
  line-height:.9; letter-spacing:-.03em; margin-top:10px}
.nr-meta{display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:12px; color:var(--fg2); font-size:14.5px}
.nr-meta b{color:var(--fg); font-family:var(--fd); font-weight:800; font-size:17px; margin-right:4px}
.nr-map{min-width:0}
.conds{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:8px; padding:12px 24px 0}
.cond{display:flex; align-items:center; gap:10px; background:var(--s2); border-radius:var(--r); padding:10px 12px}
.cond .ci{flex:0 0 auto; display:flex; gap:3px}
.cond .ci i{width:6px; height:16px; background:var(--s4); transform:skewX(calc(var(--slash) * -1))}
.cond .ci i.on{background:var(--amber)}
.cond .ct{min-width:0}
.cond .ck{display:block; font-size:12.5px; color:var(--mut)}
.cond .cv{display:block; font-weight:600; font-size:14.5px}
.nr-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:18px 24px 22px; margin-top:auto}
.nr-cta .go{width:auto; min-width:300px}
.nr-cta .note{font-size:13.5px; color:var(--mut)}
.champ6{background:var(--s1); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:16px}
.bigpos{display:flex; align-items:flex-end; gap:16px}
.bigpos .p{font-family:var(--fd); font-weight:900; font-style:italic; font-size:84px; line-height:.8; letter-spacing:-.05em}
.bigpos .p small{font-size:.45em; vertical-align:top; margin-right:2px; color:var(--fg2)}
.bigpos .pp{font-size:14.5px; color:var(--fg2); line-height:1.45}
.bigpos .pp b{color:var(--fg); font-family:var(--fd); font-weight:800; font-size:18px}
.mydrv{display:flex; flex-direction:column; gap:6px}
.mydrv .row{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:12px; align-items:center;
  background:var(--s2); border-radius:var(--r); padding:10px 12px}
.mydrv .nm{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mydrv .sub{font-size:12.5px; color:var(--mut)}
.mydrv .v{font-family:var(--fd); font-weight:800; font-size:18px; text-align:right; font-variant-numeric:tabular-nums}
.mini{display:flex; flex-direction:column}
.mini .row{display:grid; grid-template-columns:22px auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:7px 2px;
  border-bottom:1px solid var(--line); font-size:14px}
.mini .row:last-child{border-bottom:none}
.mini .row.me{color:var(--fg); font-weight:600}
.mini .row .p{font-family:var(--fd); font-weight:800; color:var(--mut); text-align:right}
.mini .row .v{font-family:var(--fd); font-weight:800; font-variant-numeric:tabular-nums}
.dests{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px}
.dest{display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:132px; padding:16px 18px; border:none;
  border-radius:var(--r); background:var(--s1); text-align:left; transition:background .14s}
.dest:hover{background:var(--s2)}
.dest .dt{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:19px; display:flex; align-items:center; gap:8px; width:100%}
.dest .dt::after{content:'›'; margin-left:auto; font-family:var(--fu); font-weight:400; font-size:24px; color:var(--mut)}
.dest .dv{font-family:var(--fd); font-weight:800; font-size:26px; line-height:1.1; font-variant-numeric:tabular-nums}
.dest .ds{font-size:13.5px; color:var(--fg2); line-height:1.4}
.season-strip{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:12px 24px 0}
.season-strip .rnd{background:var(--s2)}
.rnd{background:var(--s1); border-radius:var(--r); padding:10px 12px; min-width:0}
.rnd .rn{font-size:12px; color:var(--mut)}
.rnd .rc{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rnd .rr{font-family:var(--fd); font-weight:800; font-size:20px; margin-top:2px; white-space:nowrap}
.rnd.next{box-shadow:inset 0 -3px 0 var(--red)}
.rnd.tbd .rr{color:var(--dim)}

/* ---------- track map ---------- */
.tmap{display:block; width:100%; height:auto}

/* ---------- live race ---------- */
.race{flex:1; min-height:0; display:flex; flex-direction:column; background:var(--ink)}
.rhead{display:flex; align-items:center; gap:16px; padding:8px 14px; background:var(--s1); flex:0 0 auto; flex-wrap:wrap; row-gap:6px}
.rhead .ev{display:flex; flex-direction:column; min-width:0}
.rhead .ev b{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:88%; font-size:20px; line-height:1; white-space:nowrap}
.rhead .ev span{font-size:12.5px; color:var(--mut); white-space:nowrap}
.lapbox{display:flex; align-items:baseline; gap:6px; padding:2px 16px; border-left:1px solid var(--line); border-right:1px solid var(--line)}
.lapbox .k{font-size:12.5px; color:var(--mut)}
.lapbox .v{font-family:var(--fd); font-weight:900; font-size:34px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.lapbox .t{font-family:var(--fd); font-weight:700; font-size:18px; color:var(--mut)}
.flagpill{display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 12px; font-family:var(--fd); font-weight:800;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase; clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
  padding-right:20px}
.flagpill.green{background:var(--green-soft); color:#9BDDB4}
.flagpill.sc{background:var(--amber); color:#1A1305}
.flagpill i{width:9px; height:9px; border-radius:50%; background:currentColor}
.cond-mini{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--fg2)}
.cond-mini b{color:var(--fg); font-weight:600}
.speedctl{margin-left:auto; display:flex; align-items:center; gap:3px; padding:3px; background:var(--ink); border-radius:var(--r)}
.speedctl button{min-width:36px; min-height:34px; padding:4px 6px; border:none; border-radius:4px; background:transparent;
  font-family:var(--fm); font-size:12.5px; color:var(--fg2)}
.speedctl button:hover{background:var(--s2); color:var(--fg)}
.speedctl button.on{background:var(--fg); color:var(--ink); font-weight:700}
.speedctl button.pause.on{background:var(--amber); color:#1A1305}
.rexit{min-height:36px; padding:6px 12px; border:none; border-radius:4px; background:transparent; color:var(--fg2); font-size:13.5px}
.rexit:hover{background:var(--s2); color:var(--fg)}
.lapbar{height:3px; background:var(--s2); flex:0 0 auto}
.lapbar i{display:block; height:100%; background:var(--red); transition:width .45s linear}
.tickbar{height:2px; background:var(--ink); flex:0 0 auto; overflow:hidden}
.tickbar i{display:block; height:100%; width:0; background:var(--dim); animation:laptick linear forwards}
@keyframes laptick{from{width:0}to{width:100%}}
.race.sc .rhead{box-shadow:inset 0 -3px 0 var(--amber)}

.rgrid{flex:1; min-height:0; display:grid; grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(340px,380px); gap:10px; padding:10px}
.rcol{min-width:0; min-height:0; display:flex; flex-direction:column; gap:10px}
.rbox{background:var(--s1); border-radius:var(--r); min-height:0; display:flex; flex-direction:column; overflow:hidden}
.rbox-h{display:flex; align-items:center; gap:10px; padding:10px 14px 6px; flex:0 0 auto}
.rbox-h h3{font-family:var(--fd); font-weight:700; font-stretch:92%; font-size:15.5px}
.rbox-h .meta{margin-left:auto; font-size:12.5px; color:var(--mut)}
.rbox-b{flex:1; min-height:0; overflow-y:auto}

/* timing tower */
.tw-row{display:grid; grid-template-columns:30px 4px minmax(0,1fr) 46px 66px; gap:8px; align-items:center; height:34px; padding:0 10px 0 6px;
  border-bottom:1px solid var(--line); transition:background .5s}
.tw-row:last-child{border-bottom:none}
.tw-row .p{font-family:var(--fd); font-weight:900; font-size:17px; text-align:center; font-variant-numeric:tabular-nums; line-height:28px}
.tw-row.me .p{background:var(--tc); color:var(--tc2); clip-path:polygon(16% 0,100% 0,84% 100%,0 100%)}
.tw-row .sw{align-self:stretch; margin-block:7px; background:var(--tc); border-radius:1px}
.tw-row .n{min-width:0; display:flex; align-items:baseline; gap:7px; white-space:nowrap; overflow:hidden}
.tw-row .n b{font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.02em}
.tw-row .n span{font-size:12.5px; color:var(--mut); overflow:hidden; text-overflow:ellipsis}
.tw-row.me .n span{color:var(--fg2)}
.tw-row .g{font-family:var(--fm); font-size:12.5px; text-align:right; color:var(--fg2); font-variant-numeric:tabular-nums}
.tw-row.me{background:rgba(255,255,255,.04)}
.tw-row.out{opacity:.4}
.tw-row.gain{background:var(--green-soft)} .tw-row.loss{background:rgba(240,86,75,.12)}
.tw-row .mv{font-size:10px; margin-left:2px}
.tw-row .mv.up{color:var(--green)} .tw-row .mv.dn{color:var(--crit)}
.tyre{display:inline-flex; align-items:center; gap:4px}
.tdot{width:18px; height:18px; border-radius:50%; border:2px solid var(--tyc); display:grid; place-content:center;
  font-family:var(--fd); font-size:10px; font-weight:900; color:var(--tyc); flex:0 0 auto; background:var(--ink)}
.tage{font-family:var(--fm); font-size:11.5px; color:var(--mut); font-variant-numeric:tabular-nums}

/* centre: map + event banner + log */
.stage{position:relative; flex:0 0 auto; padding:8px 14px 6px}
.race.sc .stage .tmap path.asphalt{stroke:#4A3F25}
.scbadge{position:absolute; left:16px; top:14px; display:flex; align-items:center; gap:8px; padding:6px 14px; background:var(--amber);
  color:#1A1305; font-family:var(--fd); font-weight:900; font-size:15px; letter-spacing:.08em; clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
  padding-right:22px}
.banner{display:flex; align-items:flex-start; gap:12px; margin:0 14px 10px; padding:12px 14px; border-radius:var(--r);
  background:var(--s2); animation:bannerIn .35s ease}
@keyframes bannerIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.banner .bl{flex:0 0 auto; font-family:var(--fd); font-weight:800; font-size:13px; color:var(--mut); padding-top:2px; min-width:40px}
.banner .bm{font-size:15.5px; font-weight:500; line-height:1.4}
.banner.hi{background:var(--red-soft)} .banner.hi .bl{color:var(--red-hi)}
.banner.warn{background:var(--amber-soft)} .banner.warn .bl{color:var(--amber)}
.banner.bad{background:rgba(240,86,75,.16)} .banner.bad .bl{color:var(--crit)}
.banner.good{background:var(--green-soft)} .banner.good .bl{color:var(--green)}
.log6 .ev-row{display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding:7px 14px; border-top:1px solid var(--line); align-items:baseline}
.log6 .ev-row .l{font-family:var(--fd); font-weight:800; font-size:12.5px; color:var(--mut); text-align:right}
.log6 .ev-row .m{font-size:13.5px; color:var(--fg2); line-height:1.45}
.log6 .ev-row.hi .m{color:var(--fg)} .log6 .ev-row.warn .m{color:#EBD3A2} .log6 .ev-row.bad .m{color:#F6A39C} .log6 .ev-row.good .m{color:#A7E2BE}

/* driver console */
.con6{background:var(--s1); border-radius:var(--r); overflow:hidden; flex:0 0 auto}
.con6-h{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px;
  background:linear-gradient(100deg, color-mix(in srgb, var(--tc) 30%, var(--s1)) 0%, var(--s1) 75%)}
.con6-h .cn{font-family:var(--fd); font-weight:900; font-style:italic; font-size:30px; line-height:1; color:var(--tc); min-width:40px;
  text-shadow:0 1px 0 rgba(0,0,0,.4)}
.con6-h .nm{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:19px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.con6-h .gaps{font-size:12.5px; color:var(--fg2); line-height:1.4; margin-top:2px}
.con6-h .gaps b{color:var(--fg); font-family:var(--fm); font-weight:500}
.con6-h .pos{font-family:var(--fd); font-weight:900; font-style:italic; font-size:44px; line-height:.85; letter-spacing:-.04em}
.con6-b{padding:10px 14px 14px; display:flex; flex-direction:column; gap:10px}
.tyreblk{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center}
.gauge{position:relative; width:58px; height:58px}
.gauge svg{display:block}
.gauge .gl{position:absolute; inset:0; display:grid; place-content:center; font-family:var(--fd); font-weight:900; font-size:19px}
.tyreblk .tyw{font-family:var(--fd); font-weight:800; font-size:18px; line-height:1.15}
.tyreblk .tys{font-size:13px; color:var(--fg2); line-height:1.45}
.tyreblk .tys b{color:var(--fg); font-weight:600}
.advice{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--r); background:var(--s2); font-size:14px; line-height:1.45}
.advice .ai{flex:0 0 auto; font-family:var(--fd); font-weight:800; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 8px 3px 6px; margin-top:1px; color:var(--ink); background:var(--fg2); clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%); padding-right:11px}
.advice.ok .ai{background:var(--green)} .advice.warn .ai{background:var(--amber)} .advice.bad .ai{background:var(--crit)} .advice.hi .ai{background:var(--red); color:#fff}
.advice .pw{display:block; font-size:12.5px; color:var(--mut); margin-top:4px}
.advice .pw b{color:var(--fg2); font-weight:600}
.ctl-l{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:5px; font-size:13px; color:var(--fg2)}
.ctl-l b{color:var(--fg); font-weight:600}
.pitrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:stretch}
.pitbtn6{min-height:52px; border:none; border-radius:var(--r2); background:var(--red); color:#fff; font-family:var(--fd); font-weight:800;
  font-size:17px; letter-spacing:.05em; text-transform:uppercase; padding:8px 26px 8px 14px; clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%);
  line-height:1.1}
.pitbtn6:hover:not(:disabled){background:var(--red-hi)}
.pitbtn6 small{display:block; font-family:var(--fu); font-weight:500; font-size:12px; letter-spacing:0; text-transform:none; opacity:.9; margin-top:2px}
.pitbtn6.armed{background:var(--amber); color:#1A1305}
.pitbtn6:disabled{background:var(--s2); color:var(--dim)}
.tyrepick{display:flex; gap:4px; padding:4px; background:var(--ink); border-radius:var(--r)}
.tyrepick button{width:40px; min-height:44px; border:none; border-radius:4px; background:transparent; display:grid; place-content:center}
.tyrepick button:hover{background:var(--s2)}
.tyrepick button.on{background:var(--s3); box-shadow:inset 0 -3px 0 var(--tyc)}
.rejoin6{font-size:12.5px; color:var(--mut); margin-top:-2px}
.rejoin6 b{color:var(--amber); font-weight:500}
.more{border:none; background:transparent; color:var(--fg2); font-size:13.5px; font-weight:500; padding:6px 0; text-align:left;
  display:flex; align-items:center; gap:6px; min-height:32px}
.more:hover{color:var(--fg)}
.more i{font-style:normal; transition:transform .15s}
.more.open i{transform:rotate(90deg)}
.hint{font-size:13px; color:var(--fg2); margin-top:5px; line-height:1.4}
.hint b{color:var(--fg); font-weight:600}
.drvtabs{display:none}
.rcol.c-deck{overflow-y:auto}
@media (max-width:760px), (max-height:980px){
  .drvtabs{display:flex; gap:4px; padding:4px; background:var(--s1); border-radius:var(--r); flex:0 0 auto}
  .drvtabs button{flex:1; min-width:0; min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 10px; border:none; border-radius:4px;
    background:transparent; color:var(--fg2); font-size:14px; text-align:left}
  .drvtabs button.on{background:var(--s3); color:var(--fg); box-shadow:inset 0 -3px 0 var(--tc)}
  .drvtabs .dt-no{font-family:var(--fd); font-weight:900; font-style:italic; font-size:18px; color:var(--tc)}
  .drvtabs .dt-nm{font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .drvtabs .dt-p{margin-left:auto; font-family:var(--fd); font-weight:900; font-size:18px}
  .drvtabs .dt-ty{display:inline-flex; align-items:center; gap:4px; font-family:var(--fm); font-size:12px}
  .drvtabs .dt-pit{font-family:var(--fd); font-weight:800; font-size:12px; padding:2px 6px; background:var(--amber); color:#1A1305; border-radius:2px}
  .con6.hidden-sm{display:none}
}
.out-note{padding:14px; font-size:14px; color:var(--fg2)}

/* ---------- modal ---------- */
.veil{position:fixed; inset:0; background:rgba(8,10,12,.78); z-index:50; display:flex; align-items:center; justify-content:center; padding:18px}
.modal{width:100%; max-width:500px; background:var(--s1); border-radius:var(--r); max-height:100%; overflow-y:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.55); animation:bannerIn .2s ease}
.modal-top{padding:18px 22px 14px; border-top:5px solid var(--mc,var(--amber))}
.modal-top .k{font-family:var(--fd); font-weight:800; font-size:13px; letter-spacing:.1em; color:var(--mc,var(--amber)); text-transform:uppercase}
.modal-top h2{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:90%; font-size:28px; line-height:1.05; margin-top:6px; letter-spacing:-.01em}
.modal-bd{padding:4px 22px 22px}
.modal-bd p{margin:0 0 14px; font-size:15px; color:var(--fg2); line-height:1.55}
.facts{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.factrow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:9px 12px; background:var(--s2); border-radius:4px; align-items:baseline}
.factrow .k{font-size:14px; color:var(--fg2)}
.factrow .v{font-family:var(--fm); font-size:14px; color:var(--fg); text-align:right}
.factrow .v.hl{color:var(--green)}
.rec{font-size:14px; color:#A7E2BE; margin-bottom:14px}
.opts{display:flex; flex-direction:column; gap:8px}
.opt{width:100%; text-align:left; min-height:52px; padding:12px 16px; border:none; background:var(--s2); border-radius:var(--r);
  font-size:15px; font-weight:600; display:flex; align-items:center; gap:12px; transition:background .12s}
.opt:hover{background:var(--s3)}
.opt.primary{background:var(--red); color:#fff}
.opt.primary:hover{background:var(--red-hi)}
.opt .sub{margin-left:auto; font-size:13px; font-weight:400; opacity:.8; text-align:right}
.cmd-row{margin-top:12px}
.cmd-row > .lab{display:block; font-size:13px; color:var(--fg2); margin-bottom:6px}

/* ---------- secondary screens share the language ---------- */
.brief{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:16px; align-items:start}
.circuit-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:6px; margin-top:12px}
.fact{background:var(--s2); border-radius:4px; padding:9px 11px}
.fact .k{font-size:12.5px; color:var(--mut)}
.fact .v{font-family:var(--fd); font-weight:800; font-size:20px; line-height:1.2; font-variant-numeric:tabular-nums}
.traits{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.trait{padding:6px 12px; border-radius:16px; background:var(--s2); font-size:13px; color:var(--fg2)}
.chars{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:6px; margin-top:12px}
.ch{background:var(--s2); border-radius:4px; padding:8px 11px}
.ch .k{display:block; font-size:12.5px; color:var(--mut)}
.ch .v{display:block; font-weight:600; font-size:14.5px}
.wx{display:flex; gap:14px; align-items:flex-start}
.wx-risk{flex:0 0 auto; width:66px; height:66px; border-radius:var(--r); display:grid; place-content:center; text-align:center; background:var(--s2); border:none}
.wx-risk b{font-family:var(--fd); font-size:20px; font-weight:900; display:block}
.wx-risk span{font-size:11.5px; color:var(--mut)}
.fc{display:flex; flex-direction:column; gap:4px}
.fcrow{display:grid; grid-template-columns:100px minmax(0,1fr) 78px; gap:12px; align-items:center; padding:9px 12px; background:var(--s2); border-radius:4px}
.fcrow .w{font-size:13.5px; color:var(--fg2)}
.fcbar{height:8px; background:var(--s4); border-radius:4px; overflow:hidden}
.fcbar i{display:block; height:100%}
.fcrow .p{font-size:13.5px; text-align:right; color:var(--fg)}
.gridlist{display:flex; flex-direction:column}
.gridrow{display:grid; grid-template-columns:28px 4px 26px minmax(0,1fr) auto; gap:10px; align-items:center; height:34px; padding:0 4px; border-bottom:1px solid var(--line)}
.gridrow:last-child{border-bottom:none}
.gridrow .sw{align-self:stretch; margin-block:8px; background:var(--tc)}
.gridrow.me{background:rgba(255,255,255,.05)}
.gridrow.me .p{color:var(--fg)}
.gridrow .p{font-family:var(--fd); font-weight:800; font-size:15px; color:var(--fg2); text-align:right}
.gridrow .n{font-family:var(--fm); font-size:12px; color:var(--mut)}
.gridrow .d{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gridrow .t{font-family:var(--fm); font-size:12.5px; color:var(--fg2)}
.spoil{font-size:12px; color:var(--amber); margin-left:8px}
.qempty{min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; background:var(--s2); border-radius:var(--r); color:var(--mut); text-align:center}
.qempty .carart{width:min(360px, 90%); height:auto; opacity:.55}
.qempty.busy .carart{opacity:1; animation:qeRun 0.9s ease-in-out infinite alternate}
.qempty .qe-t{font-size:13px; line-height:1.45; max-width:34ch}
@keyframes qeRun{from{transform:translateX(-6px)} to{transform:translateX(6px)}}
@media (prefers-reduced-motion: reduce){.qempty.busy .carart{animation:none}}
.setup-drv{padding:14px 0; border-top:1px solid var(--line)}
.setup-drv:first-of-type{border-top:none; padding-top:2px}
.setup-drv .hd{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.setup-drv .hd b{font-family:var(--fd); font-weight:800; font-size:17px}
.pill{font-family:var(--fd); font-weight:800; font-size:13px; padding:3px 9px; border-radius:3px; background:var(--s3); color:var(--fg)}
.ruleflag{margin-top:12px; font-size:13px; color:var(--fg2); display:flex; gap:8px; line-height:1.45}
.ruleflag b{color:var(--amber); font-weight:600; flex:0 0 auto}
.ruleflag.ok b{color:var(--green)}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px}
.kpis.wide{margin-bottom:16px}
.kpi{background:var(--s1); border-radius:var(--r); padding:12px 14px}
.kpi .k{font-size:12.5px; color:var(--mut)}
.kpi .v{font-family:var(--fd); font-weight:800; font-size:24px; line-height:1.2; font-variant-numeric:tabular-nums}

/* development programme */
.devlist{display:flex; flex-direction:column; gap:10px}
.devrow{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(130px,auto) minmax(150px,1fr) 170px; gap:18px; align-items:center;
  padding:18px 20px; background:var(--s1); border-radius:var(--r)}
.devrow .nm{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:20px}
.devrow .ds{font-size:14px; color:var(--fg2); margin-top:3px; line-height:1.45}
.devrow .lv{display:flex; align-items:center; gap:10px}
.devrow .lvt{font-size:13.5px; color:var(--fg2); white-space:nowrap}
.pips{display:flex; gap:4px}
.pip{width:16px; height:10px; background:var(--s3); transform:skewX(calc(var(--slash) * -1))}
.pip.on{background:var(--tc)}
.devrow .eff{font-family:var(--fd); font-weight:800; font-size:20px; font-variant-numeric:tabular-nums}
.devrow .eff b{color:var(--green); font-weight:800}
.devrow .eff .c{display:block; font-family:var(--fu); font-weight:400; font-size:13px; color:var(--mut); margin-top:2px}
.devbtn{min-height:48px; padding:10px 22px 10px 12px; border:none; border-radius:var(--r2); background:var(--red); color:#fff;
  font-family:var(--fd); font-weight:800; font-size:15px; letter-spacing:.05em; text-transform:uppercase; clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.devbtn:hover:not(:disabled){background:var(--red-hi)}
.devbtn.no,.devbtn.done{background:var(--s2); color:var(--mut); clip-path:none; padding:10px 12px; font-family:var(--fu); font-weight:500; font-size:13.5px; letter-spacing:0; text-transform:none}

/* standings */
.tabs{display:inline-flex; gap:4px; padding:4px; background:var(--s1); border-radius:var(--r); margin-bottom:14px}
.tab{min-height:44px; padding:10px 20px; border:none; border-radius:4px; background:transparent; font-family:var(--fd); font-weight:700;
  font-size:15px; color:var(--fg2)}
.tab:hover{color:var(--fg)}
.tab.on{background:var(--fg); color:var(--ink)}
.std-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:16px; align-items:start}
.th,.tr{display:grid; gap:12px; align-items:center; padding:0 18px}
.th.drv,.tr.drv{grid-template-columns:30px 4px minmax(0,1.3fr) minmax(0,1fr) 48px 52px}
.th.con,.tr.con{grid-template-columns:30px 4px minmax(0,1fr) 48px 52px}
.th{height:34px}
.th span{font-size:12.5px; color:var(--mut)}
.tr{height:42px; border-top:1px solid var(--line)}
.tr.me{background:rgba(255,255,255,.05)}
.tr .sw{align-self:stretch; margin-block:10px; background:var(--tc)}
.tr .p{font-family:var(--fd); font-weight:800; font-size:17px; text-align:right}
.tr .d{font-size:15px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr .tm{font-size:13.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tr .w{font-size:14px; color:var(--fg2); text-align:right}
.tr .v{font-family:var(--fd); font-weight:800; font-size:19px; text-align:right; font-variant-numeric:tabular-nums}
.cal{display:flex; flex-direction:column}
.calrow{display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 18px; border-top:1px solid var(--line)}
.calrow .r{font-family:var(--fd); font-weight:800; color:var(--mut); text-align:right}
.calrow .n{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.calrow .s{font-size:13px; color:var(--mut)}
.calrow.done .s{color:var(--green)} .calrow.next{background:rgba(216,59,50,.08)} .calrow.next .s{color:var(--red-hi); font-weight:600}

/* team profile */
.tdetail{background:var(--s1); border-radius:var(--r); padding:22px; min-width:0}
.tdetail .hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.tdetail h3{font-family:var(--fd); font-weight:900; font-style:italic; font-size:30px}
.tdetail .base{font-size:13.5px; color:var(--mut)}
.briefline{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-top:14px}
.briefline > div{background:var(--s2); border-radius:4px; padding:10px 12px}
.briefline .k{font-size:12.5px; color:var(--mut)}
.briefline .v{font-family:var(--fd); font-weight:800; font-size:19px}
.statlist{margin-top:14px}
.statrow{display:grid; grid-template-columns:minmax(120px,1fr) minmax(80px,2fr) 40px; gap:14px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
.statrow .k{font-size:14.5px; font-weight:500}
.statrow .v{font-family:var(--fd); font-weight:800; font-size:18px; text-align:right}
.meter{height:8px; background:var(--s3); border-radius:4px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--tc)}
.dpair{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:16px}
.dcol{background:var(--s2); border-radius:var(--r); padding:14px 16px}
.dcol .dno{font-family:var(--fd); font-weight:900; font-style:italic; color:var(--tc); font-size:15px}
.dcol .dn{font-family:var(--fd); font-weight:800; font-size:19px}
.dattr{margin-top:8px}
.dattr div{display:flex; justify-content:space-between; gap:10px; padding:5px 0; border-top:1px solid var(--line); font-size:14px}
.dattr .k{color:var(--fg2)}
.dattr .v{font-family:var(--fd); font-weight:700}

/* results & season */
.res-hero{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center; padding:26px 28px;
  border-radius:var(--r); margin-bottom:16px; overflow:hidden; background:linear-gradient(110deg, color-mix(in srgb, var(--tc) 24%, var(--s1)), var(--s1) 60%)}
.res-hero h2{font-family:var(--fd); font-weight:900; font-style:italic; font-stretch:88%; font-size:clamp(28px,4.6vw,46px); line-height:.95; letter-spacing:-.02em}
.res-hero .sub{font-size:14.5px; color:var(--fg2); margin-top:10px}
.res-hero .verdict{display:inline-block; margin-bottom:10px; padding:6px 18px 6px 12px; background:var(--tc); color:var(--tc2);
  font-family:var(--fd); font-weight:900; font-style:italic; font-size:16px; letter-spacing:.08em; text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.rating{text-align:center; min-width:140px}
.rating .grade{font-size:13.5px; margin-top:4px}
.podium{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:16px}
.pod{display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--s1); border-radius:var(--r); min-width:0}
.pod .rk{font-family:var(--fd); font-weight:900; font-style:italic; font-size:34px; line-height:1; color:var(--pc)}
.pod .sw{width:5px; align-self:stretch; background:var(--tc); transform:skewX(calc(var(--slash) * -1))}
.pod .d{font-family:var(--fd); font-weight:800; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pod .t{font-size:13px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.res-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:16px; align-items:start}
.cls-head,.cls-row{display:grid; grid-template-columns:30px 4px 28px minmax(0,1fr) 84px 34px 76px 38px; gap:10px; align-items:center; padding:0 14px}
.cls-head{height:34px}
.cls-head span{font-size:12.5px; color:var(--mut)}
.cls-row{height:40px; border-top:1px solid var(--line)}
.cls-row .sw{align-self:stretch; margin-block:10px; background:var(--tc)}
.cls-row.me{background:rgba(255,255,255,.05)}
.cls-row .pos{font-family:var(--fd); font-weight:800; font-size:16px; text-align:right}
.cls-row .car{font-family:var(--fm); font-size:12px; color:var(--mut); text-align:center}
.cls-row .nm{font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cls-row .mono{font-size:12.5px; color:var(--fg2); text-align:right}
.cls-row .pts{font-family:var(--fd); font-weight:800; font-size:17px; text-align:right}
.cls-row .pts.zero{color:var(--dim); font-weight:500}
.flp{font-size:10px; color:var(--purple); font-style:normal; margin-left:3px}
.summary p{font-size:15px; line-height:1.65; color:var(--fg2); margin:0 0 10px}
.summary p:last-child{margin-bottom:0}
.ledger{display:flex; flex-direction:column}
.ledger .li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:baseline; font-size:14px; color:var(--fg2);
  padding:7px 0; border-bottom:1px solid var(--line)}
.ledger .li:last-child{border-bottom:none}
.ledger .li .d{font-family:var(--fm); font-size:13px; min-width:48px; text-align:right; color:var(--mut)}
.ledger .li .d.p{color:var(--green)} .ledger .li .d.n{color:var(--crit)}
.champs{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.champ{background:var(--s1); border-radius:var(--r); padding:16px 18px}
.champ .k{font-size:13px; color:var(--mut)}
.champ .v{font-family:var(--fd); font-weight:900; font-style:italic; font-size:26px; line-height:1.15; margin-top:4px}
.champ .s{font-size:13.5px; color:var(--fg2); margin-top:2px}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.actions button{flex:0 1 auto; min-height:50px; padding:12px 24px; border:none; border-radius:var(--r2); background:var(--s2);
  font-family:var(--fd); font-weight:700; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg)}
.actions button:hover{background:var(--s3)}
.actions button.primary{background:var(--red); color:#fff; padding-right:38px; clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.actions button.primary:hover{background:var(--red-hi)}

/* projection (unchanged data, new skin) */
.proj{border-radius:var(--r); background:var(--s2); overflow:hidden}
.proj-hd{display:flex; align-items:baseline; gap:10px; padding:10px 12px 4px}
.proj-hd .lbl{font-weight:600; color:var(--fg)}
.proj-cfg{margin-left:auto; font-size:12.5px; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proj-nums{display:grid; grid-template-columns:repeat(auto-fit,minmax(78px,1fr)); gap:1px; background:var(--line)}
.proj-nums > div{background:var(--s2); padding:8px 10px; min-width:0}
.proj-nums .k{display:block; font-size:11.5px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.proj-nums .v{display:block; font-family:var(--fm); font-size:13.5px; margin-top:2px; white-space:nowrap}
.proj-note{padding:8px 12px 10px; font-size:12.5px; color:var(--mut); line-height:1.5}
.stdrow{display:grid; grid-template-columns:28px 4px 26px minmax(0,1fr) 48px; gap:10px; align-items:center; height:34px; padding:0 16px; border-bottom:1px solid var(--line)}
.stdrow.cons{grid-template-columns:28px 4px minmax(0,1fr) 48px}
.stdrow:last-child{border-bottom:none}
.stdrow .sw{align-self:stretch; margin-block:8px; background:var(--tc)}
.stdrow.me{background:rgba(255,255,255,.05)}
.stdrow .p{font-family:var(--fd); font-weight:800; font-size:15px; color:var(--fg2); text-align:right; font-variant-numeric:tabular-nums}
.stdrow.me .p{color:var(--fg)}
.stdrow .n{font-family:var(--fm); font-size:12px; color:var(--mut)}
.stdrow .d{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stdrow .v{font-family:var(--fd); font-weight:800; font-size:15px; text-align:right; font-variant-numeric:tabular-nums}
.proj.compact .proj-nums .v{font-size:12.5px}
.proj.compact .proj-hd{padding-top:8px}
.tw{font-family:var(--fu); font-size:12px; color:var(--fg2)}
.pitwin{padding:9px 12px; border-radius:var(--r); background:var(--s2)}
.pitwin .pk{font-size:12.5px; color:var(--mut); margin-right:8px}
.pitwin .pv{font-family:var(--fd); font-weight:800; font-size:16px}
.pitwin .pe{display:block; font-size:13px; color:var(--fg2); margin-top:3px}
.pitwin.open .pv{color:var(--amber)} .pitwin.now .pv{color:var(--crit)} .pitwin.none .pv{color:var(--green)}

/* prose & misc */
.prose{max-width:66ch}
.prose h3{font-family:var(--fd); font-weight:800; font-size:21px; margin:28px 0 10px}
.prose p{color:var(--fg2); font-size:15.5px; line-height:1.7; margin:0 0 12px}
.prose ul{margin:0 0 14px; padding-left:20px; color:var(--fg2); font-size:15.5px; line-height:1.7}
.prose li{margin-bottom:4px}
.prose b{color:var(--fg)}
.tyreguide{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.tyreguide > div{display:grid; grid-template-columns:24px 120px minmax(0,1fr); gap:12px; align-items:center; padding:10px 14px;
  background:var(--s1); border-radius:4px; font-size:14.5px; color:var(--fg2)}
.tyreguide b{color:var(--fg)}
.soon{display:inline-block; font-size:13px; color:var(--amber); padding:4px 10px; border-radius:3px; background:var(--amber-soft); margin-bottom:14px}

@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* ---------- breakpoints ---------- */
@media (max-width:1180px){
  .rgrid{grid-template-columns:minmax(260px,300px) minmax(0,1fr) minmax(330px,360px)}
  .tw-row .n span{display:none}
}
@media (max-width:1060px){
  .home-stage{grid-template-columns:minmax(0,1fr); padding-top:0}
  .home-art{order:-1; margin:0 -4% 0 6%; max-width:760px}
  .home-copy{padding-bottom:30px}
  .ts-stage{grid-template-columns:minmax(0,1fr); padding:24px 22px 8px}
  .ts-car{max-width:560px}
  .ts-body,.hub6,.brief,.res-grid,.std-grid{grid-template-columns:minmax(0,1fr)}
  .garage{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dests{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* race: map + consoles side by side, tower and log underneath */
  .rgrid{grid-template-columns:minmax(0,1fr) minmax(330px,360px); grid-template-areas:"stage deck" "tower deck"; overflow-y:auto}
  .rcol.c-stage{grid-area:stage} .rcol.c-tower{grid-area:tower} .rcol.c-deck{grid-area:deck}
  .rcol.c-tower .rbox-b{max-height:420px}
}
@media (max-width:760px){
  body{font-size:14.5px}
  .scroller{padding-inline:16px}
  .nr-top{grid-template-columns:minmax(0,1fr); padding:20px 18px 4px}
  .conds{padding:10px 18px 0}
  .nr-cta{padding:16px 18px 18px}
  .nr-cta .go,.ts-cta .go{min-width:0; width:100%}
  .facts4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drivers2{grid-template-columns:minmax(0,1fr)}
  .season-strip{grid-template-columns:repeat(5,minmax(118px,1fr)); overflow-x:auto; padding:10px 18px 0}
  .devrow{grid-template-columns:minmax(0,1fr); gap:10px}
  .podium{grid-template-columns:minmax(0,1fr)}
  .res-hero{grid-template-columns:minmax(0,1fr)}
  .cls-head,.cls-row{grid-template-columns:26px 4px minmax(0,1fr) 72px 24px 30px; gap:8px; padding:0 12px}
  .cls-head .c-best,.cls-row .c-best,.cls-head .c-no,.cls-row .c-no{display:none}
  .th.drv,.tr.drv{grid-template-columns:28px 4px minmax(0,1fr) 40px 48px}
  .th .c-team,.tr .c-team{display:none}
  /* race on a phone: header, map, ONE driver at a time, then tower and log */
  /* race header on a phone: two deliberate rows */
  .rhead{gap:8px 10px; padding:8px 12px}
  .rhead .ev,.cond-mini.c-hide,.c-grip{display:none}
  .lapbox{order:1; padding:0 10px 0 0; border-left:none}
  .lapbox .v{font-size:28px}
  .flagpill{order:2; font-size:12px; padding:6px 16px 6px 10px}
  .cond-mini{order:3}
  .rhead .gear{order:4; margin-left:auto}
  .speedctl{order:5; flex:1 1 auto; margin-left:0}
  .speedctl button{flex:1; min-width:0}
  .rexit{order:6}
  .topbar .eyebrow{display:none}
  .back{white-space:nowrap}
  .ts-cta{padding:10px 16px}
  .ts-cta .sum,.ts-cta .badge{display:none}
  .ts-cta .go{font-size:16px; min-height:50px}
  .rgrid{display:flex; flex-direction:column; overflow-y:auto; padding:8px}
  .rcol.c-deck{order:1} .rcol.c-stage{order:2} .rcol.c-tower{order:3}
  .stage .tmap{max-height:200px}
}

/* PITWALL 6.1 — additions for the standalone app. The V6 stylesheet (game.css) is unchanged;
   this file only adds the approved brand images, the launch splash and the saved-career panel. */

/* ---------- approved brand marks ---------- */
.brand-mark{display:block; flex:0 0 auto; width:30px; height:30px; user-select:none; -webkit-user-select:none; -webkit-user-drag:none}
/* "lighten" lets the logo's own near-black backdrop give way to the page colour; everything in this
   column is brighter than the page, so nothing else changes. The logo image itself is untouched. */
.home-copy{mix-blend-mode:lighten}
.home-logo{margin:8px 0 0; line-height:0; font-size:0}
.home-logo img{display:block; width:min(100%, 560px); height:auto; transform:translateX(-3.8%);
  user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  /* the approved logo keeps its own dark backdrop; only the empty margin is faded into the page */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 3.4%, #000 96.6%, transparent 100%),
                     linear-gradient(180deg, transparent 0, #000 6.4%, #000 93.6%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0, #000 3.4%, #000 96.6%, transparent 100%),
             linear-gradient(180deg, transparent 0, #000 6.4%, #000 93.6%, transparent 100%);
  mask-composite:intersect}

/* ---------- launch splash (markup + critical rules live in index.html so it paints first) ---------- */
#splash.out{opacity:0; pointer-events:none}

/* ---------- saved career panel (settings) ---------- */
.savebox{border-top:1px solid var(--line); margin-top:16px; padding-top:2px}
.sv-now{font-family:var(--fd); font-weight:800; font-stretch:92%; font-size:17px; color:var(--fg)}
.opt:disabled{opacity:.45; cursor:not-allowed}
.opt:disabled:hover{background:var(--s2)}
.sv-msg{margin-top:10px; padding:10px 12px; border-radius:var(--r); font-size:13.5px; line-height:1.45; background:var(--s2); color:var(--fg2)}
.sv-msg.ok{background:var(--green-soft); color:#A7E2BE}
.sv-msg.bad{background:var(--red-soft); color:#F4A49D}
.sv-link{display:inline-block; margin-top:10px; padding:10px 0; min-height:44px; background:none; border:none; color:var(--fg2);
  font-size:13.5px; text-decoration:underline; text-underline-offset:3px}
.sv-link:hover{color:var(--fg)}
.sv-code{display:flex; flex-direction:column; gap:6px; padding:12px; background:var(--s2); border-radius:var(--r)}
.sv-code .lab{font-size:13px; color:var(--fg2)}
.sv-code textarea{width:100%; resize:vertical; min-height:64px; padding:8px 10px; border:1px solid var(--line2); border-radius:var(--r2);
  background:var(--ink); color:var(--fg); font-family:var(--fm); font-size:12px; line-height:1.4; word-break:break-all}
.sv-row{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.sv-row .note{flex:1; font-size:12px; color:var(--mut); line-height:1.4}
.sv-row .chip{flex:0 0 auto; min-height:44px}

/* ---------- installed-app comfort: no rubber-band reveal of the page edge ---------- */
html, body{overscroll-behavior:none}