/* ============================================================================
 * YPO Supercar 2026 event palette — "Rosso Corsa" (dark, default) /
 * "Silver Circuit" (light). Structurally ported from ALICSS (the same token
 * names, reset, ambient glow, focus ring, and common UI patterns as
 * C:\Users\User\Dropbox\1 - Ali\Claude\ALICSS.css) but the color VALUES are
 * this event's own branded palette, not ALICSS's default blue — see
 * ../design/palette-options.html (option 1 = Rosso Corsa, option 2 = Silver
 * Circuit). Token names are unchanged from the ALICSS port so no screen
 * markup or JS needed to change — only the values below. A few token names
 * that ALICSS defines but this event's palette spec doesn't give an explicit
 * value for (--bg2/3/4, --text3, --accent-2, --accent-glow,
 * --grad-accent-text, --header-bg, --shadow-*, --chart-*) are kept and
 * mapped to the nearest new value so every existing rule below keeps
 * working unchanged. Do not hardcode hex/rgb outside these two blocks (and
 * the manifest / <meta name="theme-color">) — add or remap a token instead.
 * ========================================================================== */

/* ---------- DARK (DEFAULT) TOKENS — Rosso Corsa ---------- */
:root{
  /* surfaces — --bg is the page bg, --bg2 is cards (= --surface in the
     palette spec), --bg3 is interactive elements (chip bg, table headers,
     code blocks; = --surface2), --bg4 is the deepest accent surface (used
     sparingly; no explicit value given — one step past --bg3). */
  --bg:#0E0F12;
  --bg2:#16181D;
  --bg3:#1E2128;
  --bg4:#262A33;
  --border:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.16);

  /* text — --text is body, --text2 is secondary/labels, --text3 is muted
     (footers, "+ N more" hints; no explicit value given — a step down from
     --text2), --text-strong is headlines. */
  --text:#F2F3F5;
  --text2:#A0A4AD;
  --text3:#6B7078;
  --text-strong:#FFFFFF;

  /* foreground accent — the event's signature red (Rosso Corsa). --accent
     is the flat color for borders / focus rings / link colors. --accent-text
     is the legible-on-dark-bg variant for prominent text. */
  --accent:#EC212A;
  --accent-text:#FF6067;
  --accent-2:#EC212A;
  --accent-soft:rgba(236,33,42,0.16);
  --accent-glow:rgba(236,33,42,0.35);
  /* text color rendered on top of a solid accent-gradient fill (buttons,
     active chips, the brand logo glyph, the swap badge, the on-switch
     thumb) -- white works on this palette's accent gradient in both
     themes (see --grad-accent below), so one value, no light override. */
  --on-accent:#fff;

  /* signature gradients — use these for any prominent gradient surface.
     --grad-accent: solid-fill surfaces (buttons, active chips, brand pills).
     --grad-accent-text: text fills (with -webkit-background-clip:text) —
     the palette spec gives one gradient per theme, so both tokens share it. */
  --grad-accent:linear-gradient(90deg,#EC212A 0%,#000000 100%);
  --grad-accent-text:linear-gradient(90deg,#EC212A 0%,#000000 100%);

  /* semantic — use for status indicators (positive/negative deltas,
     warnings, info). Don't use --green for accents — that's --accent's job. */
  --green:#37B24D;
  --red:#F43F5E;
  --yellow:#F5A524;
  --silver:#C7CBD1;

  /* header gradient — used for sticky top bars (subtle charcoal gradient,
     no explicit value given — derived from the surface tokens above). */
  --header-bg:linear-gradient(135deg, rgba(22,24,29,0.92) 0%, rgba(30,33,40,0.92) 55%, rgba(14,15,18,0.92) 100%);

  /* shadows — --shadow-card is for default card depth (neutral, unchanged
     by the palette), --shadow-hover lifts on hover with an accent-tinted
     drop shadow (no explicit value given — same shape, new accent color). */
  --shadow-card:0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px -15px rgba(0,0,0,0.6);
  --shadow-hover:0 10px 40px -12px rgba(236,33,42,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;

  /* chart palette — read by Chart.js so charts re-color on theme switch
     (no explicit value given — mapped to --text2/--text). */
  --chart-tick:#A0A4AD;
  --chart-grid:rgba(255,255,255,0.06);
  --chart-legend:#F2F3F5;

  /* radii + motion */
  --r-sm:8px; --r-md:12px; --r-lg:14px;
  --ease-out:cubic-bezier(0.22,1,0.36,1);

  /* logo plate (Task 26) — the real event lockup (icons/logo.png) has a
     BLACK wordmark on a light silver background, so it needs a light
     backing regardless of theme to stay legible against the dark default
     (Rosso Corsa) as well as the light (Silver Circuit) theme. This is a
     deliberate, documented exception to "tokens only" — one dedicated
     token instead of a bare hardcoded hex, same value in both themes so
     it isn't redefined under [data-theme="light"] below. */
  --logo-plate:#FFFFFF;

  /* fonts — Inter for UI, JetBrains Mono for numerals/code. Load via
     Google Fonts preconnect link in <head>. */
  --font-ui:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-num:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;

  color-scheme: dark light;
}

/* ---------- LIGHT-MODE OVERRIDES — Silver Circuit ---------- */
[data-theme="light"]{
  --bg:#E9EBEE;
  --bg2:#FFFFFF;
  --bg3:#F1F2F4;
  --bg4:#E3E5E8;
  --border:rgba(0,0,0,0.10);
  --border-strong:rgba(0,0,0,0.16);
  --text:#1A1B1E;
  --text2:#5B5F66;
  --text3:#82868D;
  --text-strong:#0B0C0E;
  --header-bg:linear-gradient(135deg,#FFFFFF 0%,#F1F2F4 55%,#E9EBEE 100%);
  --accent-text:#B10D20;
  --accent-2:#E01029;
  --accent-soft:rgba(224,16,41,0.10);
  --accent-glow:rgba(224,16,41,0.28);
  --grad-accent:linear-gradient(90deg,#E01029 0%,#7A0A18 100%);
  --grad-accent-text:linear-gradient(90deg,#E01029 0%,#7A0A18 100%);
  --shadow-card:0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -18px rgba(15,23,42,0.18);
  --shadow-hover:0 10px 30px -12px rgba(224,16,41,0.25);
  --chart-tick:#5B5F66;
  --chart-grid:rgba(0,0,0,0.08);
  --chart-legend:#1A1B1E;
  --accent:#E01029;
  --red:#E01029;
  --green:#1E9E4A;
  --yellow:#B7791F;
  --silver:#B3B7BD;
}

/* ---------- RESET + BASE ---------- */
*,*:before,*:after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
  line-height:1.55;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
code{font-family:var(--font-num)}

/* ---------- AMBIENT GLOW — red/charcoal family, no blue ----------
   Three concentric washes at the top of the page, blurred: the event's
   signature red (twice, at two intensities) plus a neutral charcoal wash
   for depth. Retinted from ALICSS's default blue glow for this event's
   Rosso Corsa / Silver Circuit palette — see the header comment above. */
body::before{
  content:"";
  position:fixed;
  inset:-20% -10% auto -10%;
  height:70vh;
  background:
    radial-gradient(60% 50% at 20% 10%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 60%),
    radial-gradient(50% 45% at 85% 5%,  color-mix(in srgb, var(--accent-text) 14%, transparent) 0%, transparent 65%),
    radial-gradient(45% 40% at 55% 30%, color-mix(in srgb, black 35%, transparent) 0%, transparent 70%);
  filter:blur(20px);
  pointer-events:none;
  z-index:0;
  opacity:0.9;
}
[data-theme="light"] body::before{opacity:0.55}
body > *{position:relative;z-index:1}

/* ---------- FOCUS RING ---------- */
button:focus-visible,select:focus-visible,input:focus-visible,
a:focus-visible,.tab:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}

/* ============================================================================
 * COMMON UI PATTERNS
 * Below are reusable patterns. Drop in as-is or adapt class names.
 * ========================================================================== */

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--border);
  padding:14px 22px;
}
.topbar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);
  opacity:0.6;
  pointer-events:none;
}

