/* ============================================================
   PIT WALL — F1 telemetry theme
   Palette, type and components. Edit tokens below to re-skin.
   ============================================================ */

:root{
  /* --- surfaces --- */
  --bg:        #06080d;
  --bg-2:      #0a0e16;
  --panel:     #10151f;
  --panel-2:   #161d2b;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);

  /* --- ink --- */
  --txt:       #e9edf4;
  --txt-2:     #a8b3c4;
  --dim:       #6d7889;

  /* --- signal colours (meaning, not decoration) --- */
  --amber:     #ffb400;   /* primary action / sodium pit light */
  --amber-dk:  #c98c00;
  --live:      #00e5a0;   /* still in it / gain */
  --dead:      #ff3b47;   /* eliminated / loss */
  --purple:    #b47cff;   /* session best, as per timing screens */
  --green:     #4ade80;   /* personal best */
  --yellow:    #facc15;   /* caution */

  /* --- geometry --- */
  --r:   4px;
  --r-lg: 8px;
  --gut: clamp(16px, 4vw, 40px);
  --maxw: 1320px;

  --ff-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --ff-body:    "Barlow", system-ui, -apple-system, sans-serif;
  --ff-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(255,180,0,.07), transparent 60%),
    radial-gradient(900px 500px at 8% 4%, rgba(0,229,160,.05), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color:var(--txt);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* faint horizontal scanlines — reads as a timing monitor, not a gimmick */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; border-radius:2px; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:800;
  letter-spacing:.005em;
  margin:0;
  line-height:1.02;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem,7vw,5.2rem); }
h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); }
h3{ font-size:1.22rem; letter-spacing:.02em; }

.eyebrow{
  font-family:var(--ff-mono);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim);
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{
  content:""; width:22px; height:2px; background:var(--amber); flex:none;
}
.mono{ font-family:var(--ff-mono); font-variant-numeric:tabular-nums; }
.num { font-family:var(--ff-mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.muted{ color:var(--txt-2); }
.dim{ color:var(--dim); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); position:relative; z-index:1; }
.section{ padding-block:clamp(40px,6vw,72px); }
.section + .section{ border-top:1px solid var(--line); }
.stack{ display:flex; flex-direction:column; gap:1.5rem; }
.row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.spread{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(6,8,13,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; height:60px;
}
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--ff-display); font-weight:800; font-size:1.32rem; letter-spacing:.06em; text-transform:uppercase; }
.brand .tick{ width:5px; height:26px; background:var(--amber); box-shadow:0 0 14px rgba(255,180,0,.55); flex:none; }
.brand small{ font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.2em; color:var(--dim); font-weight:400; }

.nav{ display:flex; gap:.25rem; align-items:center; }
.nav a{
  font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.55rem .8rem; color:var(--txt-2); border-radius:var(--r);
  transition:color .18s, background .18s;
}
.nav a:hover{ color:var(--txt); background:rgba(255,255,255,.05); }
.nav a[aria-current="page"]{ color:var(--bg); background:var(--amber); font-weight:700; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r); padding:.4rem .6rem; cursor:pointer; }

@media (max-width:840px){
  .nav-toggle{ display:block; }
  .nav{
    position:absolute; top:60px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:.5rem var(--gut) 1rem;
  }
  .nav[hidden]{ display:none; }
  .nav a{ padding:.85rem .5rem; border-bottom:1px solid var(--line); }
}

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:1.25rem 1.35rem;
  position:relative;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:.7rem; margin-bottom:1rem; border-bottom:1px solid var(--line);
}
.grid{ display:grid; gap:1rem; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

/* ---------- stat block ---------- */
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:1rem 1.1rem; }
.stat .k{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); }
.stat .v{ font-family:var(--ff-display); font-weight:800; font-size:clamp(1.9rem,4.5vw,2.8rem); line-height:1; margin-top:.35rem; }
.stat .v small{ font-size:.42em; color:var(--txt-2); font-weight:600; margin-left:.2em; }
.stat .s{ font-size:.82rem; color:var(--txt-2); margin-top:.35rem; }
.stat.hot .v{ color:var(--amber); }
.stat.good .v{ color:var(--live); }
.stat.bad .v{ color:var(--dead); }

