:root{
    /* One column width for the whole site. The nav row, every page's <main>
       and the results sidebar+detail layout are all centred on it, so the
       content's left edge is in the same place on every page. The banner and
       the header's background stay full-bleed behind it. */
    --content:1400px;
    --bg:#0a0b0d; --panel:#15161a; --panel2:#1c1e23; --line:#2a2c33;
    --text:#eef0f3; --dim:#8b93a3; --accent:#3ddc84; --accent2:#1ec8ff; --good:#2ecc71; --bad:#e0523f;
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
  header{padding:0;border-bottom:2px solid var(--accent);background:var(--panel);position:relative}
  .banner{display:block}
  .banner img{display:block;width:100%;height:60px;object-fit:cover;object-position:center}
  .crest{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:3;display:block;line-height:0}
  .crest img{display:block;height:112px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
  /* Lives in the content area of the pages it applies to, not the header --
     drivers, tracks and profiles span every series, so a header-wide picker
     implied a filter that did nothing on half the site. */
  .series-switcher{display:flex;align-items:center;gap:8px;margin:0 0 18px}
  .series-switcher label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-weight:800;margin:0}
  .series-switcher select{padding:7px 10px;border-radius:2px;border:1px solid var(--line);background:var(--panel2);color:var(--dim);font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
  .series-switcher select:hover{color:var(--text);border-color:var(--dim)}
  /* Keep the first section heading tight against it. */
  .series-switcher + .title{margin-top:0}
  /* Sidebar variant on the results page, aligned with the filter chips. */
  .series-switcher.in-side{padding:12px 12px 0;margin:0}
  /* The PMR site: same page, different accent, so nobody mistakes one
     site's standings for the other's. */
  body.site-pmr{--accent:#ffb454;--accent2:#ffd08a}
  /* The profile's ACC / PMR switch: a two-segment pill beside the name. */
  .game-toggle{display:inline-flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;font-size:11px;font-weight:800;letter-spacing:.06em;vertical-align:middle}
  .game-toggle span,.game-toggle a{padding:4px 10px;text-decoration:none;color:var(--dim)}
  .game-toggle .on{background:var(--accent);color:#04121a}
  .game-toggle a:hover{color:var(--text);background:var(--panel2)}
  /* Which game a calendar entry is. Two cues that don't depend on the
     series colour: a solid tag in the game's own colour, and for PMR a tint
     across the whole entry (ACC keeps the plain panel, being the original
     site). The game colours are the two sites' accents. */
  :root{--game-acc:#3ddc84;--game-pmr:#ffb454}
  .cal-game{display:inline-block;padding:1px 6px;margin-right:6px;border-radius:2px;font-size:10px;font-weight:800;letter-spacing:.08em;vertical-align:1px;color:#0b0e13;background:var(--dim)}
  .cal-ev.game-acc .cal-game,.cal-row.game-acc .cal-game,.cal-key.game-acc .cal-game{background:var(--game-acc)}
  .cal-ev.game-pmr .cal-game,.cal-row.game-pmr .cal-game,.cal-key.game-pmr .cal-game{background:var(--game-pmr)}
  .cal-ev.game-pmr,.cal-row.game-pmr{background:linear-gradient(90deg,rgba(255,180,84,.16),rgba(255,180,84,.06));box-shadow:inset 0 0 0 1px rgba(255,180,84,.28)}
  .cal-ev.game-pmr:hover,.cal-row.game-pmr:hover{background:linear-gradient(90deg,rgba(255,180,84,.26),rgba(255,180,84,.12))}
  .cal-key-game{padding:2px 6px 2px 0;font-weight:800}
  .cal-legend-sep{display:inline-block;width:1px;height:14px;background:var(--line);margin:0 6px;vertical-align:middle}
  main{padding:20px;max-width:var(--content);margin-inline:auto;width:100%}
  .title{font-size:15px;margin:24px 0 12px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;padding-left:10px;border-left:3px solid var(--accent)}
  .title:first-child{margin-top:0}
  .sub{color:var(--dim);font-size:13px;margin-bottom:16px}
  /* Tables want the full column width; prose does not. The explanatory
     paragraphs under a heading are direct children of <main>, so cap the
     measure on those without touching the inline .sub spans used inside
     rows, cells and form fields. */
  main > p.sub{max-width:92ch}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:8px}
  table{border-collapse:collapse;width:100%;min-width:420px;font-variant-numeric:tabular-nums}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:8px 10px;border-bottom:2px solid var(--line);font-weight:800;white-space:nowrap}
  td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;white-space:nowrap}
  /* The bracketed "left on the table" figure beside a theoretical lap, on both
     the Tracks table and the driver profile's Pace by track. Smaller and dimmed
     so the lap time stays the number being read and this stays an annotation --
     at the cell's own size and colour the two looked like rival readings. The
     margin is here rather than as a space in the markup: the cells are mono, so
     a literal space between them is a full character wide. */
  td.theo .gain{color:var(--dim);font-size:12px;margin-left:5px}
  tr:hover td{background:var(--panel)}
  td.pos{width:36px;color:var(--dim)}
  td.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
  td.zero{color:var(--dim)}
  th.wkhead{text-align:center;border-left:1px solid var(--line)}
  th.rndhead{text-align:center;border-left:1px solid var(--line);font-size:11px}
  th.tothead,td:last-child{border-left:1px solid var(--line)}
  th.wkhead+th.wkhead{border-left:1px solid var(--line)}
  .empty{color:var(--dim);padding:24px 0}
  /* Sized to content, not the page: with every other column fixed, a
     full-width table hands all the slack to the name column, and early in
     a season (one round scored) that put the points half a screen away
     from the names. The name column has a fixed share too, so the tables
     on a page still line up with each other -- they're just narrower. */
  table.standings{table-layout:fixed;width:auto;min-width:0}
  /* The standings page as a whole shrinks to its widest table and sits in
     the middle of the window, so titles, notes and tables share one left
     edge instead of a narrow table hanging off the far left. Prose would
     otherwise push the block out to max-width (a paragraph's intrinsic
     width is its unwrapped length), so it's told to contribute nothing
     and wrap to whatever the tables decide. */
  main.fit{width:fit-content;min-width:min(100%,520px);max-width:min(var(--content),100%)}
  main.fit .sub,main.fit .empty{contain:inline-size}
  table.standings .c-pos{width:42px}
  table.standings .c-name{width:280px}
  table.standings .c-name.wide{width:412px} /* name + team, see render_standings_table() */
  @media(max-width:700px){table.standings .c-name{width:200px}table.standings .c-name.wide{width:200px}}
  table.standings .c-team{width:132px}
  table.standings .c-rnd{width:56px}
  table.standings .c-tot{width:68px}
  table.standings td{overflow:hidden;text-overflow:ellipsis}
  td a,.dlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--dim)}
  td a:hover,.dlink:hover{color:var(--accent);border-bottom-color:var(--accent)}
  .err{background:#3a1416;border:1px solid #7c2b2b;color:#ffb4b4;padding:12px 14px;border-radius:2px;margin-bottom:16px;font-size:14px}
  .warn{background:#3a2f14;border:1px solid #7c632b;color:#ffdca8;padding:12px 14px;border-radius:2px;margin-bottom:16px;font-size:14px}
  .btn{padding:8px 16px;border-radius:2px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:background .15s,border-color .15s}
  .btn:hover{background:var(--line);border-color:var(--accent)}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:16px;margin-bottom:20px}
  .panel h3{margin:0 0 12px;font-size:14px}
  label{display:block;margin-bottom:10px;font-size:13px;color:var(--dim)}
  input[type=text],textarea{width:100%;margin-top:4px;padding:8px;border-radius:2px;border:1px solid #333a48;background:#0a0b0d;color:var(--text);font-size:14px;box-sizing:border-box;font-family:inherit}
  textarea{min-height:60px}
  .sess-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}
  .sess-row .name{color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
  .suggest{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
  .suggest:last-child{border-bottom:0}
  /* Licence badges, mirrored off a driver's Discord role. Deliberately NOT
     shaped like the class badges above: those are outlined, tinted text on a
     transparent ground, so a licence gets the inverse -- solid fill, white
     text. The two sit side by side in a results row and have to read as
     different KINDS of label at a glance, not as two members of one set.
     Smaller too, since a licence annotates a name rather than being a column
     of its own. Mirrored in admin.css; the two blocks must stay in step. */
  .lic{
    display:inline-block; margin-left:6px; vertical-align:middle;
    font-size:9px; line-height:1.6; padding:0 5px; border-radius:2px;
    font-weight:800; letter-spacing:.04em; text-transform:uppercase;
    color:rgba(255,255,255,.92); white-space:nowrap;
  }
  /* Fills are alpha rather than solid so the badge sinks into the row: at
     full strength four saturated blocks pulled the eye straight past the
     names they annotate. White text drops just off pure so it reads as a
     label rather than the brightest thing in the row. */
  .lic-pro{background:rgba(192,57,43,.72)}     /* red */
  .lic-proam{background:rgba(30,122,69,.72)}   /* green */
  .lic-am{background:rgba(37,99,235,.72)}      /* blue */
  .lic-rookie{background:rgba(107,114,128,.72)}/* grey */
  .badge{font-size:10px;padding:3px 8px;border-radius:2px;border:1px solid var(--line);color:var(--dim);white-space:nowrap;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .badge.cls-GT3{border-color:#e2453d;color:#ff8a84}
  .badge.cls-GT4{border-color:#3d9be2;color:#8ac6ff}
  .badge.cls-GT2{border-color:#e2b23d;color:#ffd97e}
  .badge.cls-GTC{border-color:#8b5de2;color:#c6a8ff}
  .badge.cls-TCX{border-color:#4ade80;color:#8cf0af}
  .badge.cls-CUP{border-color:#e23d8b;color:#ff8ac6}
  .badge.cls-CHL{border-color:#e2733d;color:#ffab7e}
  .badge.cls-ST{border-color:#3de2c8;color:#7ef5e0}
  *{box-sizing:border-box}
  body{margin:0;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
  header{padding:0;border-bottom:2px solid transparent;border-image:linear-gradient(90deg,var(--accent),var(--accent2)) 1;background:var(--panel);position:relative}
  .banner{display:block}
  .banner img{display:block;width:100%;height:60px;object-fit:cover;object-position:center}
  .crest{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:3;display:block;line-height:0}
  .crest img{display:block;height:112px;width:auto;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
  /* ---- the menu -------------------------------------------------------
     One control on every screen size: a box carrying the site's tag, the
     name of the page you're on, and the three lines. Open it and every
     page is listed with the current one highlighted, and at the bottom the
     way to the other site. A checkbox drives it, so it works without JS;
     the small script in render_nav() only adds click-away and Escape. */
  .nav{display:flex;align-items:center;padding:10px 20px;position:relative;max-width:var(--content);margin-inline:auto;width:100%}
  .nav-toggle{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
  .nav-btn{display:inline-flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:2px;background:var(--panel2);color:var(--text);cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;user-select:none}
  .nav-btn:hover{border-color:var(--dim)}
  .nav-toggle:checked ~ .nav-btn{border-color:var(--accent)}
  .nav-btn .burger{font-size:18px;line-height:1;color:var(--dim);margin-left:4px}
  .nav-toggle:checked ~ .nav-btn .burger{color:var(--accent)}
  .site-tag{display:inline-block;padding:4px 8px;border-radius:2px;background:var(--accent);color:#04121a;font-size:11px;font-weight:800;letter-spacing:.08em}
  .nav-menu{display:none;position:absolute;top:100%;left:20px;flex-direction:column;min-width:230px;background:var(--panel2);border:1px solid var(--line);border-radius:2px;box-shadow:0 10px 24px rgba(0,0,0,.45);overflow:hidden;z-index:30}
  .nav-toggle:checked ~ .nav-menu{display:flex}
  .nav-menu a{padding:12px 16px;color:var(--dim);text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
  .nav-menu a:hover{background:var(--line);color:var(--text)}
  .nav-menu a.active{background:var(--accent);color:#04121a}
  .nav-menu .sep{height:1px;background:var(--line);margin:4px 0}
  .nav-menu a.site-switch{display:flex;align-items:center;gap:8px}
  .nav-menu a.site-switch .site-tag{background:var(--line);color:var(--text)}
  .wrap{display:grid;grid-template-columns:340px 1fr;gap:0;min-height:calc(100vh - 110px);max-width:var(--content);margin-inline:auto}
  /* Phones and small tablets get the mobile layout whatever way round
     they're held: pointer:coarse catches a touch device in landscape that
     is wider than the phone breakpoint. */
  @media(max-width:820px),(pointer:coarse) and (max-width:1100px){.wrap{grid-template-columns:1fr}.side{max-height:340px}}
  /* The badge is sized to spill onto the nav row deliberately. On a phone
     it would sit on the menu button, so shrink it and push the row down. */
  @media(max-width:820px),(pointer:coarse) and (max-width:1100px){
    .crest{top:-8px}
    .crest img{height:84px}
    .nav{padding-top:30px}
  }
  .side{border-right:1px solid var(--line);overflow:auto;background:var(--bg)}
  .filters{display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);flex-wrap:wrap}
  .chip{padding:6px 14px;border-radius:2px;border:1px solid var(--line);background:transparent;color:var(--dim);cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;transition:background .15s,color .15s,border-color .15s}
  .chip:hover{color:var(--text);border-color:var(--dim)}
  .chip.on{background:var(--accent);border-color:var(--accent);color:#04121a}
  .weekend-head{padding:9px 14px;background:var(--panel2);border-bottom:1px solid var(--line);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .weekend-count{font-size:11px;font-weight:400;color:var(--dim);text-transform:none;letter-spacing:0}
  .clstitle{font-size:13px;margin:26px 0 8px;display:flex;align-items:center;gap:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
  .clstitle:first-of-type{margin-top:14px}
  .clstitle .cnt{color:var(--dim);font-weight:400;font-size:13px}
  .item{padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:center;transition:background .12s,box-shadow .12s}
  .item:hover{background:var(--panel2)}
  .item.sel{background:var(--panel2);box-shadow:inset 3px 0 0 var(--accent)}
  .item .when{font-size:14px}
  .badge{font-size:10px;padding:3px 8px;border-radius:2px;border:1px solid var(--line);color:var(--dim);white-space:nowrap;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
  .badge.race{border-color:var(--accent2);color:#8ac6ff}
  .badge.cls-GT3{border-color:#e2453d;color:#ff8a84}
  .badge.cls-GT4{border-color:#3d9be2;color:#8ac6ff}
  .badge.cls-GT2{border-color:#e2b23d;color:#ffd97e}
  .badge.cls-GTC{border-color:#8b5de2;color:#c6a8ff}
  .badge.cls-TCX{border-color:#4ade80;color:#8cf0af}
  .badge.cls-CUP{border-color:#e23d8b;color:#ff8ac6}
  .badge.cls-CHL{border-color:#e2733d;color:#ffab7e}
  .badge.cls-ST{border-color:#3de2c8;color:#7ef5e0}
  /* The results page only: its <main> is the detail pane beside the session
     list, and the lighter fill is what separates the two. Everywhere else a
     panel-coloured <main> just drew a lighter rectangle over part of the
     page, which is what made the centring look off in the first place. */
  main{padding:20px;overflow:auto}
  .wrap > main{background:var(--panel);max-width:none}
  .title{font-size:17px;margin:0 0 4px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;padding-left:10px;border-left:3px solid var(--accent)}
  .sub{color:var(--dim);font-size:13px;margin-bottom:16px}
  .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{border-collapse:collapse;width:100%;min-width:520px;font-variant-numeric:tabular-nums}
  th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);padding:8px 10px;border-bottom:2px solid var(--line);font-weight:800}
  td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:14px;transition:background .1s}
  tr:hover td{background:var(--panel2)}
  td.pos{width:44px;color:var(--dim)}
  tr:nth-child(1) td.pos{color:#ffd54a;font-weight:700}
  tr:nth-child(2) td.pos{color:#cbd5e1;font-weight:700}
  tr:nth-child(3) td.pos{color:#d8a06a;font-weight:700}
  td.num{width:60px;color:var(--dim);white-space:nowrap}
  .carnum{color:var(--dim);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;margin-right:2px}
  /* The car sits under the driver's name rather than in its own column --
     the longest car names were what made the table scroll. */
  td.drv{padding-top:7px;padding-bottom:7px;line-height:1.3}
  td.drv .car{display:block;color:var(--dim);font-size:12px;margin-top:2px}
  td.mono{font-family:ui-monospace,Menlo,Consolas,monospace}
  .empty{color:var(--dim);padding:40px 0;text-align:center}
  .err{background:#3a1416;border:1px solid #7c2b2b;color:#ffb4b4;padding:12px 14px;border-radius:2px;margin-bottom:16px;font-size:14px}
  .actions{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
  .btn{padding:8px 16px;border-radius:2px;border:1px solid var(--line);background:var(--panel2);color:var(--text);cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;display:inline-block;transition:background .15s,border-color .15s}
  .btn:hover{background:var(--line);border-color:var(--accent)}
  .spin{color:var(--dim);padding:40px 0;text-align:center}
  tr.lapsrow{cursor:pointer}
  tr.lapsdetail td{background:var(--panel2);padding:12px}
  .laps-wrap table{min-width:0}
  .laps-wrap th{font-size:11px}
  .laps-wrap td{padding:6px 10px;font-size:13px}
  tr.lap-invalid td:nth-child(-n+6){color:#ff5c5c}
  tr.lap-best td:nth-child(-n+6){background:rgba(59,130,246,.32);color:#bfe0ff}
  td.sector-best{background:#9b30ff;color:#fff;font-weight:800}
  /* The class's fastest valid lap, which is worth a point. Translucent
     green rather than a solid fill, so the row underneath still reads as a
     row -- same treatment as .lap-best in the lap table. */
  td.fastlap{background:rgba(61,220,132,.28);color:#8cf0af;font-weight:800}
  td.pts{white-space:nowrap}
  .bonus{display:inline-block;margin-left:5px;padding:0 4px;border:1px solid var(--accent);border-radius:2px;color:var(--accent);font-size:9.5px;font-weight:800;letter-spacing:.05em;line-height:14px;vertical-align:1px;font-family:system-ui,sans-serif}
  .bonus.dq{border-color:var(--bad);color:var(--bad)}
  .pts-note{margin-top:10px}
  .pos-gain{color:#4ade80}
  .pos-loss{color:#ff8a84}
  details.panel{padding:0}
  details.panel > summary{list-style:none;cursor:pointer;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;font-weight:700}
  details.panel > summary::-webkit-details-marker{display:none}
  details.panel > summary::before{content:'\25B8';display:inline-block;margin-right:8px;color:var(--dim);transition:transform .12s}
  details.panel[open] > summary::before{transform:rotate(90deg)}
  details.panel > summary:hover{color:var(--accent)}
  details.panel > .panel-body{padding:0 16px 16px}
  .pos-same{color:var(--dim)}
.series-graphic{margin:32px auto 0;max-width:720px}
.series-graphic img{display:block;width:100%;height:auto;border-radius:10px}

/* ---- Calendar ---------------------------------------------------------- */
.cal-top{flex-wrap:wrap}
.cal-top .btn{text-decoration:none;font-size:12px}
.cal-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.cal-month{margin:0 4px;font-size:20px;font-weight:800;letter-spacing:.02em;min-width:170px}
.cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto;font-size:12px;color:var(--dim)}
.cal-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:28px}
.cal-dow{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);font-weight:800;padding:4px 8px}
.cal-day{background:var(--panel);border:1px solid var(--line);border-radius:3px;min-height:96px;padding:6px;display:flex;flex-direction:column;gap:4px}
.cal-day.out{opacity:.4}
.cal-day.today{border-color:var(--accent)}
.cal-num{font-size:12px;color:var(--dim);font-weight:800}
.cal-day.today .cal-num{color:var(--accent)}
.cal-ev{display:block;text-decoration:none;color:var(--text);background:var(--panel2);border-left:3px solid var(--c);border-radius:2px;padding:5px 7px;font-size:12px;line-height:1.3}
.cal-ev:hover{background:var(--line)}
.cal-ev.past{opacity:.75}
.cal-ev-series{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--c);font-weight:800}
.cal-ev-track{display:block;font-weight:800}
.cal-ev-meta{display:block;color:var(--dim);font-size:11px}
/* A race that has run and has results: the whole card links straight to
   them, and says so with a pill in the series colour. Not dimmed like a
   bare past date -- this is the card people come back for. */
.cal-ev.done{opacity:1}
.cal-ev-results{display:inline-block;margin-top:5px;padding:2px 7px;border-radius:2px;background:var(--c);color:#0b0e13;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.cal-ev.done:hover .cal-ev-results{filter:brightness(1.15)}
.cal-row-results{margin-left:auto;padding:5px 10px;border-radius:2px;background:var(--c);color:#0b0e13;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.cal-row-results.pending{background:transparent;color:var(--dim);border:1px solid var(--line)}
.cal-lists{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cal-row{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--text);padding:10px 12px;border-left:3px solid var(--c);background:var(--panel);border-radius:2px;margin-bottom:6px}
.cal-row:hover{background:var(--panel2)}
.cal-row-date{display:flex;flex-direction:column;min-width:84px;font-size:12px;color:var(--dim)}
.cal-row-date strong{color:var(--text);font-size:13px}
.cal-row-main{display:flex;flex-direction:column;font-size:13px;color:var(--dim)}
.cal-row-main strong{color:var(--text);font-size:14px}
@media(max-width:700px){
  .cal-grid{display:none}
  .cal-lists{grid-template-columns:1fr}
  .cal-legend{margin-left:0}
}

/* ---- Race page --------------------------------------------------------- */
.race-hero{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:3px;padding:18px 20px;margin-bottom:20px}
.race-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--c);font-weight:800}
.race-title{margin:4px 0 8px;font-size:28px;font-weight:800;letter-spacing:.01em}
.race-when{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--dim)}
.race-when strong{color:var(--text)}
.race-notes{margin:12px 0 0;color:var(--text);font-size:14px}
.race-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.entrants{padding:8px 16px}
.entrant{padding:10px 0;border-bottom:1px solid var(--line)}
.entrant:last-child{border-bottom:0}
.entrant-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.entrant-drivers{margin-top:4px;font-size:13px;display:flex;gap:12px;flex-wrap:wrap}
.entrant-line{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.entrant-line:last-child{border-bottom:0}
@media(max-width:820px){.race-cols{grid-template-columns:1fr}}

/* ---- Surface layering ---------------------------------------------------
   Three tones do the separating instead of hairlines everywhere: the page,
   a slightly lifted panel (sidebar, cards), and a lighter band inside a
   card for its header. Corners sit at 6px -- rounder than the old 2px, not
   as soft as a consumer dashboard. Green stays the one accent. */
:root{--bg:#0d1117;--panel:#151b24;--panel2:#1c2633;--side:#141a22;--line:#232c38;--radius:3px}
.badge{border:0;background:rgba(139,147,163,.14)}
.badge.race{background:rgba(30,200,255,.16)}
.badge.cls-GT3{background:rgba(226,69,61,.18)}
.badge.cls-GT4{background:rgba(61,155,226,.18)}
.badge.cls-GT2{background:rgba(226,178,61,.18)}
.badge.cls-GTC{background:rgba(139,93,226,.18)}
.badge.cls-TCX{background:rgba(74,222,128,.18)}
.badge.cls-CUP{background:rgba(226,61,139,.18)}
.badge.cls-CHL{background:rgba(226,115,61,.18)}
.badge.cls-ST{background:rgba(61,226,200,.18)}
.panel{border:0;border-radius:var(--radius)}
th{border-bottom:1px solid var(--line)}
td{border-bottom:0}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.025)}
tr:hover td{background:rgba(255,255,255,.05)}

/* Results page: the session list is its own panel; the detail is a card. */
.wrap{gap:18px;padding:18px 20px;min-height:0;grid-template-columns:300px minmax(0,1fr)}
.side{background:var(--side);border:0;border-radius:var(--radius);padding:6px 8px 8px;align-self:start;position:sticky;top:12px;max-height:calc(100vh - 24px)}
.series-switcher.in-side{padding:10px 8px 4px}
.filters{background:transparent;border:0;padding:8px 4px 10px;position:static}
.weekend-head{background:var(--panel2);border:0;border-left:3px solid var(--accent2);border-radius:0;color:var(--text);font-size:12px;font-weight:800;letter-spacing:.06em;padding:9px 12px;margin:12px 0 4px}
.weekend:first-child .weekend-head{margin-top:4px}
.item{background:var(--panel);border:0;border-radius:var(--radius);margin:0 0 3px;padding:10px 12px}
.item:hover{background:var(--panel2)}
.item.sel{background:#1a2a22;box-shadow:inset 3px 0 0 var(--accent)}
.item .when{font-size:13.5px}
.wrap > main{background:transparent;padding:0}
.rcard{background:var(--panel);border-radius:var(--radius);overflow:hidden}
.rcard-hd{background:var(--panel2);padding:14px 18px;display:flex;align-items:center;gap:14px}
.rcard-ico{font-size:12px;padding:8px 10px;min-width:40px;text-align:center}
.rcard-title{margin:0;font-size:16px;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.rcard-sub{color:var(--dim);font-size:12.5px;margin-top:2px}
.rcard-body{padding:4px 18px 18px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 2px}
.statchip{background:var(--panel2);border-radius:var(--radius);padding:5px 10px;font-size:12px;color:var(--dim);white-space:nowrap}
.statchip b{color:var(--text);font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
.rcard .clstitle{margin-top:22px}
.rcard .clstitle:first-of-type{margin-top:18px}
@media(max-width:820px),(pointer:coarse) and (max-width:1100px){.wrap{padding:12px;grid-template-columns:1fr}.side{position:static;max-height:360px}}