/* ---------- BRAND (logo glyph + gradient name) ---------- */
.brand{font-weight:700;font-size:18px;letter-spacing:-0.01em;display:flex;align-items:center;gap:10px;color:var(--text-strong)}
.brand .logo{
  width:30px;height:30px;
  background:var(--grad-accent);
  border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--on-accent);
}
.brand .name{
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root:not([data-theme="light"]) .brand .name{
  background:var(--grad-accent-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--border);
  color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s;
}
.theme-toggle:hover{background:color-mix(in srgb, var(--bg3) 60%, transparent);border-color:var(--border-strong)}

/* ---------- TABS (active state = accent→black gradient underline) ---------- */
.tab{
  position:relative;padding:10px 16px;
  color:var(--text2);font-size:13px;font-weight:500;letter-spacing:-0.005em;
  transition:color .12s;cursor:pointer;
}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text-strong)}
.tab::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  border-radius:2px;
  background:var(--grad-accent);
  transform:scaleX(0);transform-origin:center;
  transition:transform 220ms var(--ease-out);
}
.tab.active::after{transform:scaleX(1)}

/* ---------- CHIPS (active state = accent→black gradient fill) ---------- */
.chip{
  padding:5px 11px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--text);font-size:12px;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{border-color:var(--accent);color:var(--text-strong)}
.chip.active{
  background:var(--grad-accent);
  border-color:transparent;
  color:var(--on-accent);
  box-shadow:0 4px 12px -4px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- CARDS ---------- */
.card{
  padding:18px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-card);
  transition:transform .15s var(--ease-out),border-color .15s,box-shadow .15s;
}
.card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-hover);
}

/* ---------- BUTTONS (primary = filled gradient, ghost = transparent) ---------- */
.btn{
  background:var(--grad-accent);
  color:var(--on-accent);border:none;
  padding:8px 16px;
  border-radius:var(--r-md);
  cursor:pointer;
  font-size:12.5px;font-weight:600;letter-spacing:0.005em;
  transition:transform 160ms var(--ease-out),box-shadow 160ms,filter 160ms;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.1)}
.btn-ghost{
  background:color-mix(in srgb, var(--bg2) 50%, transparent);
  border:1px solid var(--border);
  color:var(--text);
}
.btn-ghost:hover{background:color-mix(in srgb, var(--bg3) 60%, transparent);filter:none}

/* ---------- BADGES ---------- */
.badge{
  display:inline-block;font-size:10px;font-weight:600;
  padding:2px 8px;border-radius:6px;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--accent-text);
  background:var(--accent-soft);
}

/* ---------- ALERTS ---------- */
.alert{
  background:color-mix(in srgb, var(--bg3) 80%, transparent);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:12px 16px;margin-bottom:16px;
  font-size:13px;color:var(--text2);
}
.alert.info{
  border-color:color-mix(in srgb, var(--accent) 32%, transparent);
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  color:var(--accent-text);
}
[data-theme="light"] .alert.info{color:var(--accent-text);background:color-mix(in srgb, var(--accent) 8%, transparent)}

