/**
 * CCE Data Manager - Styles
 * Version: 1.0.0
 * Last updated: 2026-05-03 (Build 280)
 *
 * Build 280: design-token foundation. Ported from
 * temp-UI-Mockups/.../tokens.css. The legacy variable names
 * (--bg-color, --accent, --primary, --success, etc.) are retained as
 * aliases pointing at the new tonal scale so existing styles continue
 * to work unchanged. New surfaces should use the canonical tokens
 * directly (--surface-N, --text-N, --green-N, --data-*).
 */

:root {
  /* === Surface tonal grayscale (warmer, slightly desaturated cool) === */
  --surface-0: #0b0d0f;       /* page bg, deepest */
  --surface-1: #14171a;       /* main panels */
  --surface-2: #1c2025;       /* cards */
  --surface-3: #252a31;       /* elevated cards / hover */
  --surface-4: #2f3540;       /* inputs, chips */
  --surface-5: #3a4150;       /* dividers stronger */

  /* === Text === */
  --text-1: #f4f6f8;          /* primary */
  --text-2: #c1c7d0;          /* secondary */
  --text-3: #8b94a3;          /* tertiary / labels */
  --text-4: #5b6573;          /* placeholder / disabled */

  /* === Borders === */
  --border-1: #232830;
  --border-2: #2c333d;
  --border-3: #3a4150;

  /* === CCE Brand greens (kept sacred, expanded scale) === */
  --green-100: #d4f4e0;
  --green-200: #8fe0b0;
  --green-400: #2dba6a;
  --green-500: #009845;       /* canonical CCE green */
  --green-600: #007c37;
  --green-700: #005824;
  --green-glow: rgba(0, 152, 69, 0.35);

  /* === Data accents (motorsport telemetry palette) ===
     Used SPARINGLY for: status, deltas, weather, channel coding.
     Same chroma family, only used to distinguish data, never as decoration. */
  --data-amber:  #f2b134;     /* warning / qualifying */
  --data-red:    #e5484d;     /* critical / race / over-pressure */
  --data-blue:   #4cc2ff;     /* info / cold tyre / wet */
  --data-violet: #b794f4;     /* practice */
  --data-cyan:   #2dd4bf;     /* fresh / new lap */

  /* === Type === */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Barlow Condensed", "Oswald", "Inter", sans-serif;

  /* type scale */
  --t-xs:  11px;
  --t-sm:  13px;
  --t-base: 15px;
  --t-md:  17px;
  --t-lg:  20px;
  --t-xl:  24px;
  --t-2xl: 32px;
  --t-3xl: 44px;

  /* spacing scale */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;

  /* radius */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* shadow / glow */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 14px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.55);
  --glow-green: 0 0 0 1px rgba(0,152,69,0.6), 0 0 24px -4px rgba(0,152,69,0.5);

  /* === Legacy aliases (Build 280) — keep existing styles.css working ===
     New code should reference the canonical tokens above. */
  --bg-color:   var(--surface-0);
  --card-bg:    var(--surface-1);
  --input-bg:   var(--surface-4);
  --text-main:  var(--text-1);
  --text-muted: var(--text-3);
  --accent:     var(--green-500);
  --primary:    var(--green-500);
  --success:    var(--green-400);
  --warning:    var(--data-amber);
  --error:      var(--data-red);
  --info:       var(--data-blue);
  --border:     var(--border-1);
  --font-family: var(--font-sans);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Build 393: the `hidden` attribute always hides. A class that sets `display`
   (flex, grid, block) otherwise overrides it - the timeline files list never
   hid (TEST 31.2). */
[hidden] {
  display: none !important;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-family);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === Build 280: design-token utility classes ============================
 * Helpers expected by the new component primitives. Applied via classes
 * (no JS coupling) so any HTML can opt in.
 * ====================================================================== */

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

.uppercase-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--t-xs);
  color: var(--text-3);
  font-weight: 600;
}

.divider {
  height: 1px;
  background: var(--border-1);
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* Status pills (data accents reserved for meaning, not decoration) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.pill--green  { background: rgba(0,152,69,0.12);  color: var(--green-200);  border-color: rgba(0,152,69,0.35); }
.pill--amber  { background: rgba(242,177,52,0.12); color: var(--data-amber); border-color: rgba(242,177,52,0.35); }
.pill--red    { background: rgba(229,72,77,0.12);  color: var(--data-red);   border-color: rgba(229,72,77,0.35); }
.pill--blue   { background: rgba(76,194,255,0.12); color: var(--data-blue);  border-color: rgba(76,194,255,0.35); }
.pill--violet { background: rgba(183,148,244,0.12);color: var(--data-violet);border-color: rgba(183,148,244,0.35); }

/* Pulse animation for live/in-progress status indicators */
@keyframes cce-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* === Build 281: branded primitives ====================================
 * SessionStatus pill, WeatherIcon, FAB. The HTML for these is built by
 * UI.primitives.sessionStatus() / weatherIcon() in app-ui.js.
 * ====================================================================== */

.session-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  /* color is set inline by UI.primitives.sessionStatus() */
}

.session-status .dot {
  /* `.dot` base sizing comes from the utility class above; this rule
   * exists so we can override the default 6px to a slightly larger 7px
   * for status indicators where the dot is the primary visual cue. */
  width: 7px;
  height: 7px;
}

.weather-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Floating Action Button — used on Events / Timetable for primary
 * "+ create" action. Anchors to bottom-right above any bottom tab bar. */
.btn-fab {
  position: absolute;
  right: 16px;
  bottom: 90px;
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--green-500);
  color: #fff;
  border: none;
  font-size: 28px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,152,69,0.4), 0 2px 8px rgba(0,0,0,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
.btn-fab:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0,152,69,0.5), 0 3px 10px rgba(0,0,0,0.45);
}
.btn-fab:active {
  transform: translateY(0);
}

/* === Build 282: Events list redesign (Stage 3a) ======================== */

.happening-now-hero {
  margin: 4px 0 16px;
  cursor: pointer;
}

.hero-card {
  background: linear-gradient(160deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(0,152,69,0.18), transparent 60%);
  pointer-events: none;
}
.hero-card > * {
  position: relative;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.event-row:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}
.event-row:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}
.event-row__bar {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
}
.event-row__main {
  flex: 1;
  min-width: 0;
}
.event-row__name {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text-1);
}
.event-row__track {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-row__right {
  text-align: right;
  flex-shrink: 0;
}
.event-row__date {
  font-size: 12px;
  color: var(--text-2);
}
.event-row__cars {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

/* === Build 283: Event detail timeline (Stage 3b) ====================== */

.day-selector {
  display: flex;
  gap: 6px;
  padding: 4px 0 12px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 12px;
  overflow-x: auto;
}
.day-pill {
  flex: 1 0 auto;
  min-width: 70px;
  padding: 8px 10px;
  text-align: center;
  border-radius: var(--r-md);
  background: transparent;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.day-pill:hover {
  background: var(--surface-2);
  color: var(--text-2);
}
.day-pill--active {
  background: var(--surface-3);
  border-color: var(--green-500);
  color: var(--text-1);
}
.day-pill__dow {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: inherit;
  opacity: 0.85;
}
.day-pill__num {
  font-size: 16px;
  font-weight: 700;
  color: inherit;
}

.session-timeline {
  position: relative;
  padding: 8px 0 16px;
}
/* Vertical timeline guideline behind the dots */
.session-timeline::before {
  content: '';
  position: absolute;
  left: 56px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: linear-gradient(to bottom, var(--border-2), var(--surface-3) 50%, var(--border-2));
  pointer-events: none;
}

.timeline-entry {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  position: relative;
}
.timeline-entry__time {
  width: 44px;
  flex-shrink: 0;
  text-align: right;
  padding-top: 14px;
}
.timeline-entry__time-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.timeline-entry__duration {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}
.timeline-entry__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 18px;
  background: var(--surface-3);
  border: 2px solid var(--border-2);
  flex-shrink: 0;
  z-index: 2;
}
.timeline-entry__card {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-width: 0;
}
.timeline-entry__card:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

/* === Build 284: Cars list garage view (Stage 3c) ====================== */

.car-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.car-card:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.car-card__badge {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-2);
  flex-shrink: 0;
  /* background is set inline (per-car gradient via _carAccentColor) */
}

.car-card__content {
  flex: 1;
  min-width: 0;
}
.car-card__title {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car-card__sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.car-card__vin {
  font-size: 10px;
  color: var(--text-4);
  margin-top: 3px;
  letter-spacing: 0.05em;
}

.car-card__stat {
  text-align: right;
  flex-shrink: 0;
  padding-left: 8px;
}
.car-card__stat-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
}
.car-card__stat-label {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

.car-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid var(--border-1);
  margin-left: 4px;
}

/* === Build 285: Contacts list (Stage 3d) ============================== */

.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  margin-bottom: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.contact-card:hover {
  background: var(--surface-2);
  border-color: var(--border-2);
}

.contact-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-2);
  flex-shrink: 0;
  margin-top: 2px;
}