/* ---------- buttons / controls ---------- */
.btn{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--amber); color:#0a0a0a; border:none; border-radius:var(--r);
  padding:.72rem 1.1rem; cursor:pointer; font-weight:700;
  transition:filter .15s, transform .1s;
}
.btn:hover{ filter:brightness(1.12); }
.btn:active{ transform:translateY(1px); }
.btn.ghost{ background:transparent; color:var(--txt-2); border:1px solid var(--line-2); }
.btn.ghost:hover{ color:var(--txt); border-color:var(--amber); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

.chipbar{ display:flex; gap:.4rem; flex-wrap:wrap; }
.chip{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.45rem .75rem; border:1px solid var(--line-2); border-radius:100px;
  background:transparent; color:var(--txt-2); cursor:pointer; white-space:nowrap;
}
.chip:hover{ border-color:var(--amber); color:var(--txt); }
.chip[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:#0a0a0a; font-weight:700; }

label.field{ display:block; }
label.field > span{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); display:block; margin-bottom:.4rem; }
select, input[type=number]{
  width:100%; background:var(--bg-2); border:1px solid var(--line-2); color:var(--txt);
  border-radius:var(--r); padding:.6rem .7rem; font-family:var(--ff-mono); font-size:.85rem;
}
input[type=range]{ width:100%; accent-color:var(--amber); }

/* ---------- flags / badges ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:100px; border:1px solid currentColor; font-weight:600;
}
.badge.live{ color:var(--live); }
.badge.dead{ color:var(--dead); }
.badge.warn{ color:var(--yellow); }
.badge.info{ color:var(--txt-2); }
.dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.dot.pulse{ animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.8);} }

/* ---------- driver card grid (SIMULATOR SIGNATURE) ---------- */
.driver-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:.7rem; }

.dcard{
  position:relative; overflow:hidden; cursor:pointer;
  background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--team,#666);
  border-radius:var(--r); padding:.85rem .9rem .8rem;
  text-align:left; width:100%;
  transition:transform .16s ease, border-color .16s, background .16s;
}
.dcard:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.dcard .no{
  font-family:var(--ff-display); font-weight:800; font-size:2.7rem; line-height:.85;
  color:var(--team,#888); opacity:.9;
}
.dcard .fn{ font-family:var(--ff-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:.5rem; }
.dcard .ln{ font-family:var(--ff-display); font-weight:800; font-size:1.34rem; letter-spacing:.01em; line-height:1; }
.dcard .tm{ font-size:.72rem; color:var(--txt-2); margin-top:.25rem; }
.dcard .pts{ font-family:var(--ff-mono); font-size:.72rem; color:var(--txt-2); margin-top:.5rem; padding-top:.5rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; }
.dcard .pts b{ color:var(--txt); }

.dcard[data-state="alive"]{ box-shadow:inset 0 0 0 1px rgba(0,229,160,.12); }
.dcard[data-state="alive"]:hover{ border-color:var(--live); }
.dcard[data-state="selected"]{ border-color:var(--amber); background:var(--panel-2); box-shadow:0 0 0 1px var(--amber), 0 12px 34px rgba(255,180,0,.14); }

/* no realistic path (model-based): dimmed, softly blurred, amber hazard */
.dcard[data-state="nopath"]{ filter:grayscale(.85) brightness(.62); }
.dcard[data-state="nopath"] .ln,
.dcard[data-state="nopath"] .no{ filter:blur(2.2px); }
.dcard[data-state="nopath"]::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,180,0,.10) 0 8px, transparent 8px 18px);
}
.dcard[data-state="nopath"]::before{
  content:"0%"; position:absolute; top:.55rem; right:.6rem; z-index:2;
  font-family:var(--ff-mono); font-size:.55rem; letter-spacing:.14em; font-weight:700;
  color:var(--amber); border:1px solid var(--amber); border-radius:2px; padding:.1rem .3rem;
}
.dcard[data-state="nopath"]:hover{ filter:grayscale(.5) brightness(.8); transform:translateY(-3px); }

/* eliminated by mathematics: greyed, blurred, hazard-striped */
.dcard[data-state="out"]{ filter:grayscale(1) brightness(.5); }
.dcard[data-state="out"] .ln,
.dcard[data-state="out"] .no,
.dcard[data-state="out"] .tm{ filter:blur(3.5px); }
.dcard[data-state="out"]::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(255,59,71,.16) 0 8px, transparent 8px 18px);
}
.dcard[data-state="out"]::before{
  content:"OUT"; position:absolute; top:.55rem; right:.6rem; z-index:2;
  font-family:var(--ff-mono); font-size:.55rem; letter-spacing:.2em; font-weight:700;
  color:var(--dead); border:1px solid var(--dead); border-radius:2px; padding:.1rem .3rem;
}
.dcard[data-state="out"]:hover{ filter:grayscale(.75) brightness(.72); transform:translateY(-3px); }