/* ---------- SEARCH HIGHLIGHT ---------- */
.hl{
  background:color-mix(in srgb, var(--accent) 22%, transparent);
  padding:1px 3px;border-radius:3px;
  color:var(--text-strong);font-weight:600;
}
[data-theme="light"] .hl{background:color-mix(in srgb, var(--accent) 18%, transparent);color:var(--text-strong)}

/* ---------- TABLES (sortable headers per CLAUDE.md) ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{
  background:var(--bg2);
  color:var(--accent-text);
  text-transform:uppercase;font-size:11px;letter-spacing:.5px;font-weight:700;
}
tr:hover td{background:color-mix(in srgb, var(--bg2) 60%, transparent)}
td.num,th.num{font-family:var(--font-num);text-align:right;font-variant-numeric:tabular-nums}

/* ---------- RESPONSIVE BREAKPOINT ---------- */
@media (max-width:720px){
  .container{padding:14px}
  .grid{grid-template-columns:1fr}
}

/* ============================================================================
 * YPO SUPERCAR APP SHELL
 * Task 14 — mobile-first PWA shell: topbar, bottom tab nav, view mount,
 * sign-in gate + route placeholder, install prompt affordance. Individual
 * screens (Now / Look up / My trip / Fleet / Admin) are built in later
 * tasks and plug into #view via window.registerScreen(route, renderFn) —
 * nothing in this section should assume real screen content.
 * ========================================================================== */

/* NO overflow-x on the root. The earlier attempts used overflow-x:hidden then
   overflow-x:clip to stop horizontal scroll — but BOTH break the fixed nav on
   iOS: with overflow-y left at its default (visible), specifying overflow-x as
   clip/hidden makes the browser COMPUTE overflow-y to auto, which turns <body>
   into a scroll container. On iOS, once body (not the viewport) is the scroller,
   position:fixed bars scroll away with the content — the "bottom bar slides up"
   bug. So set no overflow here: the viewport stays the scroller and the fixed
   topbar/tabbar pin correctly. Horizontal overflow is prevented instead by
   max-width:100% on media + .scroll-x wrappers around wide tables. */
html,body{width:100%;max-width:100%}

/* ---------- APP SHELL LAYOUT ----------
   The header element carries BOTH `.topbar` (ALICSS's sticky/gradient/blur
   base) and `.app-topbar` (this app's flex layout). Per the CLAUDE.md
   "CSS specificity / source-order trap" rule, every override here uses the
   compound selector `.topbar.app-topbar` (specificity 20) so it always wins
   over the single-class `.topbar` rule (specificity 10) regardless of which
   one appears later in the file — a single-class `.app-topbar{...}` rule
   would tie on specificity and depend on source order, which is fragile. */
/* position:FIXED unconditionally (not just on touch). iOS Safari/standalone
   PWA silently drops position:sticky; the old fix gated the fixed swap behind
   `@media (hover:none) and (pointer:coarse)`, but some iOS standalone/webview
   contexts don't match that query, so the bar fell back to the broken sticky
   and "slid up". Fixed everywhere removes that gamble (desktop handles fixed
   fine). #view is padded top+bottom below to clear both fixed bars. */
.topbar.app-topbar{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  /* SOLID background + NO backdrop-filter: on iOS, a position:fixed element
     that also carries -webkit-backdrop-filter can lose its viewport-pinned
     behaviour and scroll with the page (the "bottom bar slides up" bug). The
     known-good reference (Muskoka) pins with a solid bg. So override the
     ALICSS .topbar's translucent+blur look with a solid surface here. */
  background:var(--bg2);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.topbar.app-topbar .brand{font-size:16px}
.topbar.app-topbar .brand .logo{
  width:26px;height:26px;font-size:11px;border-radius:8px;
}

#view{
  min-height:calc(100vh - 56px - 60px);
  /* top pad clears the fixed topbar (~56px + notch); bottom pad clears the
     fixed tab bar (~64px + home indicator). Applied unconditionally now that
     both bars are position:fixed on every device. */
  padding:calc(20px + 56px + env(safe-area-inset-top, 0px)) 16px calc(32px + 64px + env(safe-area-inset-bottom, 0px));
  max-width:720px;
  margin:0 auto;
  width:100%;
}

/* ---------- BOTTOM TAB BAR ----------
   position:sticky is fine on desktop browsers (Blink/Gecko). iOS Safari /
   WebKit silently drops `sticky` — the touch-device override below swaps to
   `position:fixed` with safe-area padding, per the CLAUDE.md iOS-sticky rule.
   Never remove the touch override to "simplify" this — it is the whole fix. */
.tabbar{
  position:fixed;
  bottom:0;
  left:0;right:0;
  z-index:50;
  display:flex;
  /* SOLID background, NO backdrop-filter — see the note on .topbar.app-topbar.
     -webkit-backdrop-filter on a position:fixed bar breaks the pin on iOS. */
  background:var(--bg2);
  border-top:1px solid var(--border);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tabbar::before{
  content:"";
  position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 50%,transparent 100%);
  opacity:0.6;
  pointer-events:none;
}
.tab-item{
  flex:1 1 0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  padding:8px 4px;
  min-height:52px;
  min-width:0;
  border-radius:var(--r-sm);
  color:var(--text2);
  font-size:11px;font-weight:500;letter-spacing:-0.005em;
  transition:color .12s;
  position:relative;
}
.tab-item .tab-icon{font-size:18px;line-height:1}
.tab-item .tab-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.tab-item:hover{color:var(--text)}
.tab-item.active{color:var(--text-strong)}
.tab-item.active::after{
  content:"";position:absolute;left:20%;right:20%;top:2px;height:3px;
  border-radius:2px;background:var(--grad-accent);
}
.tab-item[hidden]{display:none}