.contact-card__content {
  flex: 1;
  min-width: 0;
}

.contact-card__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.contact-card__name {
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text-1);
}

.contact-card__roles {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.contact-card__details {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-2);
}
.contact-card__sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--border-3);
}

.contact-card__notes {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  font-size: 11px;
  color: var(--text-2);
  white-space: pre-wrap;
  line-height: 1.45;
}

.contact-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
  border-left: 1px solid var(--border-1);
  margin-left: 4px;
  align-self: center;
}

/* Build 350 (QA 342 findings 10, 13): a long unbroken name, email or note
   wraps inside the card instead of widening the page, and the login badge
   stays on one line (it moves to the next line as a whole). */
.contact-card__name,
.contact-card__details,
.contact-card__notes {
  overflow-wrap: anywhere;
}
.contact-login-badge {
  white-space: nowrap;
}

/* Phones: the action buttons (edit, Invite / Revoke, delete x) get their own
   row under the details, so the badge and roles keep the full width and the
   delete x is not pressed against the card edge. */
@media (max-width: 480px) {
  .contact-card {
    flex-wrap: wrap;
  }
  .contact-card__actions {
    flex-basis: 100%;
    justify-content: flex-end;
    border-left: none;
    border-top: 1px solid var(--border-1);
    padding: 8px 4px 0 0;
    margin: 4px 0 0;
  }
}

/* === Build 286: Settings sections (Stage 3e) ========================== */

.settings-section__title {
  margin: 1.25rem 4px 0.5rem;
}
.settings-section__title:first-child {
  margin-top: 0.25rem;
}

.settings-section {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 1rem 1rem 1.1rem;
  margin-bottom: 1rem;
}
.settings-section--actions {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 0.5rem;
}

.btn-danger-outline {
  color: var(--data-red);
  border-color: var(--data-red);
  background: transparent;
}
.btn-danger-outline:hover {
  background: rgba(229, 72, 77, 0.1);
}

/* === Build 289: Pressure progression chart (Stage 6, partial) ========= */

/* Build 374: full page width now, so cars sit side by side (one per row on a phone) */
.pressure-chart-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 12px;
  margin-top: 0.5rem;
}

.pressure-chart-card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: 14px 16px;
}

.pressure-chart-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.pressure-chart-card__car {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.02em;
}

.pressure-chart-card__legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.pressure-chart-card__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  color: var(--text-2);
}

.pressure-chart-svg {
  width: 100%;
  height: auto;
  display: block;
  /* On narrow viewports the chart's 720x220 viewBox scales down so
   * everything stays readable. Min height keeps it visible on phones. */
  min-height: 180px;
}

/* Build 294: event-level notes panel (mirrors session-notes pattern
 * from Build 262). Only renders when evt.notes is populated; sits
 * above the sessions list. Quieter surface-2 panel with pre-wrap so
 * multi-line notes stay readable. */
.event-notes-panel {
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
}
.event-notes-panel__body {
  white-space: pre-wrap;
  color: var(--text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* === Build 292: Desktop three-pane reflow (Stage 6 completion) ========
 * At ≥1200px AND when the current user has Data Engineer / Team
 * Manager / Super Admin role (driven by body[data-data-engineer-mode]
 * set in UI.updateUIForRole), the session detail screen reflows into
 * a wider canvas with the pressure chart + participations on the left
 * and the session info / files / setup on the right.
 *
 * Mechanics, drivers, and other non-data roles get the standard
 * single-column stack regardless of viewport. Sessions detail content
 * is rendered into #view-detail by Render.sessionDetail() — we target
 * its descendants, not a wrapper class, so existing DOM stays intact.
 * ====================================================================== */

@media (min-width: 1200px) {
  /* Wider canvas at desktop, regardless of role */
  body[data-data-engineer-mode="true"] .container {
    max-width: 1400px;
  }

  /* Build 374: the session page's two columns (cars | notes and files) are
   * .session-detail-layout below, for every role. The old grid here split
   * #view-detail's children for data roles only and left half the screen
   * empty beside the info card and the cars. */
}

/* Build 297 (NEW293-1): the previous reset rule was too greedy —
 * `#view-detail:not(.view-session-detail) { display: block; }` overrode
 * the base `.view { display: none }`, so #view-detail leaked through
 * on every other view (Events list, Tracks list, etc.) showing a
 * phantom "← Back to Events" + empty Event Name skeleton. The reset
 * is now scoped to `.view.active` so it only applies when the view
 * is actually being shown — and `.view:not(.active)` retains
 * display:none from the base rule. */
body:not([data-data-engineer-mode="true"]) #view-detail.view-session-detail.active,
#view-detail.active:not(.view-session-detail) {
  display: block;
}

/* Subtle scrollbar (matches new tonal scale) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Layout */
header {
  background-color: var(--card-bg);
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.header-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

h1 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-main);
  display: none;
}

.logo-img {
  height: 30px;
  display: block;
}

/* #330: an account with branding but no logo shows its name as a wordmark */
.brand-wordmark {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* Tabs Navigation */
.tab-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  align-items: center;
}

.tab-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  transition: all 0.2s;
  flex-grow: 1;
  text-align: center;
}

.tab-btn:hover {
  color: var(--text-main);
  background: rgba(255,255,255,0.05);
}

.tab-btn.active {
  color: var(--accent);
  background: rgba(0, 152, 69, 0.1);
}

.tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Buttons */
.btn {
  background-color: var(--input-bg);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background-color: #3a3a3a;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading spinner for buttons */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-right: 0.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #007c37;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 500;
}

.btn-outline:hover:not(:disabled) {
  background-color: var(--accent);
  color: white;
}

.btn-icon {
  padding: 0.4rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
}

.btn-icon:hover {
  color: var(--text-main);
  background: #333;
}

.btn-delete {
  color: var(--warning);
  border-color: var(--warning);
  background: transparent;
}