/* ---------- team radio overlay (broadcast lower-third) ---------- */
.radio-scrim{
  position:fixed; inset:0; z-index:200; display:grid; place-items:end center;
  padding:0 var(--gut) clamp(28px,8vh,84px);
  background:rgba(3,5,9,.62); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .22s;
}
.radio-scrim.on{ opacity:1; pointer-events:auto; }
.radio{
  width:min(680px,100%);
  background:linear-gradient(180deg,#12161f,#0a0d14);
  border:1px solid var(--line-2); border-left:5px solid var(--team,var(--amber));
  border-radius:var(--r-lg); padding:1rem 1.15rem;
  box-shadow:0 26px 70px rgba(0,0,0,.7);
  transform:translateY(18px); transition:transform .28s cubic-bezier(.2,.9,.3,1);
}
.radio-scrim.on .radio{ transform:translateY(0); }
.radio-top{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.radio-top .who{ font-family:var(--ff-display); font-weight:800; font-size:1.06rem; letter-spacing:.05em; text-transform:uppercase; }
.radio-top .tag{ font-family:var(--ff-mono); font-size:.55rem; letter-spacing:.2em; color:var(--dead); border:1px solid var(--dead); padding:.1rem .35rem; border-radius:2px; }
.radio-line{ font-size:1.06rem; line-height:1.45; }
.radio-line::before{ content:"“"; color:var(--amber); }
.radio-line::after{ content:"”"; color:var(--amber); }
.radio-from{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin-top:.5rem; }

.wave{ display:flex; align-items:flex-end; gap:2px; height:16px; }
.wave i{ width:2px; background:var(--amber); animation:wv .9s ease-in-out infinite; border-radius:1px; }
@keyframes wv{ 0%,100%{ height:3px; opacity:.5 } 50%{ height:15px; opacity:1 } }

/* ---------- timing table ---------- */
.tt{ width:100%; border-collapse:collapse; font-family:var(--ff-mono); font-size:.82rem; }
.tt th{
  text-align:left; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); font-weight:500; padding:.5rem .6rem; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.tt td{ padding:.55rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
.tt tbody tr{ transition:background .12s; }
.tt tbody tr:hover{ background:rgba(255,255,255,.032); }
.tt .pos{ color:var(--dim); width:2.4rem; }
.tt .drv{ font-family:var(--ff-display); font-weight:700; font-size:1rem; letter-spacing:.03em; text-transform:uppercase; }
.tt .team-stripe{ display:inline-block; width:3px; height:15px; background:var(--team,#666); margin-right:.55rem; vertical-align:-2px; border-radius:2px; }
.tt .r{ text-align:right; }
.tt .best{ color:var(--purple); font-weight:700; }
.tt .pb{ color:var(--green); }
.tt .gain{ color:var(--live); }
.tt .loss{ color:var(--dead); }
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ---------- tyre stints gantt ---------- */
.stint-row{ display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem; }
.stint-name{ width:74px; flex:none; font-family:var(--ff-display); font-weight:700; text-transform:uppercase; font-size:.9rem; }
.stint-bar{ flex:1; display:flex; height:19px; border-radius:3px; overflow:hidden; background:var(--bg-2); }
.stint{ display:grid; place-items:center; font-family:var(--ff-mono); font-size:.58rem; font-weight:700; color:#08090c; }
.c-SOFT{ background:#ff3b47 } .c-MEDIUM{ background:#facc15 }
.c-HARD{ background:#e6e9ee } .c-INTERMEDIATE{ background:#4ade80 } .c-WET{ background:#3b82f6; color:#fff }
.c-UNKNOWN{ background:#3a4353; color:#c8d0dc }

/* ---------- news ---------- */
.news-item{
  display:block; padding:1rem 0; border-bottom:1px solid var(--line);
  transition:padding-left .18s, border-color .18s;
}
.news-item:hover{ padding-left:.6rem; border-color:var(--amber); }
.news-item .src{ font-family:var(--ff-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); }
.news-item .ttl{ font-family:var(--ff-display); font-weight:700; font-size:1.16rem; text-transform:none; letter-spacing:0; margin-top:.2rem; }
.news-item .dsc{ color:var(--txt-2); font-size:.9rem; margin-top:.3rem; }

/* ---------- misc ---------- */
.notice{
  border:1px solid var(--line-2); border-left:3px solid var(--amber);
  background:rgba(255,180,0,.05); border-radius:var(--r);
  padding:.85rem 1rem; font-size:.9rem; color:var(--txt-2);
}
.notice.err{ border-left-color:var(--dead); background:rgba(255,59,71,.06); }
.skeleton{ background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%); background-size:200% 100%; animation:sk 1.3s infinite; border-radius:var(--r); height:1em; }
@keyframes sk{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

.bar-track{ height:7px; background:var(--bg-2); border-radius:100px; overflow:hidden; border:1px solid var(--line); }
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--amber-dk),var(--amber)); transition:width .5s cubic-bezier(.2,.9,.3,1); }
.bar-fill.live{ background:linear-gradient(90deg,#00a374,var(--live)); }

footer{ border-top:1px solid var(--line); padding-block:2.2rem; color:var(--dim); font-size:.82rem; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}