/* ==========================================================================
     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[hidden]{display:none;}
  .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;}
  .custom-select-trigger.is-colored{background:color-mix(in srgb, var(--option-color) 22%, var(--card)); border-color:color-mix(in srgb, var(--option-color) 32%, var(--card)); color:var(--text);}
  .custom-select-trigger.is-colored .custom-select-caret{color:inherit; opacity:.85;}
  .custom-select-trigger.is-colored:hover:not(:disabled){background:color-mix(in srgb, var(--option-color) 28%, var(--card)); border-color:color-mix(in srgb, var(--option-color) 42%, var(--card));}
  .custom-select-item.is-colored{background:color-mix(in srgb, var(--option-color) 18%, var(--card)); color:var(--text); margin:3px 0;}
  .custom-select-item.is-colored:hover,.custom-select-item.is-colored.highlighted{background:color-mix(in srgb, var(--option-color) 27%, var(--card)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--option-color) 35%, var(--card));}
  .custom-select-item.is-multiple{display:flex; align-items:center; gap:8px;}
  .custom-select-check{display:grid; place-items:center; flex:none; width:14px; height:14px; border:1px solid var(--border-strong); border-radius:4px; font-size:10px;}
  .custom-select-item.active .custom-select-check{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}

  /* Date/time pickers replacing every native date and time input
     (date-picker.js) -- trigger looks like the .editor-field text inputs
     it sits next to, popover like .custom-select-menu. */
  .date-picker{position:relative; display:block;}
  .date-picker-native{display:none;}
  .date-picker-trigger{
    display:flex; align-items:center; gap:8px; width:100%; min-height:36px; box-sizing:border-box;
    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; cursor:pointer; text-align:left;
    transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  }
  .date-picker-trigger:hover:not(:disabled){border-color:var(--border-strong);}
  .date-picker-trigger.open, .date-picker-trigger:focus-visible{
    outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .date-picker-trigger:disabled{opacity:.6; cursor:not-allowed;}
  .date-picker-trigger.is-empty .date-picker-label{color:var(--text-3);}
  .date-picker-icon{display:flex; color:var(--text-3); flex-shrink:0;}
  .date-picker-trigger.open .date-picker-icon{color:var(--accent);}
  .date-picker-label{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums;}
  .date-picker-pop{
    position:fixed; z-index:4000; width:264px; box-sizing:border-box; padding:12px;
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--pop-shadow);
    font-family:var(--sans); color:var(--text);
  }
  .date-picker-pop.is-time{width:180px;}
  .date-picker-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .date-picker-title{font-size:13px; font-weight:800; letter-spacing:-.01em;}
  .date-picker-nav{
    width:28px; height:28px; border:none; border-radius:50%; background:transparent; color:var(--text-2);
    font-size:18px; line-height:1; cursor:pointer; transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .date-picker-nav:hover{background:var(--pill-bg); color:var(--text);}
  .date-picker-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:2px;}
  .date-picker-weekday{text-align:center; font-size:10px; font-weight:600; color:var(--text-3); text-transform:uppercase; padding:4px 0;}
  .date-picker-day, .date-picker-cell{
    border:none; background:transparent; color:var(--text); font-family:var(--sans); font-size:12.5px; font-weight:600;
    cursor:pointer; font-variant-numeric:tabular-nums;
    transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease;
  }
  .date-picker-day{height:32px; border-radius:50%;}
  .date-picker-day:hover, .date-picker-cell:hover{background:var(--pill-bg);}
  .date-picker-day.is-outside{color:var(--text-3); font-weight:500;}
  .date-picker-day.is-today{box-shadow:inset 0 0 0 1px var(--accent); color:var(--accent);}
  .date-picker-day.is-cursor{background:var(--pill-hover);}
  .date-picker-day.is-selected, .date-picker-cell.is-selected{background:var(--accent); color:var(--on-accent);}
  .date-picker-cols{display:flex; align-items:stretch; gap:4px;}
  .date-picker-col{
    flex:1; display:flex; flex-direction:column; gap:2px; height:196px; overflow-y:auto; padding:2px;
    border-radius:var(--radius-sm); scrollbar-width:thin;
  }
  .date-picker-col.is-active{background:var(--pill-bg);}
  .date-picker-cell{padding:7px 0; border-radius:10px; flex-shrink:0;}
  .date-picker-colon{align-self:center; font-weight:800; color:var(--text-3);}
  .date-picker-foot{display:flex; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--border);}
  .date-picker-link{
    border:none; background:none; padding:4px 6px; border-radius:8px; cursor:pointer;
    font-family:var(--sans); font-size:12px; font-weight:600; color:var(--text-2);
  }
  .date-picker-link:hover{background:var(--pill-bg); color:var(--text);}
  .date-picker-link.is-accent{color:var(--accent);}
  .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);}

  /* Long event steps (especially BoP) scroll inside the viewport while
     the title, close button and navigation remain visible. */
  #event-wizard-modal .modal-box{
    display:flex; flex-direction:column; box-sizing:border-box;
    max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:hidden;
  }
  #event-wizard-modal .modal-header,
  #event-wizard-step-label,
  #event-wizard-modal .modal-actions{flex-shrink:0;}
  #event-wizard-body{min-height:0; overflow:auto; overscroll-behavior:contain;}

  /* 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);}
  /* Show/hide eye button inside password fields (password-toggle.js). */
  .password-wrap{position:relative;}
  .editor-field .password-wrap input{padding-right:38px;}
  .password-toggle{
    position:absolute; top:50%; right:6px; transform:translateY(-50%);
    display:flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
    background:none; border:none; border-radius:var(--radius-full); color:var(--text-3); cursor:pointer;
    transition:color var(--dur-fast) ease;
  }
  .password-toggle:hover{color:var(--text);}
  .password-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
  .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);}

  /* ---------- 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;}
  }