.btn-delete:hover:not(:disabled) {
  color: white;
  background: var(--warning);
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.btn-ghost {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 4px;
}

.btn-ghost:hover {
  color: var(--info);
  background: rgba(255,255,255,0.05);
}

/* Views */
.view {
  display: none;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cards */
.card {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color 0.2s;
  position: relative;
}

.card:hover {
  border-color: var(--accent);
}

.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.event-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.event-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.stats-badge {
  background: #2c2c2c;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* List Items */
.list-item {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color 0.2s;
}

.list-item:hover {
  border-color: var(--info);
}

.item-content {
  flex-grow: 1;
}

.item-title {
  font-size: 1.1rem;
  font-weight: 700;
}

.item-details {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
}

.item-actions {
  display: flex;
  gap: 0.5rem;
}

/* Session Item */
.session-item {
  background-color: var(--input-bg);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--text-muted);
}

.session-item:hover {
  background-color: #333;
}

.session-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #444;
  padding-bottom: 0.5rem;
}

.session-title {
  font-weight: 600;
  color: var(--text-main);
}

/* Tyre Grid */
.tyre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.tyre-pos {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.tyre-label {
  font-weight: 700;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.pressure-inputs {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;  /* Reduced from 0.5rem to fit 3 columns with bleeds */
}

.press-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 2px;  /* Small gap between pressure and bleed inputs */
}

.press-group label {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Bleed label styling - smaller and more subdued */
.press-group label.bleed-label {
  font-size: 0.65rem;
  margin-top: 2px;
  opacity: 0.8;
}

.optional-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  opacity: 0.7;
  font-weight: normal;
}

.press-group input {
  background: #111;
  border: 1px solid #444;
  color: white;
  padding: 0.4rem;
  border-radius: 4px;
  text-align: center;
  font-family: monospace;
  width: 100%;
}

/* Bleed inputs slightly smaller */
.press-group input.input-mid-bleed,
.press-group input.input-end-bleed {
  padding: 0.3rem;
  font-size: 0.85rem;
  background: #0a0a0a;
  border-color: #333;
}

.press-group input:focus {
  outline: none;
  border-color: var(--accent);
}

.delta-display {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  margin-top: 2px;
}

.delta-val {
  font-size: 0.7rem;
  text-align: center;
  flex: 1;
}

.delta-pos {
  color: var(--success);
}

.delta-neg {
  color: var(--accent);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

.modal-overlay.open {
  visibility: visible;
  opacity: 1;
}

.modal-content {
  background: var(--card-bg);
  width: 100%;
  max-width: 600px;
  border-radius: 12px 12px 0 0;
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

@media(min-width: 600px) {
  .modal-overlay {
    align-items: center;
  }
  .modal-content {
    border-radius: 12px;
    transform: translateY(20px);
  }
}

.modal-overlay.open .modal-content {
  transform: translateY(0);
}

/* Confirm dialog */
.modal-confirm-content {
  max-width: 420px;
  text-align: center;
}

/* Build 277: confirm dialog must paint above any other open modal it
 * was launched from. modal-confirm is first in the DOM, so at equal
 * z-index it would be hidden behind a later-opened parent modal —
 * which is what happens when the Build 276 dirty-check prompt fires
 * over an edit modal. Bumping z-index ensures the confirm is always
 * topmost. The ::backdrop overlay still tints the parent modal. */
#modal-confirm.modal-overlay {
  z-index: 1100;
}

.confirm-message {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.confirm-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.confirm-actions .btn {
  min-width: 100px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.form-control {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 0.8rem;
  border-radius: 6px;
  font-size: 1rem;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}

/* Admin Details */
.admin-item-details {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: grid;
  gap: 4px;
}

.admin-item-detail-row {
  display: flex;
  gap: 8px;
}

.admin-label {
  color: #666;
  font-size: 0.75rem;
  text-transform: uppercase;
  min-width: 60px;
}

/* Toast */
#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 90%;
  max-width: 400px;
}

.toast {
  background: #333;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideUp 0.3s ease;
  border-left: 4px solid var(--accent);
}

.toast.error {
  border-left-color: var(--error);
}

.toast.warning {
  border-left-color: var(--warning);
}

.toast.success {
  border-left-color: var(--success);
}

.toast-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0 0 12px;
  line-height: 1;
}

.toast-dismiss:hover {
  color: white;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utilities */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.spinner {
  border: 3px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  border-top: 3px solid var(--accent);
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  display: none;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.hidden {
  display: none !important;
}

.text-accent {
  color: var(--accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Error State */
.error-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--error);
  background: rgba(211, 47, 47, 0.1);
  border-radius: 8px;
  margin: 1rem 0;
}

.error-state button {
  margin-top: 1rem;
}

/* Loading State */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3000;
  visibility: hidden;
  opacity: 0;
  transition: all 0.2s;
}

.loading-overlay.active {
  visibility: visible;
  opacity: 1;
}

.loading-overlay .spinner {
  display: block;
  width: 50px;
  height: 50px;
  border-width: 5px;
}

/* Pull to Refresh */
.pull-to-refresh {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, var(--card-bg), transparent);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 99;
  pointer-events: none;
}

.pull-to-refresh.visible {
  transform: translateY(0);
}

.pull-to-refresh.refreshing {
  transform: translateY(0);
}

.pull-to-refresh-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 1rem;
}

.pull-to-refresh-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
  color: var(--accent);
}

.pull-to-refresh.ready .pull-to-refresh-icon {
  transform: rotate(180deg);
}

.pull-to-refresh.refreshing .pull-to-refresh-icon {
  animation: spin 1s linear infinite;
}

.pull-to-refresh-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== CHECKBOX GROUP (for Contact Roles) ===== */

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.checkbox-label:hover {
  background-color: var(--input-bg);
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--accent);
}

.item-roles {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Mobile-first: Tab navigation improvements */
@media (max-width: 768px) {
  .tab-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .tab-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .tab-btn {
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  /* Stack "Add" buttons on mobile */
  .tab-nav .btn {
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
  .tab-nav {
    gap: 0.25rem;
  }

  .tab-btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
  }

  /* Compact container padding on small screens */
  .container {
    padding: 1rem 0.75rem;
  }

  /* Smaller header on mobile */
  header {
    padding: 1rem;
  }

  header h1 {
    font-size: 1.2rem;
  }

  /* Adjust list items for mobile */
  .list-item {
    padding: 0.75rem;
  }

  .item-title {
    font-size: 0.95rem;
  }

  .item-details {
    font-size: 0.8rem;
  }

  /* Stack action buttons vertically on very small screens */
  .item-actions {
    flex-direction: column;
    gap: 0.25rem;
  }

  .item-actions button {
    width: 100%;
  }
}

/* Landscape mobile devices */
@media (max-width: 768px) and (orientation: landscape) {
  .tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .tab-btn {
    flex-shrink: 0;
  }
}

/* ===============================================
   SESSION WIZARD STYLES
   =============================================== */

/* Wizard Modal */
.modal-wizard {
  max-width: 500px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
}

.wizard-step-container {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

/* Progress Indicator */
.wizard-progress {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: var(--input-bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  flex: 1;
  min-width: 60px;
}

.wizard-step::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border);
  z-index: -1;
}

.wizard-step:last-child::after {
  display: none;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--input-bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s;
}

.wizard-step.completed .step-number {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.wizard-step.active .step-number {
  border-color: var(--accent);
  color: var(--accent);
  border-width: 3px;
}

.step-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-align: center;
}

.wizard-step.active .step-label {
  color: var(--accent);
  font-weight: 600;
}

/* Tyre Screen Layout */
.wizard-step-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1rem;
}

/* Car Diagram */
.tyre-diagram {
  margin: 0 auto;
  max-width: 200px;
}

.tyre {
  transition: all 0.3s;
}

.tyre.active {
  filter: drop-shadow(0 0 8px var(--accent));
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Position Title */
.position-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}

.position-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: -0.5rem 0 0 0;
}

/* Reference Data */
.reference-data {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
}

.reference-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.reference-values {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.reference-values span {
  color: var(--info);
}

/* Large Pressure Input */
.pressure-input-large {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pressure-input-large label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
}

.input-pressure-large {
  width: 100%;
  background: var(--input-bg);
  border: 2px solid var(--border);
  color: var(--text-main);
  padding: 1.5rem;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  font-family: monospace;
  transition: all 0.2s;
  min-height: 80px;
}

.input-pressure-large:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 152, 69, 0.1);
}

/* Adjustment Buttons */
.adjustment-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.btn-adjust {
  background: var(--input-bg);
  border: 2px solid var(--border);
  color: var(--text-main);
  padding: 1rem;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 48px;
}

.btn-adjust:active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: scale(0.95);
}

.btn-adjust:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Navigation Buttons */
.wizard-nav-buttons {
  display: flex;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
}

.wizard-nav-buttons .btn {
  flex: 1;
  justify-content: center;
  padding: 1rem;
  font-size: 1rem;
  min-height: 48px;
}