/* (The former touch-only `position:fixed` override lived here. It's gone:
   both bars are now position:fixed unconditionally — see .topbar.app-topbar,
   .tabbar, and #view above — so there's no media-query dependency that iOS
   could fail to match and fall back to broken sticky.) */

/* ---------- ROUTE PLACEHOLDER (screens land here in later tasks) ---------- */
.placeholder-view{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:24px 4px;
}
.placeholder-view h1{
  margin:0;font-size:22px;letter-spacing:-0.01em;color:var(--text-strong);
}
.placeholder-view .muted{color:var(--text2);font-size:13.5px;margin:0}

/* ---------- SIGN-IN GATE (stub — full screen ships in a later task) ---------- */
.signin-gate{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:14px;
  padding:15vh 16px 40px;
  max-width:420px;margin:0 auto;
}
.signin-gate h1{
  margin:0;font-size:22px;letter-spacing:-0.01em;
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root:not([data-theme="light"]) .signin-gate h1{
  background:var(--grad-accent-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.signin-gate .muted{color:var(--text2);font-size:13.5px;margin:0}
.signin-gate .btn{margin-top:8px;padding:10px 24px;font-size:13px}
.signin-gate .offline-note{color:var(--yellow);font-size:12px}

/* ---------- SIGN-IN FLOW (Task 15 — real screen, plugs in via
   window.registerSignIn) — extends the .signin-gate base above. Per the
   CLAUDE.md CSS-specificity rule, every override here is written as the
   compound selector `.signin-gate.<variant>` so it always beats the
   single-class `.signin-gate` rule regardless of source order. ---------- */
.signin-gate.signin-flow{gap:16px}

/* Real event lockup (Task 26 — icons/logo.png: red car + black wordmark on
   a light silver background). It sits inside a white "logo plate" so the
   black wordmark stays legible against the dark default (Rosso Corsa) AND
   the light (Silver Circuit) theme, and reads as an intentional lockup
   rather than a stray light box. The <img> and its text fallback are both
   in the markup; wireLogoFallback() in signin.js hides the whole plate
   (not just the <img>) and swaps to the fallback on the image's `error`
   event, so a load failure never leaves an empty white box on screen. */
.signin-logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:2px}
.signin-logo-plate{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--logo-plate);
  border:1px solid var(--border);
  box-shadow:var(--shadow-card);
  border-radius:var(--r-lg);
  padding:14px 20px;
  max-width:240px;width:100%;
  box-sizing:border-box;
}
.signin-logo-plate[hidden]{display:none}
.signin-logo-img{display:block;max-width:100%;max-height:84px;width:auto;height:auto}
.signin-logo-fallback{
  font-family:var(--font-num);
  font-weight:700;font-size:13px;letter-spacing:0.16em;
  padding:8px 0 2px;
  background:var(--grad-accent);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
:root:not([data-theme="light"]) .signin-logo-fallback{
  background:var(--grad-accent-text);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.signin-logo-fallback .mid-dot{color:var(--text2);-webkit-text-fill-color:var(--text2)}
.signin-logo-fallback[hidden]{display:none}
.signin-logo-img[hidden]{display:none}

/* Forms (code entry, admin login) */
.signin-form{display:flex;flex-direction:column;gap:10px;width:100%}
.field-label{font-size:12px;color:var(--text2);text-align:left;font-weight:600}
.field-input{
  width:100%;padding:10px 12px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg2);color:var(--text);
  font-family:var(--font-ui);font-size:16px; /* 16px, not 14px: prevents iOS Safari's auto-zoom-on-focus */
}
.field-input::placeholder{color:var(--text3)}
.signin-form .btn{width:100%;margin-top:2px}
.signin-form .btn[disabled]{opacity:0.6;cursor:default;transform:none;filter:none}

.link-btn{
  background:none;border:none;color:var(--accent-text);
  font-size:12.5px;font-weight:600;padding:4px 8px;cursor:pointer;
}
.link-btn:hover{text-decoration:underline}

.signin-error{
  width:100%;box-sizing:border-box;
  background:color-mix(in srgb, var(--red) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent);
  color:var(--red);
  border-radius:var(--r-md);
  padding:10px 12px;
  font-size:12.5px;text-align:left;
}

.signin-finishing{padding:6vh 0 0}

/* "Who are you?" step — a wider, left-aligned variant of .signin-gate */
.signin-gate.step-whoami{align-items:stretch;text-align:left;max-width:520px;padding-top:8vh}
.signin-gate.step-whoami h1{text-align:center}
.signin-gate.step-whoami .muted{text-align:center}

.whoami-list{
  width:100%;
  max-height:50vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg2);
}
.whoami-group + .whoami-group{border-top:1px solid var(--border)}
.whoami-group-label{
  padding:8px 12px 4px;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent-text);
}
.whoami-person{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;
  padding:10px 12px;
  color:var(--text);font-size:13.5px;
  border-bottom:1px solid var(--border);
  transition:background .12s;
}
.whoami-group .whoami-person:last-child{border-bottom:none}
.whoami-person:hover{background:color-mix(in srgb, var(--bg3) 60%, transparent)}
.whoami-empty{padding:20px 12px;color:var(--text2);font-size:13px;text-align:center}

/* Hide the tab bar entirely while the sign-in gate is showing — there is
   nothing to navigate to yet. */
