/* ==========================================================================
     SIGMA Performance -- design system "Daylight" (docs/DA_DAYLIGHT.md).
     Light theme on :root, dark theme on html[data-theme="dark"] (set by
     site/js/theme.js before first paint). Every color below reads through
     these two token blocks -- never a raw hex outside them, so the toggle
     stays a single attribute flip.
     Side by Side adds its own layout on top: side-by-side-pitwall.css.
     ========================================================================== */
  :root{
    color-scheme:light;
    --bg:#F5F5F7; --card:#FFFFFF; --border:rgba(0,0,0,.07); --border-strong:rgba(0,0,0,.14);
    --text:#1D1D1F; --text-2:#5A5A5F; --text-3:#737378;
    --accent:#04598F; --on-accent:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.03), 0 10px 26px rgba(0,0,0,.05);
    --pop-shadow:0 12px 32px rgba(0,0,0,.14);
    --brand-bg:#1D1D1F; --brand-fg:#FFFFFF;
    --dock-bg:#FFFFFF; --dock-shadow:0 4px 20px rgba(0,0,0,.08);
    --dock-active-bg:#1D1D1F; --dock-active-fg:#FFFFFF;
    --pill-bg:#F5F5F7; --pill-hover:#EBEBED; --chev:#AEAEB2;
    --ring-track:#EDEDEF; --heat-track:#EDEDEF;
    --overlay:rgba(0,0,0,.32);
    /* session-type colors (practice / qualifying / race / test) -- also the
       palette users pick per car class / event tag, with --teal as the fifth
       swatch (that picker predates this DA and always offered five) */
    --blue:#0066CC; --amber:#B4790A; --red:#D62828; --violet:#6B4FD1; --teal:#0E8A7D;
    --online:#248A3D;
    /* text/icon color on a solid --blue/--amber/--red/--violet/--teal fill */
    --on-color:#FFFFFF;
  }
  html[data-theme="dark"]{
    color-scheme:dark;
    --bg:#000000; --card:#1C1C1E; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.18);
    --text:#F5F5F7; --text-2:#BCBCC1; --text-3:#A1A1A6;
    --accent:#3A9FDF; --on-accent:#FFFFFF;
    --shadow:none;
    --pop-shadow:0 12px 32px rgba(0,0,0,.6);
    --brand-bg:#F5F5F7; --brand-fg:#000000;
    --dock-bg:#1C1C1E; --dock-shadow:0 4px 24px rgba(0,0,0,.5);
    --dock-active-bg:#F5F5F7; --dock-active-fg:#000000;
    --pill-bg:#2C2C2E; --pill-hover:#3A3A3C; --chev:#6C6C70;
    --ring-track:#2C2C2E; --heat-track:#2C2C2E;
    --overlay:rgba(0,0,0,.6);
    --blue:#409CFF; --amber:#FFC53D; --red:#FF453A; --violet:#A78BFA; --teal:#30D1BD;
    --online:#30D158;
    --on-color:#000000;
  }
  :root{
    /* Previous token names, still used by page scripts' inline styles and
       by the rules below -- aliases of the Daylight tokens, not new colors. */
    --bg-0:var(--bg); --bg-1:var(--card); --bg-2:var(--pill-bg);
    --text-primary:var(--text); --text-secondary:var(--text-2); --text-muted:var(--text-3);
    --glass:var(--card); --glass-2:var(--pill-bg); --glass-border:var(--border);

    --mono:'JetBrains Mono', monospace; --sans:'Manrope', system-ui, sans-serif; --disp:'Manrope', system-ui, sans-serif;

    /* radius: 20px panels, 14px rounded squares (inputs, menus, tiles), 999px pills */
    --radius-sm:14px; --radius-md:20px; --radius-lg:20px; --radius-full:999px;

    /* motion (DA §6: .18s ease, small shifts only) */
    --ease-out:ease;
    --dur-fast:.18s; --dur-base:.18s;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important;}
  }
  *{box-sizing:border-box;}
  /* The page still scrolls (wheel, touch, keyboard); only the bar is hidden. */
  html{scrollbar-width:none;}
  html::-webkit-scrollbar{display:none;}
  body{
    margin:0; background-color:var(--bg); color:var(--text);
    font-family:var(--sans); font-size:14px; line-height:1.5;
    overflow-x:hidden; transition:background-color .2s, color .2s;
  }
  ::selection{background:color-mix(in srgb, var(--accent) 22%, transparent);}

  /* Monochrome logo files are drawn black; flipped to white on dark. */
  html[data-theme="dark"] .logo-mono{filter:invert(1);}

  /* ---------- chrome: brand (top left), theme toggle + account (top right), dock ---------- */
  .float-brand{
    position:absolute; top:22px; left:24px; z-index:15; height:36px;
    display:flex; align-items:center; gap:10px;
    font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--text);
  }
  /* The team logo is a full-colour round badge: shown as is, no backing
     tile and no theme filter. */
  .float-brand .brand-mark{
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .float-brand .brand-logo{height:34px; width:auto; display:block;}
  .float-brand .brand-word b{color:var(--accent); font-weight:700;}

  .float-right{position:fixed; top:22px; right:24px; z-index:15; display:flex; align-items:center; gap:10px;}
  .float-who{
    display:flex; align-items:center; gap:10px; min-height:36px;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    padding:4px 14px 4px 5px; border-radius:var(--radius-full);
    font-size:12.5px; color:var(--text-2);
  }
  .float-who:empty{display:none;}

  .theme-toggle{
    width:36px; height:36px; border-radius:50%; padding:0; flex-shrink:0; cursor:pointer;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease, border-color var(--dur-fast) ease;
  }
  .theme-toggle:hover{transform:rotate(20deg) scale(1.08); border-color:var(--accent);}
  .theme-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .theme-toggle svg{width:16px; height:16px; stroke:var(--text); fill:none; stroke-width:1.7; stroke-linecap:round;}
  .theme-toggle .moon{display:none;}
  html[data-theme="dark"] .theme-toggle .sun{display:none;}
  html[data-theme="dark"] .theme-toggle .moon{display:block;}

  .dock{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:20;
    display:flex; gap:3px; padding:7px; border-radius:22px;
    background:var(--dock-bg); border:1px solid var(--border); box-shadow:var(--dock-shadow);
    max-width:calc(100vw - 24px); overflow-x:auto; scrollbar-width:none;
  }
  .dock::-webkit-scrollbar{display:none;}
  .dock a{
    position:relative; min-width:64px; padding:0 6px; height:48px; border-radius:15px; display:flex;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    flex-shrink:0; color:var(--text-3); text-decoration:none;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .dock a svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
  .dock a .label{font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;}
  .dock a:not(.active):hover{background:var(--pill-bg); color:var(--text); transform:translateY(-3px);}
  .dock a.active{background:var(--dock-active-bg); color:var(--dock-active-fg);}
  .dock a:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .page-shell{
    width:100%; max-width:1600px; margin-inline:auto;
    box-sizing:border-box; position:relative; z-index:2;
    padding-inline:clamp(20px, 2.2vw, 40px);
    padding-top:104px; padding-bottom:140px;
  }

  /* ---------- panels ---------- */
  .bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px;}
  @media (max-width:980px){ .bento{grid-template-columns:1fr;} .bento > *{grid-column:1 !important; grid-row:auto !important;} }
  .cell{
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:var(--radius-lg); padding:22px; position:relative; overflow:hidden;
  }
  /* Kept as a hook (events.html's hub card); the spinning gradient ring it
     used to draw is gone -- Daylight's restraint rule (DA §5, progress ring). */
  .cell.accent-orbit-mockup{position:relative;}

  /* "one number that matters" card (Events hub; the Dashboard adds a ring) */
  .signal-content{position:relative; height:100%; display:flex; flex-direction:column; justify-content:space-between;}
  .signal-label{font-family:var(--mono); font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em;}
  .signal-value{font-weight:800; font-size:38px; letter-spacing:-.02em; line-height:1; margin:10px 0 6px; color:var(--text);}
  .signal-value-unit{font-size:17px; font-weight:700; color:var(--text-2);}
  .signal-sub{font-size:11.5px; color:var(--text-2);}

  /* Dashboard signal card: progress ring + next event */
  .signal-ring-row{display:flex; align-items:center; gap:18px; height:100%;}
  .signal-ring{width:100px; height:100px; flex:none; position:relative;}
  .signal-ring svg{display:block;}
  .signal-ring-track{stroke:var(--ring-track);}
  .signal-ring-arc{stroke:var(--accent); transform:rotate(-90deg); transform-origin:60px 60px; transition:stroke-dashoffset .7s ease;}
  .signal-ring-num{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;}
  .signal-ring-num .v{font-weight:800; font-size:22px; letter-spacing:-.02em; line-height:1.1;}
  .signal-ring-num .u{font-size:7.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.08em; margin-top:1px;}
  .signal-name{font-weight:700; font-size:15px; letter-spacing:-.01em; margin-top:6px;}

  /* ---------- recent combos (colored-dot rows) ---------- */
  .srow{
    display:flex; align-items:center; gap:14px; padding:12px 14px; margin:0 -14px; border-radius:12px;
    border-bottom:1px solid var(--border); text-decoration:none; color:inherit;
    transition:background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .srow:last-child{border-bottom:none;}
  .srow:hover{background:var(--pill-bg); transform:translateX(3px);}
  .srow .sdot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
  .srow .sdot.type-practice, .combo-bubble-icon .sdot.type-practice{background:var(--blue);}
  .srow .sdot.type-qualifying, .combo-bubble-icon .sdot.type-qualifying{background:var(--amber);}
  .srow .sdot.type-race, .combo-bubble-icon .sdot.type-race{background:var(--red);}
  .srow .sdot.type-test, .combo-bubble-icon .sdot.type-test{background:var(--violet);}
  .srow .stext{flex:1; min-width:0;}
  .srow .stext b{display:block; font-weight:700; font-size:13.5px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--dur-fast) ease;}
  .srow .stext .sub{color:var(--text-3); font-size:11px; margin-top:3px;}
  .srow .stime{font-family:var(--mono); font-size:11px; color:var(--text-3); flex:none;}
  .srow:hover .stext b{color:var(--accent);}

  /* ---------- KPI rows: one card per stat (as in the previous DA) ----------
     The row itself is transparent (it overrides .cell when both are set,
     e.g. #tiles / #todo-kpis); each .kslot is its own card. Pages that
     need a fixed column count set grid-template-columns inline. */
  .kpirow{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px;
    padding:0; background:none; border:none; box-shadow:none; border-radius:0; overflow:visible;
  }
  .cell.kpirow{padding:0;} /* beats the phone-width .cell padding */
  .kpirow .kslot{
    min-width:0; padding:16px 20px; display:flex; flex-direction:column; justify-content:center;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  }
  .kpirow .k-label{font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:5px;}
  .kpirow .k-value{font-weight:800; font-size:25px; letter-spacing:-.02em; line-height:1.2; color:var(--text);}
  .kpirow .k-value.grad{color:var(--accent);}
  .kpirow .k-value.fastest{color:var(--violet);} /* fastest lap -- same violet as .best-lap-row */
  .kpirow .k-sub{font-size:10.5px; color:var(--text-3); margin-top:3px;}

  /* Grid variant: fixed column count (3 by default, set inline per page),
     label pinned at the top of each block. */
  .kpirow.kpirow-grid{grid-template-columns:repeat(3, 1fr);}
  .kpirow.kpirow-grid .kslot{min-height:64px; justify-content:flex-start;}
  .kpirow.kpirow-grid .k-value{font-size:21px;}
  @media (max-width:560px){ .kpirow.kpirow-grid{grid-template-columns:repeat(2, 1fr);} }

  /* #activity-session-tiles only: tiles stretch to the tallest one ("Setup
     used"'s multi-line list) -- vertically center each value in the space
     under its label instead of leaving it pinned under the label. */
  #activity-session-tiles.kpirow-grid .kslot .k-value{margin-top:auto; margin-bottom:auto; overflow-wrap:anywhere;}

  /* ---------- header ---------- */
  header{
    padding:24px 32px; border-bottom:1px solid var(--border);
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px;
  }
  header h1{font-family:var(--disp); font-size:19px; font-weight:800; letter-spacing:-.02em; margin:0 0 4px;}
  header p{color:var(--text-muted); margin:0; font-size:13px;}
  /* ---------- session picker ---------- */
  .loaders{padding:20px 32px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--border);}
  .session-status{color:var(--text-2); font-size:12px;}

  main{display:none;}
  main.ready{display:block;}

  /* ---------- layout ---------- */
  .layout{display:grid; grid-template-columns:minmax(300px,1fr) minmax(0,2.4fr); gap:16px; align-items:start;}
  @media (max-width:980px){ .layout{grid-template-columns:1fr;} }
  .side{display:flex; flex-direction:column; gap:16px;}

  /* ---------- session conditions ---------- */
  .conditions-box{padding:14px 16px;}
  .conditions-box h2{font-size:13px; font-weight:700; margin:0 0 12px; padding:0; border:none;}
  .cond-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 16px;}
  .cond-item .cond-label{font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:2px;}
  .cond-item .cond-value{font-family:var(--mono); font-size:13px; color:var(--text-primary);}
  .cond-item .cond-value .sub{color:var(--text-muted); font-size:11px;}
  .cond-item.rain .cond-value{color:var(--blue);}

  .panel{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  }
  .panel h2{font-size:13px; font-weight:700; letter-spacing:-.01em; margin:0; padding:14px 18px; border-bottom:1px solid var(--border);}

  /* ---------- laps table ---------- */
  table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px;}
  th{
    text-align:left; padding:8px 10px; color:var(--text-3); font-weight:600;
    border-bottom:1px solid var(--border); font-family:var(--sans); font-size:10.5px;
  }
  td{padding:7px 10px; border-bottom:1px solid var(--border);}
  tbody tr{cursor:pointer; transition:background-color var(--dur-fast) ease;}
  tbody tr:hover{background:var(--pill-bg);}
  tbody tr.selected{background:color-mix(in srgb, var(--accent) 8%, transparent);}
  .swatch{width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle;}

  /* Telemetry lap table split per stint (telemetry.js renderTable): a
     recording with several stints -- refuel/tyres without getting out of the
     car -- gets one collapsible header row per stint instead of listing every
     lap of the .ibt in one flat list. A single-stint session renders exactly
     as before, with no header row at all. */
  .lap-stint-row{cursor:default;}
  .lap-stint-row td{padding:0;}
  .lap-stint-toggle{
    width:100%; display:flex; align-items:center; gap:8px; padding:7px 10px;
    border:0; background:var(--pill-bg); cursor:pointer; text-align:left;
    font-family:var(--sans); font-size:11px; font-weight:700; color:var(--text-secondary);
  }
  .lap-stint-toggle:hover{color:var(--text);}
  .lap-stint-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .lap-stint-caret{font-size:9px; color:var(--text-3);}
  .lap-stint-meta{margin-left:auto; font-family:var(--mono); font-weight:400; color:var(--text-3);}
  .badge{padding:2px 8px; border-radius:var(--radius-full); font-size:10.5px; font-family:var(--sans); font-weight:600;}
  .badge.clean{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .badge.dirty{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}
  .badge.pit{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .badge.reset{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .badge.bop{background:transparent; border:1px solid var(--red); color:var(--red); padding:1px 7px; margin-left:8px; vertical-align:2px; letter-spacing:0;} /* outlined like .btn-danger, not filled */

  /* ---------- track map ---------- */
  .trackmap-box{padding:14px 16px;}
  .trackmap-box h2{font-size:13px; font-weight:700; margin:0 0 10px; padding:0; border:none;}
  #trackmap{width:100%; height:auto; display:block;}
  #trackmap-dot{fill:var(--blue);}
  #trackmap-dot-2{fill:var(--red);}
  .trackmap-legend{display:flex; gap:14px; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--text-secondary);}

  .activity-detail-title{display:flex; align-items:center; gap:10px;}
  .activity-trackmap-thumb{width:56px; height:39px; flex-shrink:0;}
  /* Server-generated track maps (storage/trackmaps.py) are a black line:
     kept as is on the light theme, inverted to white on the dark one --
     same principle as .logo-mono, an <img> SVG can't read the tokens. */
  html[data-theme="dark"] .trackmap-mono{filter:invert(1);}

  /* Track/Car filter selects sit next to the avatar-driven Pilot picker
     (.pilot-picker-trigger, fixed at 44px) in the same row -- a bare
     .custom-select-trigger sizes to its text content instead, so pin it
     to the same explicit height here rather than relying on padding to
     coincidentally land on the same number. */
  #activity-filters .custom-select-trigger{ height:36px; box-sizing:border-box; }

  /* ---------- Activity: day-by-day heatmap + combo bubbles ----------
     Bubble list replaces the old flat table for both drill-down levels
     (combos, then sessions within a combo) so the two steps share one
     visual language instead of switching to a table mid-flow. */
  /* Hero (filters) + 320px heatmap card, same row -- daylight-activity.html's .hrow */
  .activity-top{display:grid; grid-template-columns:1fr 320px; gap:16px; margin-bottom:16px;}
  @media (max-width:900px){ .activity-top{grid-template-columns:1fr;} }
  .ac-heatmap-card{padding:18px 20px; display:flex; flex-direction:column;}
  .ac-heatmap-title{font-size:11px; font-weight:700; color:var(--text-3); margin-bottom:11px;}
  /* 20 weeks x 7 days (activity.js renderActivityHeatmap), filled column by column */
  .lb-heatmap{display:grid; grid-template-columns:repeat(20,1fr); grid-auto-flow:column; grid-template-rows:repeat(7,9px); gap:3px;}
  .lb-heatmap .hm-cell{width:9px; height:9px; border-radius:3px; background:var(--heat-track); transition:transform .12s ease;}
  .lb-heatmap .hm-cell:hover{transform:scale(1.6);}
  .lb-heatmap-legend{display:flex; align-items:center; gap:6px; font-size:9.5px; color:var(--text-3); margin-top:11px;}
  .lb-heatmap-legend .hm-cell{width:9px; height:9px; border-radius:3px; display:inline-block;}

  .combo-list{display:flex; flex-direction:column; gap:10px;}
  .combo-bubble{
    display:flex; align-items:center; gap:18px; padding:16px 22px; border-radius:var(--radius-lg);
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    cursor:pointer; transition:transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .combo-bubble:hover{transform:translateY(-2px); border-color:var(--accent);}
  .combo-bubble:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .combo-bubble-icon{
    flex-shrink:0; width:44px; height:44px; padding:6px; color:var(--accent); background:var(--pill-bg);
    display:flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); overflow:hidden;
    transition:background-color var(--dur-fast) ease;
  }
  .combo-bubble:hover .combo-bubble-icon{background:color-mix(in srgb, var(--accent) 14%, var(--pill-bg));}
  .combo-bubble-icon img{width:100%; height:100%; object-fit:contain; display:block;}
  /* Level-1 track map thumbnail: the SVG's 2px screen stroke and its 20/320
     inner margin are shared with the 220px session preview, so this tile
     draws the map larger than itself and scales it down -- thinner line
     (2px x .75) and a trace spanning nearly the whole tile. The overflow
     spills evenly into the tile's padding (flex centering), clipped by
     .combo-bubble-icon's overflow:hidden. */
  .combo-bubble-icon img.trackmap-mono{width:60px; height:60px; flex-shrink:0; transform:scale(.75);}
  .combo-bubble-icon svg{width:100%; height:auto;}
  /* Brand-logo tile beside the track map (Activity level 1): same tile as
     .combo-bubble-icon, the logo is a mask filled with a theme token. The
     row's 18px gap is tightened so both tiles read as one pair. */
  .combo-bubble-brand{margin-left:-10px;}
  .combo-brand-logo{
    width:100%; height:100%; display:block; background-color:var(--text);
    -webkit-mask:var(--brand-logo) center / contain no-repeat;
            mask:var(--brand-logo) center / contain no-repeat;
  }
  .combo-bubble-icon .sdot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
  .combo-bubble-body{flex:1; min-width:0;}
  .combo-bubble-title{font-family:var(--sans); font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .combo-bubble-sub{font-size:10.5px; color:var(--text-3); margin-top:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .combo-bubble-chip{font-size:10.5px; font-weight:600; padding:3px 10px; border-radius:var(--radius-full); background:var(--pill-bg); color:var(--text-2); white-space:nowrap;}
  .combo-bubble-stats{display:flex; gap:26px; flex-shrink:0;}
  .combo-bubble-stats .cbs-item{text-align:right;}
  /* Level-2 session list (#activity-detail-list): each row's stats block
     hugs its own content width (no explicit column widths), so a row whose
     lap-count text happens to be wider than another's shifts that row's
     whole block left -- misaligning every column top-to-bottom down the
     list. Pin each column to a fixed width here so the block's total width
     (and therefore every column's position) stays identical row to row. */
  #activity-detail-list .combo-bubble-stats .cbs-item:nth-child(1){min-width:80px;}
  #activity-detail-list .combo-bubble-stats .cbs-item:nth-child(2){min-width:120px;}
  #activity-detail-list .combo-bubble-stats .cbs-item:nth-child(3){min-width:60px;}
  #activity-detail-list .combo-bubble-stats .cbs-item:nth-child(4){min-width:60px;}
  .combo-bubble-stats .cbs-value{display:block; font-weight:800; font-size:16px; letter-spacing:-.01em;}
  .combo-bubble-stats .cbs-item:first-child .cbs-value:not(.cbs-value-best){color:var(--accent);}
  /* Best lap only -- violet, the "fastest lap" color used by the stint
     tables' .best-lap-row. */
  .combo-bubble-stats .cbs-value-best{
    color:var(--violet);
  }
  .combo-bubble-stats .cbs-value .u{font-weight:500; font-size:10.5px; color:var(--text-3); letter-spacing:0;}
  .combo-bubble-stats .cbs-label{display:block; font-size:9.5px; color:var(--text-3); margin-top:2px;}
  .combo-bubble-chevron{width:14px; height:14px; color:var(--chev); flex-shrink:0; transition:transform var(--dur-fast) ease, color var(--dur-fast) ease;}
  .combo-bubble:hover .combo-bubble-chevron{color:var(--accent); transform:translateX(4px);}

  @media (max-width:760px){
    .combo-bubble{flex-wrap:wrap;}
    .combo-bubble-stats{width:100%; justify-content:space-between; margin-top:4px; padding-left:60px;}
    .combo-bubble:has(.combo-bubble-brand) .combo-bubble-stats{padding-left:114px;}
    .combo-bubble-chevron{display:none;}
  }

  /* ---------- chart page tabs ---------- */
  .tab-bar{
    display:flex; align-items:center; gap:0; box-shadow:inset 0 -1px 0 var(--glass-border);
    margin-bottom:16px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  /* The rule is an inset shadow, not a border, so the active underline covers
     it without the buttons overflowing the strip (which drew a scrollbar). */
  .tab-bar::-webkit-scrollbar{display:none;}
  .tab-bar button{
    background:none; border:none; color:var(--text-3); font-family:var(--sans);
    font-size:13.5px; font-weight:600; padding:10px 16px; cursor:pointer; white-space:nowrap;
    border-bottom:2px solid transparent; transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .tab-bar button:hover{color:var(--text);}
  .tab-bar button.active{color:var(--text); border-bottom-color:var(--accent); font-weight:700;}
  .tab-bar button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .tab-divider{color:var(--border-strong); font-size:14px;}
  /* Telemetry: the tabs fill a first underlined line and overflow onto a
     second one instead of scrolling (chart-utils.js layoutTabRows). */
  .tab-bar.tab-bar-rows{display:block; box-shadow:none; overflow:visible;}
  .tab-bar-rows .tab-row{display:flex; flex-wrap:wrap; min-width:0; align-items:center; box-shadow:inset 0 -1px 0 var(--glass-border);}
  .tab-bar-rows .tab-row-measure{flex-wrap:nowrap; overflow:hidden;}
  /* "+ Add custom page" / "N shared with you" after the custom tabs
     (site/js/telemetry/custom-pages.js). */
  .tab-bar button.tab-action{color:var(--accent);}
  .tab-bar button.tab-action:hover{color:var(--text);}
  /* A member's own custom pages stand apart from the built-in tabs. */
  .tab-bar button.tab-custom{color:var(--violet);}
  .tab-bar button.tab-custom:hover, .tab-bar button.tab-custom.active{color:var(--violet);}
  .tab-bar button.tab-custom.active{border-bottom-color:var(--violet);}

  /* ---------- telemetry: custom chart pages ---------- */
  .custom-page-header{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
  .custom-page-title{margin:0; font-size:18px; font-weight:800; letter-spacing:-.01em; overflow-wrap:anywhere;}
  .custom-page-actions{display:flex; flex-wrap:wrap; gap:8px;}
  .custom-page-actions .btn-secondary, .custom-page-actions .btn-danger{margin-right:0;}
  .custom-page-charts{display:flex; flex-direction:column; gap:16px;}
  .custom-editor-charts{display:flex; flex-direction:column; gap:12px; max-height:55vh; overflow-y:auto; margin-bottom:12px;}
  .custom-editor-chart{border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; background:var(--pill-bg);}
  .custom-editor-chart-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
  .custom-editor-chart-number{font-size:12px; font-weight:700; color:var(--text-2);}
  .custom-editor-chart-tools{display:flex; align-items:center; gap:4px;}
  .custom-editor-tool{
    background:var(--card); border:1px solid var(--border); border-radius:50%; color:var(--text-2);
    width:26px; height:26px; cursor:pointer; font-size:13px; line-height:1;
  }
  .custom-editor-tool:hover:not(:disabled){border-color:var(--accent); color:var(--text);}
  .custom-editor-tool:disabled{opacity:.4; cursor:not-allowed;}
  .custom-editor-tool:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .custom-editor-channels{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
  .custom-editor-channels:empty{display:none;}
  .custom-channel-chip{
    display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-radius:var(--radius-full);
    background:var(--card); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--text);
  }
  .custom-channel-chip button{
    background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; line-height:1; padding:0 2px;
  }
  .custom-channel-chip button:hover{color:var(--red);}
  .custom-channel-chip button:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:50%;}
  .custom-editor-chart .custom-select{margin-bottom:0;}
  .custom-editor-add-row{display:flex; gap:8px; align-items:center;}
  .custom-editor-add-row .custom-select{flex:1; min-width:0;}
  .custom-editor-add-row .btn-secondary{margin-right:0; flex-shrink:0; white-space:nowrap;}
  .custom-formula-chip{border-color:var(--violet);}
  .custom-formula-mark{color:var(--violet); font-style:italic; font-weight:800; margin-right:2px;}
  .custom-formula-form{border-top:1px solid var(--border); padding-top:12px; margin-top:4px;}
  .custom-formula-form .editor-field-row{align-items:flex-end;}
  .custom-formula-form .custom-formula-unit{flex:0 0 130px;}
  .custom-formula-form input.custom-formula-expr{font-family:var(--mono); font-size:12.5px;}
  .custom-formula-help{margin:8px 0 0; color:var(--text-3); font-size:11.5px;}
  .custom-formula-preview{margin:4px 0 0; min-height:17px; color:var(--text-2); font-size:12.5px; overflow-wrap:anywhere;}
  .custom-formula-preview.is-error{color:var(--red); font-weight:600;}
  .custom-formula-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:10px;}
  .custom-formula-actions .btn-secondary{margin-right:0;}
  @media (max-width:560px){
    .custom-editor-add-row, .custom-formula-form .editor-field-row{flex-direction:column; align-items:stretch;}
    .custom-formula-form .custom-formula-unit{flex:1 1 auto;}
  }
  .custom-editor-error{margin:10px 0 0; color:var(--red); font-size:12.5px; font-weight:600;}
  .custom-share-hint{margin:-6px 0 14px;}
  .custom-share-members{display:flex; flex-direction:column; gap:2px; max-height:40vh; overflow-y:auto; margin-top:6px;}
  .custom-share-member{display:flex; align-items:center; gap:10px; padding:7px 4px; font-size:13px; color:var(--text); cursor:pointer;}
  .custom-share-member input{width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin:0;}
  .custom-share-member input:disabled + span{color:var(--text-3);}
  .custom-share-everyone{font-weight:700; border-bottom:1px solid var(--border); padding-bottom:10px;}
  .custom-answer-text{margin:0 0 10px; color:var(--text-2); font-size:13px; line-height:1.55; overflow-wrap:anywhere;}
  .custom-answer-charts{margin:0; padding-left:18px; color:var(--text); font-size:13px; line-height:1.7; overflow-wrap:anywhere;}
  /* Event detail page: tab-bar plus a per-tab action slot (e.g. "Edit
     BoP") on the same line -- the border/margin normally on .tab-bar
     itself move up here so the underline still spans the full row. */
  .event-tab-bar-row{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    box-shadow:inset 0 -1px 0 var(--glass-border); margin-bottom:16px;
  }
  .event-tab-bar-row .tab-bar{box-shadow:none; margin-bottom:0; align-self:stretch; flex:1; min-width:0;}
  #event-tab-controls{display:flex; gap:8px; flex-shrink:0;}
  .tab-page{display:none;}
  .tab-placeholder{
    color:var(--text-3); font-size:13px; text-align:center; padding:60px 20px;
    background:var(--card); border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
  }
  .hist-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .hist-wrap{position:relative; height:320px;}
  .hist-stats{display:flex; justify-content:center; gap:28px; margin-bottom:8px; font-family:var(--mono); font-size:11px;}
  .hist-stats .stat-group{display:flex; flex-direction:column; align-items:center; gap:6px;}
  .hist-stats .side-title{color:var(--text-secondary); font-weight:600; font-family:var(--sans); font-size:11px;}
  .hist-stats .stat-row{display:flex; gap:14px;}
  .hist-stats .stat-col{display:flex; flex-direction:column; align-items:center; gap:2px;}
  .hist-stats .stat-label{color:var(--text-3); font-family:var(--sans); font-size:10.5px; font-weight:600;}
  .hist-stats .stat-value{color:var(--text-primary); font-weight:700;}
  .rubber-gap-stats{flex-wrap:wrap; row-gap:10px;}

  /* ---------- setup page ---------- */
  .setup-section{
    margin-bottom:16px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:var(--radius-lg); overflow:hidden;
  }
  .setup-section-title{font-size:13px; font-weight:700; letter-spacing:-.01em; margin:0; padding:14px 18px; border-bottom:1px solid var(--border);}
  .setup-cols{display:flex; flex-direction:column;}
  .setup-col-row{display:flex;}
  .setup-col-row + .setup-col-row{border-top:1px solid var(--glass-border);}
  .setup-col{background:none; padding:14px 16px; flex:0 1 50%; min-width:0;}
  .setup-col + .setup-col{border-left:1px solid var(--glass-border);}
  .setup-col-heading{font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em; margin-bottom:8px;}
  .setup-row{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:13px;}
  .setup-row .k{color:var(--text-secondary);}
  .setup-row .v{font-family:var(--mono); font-weight:600; color:var(--text-primary); text-align:right;}
  .setup-empty{color:var(--text-3); font-size:13px; padding:40px; text-align:center;}
  .setup-columns-2{display:flex; gap:16px; align-items:flex-start;}
  .setup-columns-2 .setup-driver-block{flex:1; min-width:0;}
  .setup-driver-heading{
    font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase;
    letter-spacing:.02em; margin-bottom:10px;
  }
  @media (max-width:900px){
    .setup-columns-2{flex-direction:column;}
  }

  /* ---------- charts ---------- */
  .charts{display:block; min-width:0;}
  .tab-page.active{display:flex; flex-direction:column; gap:16px;}
  .chart-box{
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:var(--radius-lg); padding:16px 18px;
  }
  .chart-box h3{margin:0; font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em;}
  .chart-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
  .smooth-toggle{
    display:flex; align-items:center; gap:5px; font-size:11px; font-weight:400;
    color:var(--text-muted); text-transform:none; letter-spacing:normal; cursor:pointer; user-select:none;
  }
  .smooth-toggle:hover{color:var(--text-secondary);}
  .smooth-toggle input{
    appearance:none; -webkit-appearance:none; margin:0; flex-shrink:0; position:relative;
    width:14px; height:14px; border-radius:3px; cursor:pointer;
    border:1.5px solid var(--border-strong); background:var(--bg-2);
  }
  .smooth-toggle input:checked{ background:var(--accent); border-color:var(--accent); }
  .smooth-toggle input:checked::after{
    content:''; position:absolute; left:4px; top:1px; width:3px; height:7px;
    border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .chart-wrap{position:relative; height:220px; cursor:crosshair; user-select:none;}

  /* drag-to-zoom selection rectangle */
  .drag-overlay{
    position:absolute; top:0; bottom:0; left:0; width:0; display:none;
    background:color-mix(in srgb, var(--accent) 15%, transparent); border-left:1px solid var(--accent); border-right:1px solid var(--accent);
    pointer-events:none;
  }
  /* synced hover cursor -- one accent line traveling across every synced
     chart together. */
  .cursor-line{
    position:absolute; top:0; bottom:0; width:1px; left:0; display:none;
    background:var(--accent); pointer-events:none; z-index:1;
  }
  .cursor-values{
    position:absolute; top:4px; left:0; display:none; flex-direction:column; gap:2px;
    pointer-events:none; z-index:2;
  }
  .cursor-chip{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); box-shadow:var(--shadow);
    padding:1px 7px; font-family:var(--mono); font-size:11px; font-weight:700; white-space:nowrap;
  }

  .empty-hint{color:var(--text-3); font-size:13px; padding:40px 0; text-align:center;}

  /* ---------- app-level navigation ---------- */
  /* The nav bar itself is the floating .dock (top of this file) -- nav.js targets the same #app-nav id,
     it just renders <nav class="dock"> markup instead of this bar. */
  .app-page{display:none;}
  .app-page.active{display:block;}

  /* ---------- Dashboard page ---------- */
  /* Page title (every page's hero card) */
  .dash-hero-greet{font-weight:800; font-size:30px; letter-spacing:-.02em; line-height:1.1; margin-bottom:12px;}
  .title-dot{color:var(--accent);}
  .cell.hero p{line-height:1.5;}

  /* Dashboard hero: eyebrow + headline + muted sub */
  .dash-hero{display:flex; flex-direction:column; justify-content:center; min-height:210px; padding:30px 34px;}
  .dash-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-3); margin-bottom:10px; text-transform:uppercase;}
  .dash-hero-title{font-weight:800; font-size:38px; letter-spacing:-.02em; line-height:1.05; margin:0 0 4px;}
  .dash-hero-slogan{font-weight:600; font-size:19px; letter-spacing:-.01em; color:var(--text-2);}
  .dash-hero-slogan b{color:var(--accent); font-weight:700;}
  .dash-hero-next{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .dash-hero-next-empty{color:var(--text-3); font-size:12.5px; margin-top:14px;}

  .dash-modules-head{font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--text-3); text-transform:uppercase; margin-bottom:12px;}
  /* Dashboard middle row: 5 columns / 10px gap like #dash-stats (.kpirow),
     modules on 2 of them, Recent combos on the other 3. */
  .dash-mid{display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px;}
  .dash-mid .dash-modules-grid{grid-column:span 2; grid-template-rows:repeat(3, 1fr);}
  .dash-mid .dash-recent{grid-column:span 3; padding:22px 26px;}
  @media (max-width:980px){ .dash-mid{grid-template-columns:1fr;} .dash-mid .dash-modules-grid, .dash-mid .dash-recent{grid-column:auto;} }
  .nc-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .nc-item{
    position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:10px; min-height:108px;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:var(--radius-lg); padding:16px 17px; text-decoration:none; color:inherit;
    transition:transform var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .nc-item:hover{transform:translateY(-3px); border-color:var(--accent);}
  .nc-item:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .nc-item .nc-title{font-size:14px; font-weight:700; letter-spacing:-.01em;}
  .nc-item .nc-desc{font-size:11px; color:var(--text-3); line-height:1.4; margin-top:3px;}
  .nc-item .nc-go{
    align-self:flex-end; width:22px; height:22px; border-radius:50%; background:var(--pill-bg);
    display:flex; align-items:center; justify-content:center;
    transition:background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .nc-item .nc-go svg{width:10px; height:10px; stroke:var(--text); fill:none; stroke-width:2; transition:stroke var(--dur-fast) ease;}
  .nc-item:hover .nc-go{background:var(--accent); transform:translateX(2px);}
  .nc-item:hover .nc-go svg{stroke:var(--on-accent);}
  /* Recent combos rows end with the same arrow as the module shortcuts. */
  .srow .nc-go{
    width:22px; height:22px; border-radius:50%; background:var(--pill-bg); flex:none;
    display:flex; align-items:center; justify-content:center;
    transition:background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .srow .nc-go svg{width:10px; height:10px; stroke:var(--text); fill:none; stroke-width:2; transition:stroke var(--dur-fast) ease;}
  .srow:hover .nc-go{background:var(--accent); transform:translateX(2px);}
  .srow:hover .nc-go svg{stroke:var(--on-accent);}
  /* Events "Needs your attention" lineup rows: the whole row links to the
     lineup and ends with a "View lineup" label + the same arrow. */
  .attn-link-row{cursor:pointer;}
  .attn-go{display:flex; align-items:center; gap:10px; flex:none; font-size:13px; font-weight:600; color:var(--text);}
  .attn-go .nc-go{
    width:22px; height:22px; border-radius:50%; background:var(--pill-bg); flex:none;
    display:flex; align-items:center; justify-content:center;
    transition:background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .attn-go .nc-go svg{width:10px; height:10px; stroke:var(--text); fill:none; stroke-width:2; transition:stroke var(--dur-fast) ease;}
  .attn-link-row:hover .nc-go, .attn-link-row:focus-visible .nc-go{background:var(--accent); transform:translateX(2px);}
  .attn-link-row:hover .nc-go svg, .attn-link-row:focus-visible .nc-go svg{stroke:var(--on-accent);}
  /* upcoming-card is sometimes a real <a> link (dashboard.js) instead of
     only a div with a click handler -- strip the link look, the card
     styling already does the job. */
  a.upcoming-card{ text-decoration:none; color:inherit; }

  /* ---------- BoP page ---------- */
  .bop-venue{margin-bottom:24px;}
  .bop-venue-title{font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text-primary);}
  .bop-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px;}
  .bop-table th{
    text-align:left; padding:10px 14px; color:var(--text-3); font-weight:600;
    border-bottom:1px solid var(--border); font-family:var(--sans); font-size:10.5px;
  }
  .bop-table td{padding:9px 14px; border-bottom:1px solid var(--glass-border);}
  .bop-table tr:last-child td{border-bottom:none;}
  .bop-table tr.fastest{background:color-mix(in srgb, var(--teal) 8%, transparent); box-shadow:inset 3px 0 0 var(--teal);}
  .bop-table tr.fastest td:first-child{color:var(--teal); font-weight:700;}
  .clickable-row{cursor:pointer;}
  .clickable-row{transition:background-color var(--dur-fast) ease;}
  .clickable-row:hover{background:var(--pill-bg);}
  .stint-block{
    margin-bottom:20px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    border-radius:var(--radius-lg); overflow:hidden;
  }
  .stint-header{padding:14px 18px; border-bottom:1px solid var(--border);}
  .stint-header .stint-title{font-size:14px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px;}
  .stint-stats{display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:12px; color:var(--text-secondary);}
  .stint-stats .stat-label{color:var(--text-3); margin-right:4px; font-family:var(--sans);}
  .stint-block table{margin:0; table-layout:fixed;}
  .stint-block th:nth-child(1), .stint-block td:nth-child(1){width:8%;}
  .stint-block th:nth-child(2), .stint-block td:nth-child(2){width:18%;}
  .stint-block th:nth-child(3), .stint-block td:nth-child(3){width:24%;}
  .stint-block th:nth-child(4), .stint-block td:nth-child(4){width:16%;}
  .stint-block th:nth-child(5), .stint-block td:nth-child(5){width:17%;}
  .stint-block th:nth-child(6), .stint-block td:nth-child(6){width:17%;}
  .best-lap-row{background:color-mix(in srgb, var(--violet) 10%, transparent);}
  .best-lap-row td:first-child{color:var(--violet); font-weight:700;}
  .stint-best-row{background:color-mix(in srgb, var(--teal) 10%, transparent);}
  .stint-best-row td:first-child{color:var(--teal); font-weight:700;}
  .session-recap-conditions{
    display:flex; gap:20px; align-items:stretch; margin-bottom:24px; padding:18px 20px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  }
  .session-recap-conditions .cond-grid{flex:1;}
  .activity-trackmap-conditions-thumb{width:220px; flex-shrink:0; align-self:center;}

  /* ---------- sector summary + pre-zoom ---------- */
  .sectors-box{padding:14px 16px;}
  .sector-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12px;}
  .sector-table th{text-align:right; padding:4px 6px; font-weight:600; font-size:11px;}
  .sector-table th:first-child{text-align:left; width:36px;}
  .sector-table td{padding:4px 6px; text-align:right; color:var(--text-secondary);}
  .sector-table td.stat-label{text-align:left; color:var(--text-3); font-family:var(--sans); font-weight:600; font-size:10.5px;}
  .sector-table td.fastest{color:var(--teal); font-weight:700;}
  .sector-table .sector-lap-row td{border-top:1px solid var(--border); padding-top:8px; font-weight:600; color:var(--text-primary);}
  .sector-table .sector-lap-row td.fastest{color:var(--teal);}
  .sector-delta{display:block; font-size:11px; font-weight:600; color:var(--red);}

  .sector-zoom-bar{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
  .sector-zoom-segments{display:flex; flex:1; gap:3px;}
  .sector-zoom-segments button{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text-2);
    font-family:var(--sans); font-size:12px; font-weight:600; padding:9px 4px; cursor:pointer;
    text-align:center; overflow:hidden; white-space:nowrap;
    transition:border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .sector-zoom-segments button:hover{border-color:var(--accent); color:var(--text);}
  .sector-zoom-segments button.active{background:var(--dock-active-bg); border-color:var(--dock-active-bg); color:var(--dock-active-fg);}
  .bop-pick-badge{
    background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); font-family:var(--sans); font-weight:700;
    font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:var(--radius-full); margin-left:8px;
  }
  .bop-sub{color:var(--text-3); font-size:11px;}
  .bop-filters{
    display:flex; flex-wrap:wrap; gap:10px; padding:16px; margin-bottom:16px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  }
  .bop-filter{display:flex; flex-direction:column; gap:5px; min-width:130px;}
  .bop-filter label{font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em;}
  .bop-filter select{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text);
    font-family:var(--sans); font-size:12.5px; font-weight:600; padding:7px 12px;
  }
  /* Pilot picker (Activity page) -- a native <select> can't render an
     avatar image per <option> in any browser, so this is a small
     custom dropdown built from a trigger button + an absolutely
     positioned menu, reusing the same .av circle used in the top
     nav for visual consistency. */
  .pilot-picker{position:relative;}
  .pilot-picker-trigger{
    display:flex; align-items:center; gap:8px; width:100%; height:36px; box-sizing:border-box;
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text);
    font-family:var(--sans); font-size:12.5px; font-weight:600; padding:4px 13px 4px 5px; cursor:pointer;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .pilot-picker-trigger:hover{border-color:var(--accent); transform:translateY(-2px);}
  .pilot-picker-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .pilot-picker-name{flex:1; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .pilot-picker-caret{color:var(--text-3); font-size:9px;}
  /* position:fixed, coords set in JS (activity.js) -- moved to <body> on
     open so an ancestor .cell's overflow:hidden (the hero corner-cut
     clip-path) can't clip the open list. */
  .pilot-picker-menu{
    position:fixed; z-index:4000; min-width:180px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--pop-shadow);
    max-height:280px; overflow-y:auto; padding:5px;
  }
  .pilot-picker-item{
    display:flex; align-items:center; gap:8px; padding:8px 10px; cursor:pointer;
    font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; border-radius:10px;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .pilot-picker-item:hover, .pilot-picker-item.highlighted{background:var(--pill-bg);}
  .pilot-picker-item.active{color:var(--accent);}
  #bop-add-run-select{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text);
    font-family:var(--sans); font-size:12.5px; padding:8px 12px;
  }

  /* Generic custom dropdown replacing every native <select> app-wide
     (custom-select.js) -- same visual language as .pilot-picker above,
     generalized since a plain CSS-styled <select> still opens its
     option list with the OS/browser's own chrome, not ours. */
  /* inline-block (content-sized) by default, like a native <select> --
     grid/flex parents below (.ev-row, .bop-filter) already stretch a
     block-level item to fill their column/row by default, so only the
     plain-block containers (.editor-field, .modal-box) and the one
     flex row that needs main-axis growth (.loaders) get an override. */
  .custom-select{position:relative; display:inline-block; vertical-align:middle;}
  .custom-select-native{display:none;}
  .loaders .custom-select{min-width:150px;}
  /* The driver picker's avatar (.av-sm, 18px) makes its own trigger
     taller than the other pickers' plain-text ones -- pin them all to the
     same 36px pill height (same as the Activity page's filter row, see
     #activity-filters above) so the row lines up. */
  .loaders .custom-select-trigger{ height:36px; box-sizing:border-box; }
  .editor-field .custom-select, .modal-box .custom-select{width:100%;}
  .modal-box .custom-select{margin-bottom:16px;}
  /* Team roster role picker: shrink-to-fit sized each row to its own
     current selection ("Driver" narrower than "Team Manager"), which
     looked sloppy with every row misaligned -- fix width to the
     longest option ("Team Manager", measured ~133px) so every row
     matches regardless of that member's current role. */
  .setup-file-row .custom-select{min-width:140px;}
  .custom-select-trigger{
    display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; min-height:36px;
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text);
    font-family:var(--sans); font-size:12.5px; font-weight:600; padding:7px 13px; cursor:pointer; text-align:left;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .custom-select-trigger:hover{border-color:var(--accent); transform:translateY(-2px);}
  .custom-select-trigger.open{border-color:var(--accent);}
  .custom-select-trigger:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .custom-select-trigger.is-disabled{cursor:not-allowed; opacity:0.5;}
  .custom-select-trigger.is-disabled:hover{border-color:var(--border); transform:none;}
  .custom-select-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* Opt-in avatar (data-avatar-path/-initial on the <option>, see
     custom-select.js) -- absent for every select that doesn't set those,
     so this never affects layout there; only appended as a DOM node when
     actually needed, unlike a permanently-reserved flex slot would be. */
  .custom-select-avatar{display:flex; align-items:center; flex-shrink:0;}
  .custom-select-item.has-avatar{display:flex; align-items:center; gap:8px;}
  .custom-select-item.has-avatar .custom-select-item-text{overflow:hidden; text-overflow:ellipsis; min-width:0;}
  .custom-select-caret{color:var(--text-3); font-size:9px; flex-shrink:0; transition:transform var(--dur-fast) ease;}
  .custom-select-trigger.open .custom-select-caret{transform:rotate(180deg);}
  /* position:fixed, coords set in JS (custom-select.js) -- the menu is
     moved to <body> for the duration it's open so an ancestor .cell's
     overflow:hidden (the hero corner-cut clip-path) can't clip the open
     list; previously position:absolute inside the trigger's own glass
     panel, which is exactly what got clipped. */
  .custom-select-menu{
    position:fixed; z-index:4000;
    width:max-content; max-width:min(280px, 90vw);
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--pop-shadow);
    max-height:260px; overflow-y:auto; padding:5px;
  }
  .custom-select-item{
    padding:8px 10px; cursor:pointer; font-size:12.5px; font-weight:600; font-family:var(--sans); color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:10px;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .custom-select-item:hover, .custom-select-item.highlighted{background:var(--pill-bg);}
  .custom-select-item.active{color:var(--accent);}
  .custom-select-item.is-disabled{color:var(--text-3); cursor:not-allowed;}
  .btn-link-red{
    background:none; border:none; color:var(--red); font-family:var(--sans); font-size:12px;
    font-weight:600; cursor:pointer; padding:0;
  }
  .btn-link-red:hover{text-decoration:underline;}
  .btn-back-fixed{width:170px; text-align:center;}

  /* ---------- modal ---------- */
  .modal-overlay{
    display:none; position:fixed; inset:0; background:var(--overlay); z-index:1000;
    align-items:center; justify-content:center;
  }
  .modal-overlay.active{display:flex;}
  .modal-box{
    background:var(--card); border:1px solid var(--border); box-shadow:var(--pop-shadow);
    border-radius:var(--radius-lg); padding:24px; width:440px; max-width:90vw;
  }
  .modal-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
  .modal-header h3{margin:0; font-size:16px; font-weight:800; letter-spacing:-.01em;}
  .modal-close{
    background:var(--pill-bg); border:none; color:var(--text-2); font-size:18px; cursor:pointer; line-height:1;
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .modal-close:hover{background:var(--pill-hover); color:var(--text);}
  .modal-close:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn-text-red{
    background:none; border:none; color:var(--red); font-family:var(--sans); font-weight:600; font-size:13px;
    cursor:pointer; padding:2px 4px;
  }
  .btn-text-red:hover{text-decoration:underline;}
  .modal-box h3{margin:0 0 16px; font-size:16px; font-weight:800; letter-spacing:-.01em;}
  .modal-box select{
    width:100%; background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-sm);
    color:var(--text); font-family:var(--sans); font-size:13px; padding:9px 10px; box-sizing:border-box;
  }
  .modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:18px;}
  .modal-box-wide{width:720px;}
  /* In-app alert/confirm/prompt (site/js/dialog.js): above any page modal
     it may open on, message keeps the line breaks it was written with. */
  .modal-overlay.ui-dialog{z-index:1100;}
  .ui-dialog .modal-box{width:420px;}
  .ui-dialog .modal-header h3{margin:0;}
  .ui-dialog-message{margin:0; color:var(--text-2); font-size:13px; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere;}
  .ui-dialog-field{margin:14px 0 0;}
  .ui-dialog .modal-actions .btn-secondary, .ui-dialog .modal-actions .btn-danger{margin-right:0;}
  /* Form modals (event wizard, custom car categories on events.html): every
     control in a row shares one 36px height and lines up on the same baseline
     -- the generic .modal-box rules above give custom selects a 16px bottom
     margin that text inputs don't have, and .btn-secondary a right margin. */
  .form-modal .modal-header h3{margin:0;}
  .form-modal .custom-select{margin-bottom:0;}
  .form-modal .custom-select-trigger,
  .form-modal .editor-field input:not([type="checkbox"]):not([type="range"]),
  .form-modal .condition-set-card .cs-header input,
  .form-modal .editor-field-row > .btn-secondary{height:36px; box-sizing:border-box;}
  .form-modal .editor-field-row > .btn-secondary{margin-right:0; flex-shrink:0; white-space:nowrap;}
  .form-modal .editor-field-row{align-items:flex-end;}
  .form-modal .condition-set-card .cs-header input{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text);
    font-family:var(--sans); font-size:13px; padding:8px 12px;
  }
  .form-modal .condition-set-card .cs-header input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);}

  /* Setup detail modal: a full setup (tires/aero + chassis + dampers) can
     run much taller than the viewport, unlike every other .modal-box user
     -- scoped to this one modal (rather than .modal-box-wide generally) so
     other modals keep their existing shrink-to-fit sizing untouched. Only
     the content area scrolls, so the header/close button stay reachable. */
  #setup-detail-modal .modal-box{display:flex; flex-direction:column; max-height:85vh;}
  /* Scrollbar hidden (wheel/touch/keyboard scroll still work): the visible
     bar ate too much of the modal width. */
  #setup-detail-content{overflow-y:auto; min-height:0; scrollbar-width:none;}
  #setup-detail-content::-webkit-scrollbar{display:none;}

  /* ---------- Events page ---------- */
  .btn-inline{
    float:right; background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-full);
    color:var(--text-2); font-family:var(--sans); font-size:11px; font-weight:600; padding:4px 10px; cursor:pointer;
    transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .btn-inline:hover{border-color:var(--accent); color:var(--text-primary);}

  /* Generic "block" cards/tiles (event-card, upcoming-card,
     setup-folder-tile, dashboard's nc-item) share DA hover recipe 1: lift
     3px, border turns --accent. Per-class-color cards (.lineup-card-*)
     swap the accent for their class color. */

  /* Event card grid (Manage tab) -- clicking a card opens #event-detail-page
     in read-only view; Edit is only wired up there for manager/engineer
     (canEditTeam(), events.js). */
  .events-grid-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px;}
  /* Active/Archived lens switch + Add event button, same row -- force a
     shared height (box-sizing:border-box so padding counts inside it)
     since .lens-switch's own padding/font and .btn-secondary's don't
     compute to quite the same height on their own. */
  .events-grid-toolbar .lens-switch, .events-grid-toolbar #add-event-btn, .events-grid-toolbar #add-hosted-btn{ height:40px; box-sizing:border-box; }
  .events-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
  @media (max-width:900px){ .events-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:600px){ .events-grid{grid-template-columns:1fr;} }
  .event-card{
    position:relative; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:18px;
    cursor:pointer; display:flex; flex-direction:column; gap:6px;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
  }
  .event-card:hover{border-color:var(--accent); transform:translateY(-3px);}
  .event-card-name{font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--text);}
  .event-card-meta{font-size:11px; color:var(--text-3); font-family:var(--mono);}
  .event-card-tags{display:flex; flex-wrap:wrap; gap:4px;}
  .event-card-tags .filter-chip{padding:2px 8px; font-size:11px; cursor:default;}
  .event-card-stats{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-2); margin-top:4px;}
  .event-card-stats .avail-badge{padding:2px 8px; font-size:11px; cursor:default;}

  /* Finished event (start/end date already past) -- greyed card + a small
     badge, same "muted until acted on" idea as .todo-item-row.done but for
     a whole card. Purely a display state derived from the date; archiving
     (below) is the separate, explicit action that actually moves it out
     of the Active list. */
  .event-card.event-card-finished{ opacity:.55; filter:grayscale(.6); }
  .event-card.event-card-finished:hover{ opacity:.85; }
  /* Once archived (Archived tab), it's no longer "needs your action" --
     drop the mute entirely, the Archived tab itself is what says "done". */
  .event-card.event-card-finished.event-card-archived{ opacity:1; filter:none; }
  .event-card-name-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  /* Favorite star (top-right of an event card) -- favorites sort first in
     the grid. Name row keeps room for it so a long name never runs under. */
  .event-card-name-row{padding-right:24px;}
  .event-fav-btn{
    position:absolute; top:12px; right:12px; z-index:1; width:28px; height:28px; padding:0; margin:0;
    display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:var(--radius-full); cursor:pointer;
    color:var(--text-3); transition:color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .event-fav-btn svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round;}
  .event-fav-btn:hover{color:var(--amber); transform:scale(1.12);}
  .event-fav-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .event-fav-btn.active{color:var(--amber);}
  .event-fav-btn.active svg{fill:currentColor;}
  .event-finished-badge{
    background:var(--pill-bg); color:var(--text-3); font-family:var(--sans); font-weight:700;
    font-size:10px; text-transform:uppercase; letter-spacing:.04em; padding:2px 8px; border-radius:var(--radius-full);
  }
  .event-card-actions{display:flex; justify-content:flex-end; margin-top:2px;}
  .event-card-actions .btn-secondary{padding:5px 10px; font-size:11px; margin:0;}

  /* Lineup cards (Lineup tab) -- same .event-card chrome as Manage,
     but a "hero" header (big per-class-colored car number + colored mono
     class badge) instead of Manage's plain name
     line, and a wider grid (fewer columns) since each card also carries a
     row of crew avatars, which the Manage grid's 3-column layout has no
     room for. */
  .lineup-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px;}
  @media (max-width:600px){ .lineup-grid{grid-template-columns:1fr;} }
  .lineup-card-header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
  .lineup-card-number{font-weight:800; font-size:26px; letter-spacing:-.02em; line-height:1.1;}
  .lineup-card-car{font-size:12.5px; color:var(--text-2); margin-top:3px;}
  .lineup-card-class-badge{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    padding:3px 9px; border-radius:var(--radius-full); white-space:nowrap; flex-shrink:0;
    background:var(--pill-bg); color:var(--text-3);
  }
  .lineup-card-crew-group{margin-top:10px;}
  .lineup-card-crew-label{font-size:10.5px; font-weight:600; color:var(--text-3); margin-bottom:4px;}
  .lineup-card-crew{display:flex; flex-wrap:wrap; gap:12px;}
  .lineup-crew-chip{display:flex; flex-direction:column; align-items:center; gap:5px; width:60px;}
  .lineup-crew-avatar{width:44px; height:44px; border-radius:50%; object-fit:cover; border:1px solid var(--border);}
  .lineup-crew-avatar-placeholder{
    display:flex; align-items:center; justify-content:center; background:var(--pill-bg);
    color:var(--text); font-size:15px; font-weight:700;
  }
  .lineup-crew-name{font-size:11px; color:var(--text-secondary); text-align:center; overflow-wrap:anywhere; line-height:1.2;}

  /* Lineup detail page's Crew tab (lineupCrewDetailCardHtml, events.js) --
     same grid/card proportions as .driver-avail-grid/.driver-avail-card
     (the RSVP tab's roster grid) but plain card background always, no
     tint-by-RSVP-status variant: RSVP here is a small .avail-badge pill
     instead, so this reads as "this lineup's crew" not "who's available". */
  .lineup-crew-card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px;}
  .lineup-crew-card{
    display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:16px 10px;
  }
  /* Clickable ones open the member profile modal (data-open-profile,
     wireMemberProfileTriggers) -- same lift/glow-border hover as every
     other clickable card on the site (.event-card, .setup-folder-tile). */
  .lineup-crew-card-clickable{cursor:pointer; transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;}
  .lineup-crew-card-clickable:hover{border-color:var(--accent); transform:translateY(-3px);}
  .lineup-crew-card-avatar{width:52px; height:52px; border-radius:50%; object-fit:cover; border:1px solid var(--border-strong); flex-shrink:0;}
  .lineup-crew-card-avatar-placeholder{
    display:flex; align-items:center; justify-content:center; background:var(--pill-bg);
    color:var(--text); font-size:18px; font-weight:700;
  }
  .lineup-crew-card-name{
    font-size:13px; font-weight:600; color:var(--text-primary); overflow-wrap:anywhere; line-height:1.2;
  }

  /* Per-class color: colored hero number + tinted badge (same 15% tint
     as .car-class-count / .avail-badge, so the class-color language reads
     the same across the app); the hover border takes the class color
     instead of --accent. Card background stays plain --card. */
  .lineup-card-teal .lineup-card-number{color:var(--teal);}
  .lineup-card-teal .lineup-card-class-badge{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .lineup-card-teal:hover{border-color:var(--teal);}

  .lineup-card-amber .lineup-card-number{color:var(--amber);}
  .lineup-card-amber .lineup-card-class-badge{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .lineup-card-amber:hover{border-color:var(--amber);}

  .lineup-card-violet .lineup-card-number{color:var(--violet);}
  .lineup-card-violet .lineup-card-class-badge{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .lineup-card-violet:hover{border-color:var(--violet);}

  .lineup-card-blue .lineup-card-number{color:var(--blue);}
  .lineup-card-blue .lineup-card-class-badge{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .lineup-card-blue:hover{border-color:var(--blue);}

  .lineup-card-red .lineup-card-number{color:var(--red);}
  .lineup-card-red .lineup-card-class-badge{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}
  .lineup-card-red:hover{border-color:var(--red);}

  /* Lineup detail page header (#lineup-detail-page) -- same "hero"
     colored-number + mono class-badge idiom as the lineup card above
     (renderLineupDetailView, events.js), so the card you click through
     from and the detail page you land on read as the same object. Own
     .lineup-hero-* class names rather than reusing .lineup-card-* so this
     static header can't pick up the cards' hover-only border rules.
     .lineup-card-class-badge itself IS reused as-is for the badge chip --
     its base shape has no hover coupling, only its per-class color does. */
  /* Event-name block + lineup hero block side by side on one row instead
     of stacked -- each keeps its own .cell.hero chrome (two visually
     distinct panels), just sharing a row instead of full-width each. */
  .lineup-detail-hero-row{display:flex; align-items:stretch; gap:16px; flex-wrap:wrap; margin-bottom:16px;}
  .lineup-detail-hero-row .cell.hero{margin-bottom:0;}
  .lineup-detail-event-block{flex:0 1 auto; display:flex; align-items:center;}
  .lineup-detail-event-block h2{white-space:nowrap;}
  .lineup-detail-hero{flex:1 1 320px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
  .lineup-detail-hero-title{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap;}
  /* Two classes to outrank .event-detail-header h2's font-size:19px
     (one class + one element still beats a single class alone). */
  .lineup-detail-hero .lineup-detail-number{font-size:24px;}
  .lineup-detail-car{font-size:13px; color:var(--text-2); margin-top:4px;}

  .lineup-hero-teal .lineup-detail-number{color:var(--teal);}
  .lineup-hero-teal .lineup-card-class-badge{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .lineup-hero-amber .lineup-detail-number{color:var(--amber);}
  .lineup-hero-amber .lineup-card-class-badge{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .lineup-hero-violet .lineup-detail-number{color:var(--violet);}
  .lineup-hero-violet .lineup-card-class-badge{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .lineup-hero-blue .lineup-detail-number{color:var(--blue);}
  .lineup-hero-blue .lineup-card-class-badge{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .lineup-hero-red .lineup-detail-number{color:var(--red);}
  .lineup-hero-red .lineup-card-class-badge{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}

  /* Event detail page (view or edit, swapped in place of the grid --
     same in-page sibling-section convention as #lineup-detail-page
     below, bop.js's main/submitted-detail, activity.js's list/detail). */
  .event-detail-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
  .event-detail-header h2{margin:0; font-size:22px; font-weight:800; letter-spacing:-.02em;}

  /* Sub-navigation inside the event detail page (Condition sets / Drivers
     / Race info / Stint sheet / Official BoP / Strategies) -- reuses the
     underlined .tab-bar from the Telemetry chart-page tabs (chart-utils.js)
     rather than a pill/chip style, which read as another tag filter here.
     .event-tab-btn is purely a JS selector hook, styled by ".tab-bar button". */
  .event-tab-panel{margin-top:4px;}

  .editor-field{margin-bottom:12px;}
  .editor-field-row{display:flex; gap:12px; margin-bottom:12px;}
  .editor-field-row .editor-field{flex:1; margin-bottom:0;}
  .editor-field label{display:block; font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em; margin-bottom:5px;}
  .editor-field input, .editor-field textarea{
    width:100%; background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text);
    font-family:var(--sans); font-size:13px; font-weight:500; padding:8px 12px; box-sizing:border-box; accent-color:var(--accent);
    transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }
  .editor-field input::placeholder, .editor-field textarea::placeholder{color:var(--text-3);}
  .editor-field input:hover:not(:disabled):not(:focus), .editor-field textarea:hover:not(:disabled):not(:focus){border-color:var(--border-strong);}
  .editor-field input:disabled{opacity:.6; cursor:not-allowed;}
  .editor-field input:focus, .editor-field textarea:focus{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .editor-field textarea{resize:vertical; font-family:var(--sans);}
  .condition-set-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:12px;}
  .condition-set-card .cs-header{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px;}
  .condition-set-card .cs-header input{flex:1;}
  .condition-set-fields{display:grid; grid-template-columns:repeat(auto-fill, minmax(130px,1fr)); gap:10px;}
  .condition-set-fields .editor-field{margin-bottom:0;}
  .btn-remove{background:none; border:none; color:var(--red); cursor:pointer; font-size:16px; line-height:1; padding:0 4px;}
  /* Buttons are pills (DA §4). Primary = the one accent CTA; secondary =
     pill surface with the filter-button hover (border to --accent, lift 2px). */
  .btn-primary{
    background:var(--accent); border:1px solid var(--accent); border-radius:var(--radius-full);
    color:var(--on-accent); font-weight:700; font-family:var(--sans); font-size:13px; padding:9px 18px; cursor:pointer;
    transition:transform var(--dur-fast) ease, filter var(--dur-fast) ease;
  }
  .btn-primary:hover:not(:disabled){transform:translateY(-2px); filter:brightness(1.06);}
  .btn-secondary{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); color:var(--text);
    font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 16px; cursor:pointer; margin-right:8px;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .btn-secondary:hover:not(:disabled){border-color:var(--accent); transform:translateY(-2px);}
  .btn-primary:disabled, .btn-secondary:disabled{opacity:0.5; cursor:not-allowed;}
  .btn-primary:focus-visible, .btn-secondary:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .btn-danger:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
  /* Same shape/weight as .btn-secondary, colored for a destructive action
     -- solid-on-hover echoes .reg-choice.no.active's red treatment. */
  .btn-danger{
    background:var(--card); border:1px solid var(--red); border-radius:var(--radius-full); color:var(--red);
    font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 16px; cursor:pointer; margin-right:8px;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .btn-danger:hover:not(:disabled){background:var(--red); color:var(--on-accent);}
  .btn-danger:disabled{opacity:0.5; cursor:not-allowed;}

  .view-toggle{display:flex; gap:3px; padding:4px; margin-bottom:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-full); width:fit-content;}
  .view-toggle button{
    background:none; border:none; border-radius:var(--radius-full); color:var(--text-2); font-family:var(--sans); font-size:13px;
    font-weight:600; padding:7px 16px; cursor:pointer; transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .view-toggle button.active{background:var(--dock-active-bg); color:var(--dock-active-fg);}
  .view-toggle button:not(.active):hover{background:var(--pill-bg); color:var(--text);}

  /* Pill switch, same DA as Activity's Combo/Track/Car lens switch --
     reused wherever a small set of mutually-exclusive views needs a
     softer, floating-chrome look than .view-toggle's squared-off bar.
     The "thumb" is a separate absolutely-positioned element
     (.lens-switch-thumb) that the page's JS slides between buttons via
     `transform`/`width` (measured from the active button's own
     offsetLeft/offsetWidth, so it works for any label lengths) --
     .active buttons themselves stay background:none so the thumb
     underneath is what's actually seen moving, not a re-paint. */
  /* Selected = the same inverted max-contrast pill as the active dock item. */
  .lens-switch{position:relative; display:inline-flex; gap:4px; padding:4px; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-full);}
  .lens-switch-thumb{
    position:absolute; top:4px; bottom:4px; left:4px; width:0;
    background:var(--dock-active-bg); border-radius:var(--radius-full);
    transition:transform .25s ease, width .25s ease;
    pointer-events:none; z-index:0;
  }
  .lens-switch button{position:relative; z-index:1; border:none; background:none; color:var(--text-2); font-family:var(--sans); font-size:12px; font-weight:600; padding:7px 15px; border-radius:var(--radius-full); cursor:pointer; transition:color var(--dur-fast) ease;}
  .lens-switch button:hover{color:var(--text);}
  .lens-switch button.active{color:var(--dock-active-fg);}
  .lens-switch button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .ev-section{margin-top:24px;}
  .ev-section-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;}
  .ev-section-head h3{margin:0; font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em;}
  .ev-row{
    display:grid; gap:10px; align-items:center; background:var(--card); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 14px; margin-bottom:8px;
  }
  .ev-row input, .ev-row select{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text);
    font-family:var(--sans); font-size:12.5px; padding:6px 10px; width:100%; box-sizing:border-box;
  }
  .ev-row-team{grid-template-columns:1fr 160px 28px;}

  /* Compact grouped chips for event.cars -- one row per car (.ev-row)
     gets unreadable past a handful of entries, e.g. 10 GT3 + 5 GTP. */
  .car-chip-group{margin-bottom:12px; border-left:3px solid var(--border-strong); padding-left:10px;}
  .car-chip-group-label{font-size:11px; font-weight:700; color:var(--text-2); text-transform:uppercase; letter-spacing:.02em; margin-bottom:6px;}
  .car-chip-group-count{color:var(--text-3); font-weight:400; text-transform:none; letter-spacing:normal;}
  .car-chip-wrap{display:flex; flex-wrap:wrap; gap:8px;}
  .car-chip{
    display:inline-flex; align-items:center; gap:6px; background:var(--pill-bg); border:1px solid var(--border);
    border-radius:var(--radius-full); padding:4px 8px 4px 12px; font-size:12px; font-weight:600; color:var(--text);
  }
  .car-chip-remove{background:none; border:none; color:var(--text-3); cursor:pointer; font-size:14px; line-height:1; padding:2px;}
  .car-chip-remove:hover{color:var(--red);}

  /* Manual color override per class (event.classColors), edit mode only --
     small clickable dots next to the class label in carsChipsHtml. */
  .color-swatch-picker{display:inline-flex; gap:5px; margin-left:8px; vertical-align:middle;}
  .color-swatch-btn{
    width:13px; height:13px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer;
    box-sizing:content-box;
  }
  .color-swatch-btn:hover{border-color:var(--border-strong);}
  .color-swatch-btn.active{border-color:var(--text);}
  .color-swatch-btn.teal{background:var(--teal);}
  .color-swatch-btn.amber{background:var(--amber);}
  .color-swatch-btn.violet{background:var(--violet);}
  .color-swatch-btn.blue{background:var(--blue);}
  .color-swatch-btn.red{background:var(--red);}

  /* Manual class display order (event.classOrder), edit mode only --
     move-up/move-down buttons next to the color swatches above. Tinted
     with the group's own accent color at rest (same rgba(color,0.15)
     convention as .car-class-count/.avail-badge just above), solid on
     hover (same convention as .reg-choice.active/.filter-chip.active). */
  .car-class-reorder{display:inline-flex; gap:2px; margin-left:8px; vertical-align:middle;}
  .class-move-btn{
    border:1px solid transparent; border-radius:var(--radius-full); cursor:pointer; font-size:12px; font-weight:700;
    line-height:1; padding:3px 7px; background:var(--pill-bg); color:var(--text-3);
  }
  .class-move-btn:disabled{opacity:.3; cursor:default;}
  .car-class-teal .class-move-btn:not(:disabled){background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .car-class-amber .class-move-btn:not(:disabled){background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .car-class-violet .class-move-btn:not(:disabled){background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .car-class-blue .class-move-btn:not(:disabled){background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .car-class-red .class-move-btn:not(:disabled){background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}
  .car-class-teal .class-move-btn:hover:not(:disabled){background:var(--teal); color:var(--on-color);}
  .car-class-amber .class-move-btn:hover:not(:disabled){background:var(--amber); color:var(--on-color);}
  .car-class-violet .class-move-btn:hover:not(:disabled){background:var(--violet); color:var(--on-color);}
  .car-class-blue .class-move-btn:hover:not(:disabled){background:var(--blue); color:var(--on-color);}
  .car-class-red .class-move-btn:hover:not(:disabled){background:var(--red); color:var(--on-color);}

  /* Per-class tables/blocks (Official BoP, edit and read-only) -- same
     left-border-accent idea as the chips above, one color per class so a
     3-class event doesn't read as one flat gray wall. */
  .car-class-block{border-left:3px solid var(--border-strong); padding-left:12px;}
  .car-class-heading{margin:0 0 8px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--text-2); display:flex; align-items:center; gap:8px;}
  .car-class-count{font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:var(--radius-full); background:var(--pill-bg); color:var(--text-3);}

  .car-class-teal{border-left-color:var(--teal);}
  .car-class-teal .car-class-heading, .car-class-teal .car-chip-group-label{color:var(--teal);}
  .car-class-teal .car-class-count{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .car-class-amber{border-left-color:var(--amber);}
  .car-class-amber .car-class-heading, .car-class-amber .car-chip-group-label{color:var(--amber);}
  .car-class-amber .car-class-count{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .car-class-violet{border-left-color:var(--violet);}
  .car-class-violet .car-class-heading, .car-class-violet .car-chip-group-label{color:var(--violet);}
  .car-class-violet .car-class-count{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .car-class-blue{border-left-color:var(--blue);}
  .car-class-blue .car-class-heading, .car-class-blue .car-chip-group-label{color:var(--blue);}
  .car-class-blue .car-class-count{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .car-class-red{border-left-color:var(--red);}
  .car-class-red .car-class-heading, .car-class-red .car-chip-group-label{color:var(--red);}
  .car-class-red .car-class-count{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}

  /* ---------- lineup stint sheet (Lineup detail, Stint sheet tab) --
     A pit-wall document, not a spreadsheet: no cell grid, one hairline
     per row, and values carrying no box of their own. The eye should run
     down a column of times, not bounce off 200 borders.

     Three bands across: the plan (number, window, laps, fuel), the
     assignment block (one column per driver, tinted so consecutive
     stints for one driver read as a continuous bar -- a double stint is
     visibly one block), then notes. Only the assignment block is
     delimited, by its own tint and two hairlines.

     Edit mode shows no form controls at rest (lineupStintTableHtml,
     events.js): inputs pick up a box on row hover or on focus. ------- */
  /* No scrolling inside the sheet: the page scrolls, however long the
     plan is. Below 900px the frame takes the horizontal overflow rather
     than letting a wide crew push the whole page sideways -- and there,
     an `overflow` ancestor is what stops the header sticking, which is a
     fair trade on a phone. */
  .stint-sheet-scroll{
    overflow:visible;
    border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--card);
  }
  @media (max-width:900px){ .stint-sheet-scroll{overflow-x:auto;} }
  /* Nothing clips the corners without an overflow, so the corner cells
     carry the frame's radius themselves. */
  .stint-sheet thead th:first-child{border-top-left-radius:var(--radius-lg);}
  .stint-sheet thead th:last-child{border-top-right-radius:var(--radius-lg);}
  .stint-sheet tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg);}
  .stint-sheet tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg);}
  .stint-sheet{
    width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px;
    font-variant-numeric:tabular-nums; color:var(--text);
  }
  .stint-sheet thead th{
    position:sticky; top:0; z-index:2; background:var(--card);
    /* Sticks against the page now that the wrapper has no overflow. */
    padding:11px 12px; text-align:left; white-space:nowrap;
    font-family:var(--sans); font-size:10px; font-weight:600; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.06em;
    border-bottom:1px solid var(--border-strong);
  }
  .stint-sheet tbody td{padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
  .stint-sheet tbody tr:last-child td{border-bottom:none;}
  .ss-row{transition:background var(--dur-fast) ease;}
  .ss-row:hover{background:var(--pill-hover);}

  /* Plan band -- the stint number stays out of the way, the window is the
     one thing to find at a glance, laps and fuel sit right-aligned. */
  .ss-c-num, .stint-sheet td.ss-num{width:1%; padding-right:4px; color:var(--text-3); text-align:right;}
  .ss-c-window{width:1%;}
  /* Header alignment has to out-specify `.stint-sheet thead th` above,
     or Laps/Fuel/# sit left over columns that read right. */
  .stint-sheet thead th.ss-c-num, .stint-sheet thead th.ss-c-figure{text-align:right;}
  .stint-sheet thead th.ss-c-act{padding-left:0; padding-right:12px;}
  .stint-sheet td.ss-window{white-space:nowrap;}
  .ss-clock{font-size:13px; font-weight:600; letter-spacing:-.01em;}
  .ss-to{color:var(--text-3); margin:0 5px;}
  .ss-dur{
    font-family:var(--sans); font-size:10.5px; color:var(--text-3);
    margin-left:9px; padding:1px 6px; border-radius:var(--radius-full); background:var(--pill-bg);
  }
  .ss-c-figure, .stint-sheet td.ss-figure{width:1%; text-align:right; white-space:nowrap; color:var(--text-2);}
  .ss-blank{color:var(--text-3);}

  /* The same window read on the driver's own wall clock -- a secondary
     reading of the column next to it, so it is set one notch quieter than
     the Window it derives from and carries the city it belongs to. */
  .ss-c-irl{width:1%;}
  .stint-sheet td.ss-irl{white-space:nowrap; color:var(--text-2);}
  .stint-sheet td.ss-irl .ss-clock{font-weight:500;}
  .ss-irl-zone{
    font-family:var(--sans); font-size:10.5px; color:var(--text-3);
    margin-left:9px; letter-spacing:.02em;
  }
  /* Another day than the one the race starts on: the whole point of the
     column for a crew spread across the planet, so it is the one part of
     the cell that is allowed to be loud. */
  .ss-irl-day{
    font-family:var(--sans); font-size:10.5px; font-weight:600;
    margin-left:9px; padding:1px 6px; border-radius:var(--radius-full);
    background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent);
  }
  .ss-irl-none{font-family:var(--sans); font-size:11px; color:var(--text-3);}

  /* Assignment block: tinted so it reads as one region, its two edges the
     only vertical rules on the sheet. An assigned cell is filled edge to
     edge rather than boxed, which is what makes a run of stints for the
     same driver read as a single bar. */
  .stint-sheet .ss-driver-col, .stint-sheet td.ss-driver{
    width:1%; text-align:center; white-space:nowrap;
    background:color-mix(in srgb, var(--accent) 3.5%, transparent);
  }
  .stint-sheet .ss-driver-col{color:var(--text-2); padding-left:18px; padding-right:18px; text-align:center;}
  .stint-sheet .ss-driver-first{border-left:1px solid var(--border);}
  .stint-sheet .ss-driver-last{border-right:1px solid var(--border);}
  .stint-sheet td.ss-driver{color:var(--text-3); transition:background var(--dur-fast) ease;}
  .stint-sheet td.ss-driver[data-row]{cursor:pointer;}
  .ss-mark{display:inline-block; min-width:14px; font-size:13px; line-height:1;}
  /* Empty cell, hovered: a ghost of what clicking would do. */
  .stint-sheet td.ss-driver[data-row]:hover{background:color-mix(in srgb, var(--accent) 10%, transparent);}
  .stint-sheet td.ss-driver[data-row]:hover .ss-mark::before{content:'\2713'; color:var(--text-3); opacity:.45;}
  .stint-sheet td.ss-driver[data-row]:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .stint-sheet td.ss-driver.is-on{
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    color:var(--accent); font-weight:700;
  }
  .stint-sheet td.ss-driver.is-on:hover{background:color-mix(in srgb, var(--accent) 22%, transparent);}
  .stint-sheet td.ss-driver.is-on:hover .ss-mark::before{content:none;}

  .ss-c-notes, .stint-sheet td.ss-notes{
    width:auto; min-width:140px; text-align:left; white-space:normal;
    font-family:var(--sans); font-size:12px; color:var(--text-3);
  }
  .ss-c-act, .stint-sheet td.ss-act{width:1%; padding-left:0;}

  /* Inputs with no box until they are reached for. */
  .stint-sheet .ss-input{
    background:transparent; border:1px solid transparent; border-radius:8px;
    color:var(--text); font-family:var(--mono); font-size:12.5px;
    font-variant-numeric:tabular-nums; padding:3px 6px; box-sizing:border-box;
  }
  .stint-sheet .ss-input::placeholder{color:transparent;}
  .ss-row:hover .ss-input{background:var(--pill-bg);}
  .ss-row:hover .ss-input::placeholder{color:var(--text-3);}
  .stint-sheet .ss-input:focus{
    outline:none; background:var(--card); border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .stint-sheet .ss-input:focus::placeholder{color:var(--text-3);}
  .stint-sheet .ss-input-clock{width:66px; font-size:13px; font-weight:600; text-align:center;}
  .stint-sheet .ss-input-figure{width:64px; text-align:right;}
  .stint-sheet .ss-input-notes{width:100%; font-family:var(--sans); font-size:12px;}

  /* Remove: present only for the row being pointed at, so 50 red crosses
     do not run down the side of the sheet. */
  .ss-remove{
    border:none; background:none; cursor:pointer; padding:2px 6px; line-height:1;
    font-size:17px; color:var(--text-3); opacity:0; transition:opacity var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .ss-row:hover .ss-remove, .ss-remove:focus-visible{opacity:1;}
  .ss-remove:hover{color:var(--red);}
  .ss-remove:focus-visible{outline:2px solid var(--red); outline-offset:2px; border-radius:6px;}

  /* The stop between two stints: a strip, subordinate to the rows it sits
     between, carrying the loss first because that is the number being
     traded. Marked by an accent rule on the left, no border of its own. */
  .stint-sheet tr.ss-pit td{padding:0; border-bottom:1px solid var(--border);}
  .ss-pit-strip{
    display:flex; align-items:center; flex-wrap:wrap; gap:0 14px;
    padding:5px 12px 5px 10px; background:var(--pill-bg);
    border-left:2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    font-family:var(--sans); font-size:11px; color:var(--text-3);
  }
  .ss-pit-tag{
    font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--accent);
    text-transform:uppercase; letter-spacing:.09em;
  }
  .ss-pit-loss{font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums;}
  .ss-pit-fuel{font-family:var(--mono); font-size:11.5px; color:var(--text-2); font-variant-numeric:tabular-nums;}
  .ss-pit-to{color:var(--text-3);}
  .ss-flag{
    font-size:10px; padding:1px 8px; border-radius:var(--radius-full);
    background:var(--card); border:1px solid var(--border); color:var(--text-3);
  }
  /* Everything the crew puts in or swaps on the car is green -- the fuel
     going in, the tyres, the driver -- so a strip of ten stops shows what
     was DONE to the car at a glance, apart from what it cost in time
     (neutral). --online is the palette's one green (token block at the
     top); nothing "online" about it here. */
  .ss-pit-add, .ss-flag-tyres, .ss-flag-driver{color:var(--online);}
  .ss-flag-tyres, .ss-flag-driver{border-color:color-mix(in srgb, var(--online) 35%, transparent);}
  .ss-pit-stationary{margin-left:auto; color:var(--text-3);}

  @media (max-width:700px){
    .stint-sheet{font-size:12px;}
    .stint-sheet thead th, .stint-sheet tbody td{padding:8px 9px;}
    .stint-sheet .ss-driver-col{padding-left:10px; padding-right:10px;}
    .ss-pit-stationary{margin-left:0;}
  }

  /* Stint sheet tab chrome: the toolbar its three actions live on, the
     reason a disabled action gives, and the small section headings above
     the driver totals and inside the setup modal. */
  .stint-toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .stint-toolbar .btn-primary, .stint-toolbar .btn-secondary{margin:0;}
  .stint-blocker{margin:10px 0 0;}
  .stint-section-title{
    margin:18px 0 10px; font-size:11px; font-weight:600; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.04em;
  }

  /* ---------- "Set up stint sheet" modal (#stint-setup-modal) ----------
     A long form: it scrolls inside the box, same as #setup-detail-modal,
     instead of running past the bottom of the viewport. The preview block
     is pinned visually under the fields as the answer to what was typed. */
  #stint-setup-modal .modal-box{display:flex; flex-direction:column; max-height:86vh;}
  #stint-setup-modal #stint-setup-body{overflow-y:auto; flex:1; min-height:0;}
  #stint-setup-modal #stint-setup-context{margin:0 0 8px;}
  .stint-setup-group{margin-bottom:4px;}
  .stint-setup-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px;}
  .stint-setup-field{margin-bottom:0;}
  .stint-setup-hint{margin:4px 0 0; font-size:10.5px; line-height:1.35; color:var(--text-3);}
  .editor-field label.stint-setup-check{
    display:flex; align-items:center; gap:8px; min-height:36px; margin-bottom:0;
    font-size:12px; font-weight:500; color:var(--text-2);
    text-transform:none; letter-spacing:normal; cursor:pointer;
  }
  .stint-setup-check input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;}
  .editor-field input.stint-setup-invalid{border-color:var(--red);}
  .stint-setup-preview{
    margin-top:14px; padding-top:2px; border-top:1px solid var(--border); flex-shrink:0;
  }
  .stint-setup-preview-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:8px 18px;}
  .stint-setup-preview-label{
    display:block; font-size:10px; font-weight:600; color:var(--text-3);
    text-transform:uppercase; letter-spacing:.02em; margin-bottom:2px;
  }
  .stint-setup-preview-value{font-family:var(--mono); font-size:12.5px; color:var(--text);}
  .stint-setup-preview-empty{font-size:12px; color:var(--text-3);}

  /* ---------- engineer supervision ---------- */
  .eng-card{
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:20px 22px; margin-bottom:16px;
  }
  .eng-card-title{font-size:14px; font-weight:700; letter-spacing:-.01em; margin-bottom:10px;}
  .eng-card-row{display:flex; flex-wrap:wrap; gap:24px; align-items:flex-end;}
  .eng-card-col{display:flex; flex-direction:column; gap:4px; min-width:160px;}
  .eng-card-col label{font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.02em;}
  .eng-card-col .eng-value{font-family:var(--mono); font-size:14px; color:var(--text-secondary);}
  .eng-card-col input{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text);
    font-family:var(--mono); font-size:13px; padding:7px 10px; width:120px;
  }
  .eng-diverged{color:var(--amber);}
  .eng-diverged-badge{
    background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber); font-family:var(--sans); font-weight:600;
    font-size:10px; text-transform:uppercase; padding:2px 8px; border-radius:var(--radius-full); margin-left:8px;
  }

  /* ---------- Setup Cloud ---------- */
  .setup-file-row{
    display:flex; justify-content:space-between; align-items:center; background:var(--card);
    border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:8px;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease; cursor:pointer;
  }
  .setup-file-row:hover{border-color:var(--accent); transform:translateY(-2px);}
  .setup-file-name{font-size:13.5px; font-weight:700; letter-spacing:-.01em;}
  .setup-file-meta{color:var(--text-3); font-size:11.5px; margin-top:2px;}
  .setup-file-row .btn-secondary{margin:0; text-decoration:none;}

  .setup-breadcrumb{
    display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-family:var(--mono); font-size:12px;
    margin-bottom:16px;
  }
  .setup-crumb{
    background:none; border:none; color:var(--text-2); font-family:var(--mono); font-size:12px;
    cursor:pointer; padding:2px 4px; transition:color var(--dur-fast) ease;
  }
  .setup-crumb:last-child{color:var(--text); font-weight:600;}
  .setup-crumb:hover{color:var(--accent);}
  .setup-crumb-sep{color:var(--text-3);}

  .setup-explorer-toolbar{margin-bottom:14px;}
  .setup-explorer-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; margin-bottom:14px;
  }
  .setup-folder-tile{
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; background:var(--card);
    border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text);
    padding:14px 16px; cursor:pointer; font-family:var(--sans); text-align:left;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .setup-folder-tile:hover{border-color:var(--accent); transform:translateY(-3px);}
  .setup-folder-tile:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .setup-tile-icon{font-size:20px;}
  .setup-tile-name{font-size:13px; font-weight:700; color:var(--text); word-break:break-word;}
  .setup-tile-meta{font-size:11px; color:var(--text-3);}

  /* ---------- aero X/Y position map ---------- */
  .aero-xy-outer{display:flex; align-items:stretch; gap:8px; margin-top:8px;}
  .aero-xy-ylabel{
    writing-mode:vertical-rl; transform:rotate(180deg); color:var(--text-3); font-size:11px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .aero-xy-xlabel{color:var(--text-3); font-size:11px; text-align:center; margin-top:6px; margin-left:34px;}
  .aero-xy-wrap{position:relative; flex:1; aspect-ratio:1.6; max-height:340px;}
  .aero-xy-grid{
    display:grid; width:100%; height:100%; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden;
  }
  .aero-xy-cell{position:relative;}
  .aero-xy-cell::after{
    content:attr(data-v); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:8px; color:rgba(11,13,14,0.55); opacity:0; transition:opacity .1s;
    pointer-events:none;
  }
  .aero-xy-cell:hover::after{opacity:1;}
  .aero-xy-dot{
    position:absolute; width:12px; height:12px; border-radius:50%; background:var(--amber);
    border:2px solid var(--card); transform:translate(-50%,-50%); display:none; pointer-events:none;
    box-shadow:0 0 0 1px var(--border-strong);
  }

  /* No aero map for the session's wing: centered request card that
     replaces the % front downforce chart and the map (aero.js). */
  .aero-request{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
    min-height:320px; text-align:center;
  }
  .aero-request[hidden]{display:none;}
  .aero-request-text{margin:0; max-width:440px; font-size:14px; line-height:1.5; color:var(--text-2);}
  .aero-request-status{margin:0; max-width:440px; font-size:13px; font-weight:600; color:var(--text-2);}
  .aero-request-status:empty{display:none;}
  .aero-request-note{margin:0; max-width:440px; font-size:12px; line-height:1.45; color:var(--text-3);}

  .avail-badge{
    display:inline-block; padding:3px 10px; border-radius:var(--radius-full); font-size:10.5px; font-weight:600; cursor:pointer;
    font-family:var(--sans);
  }
  .avail-badge.yes{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .avail-badge.maybe{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .avail-badge.no{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}

  /* Drivers & availability tab (event detail, read-only view) -- one
     card per driver, tinted by RSVP status, same avatar_path convention
     as .lineup-crew-avatar above. */
  /* align-items:stretch (grid default) makes every card in a row match
     the row's tallest card; margin-top:auto on the status line then pins
     it to the same baseline across the row regardless of name length. */
  .driver-avail-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:12px;}
  .driver-avail-card{
    display:flex; flex-direction:column; align-items:center; text-align:center;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg); padding:16px 10px;
  }
  .driver-avail-avatar{width:56px; height:56px; border-radius:50%; object-fit:cover; border:1px solid var(--border-strong); flex-shrink:0;}
  .driver-avail-avatar-placeholder{
    display:flex; align-items:center; justify-content:center; background:var(--pill-bg);
    color:var(--text); font-size:20px; font-weight:700;
  }
  .driver-avail-name{
    font-size:13px; font-weight:600; color:var(--text-primary); overflow-wrap:anywhere; line-height:1.2;
    margin-top:8px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .driver-avail-status{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:auto; padding-top:8px;}
  .driver-avail-yes{background:color-mix(in srgb, var(--teal) 10%, transparent); border-color:var(--teal);}
  .driver-avail-yes .driver-avail-status{color:var(--teal);}
  .driver-avail-maybe{background:color-mix(in srgb, var(--amber) 10%, transparent); border-color:var(--amber);}
  .driver-avail-maybe .driver-avail-status{color:var(--amber);}
  .driver-avail-no{background:color-mix(in srgb, var(--red) 10%, transparent); border-color:var(--red);}
  .driver-avail-no .driver-avail-status{color:var(--red);}

  /* Event detail Leaderboard tab (leaderboardTabHtml, events.js) -- a
     .pilot-table with the ranked-by column emphasized and the top three
     ranks picked out in accent. Rows open the member profile modal. */
  .leaderboard-scroll{overflow-x:auto;}
  .leaderboard-table th, .leaderboard-table td{white-space:nowrap;}
  .leaderboard-row{cursor:pointer; transition:background var(--dur-fast) ease;}
  .leaderboard-row:hover{background:var(--pill-hover);}
  .leaderboard-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
  .leaderboard-rank{width:1%; color:var(--text-3); font-weight:700;}
  .leaderboard-p1 .leaderboard-rank, .leaderboard-p2 .leaderboard-rank, .leaderboard-p3 .leaderboard-rank{color:var(--accent);}
  .leaderboard-p1{box-shadow:inset 3px 0 0 var(--accent);}
  .leaderboard-driver{display:flex; align-items:center; gap:10px; font-family:var(--sans); font-weight:600; color:var(--text);}
  .leaderboard-table td.leaderboard-active{color:var(--text); font-weight:800;}
  .leaderboard-sub{color:var(--text-3); font-size:11px; font-weight:400;}
  .driver-avail-none .driver-avail-status{color:var(--text-3);}
  /* Same clickable-avatar-card affordance as .lineup-crew-card-clickable
     -- border-color only on hover so each status tint (yes/maybe/no)
     stays visible underneath. */
  .driver-avail-card-clickable{cursor:pointer; transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;}
  .driver-avail-card-clickable:hover{border-color:var(--accent); transform:translateY(-3px);}

  .event-register-choices{display:flex; gap:6px; flex-shrink:0;}
  .reg-choice{
    font-family:var(--sans); font-size:12px; font-weight:600; padding:5px 13px; border-radius:var(--radius-full);
    border:1px solid var(--border); background:var(--pill-bg); color:var(--text-2); cursor:pointer;
    transition:border-color var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .reg-choice:hover{color:var(--text); border-color:var(--accent);}
  .reg-choice.yes.active{background:var(--teal); border-color:var(--teal); color:var(--on-color);}
  .reg-choice.maybe.active{background:var(--amber); border-color:var(--amber); color:var(--on-color);}
  .reg-choice.no.active{background:var(--red); border-color:var(--red); color:var(--on-color);}
  /* Event detail's RSVP tab -- big "your response" banner above the
     driver grid. Same card/border/radius/padding recipe as
     .setup-file-row, just laid out as a label-left/buttons-right row. */
  .rsvp-hero{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg);
    padding:16px 20px; margin-bottom:18px;
  }
  .pilot-table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px;}
  .pilot-table th{
    text-align:left; padding:8px 10px; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);
    font-family:var(--sans); font-size:10.5px;
  }
  .pilot-table td{padding:8px 10px; border-bottom:1px solid var(--border);}
  .pilot-table td input{
    background:var(--pill-bg); border:1px solid var(--border); border-radius:10px; color:var(--text);
    font-family:var(--mono); font-size:12px; padding:5px 8px; width:100%; box-sizing:border-box;
  }

  /* Official BoP sheet -- one table per class, "Class" merged down the
     left column like a real series BoP sheet (see officialBopHtml).
     Named bop-sheet-table, not bop-table -- that name is already taken
     by the unrelated BoP submissions page (.bop-table above, bop.js). */
  .bop-sheet-table{margin-bottom:16px; table-layout:fixed;}
  .bop-sheet-table th{white-space:nowrap;}
  .bop-class-cell{
    writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg); text-align:center;
    font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:11px; width:1%; white-space:nowrap;
  }
  .car-class-teal .bop-class-cell{background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal);}
  .car-class-amber .bop-class-cell{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .car-class-violet .bop-class-cell{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .car-class-blue .bop-class-cell{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);}
  .car-class-red .bop-class-cell{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}

  /* ---------- Calendar page ---------- */
  .calendar-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;}
  .calendar-nav{display:flex; align-items:center; gap:16px;}
  .calendar-nav h1{font-size:20px; font-weight:800; letter-spacing:-.02em; margin:0; min-width:200px; text-align:center;}
  .calendar-nav button{
    background:var(--card); border:1px solid var(--border); border-radius:50%; color:var(--text);
    width:34px; height:34px; font-size:16px; cursor:pointer; line-height:1;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .calendar-nav button:hover{border-color:var(--accent); transform:translateY(-2px);}
  .calendar-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; margin-bottom:1px;}
  .calendar-weekdays div{
    text-align:center; font-size:10.5px; font-weight:600; color:var(--text-3); text-transform:uppercase;
    letter-spacing:.02em; padding:8px 0;
  }
  .calendar-grid{
    display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:112px; gap:1px;
    background:var(--border); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden;
  }
  .calendar-cell{background:var(--card); padding:8px; overflow:hidden;}
  .calendar-cell.other-month{background:var(--bg); opacity:0.55;}
  .calendar-cell .day-num{
    font-family:var(--mono); font-size:12px; color:var(--text-2); width:24px; height:24px;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
  }
  .calendar-cell.today .day-num{
    background:var(--accent); color:var(--on-accent); font-weight:700;
  }
  .calendar-event-pill{
    display:block; background:color-mix(in srgb, var(--teal) 15%, transparent); color:var(--teal); font-size:11px; font-weight:600;
    padding:2px 6px 2px 7px; border-radius:6px; border-left:3px solid var(--teal);
    margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; text-decoration:none;
  }
  .calendar-event-pill:hover{background:color-mix(in srgb, var(--teal) 28%, transparent);}
  /* Colored by the event's first tag (getTagColor in calendar.js) --
     same tint-plus-left-accent recipe as .car-class-* elsewhere, one per
     accent color, so different tags stand out from each other on the grid. */
  .calendar-event-pill.tag-amber{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber); border-left-color:var(--amber);}
  .calendar-event-pill.tag-amber:hover{background:color-mix(in srgb, var(--amber) 28%, transparent);}
  .calendar-event-pill.tag-violet{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet); border-left-color:var(--violet);}
  .calendar-event-pill.tag-violet:hover{background:color-mix(in srgb, var(--violet) 28%, transparent);}
  .calendar-event-pill.tag-blue{background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue); border-left-color:var(--blue);}
  .calendar-event-pill.tag-blue:hover{background:color-mix(in srgb, var(--blue) 28%, transparent);}
  .calendar-event-pill.tag-red{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red); border-left-color:var(--red);}
  .calendar-event-pill.tag-red:hover{background:color-mix(in srgb, var(--red) 28%, transparent);}
  .calendar-session-pill{
    background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue); font-size:11px; padding:2px 6px; border-radius:6px;
    margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
  }
  .calendar-session-pill:hover{background:color-mix(in srgb, var(--blue) 28%, transparent);}
  .calendar-session-pill.type-qualifying{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .calendar-session-pill.type-qualifying:hover{background:color-mix(in srgb, var(--amber) 28%, transparent);}
  .calendar-session-pill.type-race{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}
  .calendar-session-pill.type-race:hover{background:color-mix(in srgb, var(--red) 28%, transparent);}
  .calendar-session-pill.type-test{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .calendar-session-pill.type-test:hover{background:color-mix(in srgb, var(--violet) 28%, transparent);}
  /* Past event/session pill (calendar.js's `isPast` on the cell's own day) --
     filter+opacity so it dims any tag/type color variant above without
     needing a grayed-out override per variant. */
  .calendar-event-pill.is-past, .calendar-session-pill.is-past{filter:grayscale(1); opacity:0.45;}
  .session-type-badge{
    font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;
    padding:2px 8px; border-radius:var(--radius-full); background:color-mix(in srgb, var(--blue) 15%, transparent); color:var(--blue);
  }
  .session-type-badge.type-qualifying{background:color-mix(in srgb, var(--amber) 15%, transparent); color:var(--amber);}
  .session-type-badge.type-race{background:color-mix(in srgb, var(--red) 15%, transparent); color:var(--red);}
  .session-type-badge.type-test{background:color-mix(in srgb, var(--violet) 15%, transparent); color:var(--violet);}
  .upcoming-section{margin-bottom:24px;}
  .upcoming-section h2{font-size:12px; font-weight:700; color:var(--text-3); margin:0 0 12px; text-transform:uppercase; letter-spacing:.02em;}
  .upcoming-card{
    position:relative; display:flex; justify-content:space-between; align-items:center; background:var(--card);
    border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-lg);
    padding:14px 18px; cursor:pointer; transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
  }
  .upcoming-card:hover{border-color:var(--accent); transform:translateY(-3px);}
  /* Calendar's "Upcoming" strip (only current user of .upcoming-list)
     scrolls horizontally (§8.9) -- Dashboard's recent-sessions list
     reuses the shared .upcoming-card class but stays a vertical
     full-width list via its own #dash-recent-sessions container. */
  /* overflow-x:auto here forces overflow-y to compute to auto too (per
     spec, an axis can't stay 'visible' once the other isn't) -- so the
     strip clips flush with its own edges. The shared .upcoming-card:hover
     translateY(-3px) (same lift value as every other card on the site --
     event-card, setup-folder-tile, the dashboard's .nc-item modules) was
     getting clipped at the top edge with zero padding to move into --
     padding-top here reserves that room instead of dropping the lift. */
  .upcoming-list{display:flex; flex-direction:row; gap:12px; overflow-x:auto; padding:6px 0;}
  .upcoming-list .upcoming-card{
    flex-direction:column; align-items:flex-start; gap:10px; min-width:260px; flex-shrink:0;
  }
  .upcoming-list .upcoming-badge{align-self:flex-start; margin-left:0;}
  .upcoming-name{font-weight:700; font-size:14px; letter-spacing:-.01em;}
  .upcoming-meta{color:var(--text-3); font-size:11.5px; margin-top:2px;}
  .upcoming-badge{
    background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); font-family:var(--sans); font-weight:700;
    font-size:10.5px; padding:4px 10px; border-radius:var(--radius-full); white-space:nowrap; flex-shrink:0; margin-left:12px;
  }

  /* Event detail's Hosted tab -- same horizontal scroll-strip "card" as
     Calendar's Upcoming list (unchanged), just a size bump on the card
     itself now that each one also carries the quick-RSVP row. */
  .hosted-tab-list .upcoming-card{min-width:300px; padding:16px 20px;}
  .hosted-tab-list .upcoming-name{font-size:15px;}
  .hosted-tab-list .upcoming-meta{font-size:12.5px;}
  .upcoming-badge.today{background:var(--accent); color:var(--on-accent);}

  .calendar-filters{display:flex; gap:8px; margin:0 0 16px; flex-wrap:wrap;}
  .filter-chip{
    font-family:var(--sans); font-size:12px; font-weight:600; padding:6px 14px; border-radius:var(--radius-full);
    border:1px solid var(--border); background:var(--card); color:var(--text-2); cursor:pointer;
    transition:border-color var(--dur-fast) ease, transform var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .filter-chip:hover{color:var(--text); border-color:var(--accent); transform:translateY(-2px);}
  .event-card-tags .filter-chip:hover, .filter-chip[style*="cursor:default"]:hover{transform:none;}
  /* Selected filter = the inverted max-contrast pill (DA §5 signature). */
  .filter-chip.active{background:var(--dock-active-bg); border-color:var(--dock-active-bg); color:var(--dock-active-fg);}
  /* Per-tag color (event.tagColors, see getTagColor in events.js) -- same
     accent palette as the car-class swatches, so distinct tags don't all
     render as the same flat chip. */
  .filter-chip.tag-teal.active{background:var(--teal); border-color:var(--teal); color:var(--on-color);}
  .filter-chip.tag-amber.active{background:var(--amber); border-color:var(--amber); color:var(--on-color);}
  .filter-chip.tag-violet.active{background:var(--violet); border-color:var(--violet); color:var(--on-color);}
  .filter-chip.tag-blue.active{background:var(--blue); border-color:var(--blue); color:var(--on-color);}
  .filter-chip.tag-red.active{background:var(--red); border-color:var(--red); color:var(--on-color);}

  /* Hosted session duration slider (Add/Edit session modal) -- 1h-24h,
     same horizontal-track/round-thumb language as the Side-by-side page's
     scrub/zoom sliders (.sbs-controls input[type="range"]), but reset
     from .editor-field input's default boxed text-input look (padded
     background/border, wrong for a thin track). */
  .editor-field input.session-duration-slider{
    -webkit-appearance:none; appearance:none; width:100%; height:4px; padding:0; margin-top:8px;
    border:1px solid transparent; border-radius:2px; cursor:pointer;
    /* --range-progress (0%-100%) is kept in sync with the current value by
       updateDurationSliderFill (calendar.js/events.js) -- native <input
       type=range> has no cross-browser "filled portion" pseudo-element, so
       the fill is faked with a two-stop gradient recomputed on every input. */
    background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress, 0%), var(--pill-hover) var(--range-progress, 0%), var(--pill-hover) 100%);
  }
  .editor-field input.session-duration-slider:focus{box-shadow:none; border-color:transparent;}
  .editor-field input.session-duration-slider::-webkit-slider-thumb{
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--accent);
    cursor:pointer;
  }
  .editor-field input.session-duration-slider::-moz-range-thumb{
    width:14px; height:14px; border:none; border-radius:50%; background:var(--accent);
    cursor:pointer;
  }
  .session-duration-value{color:var(--accent); font-family:var(--mono); text-transform:none; letter-spacing:0; margin-left:4px;}

  .auth-box{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:30px; width:390px; max-width:90vw; box-shadow:var(--shadow); position:relative; z-index:2;
  }
  .auth-brand{
    font-weight:800; font-size:20px; color:var(--text);
    text-align:center; letter-spacing:.04em; margin-bottom:20px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  }
  .auth-brand-logo{height:64px; width:auto; flex-shrink:0; display:block;}
  .auth-tabs{display:flex; gap:4px; margin-bottom:20px; border-bottom:1px solid var(--border);}
  .auth-tabs button{
    flex:1; background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; color:var(--text-3);
    font-family:var(--sans); font-size:12.5px; font-weight:600; padding:8px 4px; cursor:pointer;
    transition:color var(--dur-fast) ease, border-color var(--dur-fast) ease;
  }
  .auth-tabs button:hover{color:var(--text);}
  .auth-tabs button.active{color:var(--text); border-bottom-color:var(--accent); font-weight:700;}
  .auth-form{display:none;}
  .auth-form.active{display:block;}
  .auth-form .btn-primary{width:100%; margin-top:4px; box-sizing:border-box;}
  .auth-error{color:var(--red); font-size:12px; margin-top:12px; min-height:14px;}
  .auth-status{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:12px;}
  .auth-status-profile-link{
    display:flex; align-items:center; gap:8px; flex-direction:row;
    padding:0; text-decoration:none; font-size:12.5px; font-weight:500; color:var(--text-2);
  }
  /* Canonical "this represents a person" avatar -- initials on a pill
     circle (DA who-chip avatar), or the real photo when the account has one. Reused
     verbatim wherever a person shows up (nav, roster, pilot picker,
     stint planner, To-Do assignee, ...). */
  .av{
    width:26px; height:26px; border-radius:50%; object-fit:cover; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--sans); font-weight:700; font-size:10px; color:var(--text);
  }
  .av-placeholder{background:var(--pill-hover);}
  .av-lg{width:64px; height:64px; font-size:22px;}
  .av-xl{width:112px; height:112px; font-size:38px;}
  .av-sm{width:18px; height:18px; font-size:8px;}
  /* "Online" presence dot -- wraps whichever avatar markup sits inside
     (site/js/auth.js wrapAvatarHtml()), bottom-right, only rendered
     when the person has a heartbeat within api/auth.py's ONLINE_WINDOW.
     Sized off the avatar class actually present via :has() rather than
     threading a size modifier through every call site. */
  .av-wrap{position:relative; display:inline-flex; flex-shrink:0;}
  .av-online-dot{
    position:absolute; right:-1px; bottom:-1px;
    width:8px; height:8px; border-radius:50%;
    background:var(--online);
    border:2px solid var(--card);
  }
  .av-wrap:has(.av-sm) .av-online-dot{width:6px; height:6px; border-width:1px;}
  .av-wrap:has(.av-lg) .av-online-dot{width:13px; height:13px;}
  .av-wrap:has(.av-xl) .av-online-dot{width:20px; height:20px; border-width:3px;}
  .av-wrap:has(.lineup-crew-avatar) .av-online-dot{width:10px; height:10px;}
  .av-wrap:has(.lineup-crew-card-avatar) .av-online-dot{width:11px; height:11px;}
  .av-wrap:has(.driver-avail-avatar) .av-online-dot{width:12px; height:12px;}
  .auth-status-name{color:var(--text); font-weight:600; transition:color var(--dur-fast) ease;}
  .auth-status-profile-link:hover{color:var(--text);}
  .auth-status-profile-link:hover .auth-status-name{color:var(--accent);}
  .auth-status-role{
    color:var(--text-2); text-transform:uppercase; font-size:9.5px; font-weight:700; letter-spacing:.04em;
    background:var(--pill-bg); border-radius:var(--radius-full); padding:2px 8px;
  }

  /* ---------- To-Do List ---------- */
  .todo-item-row{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px;}
  .todo-item-row input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer; flex-shrink:0;}
  .todo-item-text{font-size:13.5px; font-weight:700; letter-spacing:-.01em; flex:1 1 auto; min-width:0; overflow-wrap:break-word;}
  .todo-item-row.done .todo-item-text{color:var(--text-3); text-decoration:line-through; font-weight:500;}
  .todo-item-meta{display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0;}
  .todo-item-assignee{display:flex; align-items:center; gap:6px; color:var(--text-2); font-size:12px;}
  .todo-item-due{color:var(--text-3); font-size:11px; font-family:var(--mono);}
  .todo-item-due.overdue{color:var(--red);}
  .todo-item-row{cursor:pointer;}
  /* Left accent bar by priority (§5.3 pattern, reused everywhere a row
     needs "at a glance" priority/state) -- box-shadow so it layers on
     top of the row's own border instead of fighting it. */
  .todo-item-row.pr-now{box-shadow:inset 3px 0 0 var(--accent);}
  .todo-item-row.pr-important{box-shadow:inset 3px 0 0 var(--violet);}
  .todo-item-row.pr-medium{box-shadow:inset 3px 0 0 var(--blue);}
  .todo-item-row.pr-low{box-shadow:inset 3px 0 0 var(--teal);}
  .todo-done-field{display:flex; align-items:flex-end;}
  .todo-done-label{
    display:flex; align-items:center; gap:8px; margin:0; cursor:pointer; text-transform:none;
    font-size:13px; color:var(--text-primary); letter-spacing:normal; padding-bottom:9px;
  }
  .todo-done-label input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent); cursor:pointer;}

  /* Team page: kick-confirmation checkbox (site/team.html remove-member-modal)
     -- same look as .todo-done-label above, own class since it lives outside
     the To-Do List section. */
  .remove-member-wipe-label{
    display:flex; align-items:center; gap:8px; margin:0 0 20px; cursor:pointer;
    font-size:13px; color:var(--text-primary);
  }
  .remove-member-wipe-label input[type="checkbox"]{width:16px; height:16px; accent-color:var(--red); cursor:pointer; flex-shrink:0;}
  /* Role access modal (team.html): one collapsible group per page. */
  #role-access-modal .modal-box{display:flex; flex-direction:column; width:560px; max-height:85vh;}
  /* Scrollbar hidden like #setup-detail-content (wheel/touch/keyboard still scroll). */
  .role-access-groups{overflow-y:auto; min-height:0; margin:0 -4px; padding:0 4px; scrollbar-width:none;}
  .role-access-groups::-webkit-scrollbar{display:none;}
  .role-access-group{border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:8px; background:var(--card);}
  .role-access-group-head{
    display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; background:none; border:0;
    color:var(--text-primary); font-family:var(--sans); font-size:13px; font-weight:700; text-align:left; cursor:pointer;
  }
  .role-access-group-head .role-access-count{margin-left:auto; font-family:var(--mono); font-size:11px; font-weight:600; color:var(--text-3);}
  .role-access-group-head .role-access-chevron{color:var(--text-3); transition:transform var(--dur-fast) ease;}
  .role-access-group.open .role-access-chevron{transform:rotate(90deg);}
  .role-access-group-body{display:none; padding:2px 14px 4px;}
  .role-access-group.open .role-access-group-body{display:block;}
  .role-access-group-body .remove-member-wipe-label{margin:0 0 10px;}
  .role-access-group-body .remove-member-wipe-label.role-access-all{padding-bottom:10px; border-bottom:1px solid var(--border); color:var(--text-2); font-weight:600;}
  #todo-sections{display:flex; flex-direction:column; gap:16px;}
  .todo-section-header{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--border);}
  .todo-section-label{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;}
  .todo-progress-track{flex:1; height:4px; border-radius:var(--radius-full); background:var(--ring-track); overflow:hidden;}
  .todo-progress-fill{height:100%; border-radius:var(--radius-full);}
  .todo-section-count{font-family:var(--mono); font-size:11px; color:var(--text-3);}
  .todo-section-body{padding:12px 18px 6px;}
  .todo-section-body .todo-item-row:last-child{margin-bottom:0;}

  /* ---------- phones (second audit 2026-09-15, Batch E) ----------
     Layout only, below 600px: same colours, fonts and components, nothing
     changes on wider screens (desktop captures checked pixel-identical with
     tests/perf/ui_audit.py). Found at 390px: the account chip covering the
     brand, 6 of the 11 dock links scrolled out of sight, the Dashboard and
     Activity laid out ~500px wide (grid items refusing to shrink below their
     content), 4-5 KPI columns squeezed or clipped, rows whose actions crush
     their title, and Telemetry 1070px wide. */
  @media (max-width:600px){
    /* chrome: brand left, theme toggle + compact account chip right (avatar + log out) */
    .float-brand{top:14px; left:12px; gap:8px; font-size:14px;}
    .float-brand .brand-mark{width:30px; height:30px; border-radius:9px;}
    .float-brand .brand-logo{height:30px;}
    .float-right{top:14px; right:12px; gap:6px;}
    .float-who{padding:3px 6px 3px 4px; gap:6px;}
    .float-who .auth-status-name, .float-who .auth-status-role{display:none;}
    .float-who #auth-logout-btn{padding:8px 10px; min-height:32px;}

    /* every dock link visible: two rows instead of a hidden horizontal scroll */
    .dock{
      bottom:10px; left:10px; right:10px; transform:none; max-width:none; overflow:visible;
      display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:2px; padding:6px;
    }
    .dock a{min-width:0; height:44px; padding:0 2px; border-radius:12px; gap:3px;}
    .dock a:not(.active):hover{transform:none;}
    .dock a .label{font-size:9.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis;}

    .page-shell{padding-top:76px; padding-bottom:132px;}

    /* grid children may shrink below their content (the default min-width:auto
       is what widened whole pages past the screen) */
    .bento > *, .layout > *, .side, .charts, .cell, .panel{min-width:0;}
    .cell{padding:16px;}

    .dash-hero-greet{font-size:24px; overflow-wrap:anywhere;}
    .dash-hero{min-height:0; padding:22px;}
    .dash-hero-title{font-size:28px; overflow-wrap:anywhere;}
    .dash-hero-slogan{font-size:16px; overflow-wrap:anywhere;}
    .signal-ring-row{gap:14px;}
    .nc-grid{grid-template-columns:1fr;}

    /* KPI rows: two columns (the inline 5-column grids included) */
    .kpirow{display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
    .kpirow .kslot{min-width:0;}
    .kpirow .k-value{font-size:20px;}
    .kpirow .kslot{padding:14px 16px;}
    .kpirow .k-label{overflow-wrap:anywhere;}

    /* rows: title first, actions wrap underneath instead of crushing it */
    .setup-file-row{flex-wrap:wrap; gap:10px; padding:12px;}
    .setup-file-row > *{min-width:0;}
    .setup-file-row .custom-select{min-width:0;}
    .ev-section-head{flex-wrap:wrap; gap:8px;}
    .event-register-choices{flex-wrap:wrap;}
    .reg-choice{padding:8px 14px;}

    .calendar-header{flex-wrap:wrap; gap:12px;}
    .calendar-grid{grid-auto-rows:76px;}
    .calendar-cell{padding:4px 3px;}
    .calendar-event-pill{font-size:10px; padding:2px 3px 2px 4px; border-left-width:2px;}
    .btn-link-red{padding:8px 2px;}
    .setup-crumb{padding:8px 6px;}
    .calendar-nav{flex:1 1 100%; justify-content:space-between;}
    .calendar-nav h1{min-width:0;}

    .loaders{padding:0; gap:10px;}
    .loaders .custom-select, .loaders > div{flex:1 1 100%; margin-left:0 !important;}
    .loaders > div .btn-primary, .loaders > div .btn-secondary{flex:1 1 0;}

    /* modals fit the screen and scroll inside */
    .modal-box{max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow-y:auto;}
  }

  /* Keyboard focus on rows, cards and charts that act like buttons (second
     audit 2026-09-15, Batch E): shown only when focus comes from the keyboard. */
  [role="button"][tabindex="0"]:focus-visible, canvas[tabindex="0"]:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  tr[role="button"][tabindex="0"]:focus-visible{outline-offset:-2px;}

  /* Page notices (api.js showPageNotice, second audit 2026-09-15 Batch E):
     offline, team key unavailable, data that could not be decrypted --
     popover cards stacked above the dock. */
  .page-notices{
    position:fixed; left:24px; bottom:100px; z-index:4000; display:flex; flex-direction:column; gap:10px;
    width:min(380px, calc(100vw - 32px));
  }
  .page-notice{width:auto; max-width:none; border-radius:var(--radius-lg); padding:16px 18px; background:var(--card); box-shadow:var(--pop-shadow);}
  .page-notice h3{margin:0 0 8px; font-size:14px; font-weight:800;}
  .page-notice p{margin:0 0 8px; font-size:13px; color:var(--text-secondary); line-height:1.55;}
  .page-notice .modal-actions{margin-top:10px;}
  .page-notice a.btn-primary{text-decoration:none; display:inline-flex; align-items:center;}
  @media (max-width:600px){
    .page-notices{left:12px; right:12px; width:auto; bottom:128px;}
    body:has(.modal-overlay.active) .page-notices{display:none;}
  }

  /* Bug report (site/js/bug-report.js): round button between the bell and
     the account chip, same look as the bell; the form is a regular .modal-box. */
  .bug-report-btn{
    width:36px; height:36px; border-radius:50%; padding:0; flex-shrink:0; cursor:pointer;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; color:var(--text);
    transition:transform .25s ease, border-color var(--dur-fast) ease;
  }
  .bug-report-btn:hover{transform:rotate(-12deg) scale(1.08); border-color:var(--accent);}
  .bug-report-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .bug-report-btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  #bug-report-modal textarea{min-height:120px;}
  .bug-report-note{margin:0; font-size:12px; line-height:1.45; color:var(--text-3);}

  /* In-site notifications (site/js/notifications.js): bell between the theme
     toggle and the account chip, toasts stacked under the chip until the
     member closes them, history in the bell's panel. */
  .notif-bell{
    position:relative; width:36px; height:36px; border-radius:50%; padding:0; flex-shrink:0; cursor:pointer;
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center; color:var(--text);
    transition:transform .25s ease, border-color var(--dur-fast) ease;
  }
  .notif-bell:hover, .notif-bell[aria-expanded="true"]{border-color:var(--accent);}
  .notif-bell:hover{transform:rotate(20deg) scale(1.08);}
  .notif-bell:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .notif-bell svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .notif-badge{
    position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; padding:0 4px; box-sizing:border-box;
    border-radius:var(--radius-full); border:2px solid var(--bg);
    background:var(--accent); color:var(--on-accent);
    font-family:var(--sans); font-size:9.5px; font-weight:800; line-height:13px; text-align:center;
  }
  .notif-badge[hidden]{display:none;}

  .notif-toasts{
    position:fixed; top:70px; right:24px; z-index:900;
    display:flex; flex-direction:column; align-items:flex-end; gap:10px;
    width:min(340px, calc(100vw - 32px)); pointer-events:none;
  }
  .notif-toasts > *{pointer-events:auto;}
  body.notif-panel-open .notif-toasts{visibility:hidden;}
  .notif-toast{
    display:flex; align-items:flex-start; gap:12px; width:100%; box-sizing:border-box;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
    box-shadow:var(--pop-shadow); padding:14px 12px 14px 14px;
    animation:notif-in var(--dur-base) ease;
  }
  @keyframes notif-in{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
  .notif-icon{
    width:30px; height:30px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--blue); background:color-mix(in srgb, currentColor 13%, transparent);
  }
  .notif-icon svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .notif-icon-hosted_created{color:var(--violet);}
  .notif-icon-hosted_started{color:var(--accent);}
  .notif-icon-todo_assigned{color:var(--teal);}
  .notif-icon-todo_overdue{color:var(--amber);}
  .notif-icon-local_done{color:var(--teal);}
  .notif-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
  .notif-title{
    color:var(--text-3); text-transform:uppercase; font-size:9.5px; font-weight:700; letter-spacing:.04em;
  }
  .notif-text{
    color:var(--text); font-size:13.5px; font-weight:700; letter-spacing:-.01em; line-height:1.35;
    text-decoration:none; overflow-wrap:anywhere; transition:color var(--dur-fast) ease;
  }
  a.notif-text:hover{color:var(--accent);}
  a.notif-text:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}
  .notif-meta{color:var(--text-3); font-size:11.5px; margin-top:2px;}
  .notif-toast .notif-close{width:26px; height:26px; font-size:16px; margin:-4px 0 0;}
  .notif-more{
    background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius-full);
    color:var(--text-2); font-family:var(--sans); font-size:12px; font-weight:600; padding:6px 12px; cursor:pointer;
    transition:border-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .notif-more:hover{border-color:var(--accent); color:var(--text);}
  .notif-more:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

  .notif-panel{
    position:fixed; z-index:4000; width:min(360px, calc(100vw - 24px));
    max-height:min(480px, calc(100vh - 120px)); overflow-y:auto; box-sizing:border-box;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); box-shadow:var(--pop-shadow);
    padding:5px;
  }
  .notif-panel[hidden]{display:none;}
  .notif-panel-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px 6px;}
  .notif-panel-title{font-size:13px; font-weight:800; letter-spacing:-.01em; color:var(--text);}
  .notif-dismiss-all{
    background:none; border:none; padding:2px 0; cursor:pointer;
    color:var(--accent); font-family:var(--sans); font-size:12px; font-weight:600;
  }
  .notif-dismiss-all:hover{text-decoration:underline;}
  .notif-dismiss-all:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .notif-list{list-style:none; margin:0; padding:0;}
  .notif-row{
    display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:10px;
    transition:background-color var(--dur-fast) ease;
  }
  .notif-row:hover{background:var(--pill-bg);}
  .notif-row .notif-body{text-decoration:none; color:inherit;}
  .notif-row .notif-body:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
  .notif-row .notif-text{font-size:13px;}
  .notif-row:not(.unread) .notif-text{color:var(--text-2); font-weight:600;}
  .notif-unread-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:6px;}
  .notif-empty{margin:0; padding:18px 10px 20px; text-align:center; color:var(--text-3); font-size:12.5px;}
  @media (max-width:600px){
    .notif-bell, .bug-report-btn{width:32px; height:32px;}
    .notif-toasts{top:58px; left:12px; right:12px; width:auto;}
  }
  /* The bell makes the top-right group ~38px wider: below 400px it would
     cover the brand, which keeps its mark and "SIGMA" only. */
  @media (max-width:400px){
    .float-brand .brand-word b{display:none;}
  }

  /* Placeholder for pages not built yet (BoP, Engineer) */
  .coming-soon{text-align:center; padding:90px 20px;}
  .coming-soon-title{font-weight:800; font-size:56px; letter-spacing:-.03em; line-height:1; margin-bottom:14px; color:var(--text);}
  .coming-soon-text{color:var(--text-3); font-size:13px; margin:0;}
  @media (max-width:600px){ .coming-soon{padding:60px 16px;} .coming-soon-title{font-size:38px;} }

  /* Daylight / Racing line: shared identifiers and restrained title marks.
     Existing hover, counter and ring animations are intentionally unchanged. */
  .dash-hero-greet::before, .dash-eyebrow::before{
    content:""; display:inline-block; width:17px; height:2px; margin-right:10px;
    background:var(--accent); vertical-align:middle;
  }
  .dash-hero-greet::before{margin-bottom:6px;}
  .racing-hero{
    isolation:isolate;
    background:linear-gradient(105deg, var(--card) 42%, color-mix(in srgb, var(--accent) 7%, var(--card)) 100%);
  }
  .racing-hero > :not(.racing-signature){position:relative; z-index:1;}
  .racing-signature{
    position:absolute; right:0; top:0; width:48%; height:100%;
    pointer-events:none; z-index:0; overflow:visible;
  }
  /* Left end of the line fades in (mask ramp in the SVG's own coordinates, alpha only). */
  .racing-signature mask{mask-type:alpha;}
  .racing-edges{color:var(--border-strong);}
  .racing-trajectory{color:var(--accent); opacity:.65;}
  .racing-apex{color:var(--accent);}
  .dash-hero .dash-hero-title{max-width:75%;}
  .dash-hero .dash-hero-next-empty{max-width:65%;}
  /* Small serial in the bottom-right corner of a Racing line hero. */
  .racing-hero > .racing-code{
    position:absolute; right:30px; bottom:20px;
    font:10px var(--mono); letter-spacing:.02em; color:var(--text-3);
  }
  .activity-hero{min-height:240px;}
  /* Filters sit under the hero row, bare (no panel), as in the Racing line study. */
  .bop-filters.activity-filters{
    background:none; border:none; box-shadow:none; padding:0; gap:12px; margin:4px 0 20px; align-items:flex-end;
  }
  /* Triggers use the card surface of the blocks around them, not the pill grey. */
  .activity-filters .custom-select-trigger, .activity-filters .pilot-picker-trigger,
  .page-filters .custom-select-trigger{
    background:var(--card); box-shadow:var(--shadow);
  }
  /* Every other page's hero (Side by Side included): same Racing line card as
     Dashboard/Activity, a little shorter, with the page description under the title. */
  .page-hero{min-height:190px; padding:30px 34px; margin-bottom:14px; display:flex; flex-direction:column; justify-content:center;}
  .page-hero .dash-hero-title{max-width:70%;}
  .page-hero-sub{max-width:52%; margin:6px 0 0; font-size:14px; line-height:1.5; color:var(--text-2);}
  .loaders.page-filters{padding:0; border:none; margin:4px 0 20px;}
  .loaders.page-filters .session-status:empty{display:none;} /* only errors/empty state are shown */
  /* Wide screens: keep the pickers and the two action buttons on one line.
     A long selection (circuit/car names) shrinks its picker with an ellipsis
     instead of wrapping the buttons onto a second row; the full name stays
     in the open list and in the trigger's tooltip. */
  @media (min-width:1101px){
    .loaders.page-filters{flex-wrap:nowrap;}
    .loaders.page-filters .custom-select{flex:0 1 auto; min-width:110px;}
    .loaders.page-filters .session-status{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .loaders.page-filters > div{flex-shrink:0;}
    .loaders.page-filters > div > button{white-space:nowrap;}
  }
  .reset-filters{
    margin-left:auto; border:0; background:none; padding:10px 3px; cursor:pointer;
    font-family:var(--sans); font-size:11px; font-weight:500; color:var(--text-2);
    transition:color var(--dur-fast) ease;
  }
  .reset-filters:hover{color:var(--accent);}
  .reset-filters:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

  .ac-heatmap-card{padding:20px 22px; justify-content:center;}
  .ac-heatmap-title{display:flex; justify-content:space-between; align-items:center; gap:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
  .ac-heatmap-period{font:8px var(--mono); white-space:nowrap; letter-spacing:.03em;}
  .ac-heatmap-card .lb-heatmap-legend{margin-top:14px;}
  /* Heatmap fills its card: fluid square cells instead of the fixed 9px grid. */
  @media (min-width:901px){ .activity-top{grid-template-columns:1fr 380px;} }
  .ac-heatmap-card .lb-heatmap{grid-template-rows:repeat(7, auto); gap:4px;}
  .ac-heatmap-card .lb-heatmap .hm-cell{width:auto; height:auto; aspect-ratio:1; border-radius:3px;}
  .ac-heatmap-card .lb-heatmap-legend .hm-cell{width:10px; height:10px;}

  /* Headline KPI rows (Dashboard, Activity summary), as in the Racing line
     study: label on top, big value, one-line context under it. */
  .kpirow.kpirow-lg .kslot{padding:18px 20px; min-height:118px; justify-content:flex-start;}
  .kpirow.kpirow-lg .k-label{font-size:10.5px; margin-bottom:0;}
  .kpirow.kpirow-lg .k-value{
    font-size:32px; font-weight:700; letter-spacing:-.045em; line-height:1.15;
    margin:14px 0 5px; font-variant-numeric:tabular-nums;
  }
  .kpirow.kpirow-lg .k-unit{font-size:18px; margin-left:3px; letter-spacing:0;}
  .kpirow.kpirow-lg .k-sub{font-size:10px; margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  /* Event metadata surrounds the original animated counter and ring. */
  #dash-signal{display:flex;}
  .dash-event-content{display:flex; flex-direction:column; justify-content:space-between; gap:16px; width:100%; min-width:0;}
  .dash-event-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .dash-event-head .signal-label{flex:none;}
  .dash-event-tag{
    max-width:60%; padding:3px 7px; border:1px solid var(--border-strong); border-radius:5px;
    font:8px var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--text-2);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .dash-event-content .signal-ring-row{height:auto; flex:1;}
  .dash-event-copy{min-width:0;}
  .dash-event-copy .signal-name{font-size:19px; line-height:1.25; margin:0 0 7px; overflow-wrap:anywhere;}
  .dash-event-copy .signal-sub{margin-top:3px; overflow-wrap:anywhere;}
  .dash-event-date{margin-top:9px; font:9px var(--mono); line-height:1.6; color:var(--text-2); overflow-wrap:anywhere;}
  .dash-event-foot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding-top:12px; border-top:1px solid var(--border); font-size:10px; color:var(--text-2);}
  .dash-event-foot a{display:inline-flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:600; padding-block:4px;}
  .dash-event-foot a:hover{color:var(--accent);}
  /* The whole card is the link: the footer link's hit area is stretched over
     it (#dash-signal is the positioned .cell), same hover as the modules. */
  .dash-event-foot a::after{content:""; position:absolute; inset:0; z-index:1;}
  .dash-event-foot a:focus-visible{outline:none;}
  #dash-signal{cursor:pointer; transition:transform var(--dur-fast) ease, border-color var(--dur-fast) ease;}
  #dash-signal:hover{transform:translateY(-3px); border-color:var(--accent);}
  #dash-signal:hover .dash-event-foot a{color:var(--accent);}
  #dash-signal:has(a:focus-visible){outline:2px solid var(--accent); outline-offset:2px;}
  @media(max-width:1100px){
    .dash-hero .dash-hero-title{max-width:90%;}
    .dash-hero .racing-signature, .page-hero .racing-signature{opacity:.65;}
    .page-hero-sub{max-width:62%;}
    .dash-event-copy .signal-name{font-size:17px;}
  }
  @media(max-width:600px){
    .dash-hero .racing-signature{width:43%; opacity:.4;}
    .dash-hero .dash-hero-title{max-width:100%;}
    .dash-hero .dash-hero-next-empty{max-width:85%;}
    .activity-hero{min-height:170px;}
    .page-hero{min-height:150px; padding:24px 22px 34px;}
    .page-hero .racing-signature{width:43%; opacity:.4;}
    .page-hero .dash-hero-title, .page-hero-sub{max-width:100%;}
    .racing-hero > .racing-code{right:18px; bottom:14px;}
    .kpirow.kpirow-lg .kslot{min-height:0; padding:14px 16px;}
    .kpirow.kpirow-lg .k-value{font-size:26px; margin:10px 0 4px;}
    .kpirow.kpirow-lg .k-unit{font-size:15px;}
  }