/* Per-position "Skip" button on start-pressure tyre steps (Build 260) */
.wizard-nav-buttons .btn-skip {
  flex: 0 0 auto;
  background: transparent;
  color: var(--text-muted, #999);
  border: 1px solid var(--text-muted, #555);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  min-height: 48px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wizard-nav-buttons .btn-skip:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-main, #e0e0e0);
  border-color: var(--text-main, #888);
}

/* Session Status Badges */
.session-status {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.status-badge {
  font-size: 0.7rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-optional {
  background: rgba(10, 132, 255, 0.2);
  color: var(--info);
  border: 1px solid var(--info);
}

.status-warning {
  background: rgba(255, 204, 0, 0.2);
  color: var(--warning);
  border: 1px solid var(--warning);
}

/* Session Actions */
.session-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.btn-sm {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  min-height: 36px;
}

/* Delta Display Large */
.delta-display-large {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
}

/* Mobile Optimizations */
@media (max-width: 480px) {
  .adjustment-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .reference-values {
    flex-direction: column;
    gap: 0.5rem;
  }

  .wizard-progress {
    flex-direction: column;
    align-items: flex-start;
  }

  .wizard-step {
    flex-direction: row;
    width: 100%;
  }

  .wizard-step::after {
    display: none;
  }
}

/* ======================================================================
   SESSION DETAIL VIEW & PARTICIPATION CARDS (v2.4.0 Build 182)
   ====================================================================== */

/* Session info summary card */
.session-info-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
}

.session-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.session-info-grid .info-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.session-info-grid .label {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.session-info-grid .value {
  font-size: 1rem;
  color: var(--text-main);
  font-weight: 600;
}

/* Session type badges in session info */
.session-type-Practice {
  color: var(--info);
}

.session-type-Qualifying {
  color: var(--warning);
}

.session-type-Race {
  color: var(--error);
}

/* Participations list */
.participations-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Participation card */
.participation-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  transition: border-color 0.2s;
}

.participation-card:hover {
  border-color: var(--accent);
}

.participation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.participation-header h4 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--accent);
}

/* ---- Build 374: session page layout ---------------------------------- */

.session-detail-header {
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.session-detail-heading {
  flex: 1;
  min-width: 0;
}

.session-detail-heading h2 {
  margin: 0;
}

.session-detail-meta,
.session-detail-conditions {
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.session-detail-meta [class^="session-type-"] {
  font-weight: 600;
}

#view-detail.view-session-detail > .session-notice {
  margin-bottom: 1.25rem;
}

.session-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

/* Cars | notes and files, only where the PAGE (.container) is wide enough for both.
 * Build 375: most roles get an 800px page on a desktop, where a third was ~180px and
 * squeezed the file names. The page is 1100px for everyone from 768-1199px and
 * 1400px for data roles from 1200px; elsewhere it stays one column. (Media queries
 * that follow .container, not @container - jsdom cannot parse @container.) */
@media (min-width: 1024px) and (max-width: 1199px) {
  .session-detail-layout:not(.session-detail-layout--single) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  body[data-data-engineer-mode="true"] .session-detail-layout:not(.session-detail-layout--single) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.session-detail-main .section-header {
  margin-bottom: 1rem;
}

.section-header__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.session-detail-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.session-side-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  min-width: 0;
}

.session-side-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.session-side-card__title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.session-detail-notes .session-side-card__title {
  margin-bottom: 0.5rem;
}

.session-detail-notes__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-main);
  line-height: 1.5;
}

.session-files-card .session-side-card__head:last-child {
  margin-bottom: 0;
}

/* Car card (Build 376): the whole text block is one button that opens the car's
   page - title, people, laps, setup %; the ⋯ menu sits on the right */
.participation-card .participation-header {
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: 0;
}

.participation-open {
  flex: 1;
  min-width: 0;
  position: relative;
  display: block;
  margin: 0;
  padding: 0 2rem 0 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.participation-open > span {
  display: block;
}

.participation-open:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.participation-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
}

.participation-people {
  margin-top: 0.25rem;
  color: var(--text-main);
}

.participation-card .participation-lap-summary {
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.participation-setup {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.participation-setup strong {
  color: var(--text-main);
}

.participation-open > .participation-open__chevron {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-muted);
}

.participation-open:hover .participation-open__chevron {
  color: var(--accent);
}

.participation-more {
  position: relative;
  flex-shrink: 0;
}

.participation-more summary {
  list-style: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
}

.participation-more summary::-webkit-details-marker {
  display: none;
}

.participation-more summary:hover,
.participation-more[open] summary {
  background: var(--input-bg);
  color: var(--text-main);
}

.participation-more__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 5;
  padding: 0.5rem;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: nowrap;
}

/* ---- Build 376: car-in-session page ---------------------------------- */
.car-session {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 2rem;
}

.car-session__section {
  min-width: 0;
  padding: 1rem 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.car-session__section h3 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}

.car-session__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.car-session__head h3 {
  margin: 0;
}

.car-pressures__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.car-pressures__table th,
.car-pressures__table td {
  padding: 0.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.car-pressures__table thead th {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.car-pressures__table tbody th {
  text-align: left;
  color: var(--accent);
}

.car-pressures__table tbody td {
  font-size: 1.1rem;
  font-weight: 700;
}

.car-pressures__table tfoot td {
  border-bottom: 0;
}

.car-pressures__done {
  color: var(--success);
  font-weight: 700;
}

.car-pressures .pressure-chart-card {
  margin-top: 1rem;
}

.car-setup__progress {
  margin: 0 0 0.75rem;
  color: var(--text-muted);
}

.car-setup__progress strong {
  color: var(--text-main);
}

.car-setup__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 0 1rem;
  margin: 0;
}

.car-setup__item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.car-setup__item dt {
  color: var(--text-muted);
}

.car-setup__item dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.car-setup__notes {
  margin: 0.75rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.car-laps p {
  margin: 0;
}

.participation-badges {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Status badges for participation completeness */
.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-success {
  background: rgba(46, 125, 50, 0.2);
  color: var(--success);
  border: 1px solid var(--success);
}

.badge-warning {
  background: rgba(255, 204, 0, 0.2);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-muted {
  background: rgba(160, 160, 160, 0.1);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Progress bar for participation completion */
.participation-progress {
  margin-bottom: 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--input-bg);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--accent));
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Pressure summary display */
.pressure-summary {
  margin: 1rem 0;
  padding: 1rem;
  background: var(--input-bg);
  border-radius: 6px;
}

.pressure-summary h5 {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pressure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.75rem;
}

.pressure-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: var(--bg-color);
  border-radius: 4px;
}

.tyre-label {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.875rem;
}

.pressure-value {
  font-weight: 700;
  color: var(--text-main);
  font-size: 1rem;
}

/* Participation action buttons */
.participation-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.participation-actions .btn-sm {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
}

/* View header (back button + title) */
.view-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.view-header h2 {
  margin: 0;
  flex: 1;
}

.btn-back {
  background: var(--input-bg);
  color: var(--text-main);
  border: 1px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-back:hover {
  background: var(--card-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Section header with action button */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.section-header h3 {
  margin: 0;
  font-size: 1.5rem;
}

/* Empty state for no participations */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-state p {
  margin: 0.5rem 0;
}

.empty-state-hint {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Error state */
.error-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--error);
}

/* Mobile responsive for participation cards */
@media (max-width: 768px) {
  .session-info-grid {
    grid-template-columns: 1fr;
  }

  .participation-header {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Build 374: back button above the session name, not squeezing it */
  .view-header.session-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  /* Build 374: the car card keeps its ⋯ menu beside the title */
  .participation-card .participation-header {
    flex-direction: row;
  }

  .pressure-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .participation-actions {
    flex-direction: column;
  }

  .participation-actions .btn-sm {
    width: 100%;
  }
}

/* === Build 288: Tablet layout (Stage 5) ==============================
 * 768-1199px: pit-garage iPad use case for both mechanic and team
 * manager. No glove-optimized targets here — assume seated/two-handed
 * use. We give the existing single-view nav more horizontal room and
 * switch the densely-stacked lists to 2-column grids so a session
 * timetable + a roster of cars fit on one screen.
 *
 * Modals get a wider max-width so multi-column forms don't feel
 * cramped. The wizard's pressure grid keeps its centered max-width
 * (the keypad is intentionally hand-sized).
 * ====================================================================== */

@media (min-width: 768px) and (max-width: 1199px) {
  /* App container — give the existing layout more horizontal room. */
  .container {
    max-width: 1100px;
    padding: 1.5rem 2rem;
  }

  /* Events list rows — 2-up grid. The Happening Now hero spans both
   * columns to keep its visual prominence. */
  #events-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  #events-list .happening-now-hero,
  #events-list .uppercase-label {
    grid-column: 1 / -1;
  }
  #events-list .event-row {
    margin-bottom: 0;
  }

  /* Cars list — 2-up grid of garage cards. Model headers span the
   * full width so each model's group reads cleanly. */
  #cars-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  #cars-list .uppercase-label {
    grid-column: 1 / -1;
  }
  #cars-list .car-card {
    margin-bottom: 0;
  }

  /* Contacts — 2-up grid. Alpha-nav stays full-width above. */
  #contacts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    align-items: start;
  }
  #contacts-list .uppercase-label {
    grid-column: 1 / -1;
  }
  #contacts-list .contact-card {
    margin-bottom: 0;
  }

  /* Modals — wider so forms with multiple columns breathe. The
   * confirm dialog stays narrow per its own sizing rule. */
  .modal-content {
    max-width: 720px;
  }
  .modal-confirm-content {
    max-width: 420px;
  }

  /* Event detail timeline — show date headers + sessions with more
   * margin so the day-pills row isn't crowded. */
  .session-timeline::before {
    left: 64px;
  }
  .timeline-entry__time {
    width: 52px;
  }

  /* Settings sections — two-column grid for compact panels (Your
   * details + Change password side-by-side when both fit). */
  #modal-settings .modal-content > .settings-section {
    /* keep stacked for now — most sections have wide form-groups
     * that don't bisect cleanly */
  }
}