body.unauthenticated .tabbar{display:none}
body.unauthenticated #view{padding-bottom:32px}
@media (hover:none) and (pointer:coarse){
  body.unauthenticated #view{padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px))}
}

/* ---------- Wide-content safety net (per CLAUDE.md: no horizontal body
   scroll; wide content scrolls inside its own container) ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ============================================================================
 * GUEST SCREENS — Now / Look up / My trip / Fleet (Tasks 16-19)
 * All colors below are token references only — no hardcoded hex — per the
 * MANDATORY styling rule (the event palette is swapped in later by changing
 * token values, not by editing these rules).
 * ========================================================================== */

.screen{display:flex;flex-direction:column;gap:16px}
.screen-head{display:flex;flex-direction:column;gap:2px}
.screen-head h1{margin:0;font-size:20px;letter-spacing:-0.01em;color:var(--text-strong)}
.muted{color:var(--text2);font-size:13px;margin:0}

/* ---------- CAR CARD (Now + Look up) ---------- */
.car-card{display:flex;flex-direction:column;gap:10px;padding:18px}
.car-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.car-card-model{font-size:17px;font-weight:700;color:var(--text-strong);letter-spacing:-0.01em}
.car-card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.badge.colour-badge{background:var(--bg3);color:var(--text2)}
.car-no-badge{
  font-family:var(--font-num);font-weight:800;font-size:24px;color:var(--text-strong);
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-md);
  padding:6px 14px;line-height:1;white-space:nowrap;
}
.car-card-empty{color:var(--text2);font-size:13.5px;padding:10px 2px;margin:0;text-align:center}

/* ---------- ROUTE (map embed / release placeholder) ---------- */
.route-section{display:flex;flex-direction:column;gap:10px}
.route-map-wrap{
  position:relative;width:100%;padding-top:56%;
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--border);background:var(--bg3);
}
.route-map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.route-open-btn{align-self:flex-start}
.route-placeholder{
  display:flex;align-items:center;gap:10px;
  padding:16px;border:1px dashed var(--border-strong);border-radius:var(--r-md);
  color:var(--text2);font-size:13px;
  background:color-mix(in srgb, var(--bg3) 50%, transparent);
}

/* ---------- REST-OF-DAY / WHOLE-DAY compact list ---------- */
.rest-list{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  background:var(--bg2);
}
.rest-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px;
}
.rest-list .rest-item:last-child{border-bottom:none}
.rest-item-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.rest-item-title .seq{font-size:10.5px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.rest-item-title .title{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rest-item-car{font-family:var(--font-num);font-size:12px;color:var(--text2);white-space:nowrap;flex:0 0 auto}

/* ---------- PERSON PICKER (Look up + My trip person switch) ---------- */
.picker-search{margin-bottom:8px}
.picker-list{
  width:100%;max-height:42vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2);
}
.picker-group + .picker-group{border-top:1px solid var(--border)}
.picker-group-label{
  padding:8px 12px 4px;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--accent-text);
}
.picker-person{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;text-align:left;padding:10px 12px;
  color:var(--text);font-size:13.5px;border-bottom:1px solid var(--border);
  transition:background .12s;
}
.picker-group .picker-person:last-child{border-bottom:none}
.picker-person:hover{background:color-mix(in srgb, var(--bg3) 60%, transparent)}
.picker-person.active{background:var(--accent-soft);color:var(--text-strong)}
.picker-empty{padding:20px 12px;color:var(--text2);font-size:13px;text-align:center}

/* ---------- DAY TABS + LEG OPTIONS (Look up) ---------- */
.day-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.leg-options{display:flex;flex-direction:column;gap:8px}
.leg-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg2);cursor:pointer;text-align:left;color:var(--text);font-size:13.5px;
  transition:border-color .12s,background .12s;
}
.leg-option:hover{border-color:var(--accent)}
.leg-option.active{border-color:var(--accent);background:var(--accent-soft)}
.leg-option .seq-badge{font-family:var(--font-num);font-size:11px;color:var(--text2);white-space:nowrap}

/* ---------- SORTABLE TABLES + TOTALS ROW (per CLAUDE.md convention) ---------- */
th.sortable-th{cursor:pointer;user-select:none;position:relative;padding-right:18px}
th.sortable-th::after{content:"↕";position:absolute;right:6px;opacity:.35;font-size:10px}
th.sortable-th.sort-asc::after{content:"↑";opacity:1;color:var(--accent-text)}
th.sortable-th.sort-desc::after{content:"↓";opacity:1;color:var(--accent-text)}
tr.totals-row td{font-weight:700;color:var(--text-strong);background:var(--bg3);border-top:2px solid var(--border-strong)}
tr.totals-row:hover td{background:var(--bg3)}

/* ---------- TALLY CARDS + CHART (My trip) ---------- */
.tally-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px}
.tally-card{padding:12px;text-align:center;display:flex;flex-direction:column;gap:4px}
.tally-card .count{font-family:var(--font-num);font-size:22px;font-weight:800;color:var(--text-strong)}
.tally-card .type{font-size:11.5px;color:var(--text2)}
.tally-chart-wrap{position:relative;height:240px;max-width:320px;width:100%;margin:4px auto 0}

/* ---------- FLEET GRID + DETAIL (Fleet) ---------- */
.fleet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:480px){.fleet-grid{grid-template-columns:repeat(3,1fr)}}
.fleet-card{display:flex;flex-direction:column;gap:6px;padding:12px;cursor:pointer;text-align:left}
.fleet-card.active{border-color:var(--accent);box-shadow:var(--shadow-hover)}
.fleet-car-photo{
  width:100%;aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--bg3);
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--text3);
  overflow:hidden;
}
.fleet-car-photo img{width:100%;height:100%;object-fit:cover}
.fleet-card-no{font-family:var(--font-num);font-weight:800;font-size:15px;color:var(--text-strong)}
.fleet-card-model{font-size:12px;color:var(--text2);line-height:1.3}
.fleet-detail{margin-top:4px;display:flex;flex-direction:column;gap:10px}
.fleet-detail-head{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* ============================================================================
 * ADMIN SCREENS — Admin home + Assignments (car switching) + Routes
 * (release) (Tasks 20-21). All colors below are token references only, same
 * MANDATORY rule as the guest screens above.
 * ========================================================================== */

/* ---------- shared sub-screen header (back link + title) ---------- */
.admin-subhead{gap:4px}
.link-btn.admin-back-link{align-self:flex-start;padding:2px 0;margin-bottom:2px}

/* ---------- ADMIN HOME — simple mobile menu ---------- */
.admin-menu{display:flex;flex-direction:column;gap:10px}
.admin-menu-item{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  padding:14px 16px;
  border-radius:var(--r-md);
  border:1px solid var(--border);
  background:var(--bg2);
  color:var(--text);
  transition:border-color .12s,transform .12s;
}
.admin-menu-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.admin-menu-icon{font-size:22px;flex:0 0 auto;width:32px;text-align:center}
.admin-menu-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-menu-title{font-weight:700;font-size:14px;color:var(--text-strong)}
.admin-menu-desc{font-size:12px;color:var(--text2)}
.admin-menu-chevron{margin-left:auto;color:var(--text3);font-size:18px;flex:0 0 auto}
.admin-menu-item.disabled{opacity:0.55;cursor:default}
.admin-menu-item.disabled:hover{border-color:var(--border);transform:none}
.admin-menu-item.disabled .admin-menu-desc{font-style:italic}

/* ---------- warning / conflict banner (non-blocking) ---------- */
.alert.warning{
  border-color:color-mix(in srgb, var(--yellow) 40%, transparent);
  background:color-mix(in srgb, var(--yellow) 14%, transparent);
  color:var(--text-strong);
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.alert.warning .alert-dismiss{
  flex:0 0 auto;color:var(--text2);font-size:16px;line-height:1;padding:0 2px;
}
.alert.warning ul{margin:4px 0 0;padding-left:18px}

/* ---------- ASSIGNMENTS — pair list + swap ---------- */
.assign-row{display:flex;flex-direction:column;gap:2px}
.assign-row .seq-badge{font-size:12px}
.assign-row .pair-members{
  font-size:11px;color:var(--text3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.leg-option.swap-a{border-color:var(--accent);background:var(--accent-soft)}
.leg-option.swap-b{border-color:var(--silver);background:color-mix(in srgb, var(--silver) 18%, transparent)}
.swap-badge{
  font-family:var(--font-num);font-weight:800;font-size:11px;
  color:var(--on-accent);background:var(--grad-accent);
  border-radius:999px;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.leg-option.swap-b .swap-badge{background:var(--silver);color:var(--bg)}
.swap-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.swap-confirm-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--border-strong);background:var(--bg3);
  font-size:13px;
}
.swap-confirm-bar .swap-confirm-actions{display:flex;gap:8px;flex:0 0 auto}

/* ---------- ROSTER IMPORT — low-confidence / structurally-suspicious cell
 * flag (Task 28 review fix). Advisory only (never blocks commit -- that's
 * .alert.warning + computeIssues()/validateParsed()'s job); reuses the same
 * --yellow token family as .alert.warning and .sheet-car-used above.
 * Compound selector (.leg-option.needs-review) per CLAUDE.md's
 * specificity-trap rule, so it reliably overrides the base .leg-option
 * regardless of source order. ---------- */
.leg-option.needs-review{
  border-color:color-mix(in srgb, var(--yellow) 45%, transparent);
  background:color-mix(in srgb, var(--yellow) 10%, transparent);
}
.badge.review-badge{
  color:var(--yellow);
  background:color-mix(in srgb, var(--yellow) 16%, transparent);
  margin-left:4px;
}
.roster-flag-legend{color:var(--yellow);font-size:12px;margin:2px 0 8px}

/* ---------- BOTTOM SHEET (car picker) ---------- */
@keyframes sheet-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sheet-slide-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-backdrop{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  background:color-mix(in srgb, black 55%, transparent);
  animation:sheet-fade-in 160ms ease-out;
}
.sheet{
  width:100%;max-width:520px;max-height:82vh;
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg2);
  border:1px solid var(--border-strong);border-bottom:none;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:var(--shadow-hover);
  padding:8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation:sheet-slide-up 220ms var(--ease-out);
}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:var(--border-strong);margin:2px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-head h2{margin:0;font-size:15px;color:var(--text-strong)}
.sheet-list{max-height:52vh}
.sheet-car-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sheet-car-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.sheet-car-no{font-family:var(--font-num);font-weight:800}
.sheet-car-meta{font-size:11.5px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-car-used{font-size:10px;color:var(--yellow);white-space:nowrap;flex:0 0 auto}
.sheet-car-check{color:var(--accent-text);font-weight:800;flex:0 0 auto}

/* ---------- ROUTES — per-leg card, switch, batch bar, confirm modal ---------- */
.route-card{display:flex;flex-direction:column;gap:10px}
.route-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.route-select{display:flex;align-items:flex-start;gap:8px;min-width:0;cursor:pointer}
.route-select input[type="checkbox"]{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--accent)}
.route-card-title{font-weight:700;font-size:13.5px;color:var(--text-strong)}
.route-card-sub{font-size:11.5px;color:var(--text2);margin-top:2px}
.route-status{font-size:11.5px;color:var(--text2)}
.route-status.is-released{color:var(--green)}
.route-form{display:flex;flex-direction:column;gap:8px}
.route-form .btn{align-self:flex-start;padding:7px 14px;font-size:12px}

.switch{
  position:relative;width:44px;height:25px;border-radius:999px;flex:0 0 auto;
  background:var(--bg3);border:1px solid var(--border);
  transition:background .15s,border-color .15s;
}
.switch .switch-thumb{
  position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--text2);transition:transform .18s var(--ease-out),background .15s;
}
.switch.on{background:var(--grad-accent);border-color:transparent}
.switch.on .switch-thumb{transform:translateX(19px);background:var(--on-accent)}

.batch-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-radius:var(--r-md);
  border:1px solid var(--border-strong);background:var(--bg3);
  font-size:13px;
}
.batch-bar .batch-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}