/* ===== Up Next display (Build 307) ===== */
body.up-next-open { overflow: hidden; }

.up-next {
  --un-color: #19c463;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.5rem, 2.5vh, 1.75rem);
  padding: 3.5rem 1rem 2rem;
  text-align: center;
  background: var(--surface-0, #0b0d0f);
  color: var(--text-1, #f4f6f8);
  overflow: auto;
}
/* Centre the content without clipping the top when the window is short
   (justify-content:center would make the overflowing top unreachable). */
.up-next::before,
.up-next::after { content: ''; flex: 1 0 0; }
.up-next--green  { --un-color: #19c463; }
.up-next--orange { --un-color: #ff9020; }
.up-next--red    { --un-color: #ff3b3b; }
.up-next--idle   { --un-color: var(--text-3, #8b94a3); }

.up-next__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--surface-4, #2f3540);
  background: var(--surface-2, #1c2025);
  color: var(--text-2, #c1c7d0);
  font-size: 1.25rem;
  cursor: pointer;
}
.up-next__close:hover,
.up-next__close:focus-visible { background: var(--surface-3, #252a31); color: var(--text-1, #f4f6f8); }

.up-next__live {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 59, 59, 0.5);
  background: rgba(255, 59, 59, 0.12);
  color: #ff6b6b;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.2vw, 1.4rem);
  letter-spacing: 0.06em;
}

.up-next__label {
  color: var(--un-color);
  font-weight: 800;
  letter-spacing: 0.35em;
  font-size: clamp(1rem, 2.6vw, 2rem);
}

.up-next__session {
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(1.5rem, min(7vw, 9vh), 6rem);
  overflow-wrap: anywhere;
}

.up-next__meta {
  color: var(--text-2, #c1c7d0);
  font-size: clamp(1rem, 2.6vw, 2rem);
}

.up-next__timer {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  line-height: 1;
  color: var(--un-color);
  font-size: clamp(3.5rem, min(24vw, 34vh), 22rem);
  text-shadow: 0 0 0.25em color-mix(in srgb, var(--un-color) 40%, transparent);
  transition: color 0.4s ease;
}
.up-next__timer[data-len="l"]  { font-size: clamp(3rem, min(15vw, 34vh), 15rem); }
.up-next__timer[data-len="xl"] { font-size: clamp(2.25rem, min(9.5vw, 30vh), 10rem); }

.up-next__empty {
  color: var(--text-3, #8b94a3);
  font-size: clamp(1.5rem, 5vw, 3.5rem);
  font-weight: 700;
}

.up-next__following { margin-top: clamp(0.5rem, 3vh, 2rem); max-width: 60rem; width: 100%; }
.up-next__following-heading {
  margin: 0 0 0.5rem;
  color: var(--text-3, #8b94a3);
  font-size: clamp(0.8rem, 1.8vw, 1.25rem);
  letter-spacing: 0.3em;
}
.up-next__following-list { list-style: none; margin: 0; padding: 0; }
.up-next__following-item {
  padding: 0.35rem 0;
  border-top: 1px solid var(--surface-3, #252a31);
  color: var(--text-2, #c1c7d0);
  font-size: clamp(1rem, 2.4vw, 1.75rem);
}
.up-next__following-when { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text-1, #f4f6f8); }
.up-next__following-event { color: var(--text-3, #8b94a3); }

@media (prefers-reduced-motion: no-preference) {
  .up-next--red .up-next__timer { animation: up-next-pulse 1s ease-in-out infinite; }
}
@keyframes up-next-pulse { 50% { opacity: 0.78; } }


/* ===== Event Files panel (Build 309) ===== */
.event-files-panel {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface-2, #1c2025);
  border: 1px solid var(--border, #2f3540);
  border-radius: 8px;
}
.event-files__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.event-files__heading { margin: 0; font-size: 1rem; }
.event-files__empty { margin: 0.75rem 0 0; color: var(--text-muted, #8b94a3); font-size: 0.9rem; }
/* minmax(0, 1fr): without it the grid column grows to a row's unwrapped file name
   and the page scrolls sideways on a phone (Build 367). */
.event-files__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0.75rem; }
.event-files__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.75rem 1rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--border, #2f3540);
  border-radius: 6px;
}
.event-files__info { flex: 1; min-width: 0; }
.event-files__title { font-weight: 500; color: var(--text-main, #f4f6f8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-files__name,
.event-files__meta { font-size: 0.85rem; color: var(--text-muted, #8b94a3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-files__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
@media (max-width: 480px) {
  .event-files__item { flex-wrap: wrap; }
  .event-files__info { flex-basis: 100%; }
  .event-files__actions { width: 100%; justify-content: flex-end; }
}

/* Session Files (Build 370, QA Build 369 finding 4): the Event Files layout, so a
   long file name never widens the session page on a phone. */
.session-files__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
.session-files__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.session-files__info { flex: 1; min-width: 0; }
.session-files__name { font-weight: 500; color: var(--text-main); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.session-files__meta { font-size: 0.85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.session-files__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
@media (max-width: 480px) {
  .session-files__item { flex-wrap: wrap; }
  .session-files__info { flex-basis: 100%; }
  .session-files__actions { width: 100%; justify-content: flex-end; }
}
/* Build 375: in the session page's side panel too - name and details across the
   full width, buttons below (a third of the page is narrow) */
.session-detail-side .session-files__item { flex-wrap: wrap; }
.session-detail-side .session-files__info { flex-basis: 100%; }
.session-detail-side .session-files__actions { width: 100%; justify-content: flex-end; }


/* ===== Team Logistics panel ===== */
.event-logistics-panel {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface-2, #1c2025);
  border: 1px solid var(--border, #2f3540);
  border-radius: 8px;
}
.event-logistics__heading { margin: 0 0 0.75rem; font-size: 1rem; }
.event-logistics__section { margin-top: 0.25rem; }
.event-logistics__section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.event-logistics__section-title { margin: 0; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted, #8b94a3); }
/* Build 366: collapsible sections (toggle button + hidden body) */
.event-logistics__section-head .event-logistics__section-title { flex: 1 1 12rem; min-width: 0; }
.event-logistics__toggle {
  display: flex; align-items: center; gap: 0.4rem;
  width: 100%; min-height: 44px; padding: 0.25rem 0;
  background: none; border: 0; color: inherit; font: inherit;
  letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
}
.event-logistics__toggle:hover .event-logistics__toggle-title { color: var(--text-main, #f4f6f8); }
.event-logistics__toggle:focus-visible { outline: 2px solid var(--accent, #009845); outline-offset: 2px; border-radius: 4px; }
.event-logistics__chevron { display: inline-block; transition: transform 0.15s ease; }
.event-logistics__toggle[aria-expanded="true"] .event-logistics__chevron { transform: rotate(90deg); }
.event-logistics__toggle-title { flex-shrink: 0; }
.event-logistics__toggle-summary {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.event-logistics__section-body[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .event-logistics__chevron { transition: none; }
}
.event-logistics__empty { margin: 0.5rem 0 0; color: var(--text-muted, #8b94a3); font-size: 0.9rem; }
.event-logistics__day-heading { margin-top: 0.75rem; font-weight: 600; color: var(--text-main, #f4f6f8); }
.event-logistics__rows { display: grid; gap: 0.35rem; margin-top: 0.35rem; }
.event-logistics__row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--border, #2f3540);
  border-left: 3px solid var(--border, #2f3540);
  border-radius: 6px;
}
.event-logistics__row--briefing { border-left-color: #4c8dff; }
.event-logistics__row--meal { border-left-color: #e0a030; }
.event-logistics__row--social { border-left-color: #b068e0; }
.event-logistics__row--travel { border-left-color: #3cb7a0; }
.event-logistics__time { min-width: 3rem; font-variant-numeric: tabular-nums; color: var(--text-muted, #8b94a3); }
.event-logistics__row-body { flex: 1; min-width: 0; }
.event-logistics__what { color: var(--text-main, #f4f6f8); }
.event-logistics__who { font-size: 0.85rem; color: var(--text-muted, #8b94a3); }
.event-logistics__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.event-logistics__stay {
  margin-top: 0.5rem; padding: 0.75rem 1rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--border, #2f3540);
  border-radius: 6px;
  display: grid; gap: 0.25rem;
}
.event-logistics__stay-name { font-weight: 600; color: var(--text-main, #f4f6f8); }
.event-logistics__stay-address,
.event-logistics__stay-facts,
.event-logistics__stay-notes { font-size: 0.85rem; color: var(--text-muted, #8b94a3); }
.event-logistics__room { font-size: 0.9rem; }
.event-logistics__access-details { margin: 0.25rem 0 0; padding: 0.5rem; white-space: pre-wrap; background: var(--surface-2, #1c2025); border-radius: 4px; font-size: 0.85rem; }
.event-logistics__people { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.event-logistics__notes { margin: 0.5rem 0 0; white-space: pre-wrap; }
.event-logistics__form {
  display: grid; gap: 0.5rem; margin: 0.75rem 0; padding: 0.75rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--accent, #009845);
  border-radius: 6px;
}
.event-logistics__form-title { margin: 0; font-size: 0.95rem; }
.event-logistics__field { display: grid; gap: 0.2rem; font-size: 0.85rem; }
.event-logistics__field-label { color: var(--text-muted, #8b94a3); }
.event-logistics__form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
@media (max-width: 480px) {
  .event-logistics__row { flex-wrap: wrap; }
  .event-logistics__actions { width: 100%; justify-content: flex-end; }
}


/* ===== Catering panel ===== */
.event-catering-panel {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface-2, #1c2025);
  border: 1px solid var(--border, #2f3540);
  border-radius: 8px;
}
.event-catering__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.event-catering__heading { margin: 0; font-size: 1rem; }
.event-catering__empty { margin: 0.5rem 0 0; color: var(--text-muted, #8b94a3); font-size: 0.9rem; }
.event-catering__order {
  margin-top: 0.75rem; padding: 0.75rem 1rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--border, #2f3540);
  border-left: 3px solid var(--accent, #009845);
  border-radius: 6px;
  display: grid; gap: 0.4rem;
}
.event-catering__order--closed { border-left-color: var(--border, #2f3540); opacity: 0.85; }
.event-catering__order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.event-catering__order-title { font-weight: 600; color: var(--text-main, #f4f6f8); }
.event-catering__order-when,
.event-catering__counts,
.event-catering__by,
.event-catering__notes { font-size: 0.85rem; color: var(--text-muted, #8b94a3); }
.event-catering__status { font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-4, #2f3540); white-space: nowrap; }
.event-catering__rows { display: grid; gap: 0.3rem; margin-top: 0.25rem; }
.event-catering__row {
  /* Phone: name and Skip, then the order box full width. Wider: name | order | Skip on one line */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who skip" "input input";
  align-items: center; gap: 0.35rem 0.6rem;
  padding: 0.4rem 0.5rem;
  background: var(--surface-2, #1c2025);
  border: 1px solid var(--border, #2f3540);
  border-radius: 6px;
}
.event-catering__who { grid-area: who; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.event-catering__name { color: var(--text-main, #f4f6f8); }
.event-catering__dietary { font-size: 0.75rem; color: #e0a030; }
.event-catering__skip { grid-area: skip; align-self: start; }
.event-catering__order-input { grid-area: input; min-width: 0; }
.event-catering__state { grid-area: input; color: var(--text-muted, #8b94a3); font-size: 0.9rem; }
@media (min-width: 600px) {
  .event-catering__row { grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr) auto; grid-template-areas: "who input skip"; }
}
.event-catering__summary { padding: 0.5rem 0.75rem; background: var(--surface-2, #1c2025); border-radius: 6px; display: grid; gap: 0.2rem; font-size: 0.9rem; }
.event-catering__summary-empty { color: var(--text-muted, #8b94a3); }
.event-catering__usual { margin-top: 0.25rem; padding: 0.1rem 0.5rem; font-size: 0.8rem; color: var(--accent, #009845); }
.event-catering__notes-input { width: 100%; resize: vertical; font: inherit; font-size: 0.9rem; }
/* People skipping sit at the very bottom, under the actions, so the list only shows who still matters */
.event-catering__skipped { display: grid; gap: 0.35rem; margin-top: 0.25rem; padding-top: 0.6rem; border-top: 1px solid var(--border, #2f3540); }
.event-catering__skipped-title { font-size: 0.85rem; color: var(--text-muted, #8b94a3); }
.event-catering__skipped-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; }
.event-catering__skipped-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--text-muted, #8b94a3); }
.event-catering__unskip { padding: 0.1rem 0.5rem; font-size: 0.8rem; }
/* A run in the panel's list is one tappable row that opens the run's modal */
.event-catering__run { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.event-catering__run:hover, .event-catering__run:focus-visible { border-color: var(--accent, #009845); }
.event-catering-modal { max-width: 680px; }
.event-catering__modal-head { align-items: flex-start; margin-bottom: 1rem; }
.event-catering__modal-titlebox { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; min-width: 0; }
.event-catering__modal-title { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.event-catering__modal-body { display: grid; gap: 0.5rem; }
.event-catering-modal:focus { outline: none; }
.event-catering__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.event-catering__form {
  display: grid; gap: 0.5rem; margin: 0.75rem 0; padding: 0.75rem;
  background: var(--input-bg, #252a31);
  border: 1px solid var(--accent, #009845);
  border-radius: 6px;
}
.event-catering__form-title { margin: 0; font-size: 0.95rem; }
.event-catering__field { display: grid; gap: 0.2rem; font-size: 0.85rem; }
.event-catering__field-label { color: var(--text-muted, #8b94a3); }
.event-catering__form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.contact-card__food { font-size: 0.8rem; color: var(--text-3, #8b94a3); margin-top: 0.15rem; }
.contact-card__licence { font-size: 0.8rem; color: var(--text-2, #b6bdc8); margin-top: 0.15rem; }

/* ===== Unified event timeline (Build 313) ===== */
.timeline-form-host:empty { display: none; }
.timeline-form-host { margin-bottom: 12px; }
.timeline-day + .timeline-day { margin-top: 8px; }
.timeline-day__heading {
  position: relative;
  z-index: 2;
  margin: 4px 0 10px;
  padding: 4px 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  background: var(--bg-color, #121212);
}
/* Team schedule items (briefings, meals...) share the timeline with sessions, lighter */
.timeline-entry--team { margin-bottom: 10px; }
.timeline-entry--team .timeline-entry__time-num { font-weight: 600; color: var(--text-2); }
.timeline-entry__dot--team {
  width: 8px;
  height: 8px;
  margin: 15px 2px 0;
  border-radius: 2px;
  background: var(--surface-2);
}
.timeline-entry--briefing .timeline-entry__dot--team { border-color: #4c8dff; }
.timeline-entry--meal .timeline-entry__dot--team { border-color: #e0a030; }
.timeline-entry--social .timeline-entry__dot--team { border-color: #b068e0; }
.timeline-entry--travel .timeline-entry__dot--team { border-color: #3cb7a0; }
.timeline-entry__card--team {
  padding: 8px 12px;
  background: transparent;
  border-style: dashed;
}
.timeline-team__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline-team__title { color: var(--text-1); font-weight: 600; }
.timeline-team__badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
  border: 1px solid var(--border-1);
  border-radius: 4px;
  padding: 1px 6px;
}
.timeline-team__detail { margin-top: 2px; font-size: 0.85rem; color: var(--text-3); }
.timeline-team__actions { margin-top: 6px; }
/* NOW line at the track's current time */
.timeline-now {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 0;
  margin: 10px 0 18px;
  border-top: 2px solid var(--data-red, #e5484d);
}
.timeline-now::before {
  content: '';
  position: absolute;
  left: 51px;
  top: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--data-red, #e5484d);
}
.timeline-now__label {
  position: absolute;
  left: 0;
  top: -9px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--data-red, #e5484d);
  border-radius: 3px;
}
.timeline-add-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.timeline-add-row .btn { flex: 1 1 200px; }
.timeline-add-choice { flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.5rem; margin: 1rem 0; padding: 0.75rem; border: 1px solid var(--border-color, #333); border-radius: 8px; }
.timeline-add-choice__heading { font-weight: 600; }
.timeline-add-choice__option { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; padding: 0.75rem; min-height: 44px; background: var(--card-bg, #1e1e1e); color: inherit; border: 1px solid var(--accent, #009845); border-radius: 8px; cursor: pointer; font: inherit; }
.timeline-add-choice__option span { font-size: 0.85rem; opacity: 0.75; }


/* ===== Scheduled vs estimated session start (Build 316) ===== */
.timeline-entry__sched {
  font-size: 10px;
  color: var(--text-3);
  text-decoration: line-through;
  margin-top: 1px;
}
.timeline-entry__offset {
  display: inline-block;
  margin-top: 2px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  color: #1a1a1a;
  background: #f5a623;
}
.timeline-entry__offset--early { background: #4c8dff; color: #fff; }
.up-next__schedule {
  align-self: center;
  margin: 0 0 8px;
  padding: 4px 12px;
  font-size: clamp(14px, 2.4vw, 22px);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  background: #f5a623;
  border-radius: 6px;
}
.up-next--early .up-next__schedule { background: #4c8dff; color: #fff; }


/* ===== Quick delays + Up Next from the event timeline (Build 318) ===== */
.timeline-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.timeline-cascade { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-2); }
.timeline-delay { display: flex; gap: 6px; margin-top: 8px; }
.timeline-delay__btn {
  min-width: 52px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  background: var(--surface-2);
  border: 1px solid var(--border-1);
  color: var(--text-1);
}
.timeline-delay__btn--reset { color: #f5a623; border-color: #f5a623; }
.timeline-delay__btn:disabled { opacity: 0.5; }

/* Build 358: cancelled / postponed sessions (src/ui/SessionStatus.js) */
.session-notice {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.session-notice--cancelled { color: var(--data-red); background: rgba(229, 72, 77, 0.12); border: 1px solid var(--data-red); }
.session-notice--postponed { color: var(--data-amber); background: rgba(242, 177, 52, 0.12); border: 1px solid var(--data-amber); }
.timeline-entry--cancelled .timeline-entry__card strong { color: var(--text-3) !important; text-decoration: line-through; }
.timeline-entry--cancelled .timeline-entry__time-num { color: var(--text-4); text-decoration: line-through; }
.timeline-entry--cancelled .timeline-entry__dot { border-style: dashed; border-color: var(--text-4) !important; }
.timeline-entry--tbc .timeline-entry__time-num { color: var(--text-3); text-decoration: line-through; }
.timeline-entry--tbc .timeline-entry__dot { border-style: dashed; }
.timeline-entry__tbc { font-size: 0.75rem; font-weight: 800; color: var(--data-amber); }
/* Build 359: .btn (later in this file, same specificity) was overriding the red outline */
.btn.btn-danger-outline { color: var(--data-red); border-color: var(--data-red); background: transparent; }
.btn.btn-danger-outline:hover:not(:disabled) { background: rgba(229, 72, 77, 0.1); }
.modal-session-status { max-width: 440px; }
.session-status-help { color: var(--text-3); font-size: 0.9rem; margin: 0 0 1rem; }
.session-status-error { color: var(--data-red); font-size: 0.9rem; margin: 0.25rem 0; }
.session-status-error:empty { display: none; }
.session-status-when[hidden] { display: none; }
.session-status-buttons { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 480px) {
  .session-status-when.form-row { grid-template-columns: 1fr; }
}

/* Up Next: adjust buttons (Build 318) — big enough for a pit-wall tap */
.up-next__adjust { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 4px; }
.up-next__adjust-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.up-next__adjust-btn {
  min-width: 96px;
  min-height: 52px;
  padding: 8px 18px;
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  cursor: pointer;
}
.up-next__adjust-btn:disabled { opacity: 0.5; cursor: wait; }
.up-next__adjust-btn--reset { border-color: #f5a623; color: #f5a623; }
.up-next__adjust-note { font-size: 13px; opacity: 0.8; }

/* Up Next: "Time Now (Suburb, State)" clock as a digital readout (Builds 320-322),
   top-left opposite Close. Unlit "88:88:88" segments sit behind the lit digits. */
.up-next__clock {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  text-align: left;
  line-height: 1;
}
.up-next__clock-label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-3, #8b94a3);
}
.up-next__clock-time {
  --clock-led: #3dff7c;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--clock-led);
  text-shadow: 0 0 6px rgba(61, 255, 124, 0.7), 0 0 18px rgba(61, 255, 124, 0.3);
  background: #040806;
  border: 1px solid #1c2a21;
  border-radius: 8px;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.up-next__clock-time::before {
  content: '88:88:88';
  position: absolute;
  left: 14px;
  top: 8px;
  color: rgba(61, 255, 124, 0.07);
  text-shadow: none;
  pointer-events: none;
}
.up-next__clock-digits,
.up-next__clock-colon { position: relative; }
.up-next__clock-colon { animation: up-next-clock-blink 1s steps(1) infinite; }
@keyframes up-next-clock-blink { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .up-next__clock-colon { animation: none; }
}
@media (max-width: 1024px) {
  /* Phones and tablets in portrait (iPad is 768-1024px wide): sit at the top,
     centred, in the flow instead of overlapping the "ON TRACK NOW" banner.
     order:-1 keeps it above the centring spacer so it stays at the top. */
  .up-next__clock { position: static; order: -1; text-align: center; margin-top: -2rem; }
}

/* Tick-box list replacing Ctrl/Cmd multi-selects (src/ui/multiPick.js) */
.multi-pick {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input-bg);
}
.multi-pick .multi-pick-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--text-main);
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.multi-pick-item:last-child { border-bottom: 0; }
.multi-pick-item input { width: 1.25rem; height: 1.25rem; flex: none; accent-color: var(--accent); }
.multi-pick-item:has(input:checked) { background: rgba(0, 152, 69, 0.12); }
.multi-pick-empty { padding: 0.75rem; color: var(--text-muted); }

.multi-pick-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.5rem 0.25rem; }
.multi-pick-chip {
  min-height: 36px; padding: 0.25rem 0.8rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-main); font-size: 0.85rem;
}
.multi-pick-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.multi-pick-bulk { display: flex; align-items: center; gap: 0.9rem; padding: 0.25rem 0.75rem 0.5rem; font-size: 0.8rem; }
.multi-pick-count { color: var(--text-muted); margin-right: auto; }
.multi-pick-link { background: none; border: 0; padding: 0.4rem 0; color: var(--accent); cursor: pointer; font-size: 0.8rem; }
.multi-pick-list { max-height: 14rem; overflow-y: auto; }
/* Build 352: two-line rows, greyed rows (already on another car), full-height lists */
.multi-pick-text { display: flex; flex-direction: column; min-width: 0; }
.multi-pick-label { overflow-wrap: anywhere; }
.multi-pick-note { font-size: 0.75rem; color: var(--warning, #f59e0b); }
.multi-pick-detail { font-size: 0.8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.multi-pick-item.is-muted .multi-pick-label { color: var(--text-muted); }
.multi-pick-item.is-muted:not(:has(input:checked)) { opacity: 0.7; }
.multi-pick--full .multi-pick-list { max-height: none; overflow-y: visible; }
.crew-warning { margin-top: 0.4rem; padding: 0.4rem 0.6rem; border-radius: 6px; font-size: 0.8rem;
  border: 1px solid var(--warning, #f59e0b); color: var(--text-main); background: rgba(245, 158, 11, 0.1); }
/* Build 355: Lap times (session page panel, import preview, lap editor) */
.crew-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.crew-race-number { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }
.crew-race-number .form-control { width: 5rem; padding: 0.25rem 0.4rem; }
.lap-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0.5rem 0 1rem; }
.lap-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.lap-table th, .lap-table td { padding: 0.45rem 0.5rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; }
.lap-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 600; }
.lap-table td.lap-best-cell { font-family: var(--font-mono); white-space: nowrap; }
/* Build 356 (QA, TEST 24.9): on a phone the car name wrapped word by word and Edit was cut off */
.lap-table td:first-child { min-width: 9rem; }
.lap-table td:last-child { white-space: nowrap; }
.lap-table tr.lap-row--expandable { cursor: pointer; }
.lap-table tr.lap-row--expandable:hover { background: var(--input-bg); }
.lap-table tr.is-ours td { color: var(--accent); font-weight: 600; }
.lap-detail-row td { background: var(--input-bg); }
.lap-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lap-chip { font-family: var(--font-mono); font-size: 0.8rem; padding: 0.15rem 0.45rem; border-radius: var(--r-pill); border: 1px solid var(--border); white-space: nowrap; }
.lap-chip--best { border-color: var(--data-violet); color: var(--data-violet); font-weight: 700; }
.lap-field { margin-bottom: 1rem; }
.lap-field summary { cursor: pointer; color: var(--text-muted); font-size: 0.9rem; padding: 0.25rem 0; }
.lap-hint { color: var(--text-muted); font-size: 0.9rem; }
.participation-lap-summary { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-main); margin: 0.5rem 0; }
.modal-content.modal-lap-times { max-width: 760px; }
.lap-import-files { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; overflow-wrap: anywhere; }
.lap-import-source { font-size: 0.85rem; color: var(--text-muted); }
.lap-import-table select { min-width: 12rem; }
.lap-match-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.lap-match-note.is-warning, .lap-edit-feedback.is-warning { color: var(--warning, #f59e0b); }
.lap-remember { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; margin-top: 0.25rem; }
.lap-paste { margin: 0.75rem 0; }
.lap-paste summary { cursor: pointer; font-size: 0.9rem; }
.lap-paste textarea { margin: 0.5rem 0; font-family: var(--font-mono); font-size: 0.85rem; }
.lap-actions { display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
#lap-edit-laps { font-family: var(--font-mono); }

/* ===== Switch Identity banner (Build 368, dev only) ===== */
.identity-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.5rem 1rem;
  background: rgba(242,177,52,0.15);
  border-bottom: 2px solid var(--warning, #f2b134);
  color: var(--text-main, #e0e0e0);
  font-size: 0.9rem;
}
.identity-banner[hidden] { display: none; }
.identity-banner__label { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.identity-banner__back { flex-shrink: 0; min-height: 36px; }
.settings-viewing-as-note {
  margin: 0 0 0.75rem; padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--warning, #f2b134);
  background: rgba(242,177,52,0.12);
  color: var(--text-main, #e0e0e0);
}
.settings-viewing-as-note[hidden] { display: none; }

/* Track notes on the track card (quick wins, Bundle A) */
.track-notes { margin-top: 0.5rem; font-size: 0.8rem; color: var(--text-muted); white-space: pre-wrap; }

/* Timeline card: weather line and files (quick wins bundle B) */
.timeline-entry__weather { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.timeline-entry__files { margin-top: 0.4rem; }
.timeline-entry__files-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.timeline-entry__files-list[hidden] { display: none; } /* Build 393 (also covered by the global [hidden] rule) */
.timeline-entry__file { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Event links: live timing, broadcasts, copy link (quick wins bundle C) */
.event-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.4rem; }
.event-link { color: var(--info); text-decoration: none; font-size: 0.85rem; overflow-wrap: anywhere; }
.event-broadcast-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 0.4rem; margin-bottom: 0.4rem; }
@media (max-width: 480px) { .event-broadcast-row { grid-template-columns: minmax(0, 1fr) auto; } .event-broadcast-url { grid-column: 1 / -1; grid-row: 2; } }

/* "Complete your profile" prompt + Settings dot (Build 383) */
#btn-settings { position: relative; }
#btn-settings.has-profile-badge::after { content: ""; position: absolute; bottom: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--warning, #e0a030); box-shadow: 0 0 0 2px var(--card-bg, #1e1e1e); }
.profile-prompt { max-width: 480px; }
.profile-prompt__title { margin: 0 0 0.5rem; font-size: 1.2rem; }
.profile-prompt__intro { color: var(--text-muted); margin: 0 0 1rem; }
.profile-prompt__error { color: var(--danger, #e05050); margin: 0.25rem 0 0.5rem; }
.profile-prompt__actions { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 0.75rem; }

/* Build 402 (#305): Settings > Notifications on this device (src/ui/PushNotifications.js);
   the after-sign-in question reuses the profile prompt's dialog styles */
.push-settings__status { margin: 0 0 0.75rem; }
.push-settings__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.push-settings__actions .btn { flex: 1 1 12rem; }
.profile-prompt__note { display: block; margin-top: 0.75rem; }

/* ===== Build 385: header menu (Settings / Notifications) + Notifications view ===== */
.header-menu { position: relative; }
.header-menu__toggle { position: relative; }
.notifications-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--data-red);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}
.header-menu__list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--s-1);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.header-menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-1);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.header-menu__item:hover,
.header-menu__item:focus-visible { background: var(--surface-3); }
.header-menu__count:not(:empty) {
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--data-red);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.notifications {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--s-6) var(--s-4);
  overflow-y: auto;
}
.notifications__panel {
  width: 100%;
  max-width: 640px;
  background: var(--card-bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.notifications__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4);
  border-bottom: 1px solid var(--border);
}
.notifications__heading { margin: 0; font-size: var(--t-lg); }
.notifications__close { font-size: var(--t-xl); line-height: 1; }
.notifications__body { padding: var(--s-2) var(--s-4) var(--s-4); }
.notifications__message { color: var(--text-muted); margin: var(--s-4) 0; }
.notifications__group-title {
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  margin: var(--s-4) 0 var(--s-2);
}
.notifications__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.notifications__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface-2);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-sm);
}
.notifications__item--info { border-left-color: var(--info); }
.notifications__text { min-width: 0; overflow-wrap: anywhere; }
.notifications__title { font-weight: 600; color: var(--text-1); }
.notifications__detail { font-size: var(--t-sm); color: var(--text-2); }
.notifications__event { font-size: var(--t-xs); color: var(--text-3); }
.notifications__actions { display: flex; gap: var(--s-2); flex-shrink: 0; }
@media (max-width: 600px) {
  .notifications { padding: 0; }
  .notifications__panel { border-radius: 0; min-height: 100%; border: 0; }
  .notifications__item { flex-direction: column; align-items: stretch; }
  .notifications__actions { justify-content: flex-end; flex-wrap: wrap; }
}
/* Update all weather (Build 387) - src/ui/EventWeather.js */
.btn-update-weather { white-space: nowrap; }
@media (max-width: 480px) { .btn-update-weather__label { display: none; } }
.modal-event-weather { max-width: 560px; }
.event-weather-intro { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 0.6rem; }
.event-weather-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 55vh; overflow-y: auto; margin-bottom: 0.6rem; }
.event-weather-row { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: 0.85rem; }
.event-weather-row input[type="checkbox"] { margin-top: 0.2rem; flex: none; }
.event-weather-row__body { min-width: 0; overflow-wrap: anywhere; }
.event-weather-row__when, .event-weather-row__old, .event-weather-row__reason { color: var(--text-muted); }
.event-weather-row__flag { color: var(--warning); margin-top: 0.2rem; }
.event-weather-row--skipped, .event-weather-row--unchanged { opacity: 0.75; }
.event-weather-overwrite { display: flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; margin-bottom: 0.4rem; }
.event-weather-error { color: var(--data-red); font-size: 0.9rem; margin: 0.25rem 0; }
.event-weather-error:empty { display: none; }
/* Profile photos (Build 389) */
.contact-card__avatar.has-photo, .profile-photo__avatar.has-photo { padding: 0; overflow: hidden; }
.profile-avatar__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profile-photo { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.profile-photo__avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; color: var(--text-muted); flex-shrink: 0; }
.profile-photo__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.is-busy .profile-photo__avatar { opacity: 0.5; }