@keyframes modal-pop{from{transform:scale(0.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-backdrop{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:color-mix(in srgb, black 55%, transparent);
  animation:sheet-fade-in 160ms ease-out;
}
.modal{
  width:100%;max-width:380px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-hover);padding:20px;
  animation:modal-pop 180ms var(--ease-out);
}
.modal h2{margin:0 0 8px;font-size:16px;color:var(--text-strong)}
.modal p{margin:0;font-size:13px;color:var(--text2)}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn,.modal-actions .btn-ghost{flex:1;text-align:center}

/* ---------- MANAGE — accounts / guest code / audit (Task 23b) ---------- */
.manage-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.manage-section{display:flex;flex-direction:column;gap:14px}
.manage-current-code{
  font-family:var(--font-num);font-weight:800;font-size:20px;letter-spacing:.05em;
  color:var(--text-strong);margin:4px 0 0;word-break:break-all;
}
.manage-actions-cell{display:flex;gap:6px;flex-wrap:wrap}
.manage-actions-cell .btn{padding:6px 10px;font-size:11.5px}

/* ---------- ANNOUNCE + REMINDERS (Task 22) ---------- */
.announce-textarea{resize:vertical;min-height:88px;line-height:1.4;font-family:var(--font-ui)}
.char-count{align-self:flex-end;margin-top:-4px;font-size:11.5px;color:var(--text3)}
.char-count.over{color:var(--red);font-weight:600}
.announce-preview{
  margin-top:10px;padding:10px 12px;
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg3);color:var(--text-strong);font-weight:600;
  white-space:pre-wrap;font-size:13px;
}
.section-subhead{margin:0;font-size:15px;font-weight:700;color:var(--text-strong)}
select.field-input{cursor:pointer}

/* ---------- TOAST (shared, app.js window.showToast) ---------- */
.toast-host{
  position:fixed;left:0;right:0;
  bottom:calc(70px + env(safe-area-inset-bottom, 0px));
  z-index:400;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 16px;
  pointer-events:none;
}
@keyframes toast-in{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.toast{
  pointer-events:auto;
  max-width:420px;width:100%;
  padding:11px 16px;border-radius:var(--r-md);
  font-size:13px;font-weight:600;text-align:center;
  background:var(--bg3);color:var(--text-strong);
  border:1px solid var(--border-strong);
  box-shadow:var(--shadow-card);
  animation:toast-in 180ms var(--ease-out);
}
.toast.success{border-color:color-mix(in srgb, var(--green) 45%, transparent);background:color-mix(in srgb, var(--green) 16%, var(--bg3))}
.toast.error{border-color:color-mix(in srgb, var(--red) 45%, transparent);background:color-mix(in srgb, var(--red) 16%, var(--bg3))}

/* ============================================================================
 * 2026-09-17 REDESIGN — top-bar actions (refresh), global person selector,
 * car branding (brand tag + colour chip + photo), whole-day leg cards, the
 * new Leg view, and the bottom logout footer. Token references only, except
 * the brand tag / colour chip which take an inline paint/brand colour (a
 * deliberate exception, like --logo-plate — real-world car paint + marque
 * colours aren't part of the event palette).
 * ========================================================================== */

/* ---------- TOP-BAR ACTIONS (refresh sits next to the theme toggle) ---------- */
.topbar-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.icon-btn{
  width:36px;height:36px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--border);
  color:var(--text);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,border-color .12s;
}
.icon-btn:hover{background:color-mix(in srgb, var(--bg3) 60%, transparent);border-color:var(--border-strong)}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn.spinning{animation:spin .8s linear infinite;pointer-events:none;opacity:.7}
/* refresh + theme are hidden on the sign-in gate (nothing to refresh yet) */
body.unauthenticated #refresh-btn{display:none}

/* ---------- GLOBAL PERSON SELECTOR ("Viewing: [Name] ▾") ---------- */
.person-select{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:12px 14px;
  border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--bg2);box-shadow:var(--shadow-card);
  color:var(--text);text-align:left;cursor:pointer;
  transition:border-color .12s,transform .12s;
}
.person-select:hover{border-color:var(--accent);transform:translateY(-1px)}
.person-select .ps-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.person-select .ps-label{font-size:10.5px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.person-select .ps-name{font-size:16px;font-weight:800;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-select .ps-sub{font-size:12px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person-select .ps-chevron{margin-left:auto;color:var(--accent-text);font-size:16px;flex:0 0 auto}

/* ---------- BRAND TAG (wordmark) + COLOUR CHIP ---------- */
.brand-tag{
  display:inline-flex;align-items:center;
  font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:6px;line-height:1.4;white-space:nowrap;
  /* background + color set inline per marque */
}
/* Official marque logo image (replaces .brand-tag when the file is present).
   Height-capped so it sits inline like the old word tag. Backing plate keeps a
   dark logo legible on the dark theme; swap to no-plate per-brand later if a
   logo already ships light/monochrome. */
.brand-mark{display:inline-flex;align-items:center}
.brand-logo{
  height:26px;width:auto;max-width:150px;display:block;object-fit:contain;
}
:root:not([data-theme="light"]) .brand-logo{
  background:var(--logo-plate);border-radius:6px;padding:3px 6px;
}
.colour-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.colour-chip .dot{
  width:13px;height:13px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
}
.colour-chip .cname{
  /* color set inline to the paint colour; halo keeps light paints legible on
     either theme (the halo is the page bg colour) */
  text-shadow:0 0 2px var(--bg),0 0 1px var(--bg);
}

/* ---------- CAR PHOTO (fleet card already styles .fleet-car-photo img) ---------- */
.car-photo-wrap{
  width:100%;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
}
.car-photo-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.car-photo-wrap .ph{font-size:30px;color:var(--text3)}

/* ---------- WHOLE-DAY LEG CARD (Now current leg + Look up whole day) ---------- */
.leg-card{display:flex;flex-direction:column;gap:12px;padding:16px}
.leg-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.leg-card-route{font-size:15px;font-weight:700;color:var(--text-strong);letter-spacing:-.01em;min-width:0}
.leg-card-seq{font-family:var(--font-num);font-size:11px;color:var(--text3);font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.4px;flex:0 0 auto}
.leg-card-body{display:flex;gap:14px;align-items:center}
.leg-card-photo{
  width:112px;flex:0 0 112px;aspect-ratio:16/10;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
}
.leg-card-photo img{width:100%;height:100%;object-fit:cover}
.leg-card-photo .ph{font-size:26px;color:var(--text3)}
.leg-card-info{display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 auto}
.leg-card-topline{display:flex;align-items:center;gap:10px;min-width:0}
.leg-card-no{
  font-family:var(--font-num);font-weight:800;font-size:20px;color:var(--text-strong);
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:3px 10px;line-height:1;white-space:nowrap;flex:0 0 auto;
}
.leg-card-model{font-size:14px;font-weight:700;color:var(--text-strong);min-width:0;overflow:hidden;text-overflow:ellipsis}
.leg-card-tags{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.leg-card .route-open-btn,.leg-card .route-placeholder{margin-top:2px}
.leg-card-empty{color:var(--text2);font-size:13px;padding:6px 0}
@media (max-width:400px){
  .leg-card-body{flex-direction:column;align-items:stretch}
  .leg-card-photo{width:100%;flex:none}
}

/* ---------- LEG VIEW (every pair + their car for one leg) ---------- */
.pair-list{
  display:flex;flex-direction:column;
  border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg2);
}
.pair-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--border)}
.pair-list .pair-row:last-child{border-bottom:none}
.pair-row.is-me{background:var(--accent-soft)}
.pair-row-thumb{
  width:66px;flex:0 0 66px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;
  background:var(--bg3);display:flex;align-items:center;justify-content:center;
}
.pair-row-thumb img{width:100%;height:100%;object-fit:cover}
.pair-row-thumb .ph{font-size:16px;color:var(--text3)}
.pair-row-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.pair-row-names{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pair-row-car{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pair-row-no{
  font-family:var(--font-num);font-weight:800;font-size:15px;color:var(--text-strong);
  background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:2px 8px;line-height:1;flex:0 0 auto;
}
.pair-row-model{font-size:12px;color:var(--text2)}

/* ---------- BOTTOM LOGOUT FOOTER (appended to every authed screen) ---------- */
.app-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:24px;padding-top:16px;border-top:1px solid var(--border);
}
.app-footer .who{font-size:12px;color:var(--text2);min-width:0;overflow:hidden;text-overflow:ellipsis}
.app-footer .who strong{color:var(--text);font-weight:700}
.logout-btn{
  background:transparent;border:1px solid var(--border);color:var(--text);
  padding:8px 16px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;flex:0 0 auto;
  transition:border-color .12s,color .12s;
}
.logout-btn:hover{border-color:var(--red);color:var(--red)}

/* Top-bar logout (2026-09-17: moved off the per-page footer into the header).
   The icon button uses an inline stroke SVG; hide it on the sign-in gate. */
.icon-btn svg{display:block;width:18px;height:18px}
#logout-top:hover{border-color:var(--red);color:var(--red)}
body.unauthenticated #logout-top{display:none}

/* ---------- PEOPLE directory (2026-09-17) ---------- */
.people-search{margin-bottom:2px}
.people-list{display:flex;flex-direction:column;gap:16px}
.people-pair{display:flex;flex-direction:column;gap:8px}
.people-pair-label{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--accent-text);padding:0 2px}
.person-card{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg2)}
.person-card.is-me{border-color:var(--accent);background:var(--accent-soft)}
.person-photo{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;background:var(--bg3)}
.person-photo img{width:100%;height:100%;object-fit:cover;display:block}
.person-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.person-name{font-size:14px;font-weight:700;color:var(--text-strong)}
.person-chapter{font-size:12px;color:var(--text2)}
.person-contact{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:2px}
.person-contact a{font-size:12px;color:var(--accent-text);font-weight:600;word-break:break-all}