/* ============================================================
   Multitap Suite - SaaS-Specific Styles
   Launcher, Groups, Notifications, Toggles, Display, Events
   Uses --space-* variables from admin.css base
   ============================================================ */

/* ============================================================
   Coming Soon Overlay (ACC/iRacing launch controls)
   ============================================================ */
.coming-soon-wrapper {
  position: relative;
}

.coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  z-index: 10;
}

.coming-soon-badge {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-xl);
  text-align: center;
}

.coming-soon-badge h3 {
  color: var(--warning);
  font-size: 1.1em;
  margin-bottom: var(--space-xs);
}

.coming-soon-badge p {
  color: var(--text-muted);
  font-size: 0.85em;
}

/* ============================================================
   Sim Grid (Launcher Page)
   The grid was designed for fat .sim-card tiles (now hidden). The compact
   .sim-row layout that replaces them is one-line horizontal — stack them
   vertically at full width instead of trying to fit them into 280px cells.
   ============================================================ */
.sim-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

/* ============================================================
   Group Creator Layout
   v2 only renders the .active-groups-column child here; the old v1
   left column (group creator) moved into the slide-in race drawer.
   Keep this as a single-column block so the active-races grid spans
   the full content width.
   ============================================================ */
.group-wrapper {
  width: 100%;
  margin-bottom: var(--space-lg);
}

/* ============================================================
   Groups page — match the Launcher rhythm
   ============================================================ */

/* Auto-hide empty sections so the page doesn't show stranded headers.
   We use a JS-toggled `.is-empty` class instead of `:has(.x:empty)` because
   WebKit (iOS Safari / Brave on iPad) doesn't reliably re-evaluate :has()
   when descendants change after first paint, leaving JS-populated sections
   stuck hidden until an orientation change forces a relayout. */
.sim-status-section.groups-quickstarts-section.is-empty,
.sim-status-section.groups-active-section.is-empty,
.sim-status-section.groups-lineups-section.is-empty { display: none; }

/* Hint text in the section header (subtitle next to the title). */
.sim-status-hint {
  margin-left: 8px;
  font-size: 0.78em;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* ============================================================
   Saved Lineups grid + card
   A lineup = a recurring driver roster + their preferred config.
   Distinct from generic Quick Start templates: they track
   accumulated seat-time per driver across multiple race sessions.
   ============================================================ */
.lineups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-md);
}
.lineup-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-left: 4px solid color-mix(in srgb, #ffd166 60%, var(--border-primary));
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lineup-card.is-active {
  border-left-color: var(--success);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--success) 8%, var(--bg-card)) 0%,
    var(--bg-card) 60%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 40%, transparent),
              0 4px 14px color-mix(in srgb, var(--success) 15%, transparent);
}

.lineup-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.lineup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text-primary);
}
.lineup-title i { color: #ffd166; flex-shrink: 0; }
.lineup-title strong {
  font-size: 0.98em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lineup-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.lineup-status-badge.live {
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 50%, transparent);
}
.lineup-status-badge.idle {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  border: 1px solid var(--border-primary);
}
.lineup-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: lineupPulse 1.4s ease-in-out infinite;
}
@keyframes lineupPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.35); }
}

.lineup-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.85em;
  color: var(--text-secondary);
}
.lineup-meta i { color: var(--text-muted); margin-right: 2px; font-size: 0.9em; }
.lineup-meta-sep { color: var(--text-muted); opacity: 0.5; }

.lineup-drivers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}
.lineup-driver-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.88em;
  padding: 3px 0;
}
.lineup-driver-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.lineup-driver-dot.live {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}
.lineup-driver-dot.idle { background: var(--text-muted); opacity: 0.45; }
.lineup-driver-name {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lineup-driver-sim {
  color: var(--text-muted);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: ui-monospace, monospace;
}
.lineup-driver-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #ffd166;
  font-family: ui-monospace, monospace;
  white-space: nowrap;
}
.lineup-card.is-active .lineup-driver-time { color: var(--success); }
.lineup-empty {
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.85em;
  padding: var(--space-sm);
}

.lineup-actions {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.lineup-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.88em;
  font-weight: 600;
  font-family: inherit;
  transition: all var(--transition-fast);
}
.lineup-btn:hover { transform: translateY(-1px); }
.lineup-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.lineup-btn-primary {
  background: var(--success);
  color: #ffffff;
  border-color: var(--success);
}
.lineup-btn-primary:hover {
  background: color-mix(in srgb, var(--success) 85%, white);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 30%, transparent);
}
.lineup-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.lineup-btn-danger {
  flex: 0 0 auto;
  width: 44px;
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border-primary));
}
.lineup-btn-danger > span { display: none; }
.lineup-btn-danger:hover {
  background: var(--danger);
  color: var(--text-primary);
  border-color: var(--danger);
}

@media (max-width: 540px) {
  .lineups-grid { grid-template-columns: 1fr; }
}

/* Primary CTA action bar on the groups page — modeled on the launcher's
   master action bar but visually loud so it can't be missed. */
.groups-action-bar {
  align-items: center;
  flex-wrap: wrap;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 12%, var(--bg-card)) 0%,
    var(--bg-card) 70%);
  border-left: 4px solid var(--primary-color);
}

/* Big filled cyan CTA. Used on the groups page; reusable elsewhere if needed. */
.action-bar-btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  background: var(--primary-color);
  color: var(--text-primary);
  border: 0;
  border-radius: var(--radius-md);
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--primary-color) 35%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.2);
  transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  white-space: nowrap;
}
.action-bar-btn-cta i {
  font-size: 1.2em;
  line-height: 1;
}
.action-bar-btn-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--primary-color) 45%, transparent),
    0 4px 8px rgba(0, 0, 0, 0.25);
}
.action-bar-btn-cta:active {
  transform: translateY(0);
  filter: brightness(0.95);
}

.action-bar-hint {
  color: var(--text-muted);
  font-size: 0.85em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Empty-state CTA — visible whenever no races are active. Acts as the
   primary discoverability path alongside the action bar / mobile FAB. */
.groups-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  margin-top: var(--space-md);
  background: var(--bg-card);
  border: 1px dashed var(--border-primary);
  border-radius: var(--radius-md);
}
.groups-empty-state[hidden] { display: none; }
.groups-empty-state-icon {
  font-size: 2.4em;
  color: var(--primary-color);
  opacity: 0.7;
  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--primary-color) 35%, transparent));
}
.groups-empty-state h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--text-primary);
  font-weight: 600;
}
.groups-empty-state p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92em;
  max-width: 380px;
}

/* Sticky-bottom mobile FAB — only shown on phones via @media below.
   Pinned just above the fixed footer (not under it) so the button stays
   tappable. Container catches no clicks (pointer-events:none) so the
   underlying page can still receive taps in the safe zone above the pill. */
.groups-mobile-fab {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--footer-height);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(to top,
    var(--bg-primary) 35%,
    color-mix(in srgb, var(--bg-primary) 75%, transparent) 80%,
    transparent 100%);
  z-index: 500;
  pointer-events: none;
}
.groups-mobile-fab-btn {
  pointer-events: auto;
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--primary-color);
  color: var(--text-primary);
  border: 0;
  border-radius: 999px;
  font-size: 1.05em;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--primary-color) 45%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.35);
  animation: fabPulse 2.4s ease-in-out infinite;
}
.groups-mobile-fab-btn i { font-size: 1.2em; }
.groups-mobile-fab-btn:active {
  transform: translateY(1px);
  animation: none;
}
@keyframes fabPulse {
  0%, 100% {
    box-shadow:
      0 10px 32px color-mix(in srgb, var(--primary-color) 45%, transparent),
      0 4px 10px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow:
      0 10px 36px color-mix(in srgb, var(--primary-color) 65%, transparent),
      0 4px 10px rgba(0, 0, 0, 0.35),
      0 0 0 6px color-mix(in srgb, var(--primary-color) 10%, transparent);
  }
}

/* Scrim behind the drawer. Sits in the same area as the drawer (between
   header and footer) so it doesn't dim the global chrome. */
.race-drawer-scrim {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: var(--footer-height);
  left: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  animation: scrimFadeIn 0.18s ease-out;
}
@keyframes scrimFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lock body scroll while drawer is open (prevents background scroll on mobile). */
body.drawer-open { overflow: hidden; }

/* ============================================================
   Launch loading overlay — shown while AssettoServer warms up.
   Sits above everything (including the drawer), can't be dismissed.
   ============================================================ */
.race-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.race-launch-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.race-launch-overlay[hidden] { display: none; }

.race-launch-overlay-card {
  background: linear-gradient(160deg, var(--bg-secondary) 0%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--primary-color) 35%, var(--border-primary));
  border-radius: var(--radius-lg);
  padding: 36px 40px 28px;
  width: min(92vw, 440px);
  text-align: center;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 6px color-mix(in srgb, var(--primary-color) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.race-launch-spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.race-launch-spinner-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid color-mix(in srgb, var(--primary-color) 14%, transparent);
  border-top-color: var(--primary-color);
  border-right-color: color-mix(in srgb, var(--primary-color) 60%, transparent);
  animation: launchRingSpin 1.05s linear infinite;
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.race-launch-spinner-icon {
  font-size: 1.7em;
  color: var(--primary-color);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--primary-color) 50%, transparent));
  animation: launchIconPulse 1.4s ease-in-out infinite;
}
@keyframes launchRingSpin { to { transform: rotate(360deg); } }
@keyframes launchIconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

.race-launch-title {
  margin: 0 0 6px 0;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text-primary);
}
.race-launch-subtitle {
  margin: 0 0 22px 0;
  color: var(--text-muted);
  font-size: 0.92em;
  line-height: 1.45;
}

.race-launch-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  text-align: left;
  margin: 0 auto;
  max-width: 280px;
}
.race-launch-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 0.88em;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.race-launch-step > i {
  width: 16px;
  text-align: center;
  color: var(--text-muted);
}
.race-launch-step.is-active {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-color: var(--primary-color);
  color: var(--text-primary);
}
.race-launch-step.is-active > i { color: var(--primary-color); }
.race-launch-step.is-done {
  color: color-mix(in srgb, var(--success) 80%, var(--text-secondary));
  border-color: color-mix(in srgb, var(--success) 50%, var(--border-primary));
}
.race-launch-step.is-done > i { color: var(--success); }

/* ============================================================
   Drawer form polish — tighten section headers, add icons,
   wrap rows nicely, and style the merged Timing / Settings blocks.
   ============================================================ */
.race-drawer-right .group-section {
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}
.race-drawer-right .group-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8em;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-sm) 0;
}
.race-drawer-right .group-section h4 i {
  color: var(--primary-color);
  width: 14px;
  text-align: center;
  font-size: 0.95em;
}

/* Form rows in the drawer wrap onto multiple lines on narrow widths. */
.race-drawer-right .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-end;
}
.race-drawer-right .form-row > .form-group {
  flex: 1 1 calc(50% - var(--space-sm));
  min-width: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.race-drawer-right .form-row > .form-group label {
  font-size: 0.78em;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.race-drawer-right .form-row > .form-group input,
.race-drawer-right .form-row > .form-group select {
  width: 100%;
}
.form-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--text-muted);
  opacity: 0.8;
  margin-left: 4px;
}

/* Traffic density slider + label inline. */
.traffic-density-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.traffic-density-control input[type="range"] { flex: 1; min-width: 0; }
.traffic-density-control #traffic-density-label {
  min-width: 38px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

/* Preserve checkbox card — gold accent, full-width, easy-tap on mobile. */
.group-preserve-card {
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, #ffc107 8%, var(--bg-card));
  border: 1px solid color-mix(in srgb, #ffc107 40%, transparent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.group-preserve-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  margin: 0;
}
.group-preserve-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: #ffc107;
  cursor: pointer;
}
.group-preserve-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.group-preserve-text strong { color: #ffc107; font-size: 0.92em; }
.group-preserve-text small { color: var(--text-muted); font-size: 0.82em; }

/* Compact secondary-action row (Save / Stop all) at the bottom of the form. */
.group-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.group-secondary-actions > button {
  flex: 1 1 200px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
}
.group-secondary-actions > .btn-tertiary {
  color: var(--text-secondary);
}
.group-secondary-actions > .btn-danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border-primary));
  background: transparent;
}
.group-secondary-actions > .btn-danger:hover {
  background: var(--danger);
  color: var(--text-primary);
}

.group-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.group-creator {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-medium);
  position: relative;
  overflow: hidden;
}

.group-creator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color) 0%, #00d4ff 100%);
}

.group-creator-header {
  text-align: center;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-primary);
}

.group-creator-header h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.group-creator-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.8rem;
}

/* Group Creator Tabs */
.group-creator-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: var(--space-md);
  padding: 4px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.group-creator-tabs .tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

.group-creator-tabs .tab-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.group-creator-tabs .tab-btn.active {
  background: var(--primary-color);
  color: white;
  font-weight: bold;
  box-shadow: 0 2px 8px rgba(15, 146, 208, 0.4);
}

.tab-content {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Group Sections */
.group-section {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
}

.group-section h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Group Actions */
.group-actions-main,
.group-actions-secondary,
.group-actions-danger {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-primary);
}

.group-actions-secondary,
.group-actions-danger {
  justify-content: center;
}

/* Group Active Session */
.group-active {
  background: var(--bg-secondary);
  padding: var(--space-md);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  height: fit-content;
  box-shadow: var(--shadow-light);
  position: relative;
  overflow: hidden;
}

.group-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.group-active-header {
  text-align: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-primary);
}

.group-active-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-xs) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.group-active-header p {
  color: var(--text-secondary);
  margin: 0;
  font-size: 0.75rem;
}

.group-status {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-sm);
  color: #ffc107;
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
}

/* ============================================================
   Quick Start Strip
   ============================================================ */
/* Container for the Quick Starts items — horizontal scroll on all sizes. */
.quick-starts-strip {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: var(--space-sm);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.quick-starts-strip::-webkit-scrollbar { height: 6px; }
.quick-starts-strip::-webkit-scrollbar-thumb {
  background: var(--border-primary);
  border-radius: 999px;
}

.quick-start-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 0;
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  overflow: hidden;
  position: relative;
  display: block;
  width: 170px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

.quick-start-item:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.quick-start-preview {
  position: relative;
  width: 100%;
  height: 80px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--bg-tertiary);
}

.quick-start-overlay {
  position: absolute;
  top: 2px;
  right: 2px;
  opacity: 0;
  transition: var(--transition-fast);
}

.quick-start-item:hover .quick-start-overlay {
  opacity: 1;
}

.quick-start-delete {
  background: rgba(220, 53, 69, 0.9);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: 0.6rem;
}

.quick-start-delete:hover {
  background: #dc3545;
  transform: scale(1.2);
}

.quick-start-info {
  padding: var(--space-md);
}

.quick-start-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-start-details {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.quick-start-details .track-car-info {
  font-size: 0.6rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-start-details .session-times {
  font-size: 0.55rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  font-family: 'Consolas', 'Courier New', monospace;
}

/* ============================================================
   Toggle Switches
   ============================================================ */
.toggle-switch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.toggle-switch:hover {
  transform: scale(1.02);
}

.toggle-slider {
  width: 44px;
  height: 24px;
  background: #404040;
  border-radius: 12px;
  position: relative;
  transition: all var(--transition-normal);
  border: 1px solid #555;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-slider.active {
  background: linear-gradient(135deg, #28a745, #20c997);
  border-color: #28a745;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.1);
}

.toggle-thumb {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-thumb.active {
  transform: translateX(20px);
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.toggle-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6rem;
  font-weight: 600;
}

.status-text {
  color: var(--text-secondary);
  min-width: 20px;
  text-align: center;
}

/* Settings Toggle Container */
.settings-toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  transition: all 0.15s ease;
  cursor: pointer;
  min-height: 44px;
}

.settings-toggle-container:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-secondary);
}

.settings-toggle-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  user-select: none;
}

/* Settings Toggle */
.settings-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #404040;
  border-radius: 12px;
  border: 1px solid #555;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all var(--transition-normal);
  flex-shrink: 0;
}

.settings-toggle-switch.active {
  background: linear-gradient(135deg, #28a745, #20c997);
  border-color: #28a745;
}

.settings-toggle-thumb {
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all var(--transition-normal);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.settings-toggle-thumb.active {
  transform: translateX(20px);
}

.settings-toggle-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Sim Mode Configuration Tabs */
.mode-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.mode-tabs .mode-tab-btn {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}

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

.mode-tabs .mode-tab-btn.active {
  background: var(--accent, #0f92d0);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(15, 146, 208, 0.4);
}

.mode-tab-content {
  animation: fadeIn 0.2s ease;
}

.mode-subsection {
  margin-bottom: var(--space-lg);
}

.mode-subsection h4 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs, 4px);
  border-bottom: 1px solid var(--border-primary);
}

.mode-subsection .sub-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  align-items: start;
}

.mode-grid .form-group {
  margin-bottom: 0;
}

/* Slider display value */
.slider-value {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  font-weight: 600;
  color: var(--accent, #0f92d0);
  font-size: 0.85rem;
}

/* Saved sims read-only list */
.saved-sims-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.saved-sim-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}

.saved-sim-item .sim-name {
  font-weight: 600;
  color: var(--text-primary);
}

.saved-sim-item .sim-ip {
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Assist Toggle */
.assist-toggle-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
  min-width: 100px;
}

.assist-toggle-modern:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.assist-toggle-modern.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.assist-label {
  font-size: 0.65rem;
  text-align: center;
  margin: 0;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================================
   Connection Status Indicators
   ============================================================ */
.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all var(--transition-fast);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.status-indicator.online {
  background: #28a745;
  box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

.status-indicator.pending {
  background: #ffc107;
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
  animation: pulse 1.5s ease-in-out infinite;
}

.status-indicator.error {
  background: #dc3545;
  box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

.status-indicator.offline {
  background: #6c757d;
  box-shadow: 0 0 4px rgba(108, 117, 125, 0.3);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* Group Session Highlighting */
.driver-card.in-group-session {
  border-color: #ff6b35;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(255, 107, 53, 0.1) 100%);
  box-shadow: 0 0 25px rgba(255, 107, 53, 0.3);
  animation: groupPulse 2s infinite;
}

@keyframes groupPulse {
  0% { box-shadow: 0 0 25px rgba(255, 107, 53, 0.3); }
  50% { box-shadow: 0 0 35px rgba(255, 107, 53, 0.5); }
  100% { box-shadow: 0 0 25px rgba(255, 107, 53, 0.3); }
}

.group-session-info {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1) 0%, rgba(255, 140, 66, 0.05) 100%);
  border: 1px solid rgba(255, 107, 53, 0.4);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 0.85rem;
  color: #ff6b35;
  text-align: center;
  font-weight: 600;
}

/* ============================================================
   Admin Notification System
   ============================================================ */
.admin-notification {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  z-index: 10000;
  transition: all 0.3s ease;
  overflow: hidden;
}

.notification-content {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  min-height: 50px;
}

.notification-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.notification-message {
  flex: 1;
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.4;
  word-wrap: break-word;
}

.notification-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition-fast);
  flex-shrink: 0;
}

.notification-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes footerStatUpdate {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ============================================================
   Tertiary / Special Buttons
   ============================================================ */
.btn-tertiary {
  background: linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(111, 66, 193, 0.3);
  padding: 10px 18px;
  font-size: 0.85rem;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: inherit;
}

.btn-tertiary:hover {
  background: linear-gradient(135deg, #6138a8 0%, #4e267b 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.4);
}

.btn-icon {
  font-size: 1.2rem;
}

.btn-text {
  font-size: 0.9rem;
}

/* ============================================================
   Settings Actions & Save Button
   ============================================================ */
.settings-actions {
  text-align: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-primary);
}

.save-settings-btn {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  color: white;
  border: none;
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition-normal);
  box-shadow: var(--shadow-medium);
  font-family: inherit;
}

.save-settings-btn:hover {
  background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-heavy);
}

/* ============================================================
   Loading Spinner
   ============================================================ */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-primary);
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: var(--space-sm);
}

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

/* ============================================================
   Form Grid (for multi-column forms)
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.form-group.full-width {
  grid-column: 1 / -1;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1200px) {
  .group-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .admin-notification {
    right: 10px;
    left: 10px;
    min-width: auto;
    max-width: none;
  }

  .assist-toggle-modern {
    min-width: 85px;
    padding: 10px 6px;
  }

  .toggle-slider {
    width: 38px;
    height: 20px;
    border-radius: 10px;
  }

  .toggle-thumb {
    width: 16px;
    height: 16px;
    top: 1px;
    left: 1px;
  }

  .toggle-thumb.active {
    transform: translateX(17px);
  }
}

/* ============================================================
   Groups Advanced disclosure (Task 1.2)
   ============================================================ */
.group-advanced {
  margin: var(--space-md) 0;
  padding: var(--space-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.group-advanced > summary {
  cursor: pointer;
  font-weight: 600;
  padding: var(--space-xs);
  user-select: none;
}
.group-advanced summary { list-style: none; }
.group-advanced summary::-webkit-details-marker { display: none; }
.group-advanced summary::before { content: "\25B8 "; display: inline-block; transition: transform var(--transition-fast); }
.group-advanced[open] summary::before { transform: rotate(90deg); }

/* ============================================================
   Sim status-grouped sections (Task 1.3)
   ============================================================ */
.sim-status-section { margin-bottom: var(--space-lg); }
.sim-status-header {
  font-size: 0.95em;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.sim-status-count {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: normal;
}
.sim-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.sim-status-dot.live { background: var(--success); box-shadow: 0 0 8px var(--success); }
.sim-status-dot.idle { background: var(--text-muted); }
.sim-status-dot.offline { background: var(--danger); }

/* Auto-hide empty status buckets. Driven by JS toggling .is-empty rather
   than `:has(.sim-grid:empty)`, because WebKit (iOS Safari / Brave on iPad)
   doesn't reliably re-evaluate :has(:empty) when descendants are added
   dynamically — sim cards inserted by JS after first paint left the section
   stuck hidden until an orientation change forced a relayout. */
.sim-status-section.is-empty { display: none; }

/* Launcher footer-style control row — keeps the Reset Order button
   right-aligned below the sim list with a bit of breathing room. */
.launcher-controls {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-md);
}

/* ============================================================
   Page header (Launcher / Groups / etc.) — gives the subtitle
   space before any absolute-positioned labels (BROADCAST etc.)
   in the content below can clip into it.
   ============================================================ */
.launcher-header,
.groups-header {
  margin-bottom: var(--space-lg);
}
.launcher-header h2,
.groups-header h2 {
  margin: 0 0 var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.launcher-header h2 i,
.groups-header h2 i {
  color: var(--primary-color);
  font-size: 0.85em;
}
.launcher-subtitle,
.groups-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
}

/* ============================================================
   Broadcast strip (Task 1.4)
   ============================================================ */
.broadcast-strip {
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--primary-color);
  border-radius: var(--radius-md);
  position: relative;
}
.broadcast-strip-label {
  position: absolute;
  top: -10px;
  left: var(--space-md);
  background: var(--bg-primary);
  color: var(--primary-color);
  padding: 2px 8px;
  font-size: 0.7em;
  letter-spacing: 0.2em;
  font-weight: 600;
}
.broadcast-strip:has(#broadcast-strip-content:empty) { display: none; }

/* Broadcast card — content rendered by renderBroadcastCard() uses lots of
   inline styles and unclassed elements. This block tames it without touching
   the JS so live polling that targets the inner IDs keeps working.
   The whole card is laid out as ONE compact ribbon: title + status pill +
   inline status text + wrappable controls. No more giant vertical block. */
.broadcast-highlight {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.broadcast-highlight h3 {
  margin: 0;
  font-size: 0.92em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
/* "✅ Connected" / "❌ Disconnected" status pill — small, inline */
.broadcast-highlight > div:nth-of-type(1) {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  width: max-content;
  font-size: 0.78em !important;
  margin: 0 !important;
  flex-shrink: 0;
}
/* Status info: "Status: …  Session: …" rendered inline as faint metadata */
.broadcast-highlight #broadcast-status {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0 !important;
  font-size: 0.78em;
  color: var(--text-muted);
  flex: 1 1 auto;
  min-width: 0;
}
.broadcast-highlight #broadcast-status > div {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.broadcast-highlight #broadcast-status strong {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}
/* Controls strip: inline wrap, small buttons. Each labelled section uses
   a thin separator instead of full HR breaks so it stays one visual row. */
.broadcast-highlight #broadcast-controls {
  flex: 1 1 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.broadcast-highlight #broadcast-controls > div {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.broadcast-highlight #broadcast-controls > div > label,
.broadcast-highlight #broadcast-controls label {
  font-size: 0.7em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.broadcast-highlight #broadcast-controls label strong { font-weight: 600; }
/* The big inline-style HRs become slim vertical dividers between sections. */
.broadcast-highlight #broadcast-controls hr {
  border: 0;
  border-left: 1px solid var(--border-primary);
  margin: 0 4px !important;
  height: 18px;
  width: 0;
  align-self: center;
}
.broadcast-highlight #broadcast-controls button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.78em;
  font-family: inherit;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.broadcast-highlight #broadcast-controls button:hover {
  border-color: var(--primary-color);
}
.broadcast-highlight #broadcast-controls select {
  padding: 3px 24px 3px 8px;
  font-size: 0.8em;
  height: 26px;
  width: auto;
  min-width: 140px;
  max-width: 220px;
}
/* "End Idle" / "Exit Game" — destructive intent */
.broadcast-highlight #end-idle-btn,
.broadcast-highlight #exit-game-btn {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-primary));
  color: var(--danger);
}
.broadcast-highlight #end-idle-btn:hover,
.broadcast-highlight #exit-game-btn:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.broadcast-highlight #restart-idle-btn,
.broadcast-highlight #launch-server-btn,
.broadcast-highlight #join-group-btn {
  border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-primary));
  color: var(--primary-color);
}
.broadcast-highlight #restart-idle-btn:hover,
.broadcast-highlight #launch-server-btn:hover,
.broadcast-highlight #join-group-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
/* The emergency-restart button — small dashed pill, last item */
.broadcast-highlight #broadcast-controls > button:last-of-type {
  background: transparent !important;
  color: var(--text-muted) !important;
  border: 1px dashed var(--border-primary);
  font-size: 0.74em;
  padding: 3px 8px;
}
.broadcast-highlight #broadcast-controls > button:last-of-type:hover {
  color: var(--text-primary) !important;
  border-color: var(--primary-color);
}

/* The .broadcast-strip wrapper around all of this needs less padding too,
   so the whole pinned area is a thin band at the top of the page. */
.broadcast-strip {
  padding: 8px 10px !important;
  margin-bottom: 10px;
}

/* ============================================================
   Race tile grid (Task 3.1)
   ============================================================ */
/* Race tiles now share the .sim-row visual rhythm: one compact row per race,
   click anywhere on the row to expand the detail block below. */
.race-tile-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.race-tile {
  display: grid;
  /* dot | name+status | track+mode | sim chips | duration | chevron */
  grid-template-columns: 14px minmax(140px, 180px) minmax(0, 1.2fr) minmax(0, 2fr) minmax(90px, auto) 28px;
  align-items: center;
  gap: var(--space-md);
  padding: 12px var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              box-shadow var(--transition-fast);
  min-width: 0;
}
.race-tile:hover,
.race-tile:focus {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 4%, var(--bg-card));
}

.race-tile-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  display: inline-block;
}
.race-tile-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.race-tile-name strong {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95em;
}
.race-tile-status {
  font-size: 0.72em;
  color: var(--success);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.race-tile-status-practice { color: var(--text-muted); }
.race-tile-status-qualify  { color: var(--warning); }
.race-tile-status-race     { color: var(--success); }
.race-tile-status-booking  { color: var(--text-muted); }

.race-tile-track {
  color: var(--text-secondary);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.race-tile-track i {
  color: var(--text-muted);
  font-size: 0.85em;
  margin-right: 4px;
}

/* Elapsed-time pill on the collapsed row. Tabular nums so it doesn't jitter. */
.race-tile-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  justify-self: end;
}
.race-tile-time i {
  color: var(--primary-color);
  font-size: 0.9em;
}

/* Sim chips on the collapsed race tile — two-line pill per sim
   (top: driver name when set, bottom: cockpit/sim label).
   Chip strip horizontally scrolls when there are more sims than fit. */
.race-tile-sims {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  scrollbar-width: none;          /* Firefox: no scrollbar */
}
.race-tile-sims::-webkit-scrollbar { display: none; }
.race-tile-sims-empty {
  color: var(--text-muted);
  font-size: 0.85em;
  font-style: italic;
}
.race-tile-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 12px 4px 10px;
  background: color-mix(in srgb, var(--success) 14%, var(--bg-tertiary));
  color: var(--text-primary);
  border: 1px solid color-mix(in srgb, var(--success) 45%, transparent);
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: 180px;
  line-height: 1.2;
  position: relative;
}
.race-tile-chip-id {
  font-size: 0.74em;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.race-tile-chip-driver {
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
/* When there IS a driver, hoist the driver line above and demote the sim id. */
.race-tile-chip:has(.race-tile-chip-driver) .race-tile-chip-id {
  font-size: 0.68em;
  color: var(--text-muted);
  order: 2;
}
.race-tile-chip:has(.race-tile-chip-driver) .race-tile-chip-driver { order: 1; }

/* Disconnected/entry-list sim — desaturated amber. */
.race-tile-chip.is-entry {
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-tertiary));
  border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  border-left-color: var(--warning);
  color: var(--text-secondary);
}
.race-tile-chip.is-entry .race-tile-chip-id,
.race-tile-chip.is-entry .race-tile-chip-driver {
  color: var(--text-secondary);
}
.race-tile-chevron {
  color: var(--text-muted);
  text-align: center;
  font-size: 0.85em;
  transition: transform var(--transition-fast);
}
.race-tile.expanded .race-tile-chevron { transform: rotate(180deg); }

/* When any tile is expanded, others compress to dot + name + time + chevron. */
.race-tile-grid.has-expanded .race-tile:not(.expanded) {
  grid-template-columns: 10px 1fr auto 28px;
  padding: 10px var(--space-md);
}
.race-tile-grid.has-expanded .race-tile:not(.expanded) .race-tile-track,
.race-tile-grid.has-expanded .race-tile:not(.expanded) .race-tile-sims {
  display: none;
}

/* Expanded tile — full-width with detail block child. */
.race-tile.expanded {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
}
.race-tile.expanded:hover { background: var(--bg-secondary); }

.race-tile-detail {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-primary);
  animation: simDetailIn 0.18s ease-out;
}
.race-tile-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  align-items: center;
}
.race-tile-detail-actions button {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9em;
}
.race-tile-detail-actions button:hover { border-color: var(--primary-color); }
.race-tile-detail-actions .btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.race-tile-detail-actions .btn-danger:hover {
  background: var(--danger);
  color: var(--text-primary);
}

.race-queued-banner {
  background: var(--warning);
  color: var(--bg-primary);
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  font-weight: 600;
}

.race-queued-banner-btn {
  background: var(--bg-primary);
  color: var(--warning);
  border: 1px solid var(--warning);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.8em;
  font-weight: 600;
  cursor: pointer;
  margin-left: var(--space-sm);
}
.race-queued-banner-btn:hover {
  background: var(--warning);
  color: var(--bg-primary);
}

.race-tile-sim-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.race-tile-sim-row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

/* Column 1 — sim identity (dot + cockpit name on top, raw sim-id below) */
.rt-sim-id-block {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.race-sim-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.race-sim-dot.connected {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.race-sim-dot.entry {
  background: var(--warning);
}
.rt-sim-id-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rt-sim-cockpit {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 0.92em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.rt-sim-id-raw {
  font-size: 0.7em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: ui-monospace, 'Courier New', monospace;
}
.race-sim-badge.saved {
  color: var(--success);
  margin-left: 4px;
}

/* Column 2 — driver + car + assists meta */
.rt-sim-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.88em;
}
.rt-sim-driver {
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
.rt-sim-car {
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.rt-sim-car i { color: var(--text-muted); margin-right: 4px; font-size: 0.9em; }
.rt-sim-assists-meta {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-size: 0.82em;
  padding: 1px 6px;
  background: var(--bg-tertiary);
  border-radius: 4px;
}
.rt-sim-dot-sep {
  color: var(--text-muted);
  opacity: 0.5;
}
.rt-sim-empty {
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Column 3 — action buttons */
.rt-sim-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Mobile — collapse sim row to 2 stacked rows. */
@media (max-width: 700px) {
  .race-tile-sim-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .rt-sim-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
.race-tile-sim-row .rt-sim-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  transition: all var(--transition-fast);
  font-family: inherit;
}
.race-tile-sim-row .rt-sim-btn i { font-size: 0.92em; }
.race-tile-sim-row .rt-sim-btn:hover {
  transform: translateY(-1px);
}

/* Assists — neutral cyan accent */
.race-tile-sim-row .rt-sim-btn-assists {
  color: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 55%, var(--border-primary));
}
.race-tile-sim-row .rt-sim-btn-assists:hover {
  background: color-mix(in srgb, var(--primary-color) 15%, transparent);
  border-color: var(--primary-color);
}

/* Rejoin — success green, filled */
.race-tile-sim-row .rt-sim-btn-rejoin {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 60%, var(--border-primary));
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.race-tile-sim-row .rt-sim-btn-rejoin:hover {
  background: var(--success);
  color: var(--bg-primary);
  border-color: var(--success);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--success) 35%, transparent);
}

/* Stop — danger red, filled */
.race-tile-sim-row .rt-sim-btn-stop {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-primary));
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.race-tile-sim-row .rt-sim-btn-stop:hover {
  background: var(--danger);
  color: var(--text-primary);
  border-color: var(--danger);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--danger) 40%, transparent);
}

.race-tile-sim-assists {
  background: var(--bg-tertiary);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

/* Race tile detail info row — Track / Session / Duration / Port */
.race-tile-detail-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: 0.9em;
}
.rt-info-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px var(--space-md);
  align-items: baseline;
}
.rt-info-row > span { color: var(--text-secondary); }
.rt-info-row strong { color: var(--text-muted); font-weight: 600; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.rt-session { color: var(--primary-color); font-weight: 600; }
.rt-duration { font-family: monospace; color: var(--primary-color); font-variant-numeric: tabular-nums; }
.rt-port { color: var(--text-muted); font-size: 0.85em; }

/* Configured timing breakdown (P 10m · Q 5m · R 30m) */
.rt-timing-row { gap: var(--space-xs) var(--space-md); }
.rt-timing-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  font-size: 0.86em;
}
.rt-timing-label {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rt-timing-val {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* Session-remaining live countdown (next to "Session" label) */
.rt-session-remaining {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  margin-left: 6px;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Loading + error states on tile-detail action buttons (End race spinner) */
.race-tile-detail-actions button.is-loading,
.race-tile-detail-actions button.is-error {
  pointer-events: none;
}
.race-tile-detail-actions button.is-loading {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  cursor: progress;
}
.race-tile-detail-actions button.is-error {
  background: color-mix(in srgb, var(--danger) 18%, var(--bg-tertiary));
  color: var(--danger);
  border-color: var(--danger);
}

/* SaaS join card — IP/port + Content Manager quick-join link.
   Sits inside the expanded race tile detail. */
.race-tile-join-card {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 10%, var(--bg-card)) 0%,
    var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-primary));
  border-radius: var(--radius-md);
}
.rt-join-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 0;
}
.rt-join-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rt-join-label i { color: var(--primary-color); }
.rt-join-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}
.rt-join-address code {
  font-family: 'Courier New', ui-monospace, monospace;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.rt-join-copy {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-muted);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}
.rt-join-copy:hover {
  background: var(--primary-color);
  color: var(--text-primary);
  border-color: var(--primary-color);
}
.rt-join-copy.is-copied {
  background: var(--success);
  color: var(--text-primary);
  border-color: var(--success);
}

.rt-join-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.rt-join-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.88em;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  transition: all var(--transition-fast);
}
.rt-join-btn:hover {
  border-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 15%, var(--bg-tertiary));
  transform: translateY(-1px);
}
.rt-join-btn i { font-size: 0.95em; }
.rt-join-btn-cm {
  background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 70%, #00d4ff));
  color: #ffffff;
  border-color: var(--primary-color);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.rt-join-btn-cm:hover {
  filter: brightness(1.07);
  border-color: var(--primary-color);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color) 50%, transparent);
}
.rt-join-btn-cm i { color: #fff; }

/* Race tile session controls — Next / Restart / End */
.race-tile-session-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--primary-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.rt-controls-label {
  font-size: 0.85em;
  font-weight: 600;
  color: var(--primary-color);
  margin-right: 4px;
}
.race-tile-session-controls button {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88em;
}
.race-tile-session-controls button:hover {
  border-color: var(--primary-color);
}
.btn-session-next { color: var(--success); }
.btn-session-restart { color: var(--warning); }
.btn-session-end { color: var(--danger); }

/* Per-sim status badges inside race tile */
.race-sim-badge {
  font-size: 0.72em;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  white-space: nowrap;
}
.race-sim-badge.connected {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.race-sim-badge.entry {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.race-sim-badge.saved {
  color: var(--success);
}

/* Preserve button + already-preserved badge inside tile detail-actions */
.btn-preserve {
  background: var(--bg-card) !important;
  color: var(--warning) !important;
  border-color: var(--warning) !important;
}
.btn-preserve:hover { background: var(--warning) !important; color: var(--bg-primary) !important; }
.race-preserved-badge {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  font-weight: 600;
}

/* Pending-group status banner (operator-visible after launching from drawer) */
.group-status.pending-active {
  display: block !important;
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-md);
  background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-card));
  border: 1px solid color-mix(in srgb, var(--primary-color) 40%, transparent);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: left;
  font-weight: normal;
  font-size: 1em;
}

/* ============================================================
   Task 3.2 — New Race Drawer
   ============================================================ */
.race-drawer {
  position: fixed;
  /* Sits between the fixed header and the fixed footer — never overlap either. */
  top: var(--header-height);
  right: 0;
  bottom: var(--footer-height);
  height: auto;
  width: min(90vw, 900px);
  /* Never extend left past the sidebar — without this cap the drawer covers
     the admin nav on small desktops + tablets. */
  max-width: calc(100vw - var(--sidebar-width));
  background: var(--bg-secondary);
  border-left: 1px solid var(--border-primary);
  box-shadow: var(--shadow-heavy);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}
.race-drawer.open { transform: translateX(0); }

.race-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-primary);
}
.race-drawer-title {
  margin: 0;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.race-drawer-title i { color: var(--primary-color); }
.race-drawer-section-label {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.race-drawer-close {
  background: transparent;
  color: var(--text-muted);
  border: 0;
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.race-drawer-close:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* PRIMARY tab bar — Race vs Traffic. Big, obvious, full-width. */
.race-drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
  flex-shrink: 0;
}
.race-drawer-tab {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 14px var(--space-md);
  background: transparent;
  color: var(--text-muted);
  border: 0;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  min-width: 0;
}
.race-drawer-tab:hover {
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
  color: var(--text-primary);
}
.race-drawer-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 14%, transparent);
}
.race-drawer-tab.active i { color: var(--primary-color); }
.race-drawer-tab i {
  font-size: 1.4em;
  color: var(--text-muted);
  margin-bottom: 4px;
  transition: color var(--transition-fast);
}
.race-drawer-tab-label {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.race-drawer-tab-sub {
  font-size: 0.72em;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Drop the sub text on small phones where the tab is too narrow for it. */
@media (max-width: 540px) {
  .race-drawer-tab-sub { display: none; }
  .race-drawer-tab { padding: 12px 8px; }
  .race-drawer-tab i { font-size: 1.2em; }
}

.race-drawer-body {
  flex: 1;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  overflow: hidden;
  min-height: 0;
}
/* Left column = scrollable driver picker stacked above a pinned Launch CTA.
   Explicit grid-column anchors keep the visual layout (drivers left, config
   right) even though the DOM order is right-then-left (so mobile flex-column
   stacks them in the correct order without needing `order`). */
.race-drawer-left {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-primary);
  overflow: hidden;
  min-height: 0;
  background: linear-gradient(180deg, var(--bg-secondary) 0%, color-mix(in srgb, var(--primary-color) 4%, var(--bg-secondary)) 100%);
}
.race-drawer-left-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  min-height: 0;
}
.race-drawer-right {
  grid-column: 2;
  grid-row: 1;
  padding: var(--space-md);
  overflow-y: auto;
  min-height: 0;
}

/* ============================================================
   Fancy Launch CTA — pinned to the bottom of the driver-picker
   column, below the last sim. Gradient + glow + shimmer sweep on
   hover, gentle pulse to draw the eye when idle.
   ============================================================ */
.race-drawer-launch-bar {
  flex-shrink: 0;
  padding: var(--space-md);
  border-top: 1px solid var(--border-primary);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-primary) 60%, transparent) 0%,
      var(--bg-secondary) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
}
.race-drawer-launch-bar::before {
  content: '';
  position: absolute;
  inset: -1px 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary-color) 50%,
    transparent 100%);
  opacity: 0.55;
}
.race-drawer-launch-btn {
  position: relative;
  width: 100%;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(135deg,
    var(--primary-color) 0%,
    color-mix(in srgb, var(--primary-color) 75%, #00d4ff) 100%);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--primary-color) 40%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  animation: launchBtnPulse 2.6s ease-in-out infinite;
}
.race-drawer-launch-btn > i {
  font-size: 1.15em;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.race-drawer-launch-label {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.race-drawer-launch-arrow {
  font-size: 0.95em !important;
  opacity: 0.7;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Shimmer sweep that slides across the button periodically. */
.race-drawer-launch-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  height: 100%;
  width: 50%;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: launchBtnShimmer 3.6s ease-in-out infinite;
}

.race-drawer-launch-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--primary-color) 55%, transparent),
    0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation-play-state: paused;
}
.race-drawer-launch-btn:hover .race-drawer-launch-arrow {
  transform: translateX(4px);
  opacity: 1;
}
.race-drawer-launch-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}
.race-drawer-launch-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 70%, white);
  outline-offset: 3px;
}

/* Traffic mode — swap to an amber/orange gradient to match the broader
   traffic-mode color language elsewhere in the app. */
.race-drawer-launch-btn.is-traffic {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  box-shadow:
    0 8px 22px rgba(247, 147, 30, 0.42),
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.race-drawer-launch-btn.is-traffic:hover {
  box-shadow:
    0 14px 30px rgba(247, 147, 30, 0.55),
    0 4px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

@keyframes launchBtnPulse {
  0%, 100% {
    box-shadow:
      0 8px 22px color-mix(in srgb, var(--primary-color) 40%, transparent),
      0 2px 6px rgba(0, 0, 0, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 10px 28px color-mix(in srgb, var(--primary-color) 65%, transparent),
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 0 0 5px color-mix(in srgb, var(--primary-color) 8%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}
@keyframes launchBtnShimmer {
  0% { left: -60%; }
  60%, 100% { left: 120%; }
}

/* ============================================================
   Track traffic toggle (Metadata > Tracks table)
   Inline iOS-style switch — checked = primary cyan.
   ============================================================ */
.track-traffic-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
  vertical-align: middle;
}
.track-traffic-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.track-traffic-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.track-traffic-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.track-traffic-toggle:checked + .track-traffic-slider {
  background: color-mix(in srgb, var(--primary-color) 75%, transparent);
  border-color: var(--primary-color);
}
.track-traffic-toggle:checked + .track-traffic-slider::before {
  transform: translateX(16px);
  background: #ffffff;
}
.track-traffic-toggle:focus-visible + .track-traffic-slider {
  outline: 2px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
  outline-offset: 2px;
}

.race-drawer-include-all {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: var(--space-sm);
  width: 100%;
}

/* ============================================================
   Mobile — groups page
   The drawer is the main interaction surface; on phones it must stack
   instead of trying to fit a 280px driver-picker column. Touch targets
   throughout the tile detail and drawer also bump up to ≥40px tall.
   ============================================================ */
@media (max-width: 768px) {
  /* On mobile the FAB owns the New Race action — hide the whole action bar. */
  .groups-action-bar { display: none; }
  .groups-mobile-fab { display: block; }
  /* Leave room below the active-races list so the FAB doesn't cover content. */
  .groups-container { padding-bottom: 96px; }

  /* Race tile on mobile = dot + name+status + elapsed time + chevron.
     Track + sim chips drop into the expand panel. */
  .race-tile {
    grid-template-columns: 10px 1fr auto 22px;
    gap: 10px;
    padding: 12px var(--space-sm);
  }
  .race-tile-track,
  .race-tile-sims { display: none; }
  .race-tile-time {
    padding: 4px 9px;
    font-size: 0.8em;
  }

  /* Quick-start cards a touch narrower so 2 fit side-by-side on small phones. */
  .quick-start-item { width: 150px; }
  .quick-start-preview { height: 70px; }
  .quick-starts-strip { gap: var(--space-xs); }

  /* Drawer becomes full-bleed with stacked config form + driver list.
     Slide the sidebar offscreen so the drawer can use full width
     (sidebar restores when drawer closes). */
  body.drawer-open #sidebar-nav {
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
  }
  body.drawer-open .app-container { left: 0; }
  body.drawer-open footer { left: 0; }
  .race-drawer {
    width: 100vw;
    max-width: 100vw;
  }
  /* Stack columns into a single flex column so we can reorder them: the
     config form sits on top, then the driver list. The Launch CTA is
     lifted out of the column flow and pinned to the drawer's bottom edge
     (see .race-drawer-launch-bar below) so it doesn't drift mid-scroll. */
  .race-drawer-body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Reserve clearance for the absolutely-positioned launch bar so the
       last form fields + final sim row can scroll fully into view above
       it instead of being trapped beneath it. */
    padding-bottom: 92px;
  }
  /* DOM order is now right-then-left, so flex-column stacks them as
     config-form-on-top, drivers-below without needing `order`. We also
     unset the grid-row/grid-column anchors from the desktop rule since
     drawer-body is no longer display: grid here.

     CRITICAL: explicit `flex-shrink: 0` + `min-height: auto` is what
     keeps the two columns from squashing each other. Without these, the
     desktop `min-height: 0` rule combined with the default flex-shrink
     of 1 lets each column shrink below its natural content height. With
     `overflow: visible` (also set here), the shrunken box leaks its
     content visually into the next column's vertical slot, producing
     the "drivers sitting on top of race options" bug. */
  .race-drawer-right {
    grid-column: auto;
    grid-row: auto;
    display: block;
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
    border-bottom: 1px solid var(--border-primary);
  }
  /* Force the left column out of its desktop flex-column layout so its
     `.race-drawer-left-scroll` child (which has flex: 1, flex-basis: 0)
     can't collapse the column to zero height now that the launch bar is
     position: absolute and no longer holds the column open. */
  .race-drawer-left {
    grid-column: auto;
    grid-row: auto;
    display: block;
    overflow: visible;
    flex: 0 0 auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 0;
    max-height: none;
  }
  .race-drawer-left-scroll {
    flex: initial;
    overflow: visible;
    padding: var(--space-md);
  }
  /* Pin the launch bar to the bottom of the drawer. position: sticky
     doesn't work here because the bar is the last child of its parent
     .race-drawer-left, leaving no room below it for sticky to engage --
     it would degenerate to its natural position mid-scroll, visually
     blocking the form. Absolute positioning targets .race-drawer (the
     nearest positioned ancestor, position: fixed), keeping the CTA
     glued to the drawer's bottom edge regardless of scroll position. */
  .race-drawer-launch-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-secondary);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.55);
    z-index: 5;
  }
  .race-drawer-header {
    padding: var(--space-sm) var(--space-md);
  }
  .race-drawer-type-btn {
    min-height: 40px;
    padding: 10px 18px;
  }
  .race-drawer-close {
    min-width: 44px;
    min-height: 44px;
    padding: 4px 12px;
  }
  .race-drawer-include-all {
    min-height: 44px;
    padding: 12px 16px;
  }
  .race-drawer-launch-btn {
    min-height: 44px;
    padding: 12px 24px;
  }
  /* Tile detail action buttons grow to easy-tap size. */
  .race-tile-detail-actions button {
    min-height: 40px;
    padding: 10px 14px;
  }
  .race-tile-sim-row button {
    min-height: 40px;
    padding: 8px 12px;
  }
  .race-tile-sim-row .last-lap { margin-right: 0; }
  .race-tile-session-controls { gap: 6px; }
  .race-tile-session-controls button {
    min-height: 40px;
    padding: 8px 12px;
  }
  .race-tile-detail-info {
    padding: var(--space-sm);
  }
  .rt-info-row { gap: 4px var(--space-sm); font-size: 0.85em; }
  .assist-stepper button {
    width: 32px;
    height: 32px;
    font-size: 1.05em;
  }
  .assist-toggle {
    padding: 6px 14px;
    min-height: 32px;
  }
  .quick-start-delete {
    width: 28px;
    height: 28px;
  }
  .race-assists-dialog-footer button {
    min-height: 40px;
    padding: 10px 16px;
  }
}

/* Very small phones — tighten further. */
@media (max-width: 400px) {
  .quick-start-item { width: 140px; }
  .race-tile { padding: 10px var(--space-sm); }
  .race-tile-name strong { font-size: 0.9em; }
}

/* ============================================================
   Race drawer driver-picker rows
   The drawer reuses .sim-row from renderGroupSimRowsNew() but its DOM
   shape is a checkbox label + driver-name input — completely different
   from the launcher's 6-column .sim-row grid below. Override here so
   the launcher's grid doesn't squash the checkbox into a 14px column.
   ============================================================ */
.race-drawer-left .sim-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  grid-template-columns: none;
  padding: 10px 12px;
  min-height: 48px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.race-drawer-left .sim-row label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  min-width: 0;
  cursor: pointer;
  font-size: 0.92em;
}
.race-drawer-left .sim-row label > input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary-color);
}
.race-drawer-left .sim-row .driver-name-input {
  flex: 1;
  min-width: 0;
  max-width: 55%;
  font-size: 0.92em;
}

/* ============================================================
   Sim Row — Task 4.1 compact one-line view
   ============================================================ */
/* Each sim is one collapsible card. The header is the one-line summary;
   when expanded, the detail block slides in below as a same-card child. */
.sim-row {
  display: grid;
  grid-template-columns: 14px minmax(90px, 130px) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(60px, 80px);
  align-items: center;
  gap: var(--space-md);
  padding: 12px var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              background var(--transition-fast),
              box-shadow var(--transition-fast);
  min-width: 0;
}
.sim-row-track {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.92em;
}
.sim-row[data-state="idle"] .sim-row-track {
  color: var(--text-muted);
  font-style: italic;
}
.sim-row:hover,
.sim-row:focus {
  border-color: var(--primary-color);
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.sim-row.expanded {
  background: var(--bg-card);
  border-color: var(--primary-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 35%, transparent);
}
.sim-row[data-state="live"] {
  border-left: 3px solid var(--success);
  padding-left: calc(var(--space-md) - 2px);
}
.sim-row[data-state="offline"] {
  opacity: 0.7;
  background: color-mix(in srgb, var(--bg-card) 70%, var(--bg-tertiary));
  cursor: default;
}
.sim-row[data-state="offline"]:hover {
  border-color: var(--border-primary);
  box-shadow: none;
}
.sim-row-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sim-row-dot-live {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}
.sim-row-dot-idle {
  background: var(--text-muted);
  opacity: 0.55;
}
.sim-row-dot-offline {
  background: var(--danger);
}
.sim-row-name {
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sim-row-driver,
.sim-row-car {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.92em;
}
.sim-row[data-state="idle"] .sim-row-driver,
.sim-row[data-state="idle"] .sim-row-car {
  color: var(--text-muted);
  font-style: italic;
}
.sim-row-remaining {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 0.9em;
}
.sim-row-menu {
  background: transparent;
  color: var(--text-muted);
  border: 0;
  font-size: 1.2em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  line-height: 1;
  justify-self: end;
}
.sim-row-menu:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

/* Mobile: collapse the row to dot + name + menu so nothing overflows on
   ~360-400px viewports. Driver / car / track / remaining are visible only
   when the user expands the card (they appear inside the detail block). */
@media (max-width: 640px) {
  .sim-row {
    grid-template-columns: 10px 1fr;
    gap: 10px;
    padding: 12px var(--space-sm);
  }
  .sim-row-driver,
  .sim-row-car,
  .sim-row-track,
  .sim-row-remaining {
    display: none;
  }
  .sim-row[data-state="live"] {
    padding-left: calc(var(--space-sm) - 2px);
  }
}

/* Hide the legacy fat card — Task 4.1 replaces with .sim-row */
.sim-card { display: none; }

/* Expanded detail. Lives as a full-width grid child INSIDE the .sim-row,
   so the visual outline of the card stays unbroken. */
.sim-row-detail {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-primary);
  animation: simDetailIn 0.18s ease-out;
}
@keyframes simDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sim-detail-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.sim-detail-actions button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.88em;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sim-detail-actions button:hover {
  border-color: var(--primary-color);
}
.sim-detail-actions button:first-child {
  /* "End session" — destructive accent */
  border-color: color-mix(in srgb, var(--danger) 60%, var(--border-primary));
  color: var(--danger);
}
.sim-detail-actions button:first-child:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ---- Expand-panel forms (login + session) ---- */
.sim-detail-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Compact form row: a DIRECT <label> + control aligned in a 90px label column.
   Scoped with :has(> label) so it does NOT hijack the Settings/Drivers-style
   .form-row that holds stacked .form-group cells — those use the responsive
   grid defined in admin.css. (Static markup, desktop Chrome: :has is safe.) */
.form-row:has(> label) {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: var(--space-md);
}
.form-row > label {
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.form-row > input,
.form-row > select {
  width: 100%;
}

/* The session form uses a 2-column grid for the most common short fields
   (Driver / Mode / Sim Mode / Time of Day / Class), and full-width rows for
   the long ones (Track, Car, Tires, Extend). */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.form-grid .form-row-wide {
  grid-column: 1 / -1;
}
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; gap: 4px; }
}

/* Time-limit pill buttons (15m / 30m / 1h / ∞ / +15m / ...) */
.time-limit-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.time-limit-row .time-pill,
.time-limit-row > button {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85em;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--transition-fast);
  line-height: 1.2;
}
.time-limit-row .time-pill:hover,
.time-limit-row > button:hover {
  color: var(--text-primary);
  border-color: var(--primary-color);
}
.time-limit-row input[type="number"] {
  width: 96px;
  padding: 6px 10px;
}

/* Skin grid: thumbnails for car skins */
.skin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.skin-grid:empty {
  display: none;
}
.skin-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.skin-grid img:hover { border-color: var(--text-muted); }
.skin-grid img.selected { border-color: var(--primary-color); }

/* Mode-specific extras (Race opponents/laps, Server selector) */
.mode-extras:empty { display: none; }
.mode-extras {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mode-extras label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85em;
  color: var(--text-secondary);
}
.mode-extras input[type="number"] {
  width: 72px;
  padding: 4px 8px;
}

/* Timer + Seat-time row at the top of an active session */
.timer-row {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.timer-row > div {
  display: flex;
  flex-direction: column;
}
.timer-row .meta-label {
  color: var(--text-muted);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.session-timer,
.seat-timer {
  font-size: 1.4em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Inline meta label used in group-session banner */
.meta-label {
  color: var(--text-muted);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 6px;
}

/* Custom-time-confirm button: hidden until a value is typed */
.custom-time-confirm {
  display: none;
  align-self: flex-start;
}
.custom-time-confirm.show {
  display: inline-flex;
}

/* Assist toggle row (Autogrid etc.) */
.assist-toggles {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.assist-toggles > label {
  font-size: 0.78em;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Group-session banner inside the session expand */
.group-session-info {
  background: color-mix(in srgb, var(--success) 10%, var(--bg-tertiary));
  border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-primary));
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88em;
}

/* The Launch button gets primary treatment — racing-cyan accent */
.session-form .sim-detail-actions .btn-primary {
  padding: 8px 16px;
  font-weight: 600;
}

/* ============================================================
   Launcher header bar — title + broadcast pill on right
   ============================================================ */
.launcher-header-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* ============================================================
   Broadcast pill (in header) + popover (anchored)
   ============================================================ */
.broadcast-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  font-size: 0.82em;
  white-space: nowrap;
  flex-shrink: 0;
}
.broadcast-pill > i:first-child {
  color: var(--text-muted);
  font-size: 0.95em;
}
.broadcast-pill-label {
  font-weight: 600;
  color: var(--text-primary);
}
.broadcast-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}
.broadcast-pill-status {
  color: var(--text-muted);
  font-size: 0.92em;
}
.broadcast-pill--live .broadcast-pill-dot {
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
  animation: broadcastDotPulse 2s ease-in-out infinite;
}
.broadcast-pill--live .broadcast-pill-status { color: var(--success); }
.broadcast-pill--live .broadcast-pill-label { color: var(--text-primary); }
.broadcast-pill--offline .broadcast-pill-dot { background: var(--danger); opacity: 0.7; }
.broadcast-pill--offline .broadcast-pill-status { color: var(--danger); }
@keyframes broadcastDotPulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--success) 50%, transparent); }
  50%      { box-shadow: 0 0 14px var(--success); }
}
.broadcast-pill-manage {
  margin-left: 2px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.9em;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.broadcast-pill-manage:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}

.broadcast-popover {
  position: absolute;
  top: calc(var(--header-height, 56px) + 56px);
  right: var(--space-lg);
  z-index: 900;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45),
              0 0 0 1px color-mix(in srgb, var(--primary-color) 25%, transparent);
  padding: 12px;
  animation: broadcastPopIn 0.16s ease-out;
}
.broadcast-popover[hidden] { display: none; }
@keyframes broadcastPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.broadcast-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-primary);
}
.broadcast-popover-close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.4em;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
}
.broadcast-popover-close:hover { color: var(--text-primary); }

/* ============================================================
   Compact session form (live sim) — packs the whole launcher
   console into ~6 visual rows: hero (timer + extend), driver,
   two-column body (Rules | Vehicle), assists, action buttons.
   ============================================================ */
.session-form-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* HERO: big time-left + segmented extend control */
.session-hero {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  gap: var(--space-md);
  align-items: stretch;
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 6px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 12%, var(--bg-tertiary)) 0%,
    var(--bg-tertiary) 70%);
  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-primary));
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.session-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4ecca3, #1f9b8e);
}
.hero-timer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.hero-timer-value {
  font-size: 2.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.hero-timer-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-muted);
}

.hero-extend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.hero-extend-label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-extend-label i { color: #4ecca3; }
.hero-extend-meta {
  font-size: 0.78em;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-extend-meta i { color: var(--text-muted); }
.hero-extend-meta .seat-timer {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Segmented control: joined-edge buttons + custom input group */
.extend-segment {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-wrap: wrap;
}
.extend-btn {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--border-primary);
  color: var(--text-secondary);
  padding: 8px 14px;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  transition: background var(--transition-fast), color var(--transition-fast);
  min-width: 56px;
}
.extend-btn:last-child { border-right: 0; }
.extend-btn:hover {
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
  color: var(--primary-color);
}
.extend-btn:active {
  background: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.extend-num {
  font-size: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.extend-btn:hover .extend-num { color: var(--primary-color); }
.extend-unit {
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: 1px;
}
.extend-custom {
  display: inline-flex;
  align-items: stretch;
  border-left: 1px solid var(--border-primary);
}
.extend-custom input[type="number"] {
  width: 72px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 8px;
  font-size: 0.88em;
  color: var(--text-primary);
}
.extend-custom input[type="number"]:focus { background: var(--bg-card); }
.extend-btn-confirm {
  border-left: 1px solid var(--border-primary);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-direction: row;
}
.extend-btn-confirm:hover { color: var(--success); }

@media (max-width: 720px) {
  .session-hero {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .hero-timer-value { font-size: 2.2em; }
}

/* Driver row beneath hero */
.session-driver {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  position: relative;
}
.session-driver::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd166, #f59f00);
}
.session-driver input[type="text"] { width: 100%; }

/* Assists strip — single-line tool group */
.session-assists {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   New compact session expand: 4 inline rows
   ============================================================ */

/* Row 1: Driver + Time-left + Extend pills inline */
.row-driver-time {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(110px, auto) minmax(360px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 8px 10px 8px 12px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 8%, var(--bg-tertiary)) 0%,
    var(--bg-tertiary) 70%);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  position: relative;
}
.row-driver-time::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffd166, #f59f00);
}
.cell-driver,
.cell-time,
.cell-extend {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cell-driver input[type="text"] { width: 100%; }

/* Center the timer-pair within the cell */
.cell-time {
  align-items: center;
  justify-content: center;
}
/* Two-up: Time Left | Seat Time, same size, distinct colors */
.timer-pair {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
}
.timer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.timer-item .cell-label {
  font-size: 0.66em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-muted);
}
.timer-item .hero-timer-value {
  font-size: 1.9em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* Time Left = primary cyan, the "racing clock"  */
.timer-time-left .hero-timer-value {
  color: var(--primary-color);
}
/* Seat Time = amber/gold, the "warm" elapsed-time counterpoint */
.timer-seat .hero-timer-value {
  color: #ffd166;
}
@media (max-width: 540px) {
  .timer-item .hero-timer-value { font-size: 1.5em; }
}

.cell-extend .extend-segment {
  align-self: flex-end;
}
@media (max-width: 900px) {
  .row-driver-time {
    grid-template-columns: 1fr 1fr;
  }
  .cell-extend { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .row-driver-time { grid-template-columns: 1fr; }
}

/* Row 2: Track / Car / Tires / Class inline (vehicle setup) */
.row-vehicle {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  position: relative;
}
.row-vehicle::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #b794f6, #805ad5);
}
@media (max-width: 700px) {
  .row-vehicle { grid-template-columns: 1fr 1fr; }
}

/* Row 3: Mode / Sim Mode / Time of Day inline (race rules) */
.row-rules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  position: relative;
}
.row-rules::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary-color), #4cc9ff);
}
@media (max-width: 540px) {
  .row-rules { grid-template-columns: 1fr; }
}

/* Row 4: Assists strip — Autogrid + future toggles + seat-time meta */
.row-assists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  position: relative;
}
.row-assists::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff9f43, #ee5a24);
}
.assist-inline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.assist-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.assist-name {
  font-size: 0.82em;
  color: var(--text-secondary);
}
.row-assists .tool-label { margin-right: 4px; }
.row-meta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82em;
  color: var(--text-muted);
}
.row-meta .seat-timer {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Hide the empty skin grid + mode-extras containers when they have no
   content, so they don't punch extra vertical space. */
.skin-grid-compact:empty,
.mode-extras:empty {
  display: none;
}

/* Ribbon: single row with driver input + session/seat timers */
.session-ribbon {
  display: grid;
  grid-template-columns: 1fr 100px 100px;
  gap: var(--space-md);
  align-items: end;
  padding: 8px 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 6%, var(--bg-tertiary)) 0%,
    var(--bg-tertiary) 60%);
  border: 1px solid var(--border-primary);
  border-left: 3px solid #ffd166; /* gold accent — Driver is the headline field */
  border-radius: var(--radius-sm);
}
.ribbon-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cell-label,
.tool-label,
.col-label {
  font-size: 0.66em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.cell-label i,
.tool-label i,
.col-label i {
  color: var(--primary-color);
  font-size: 0.95em;
}
.ribbon-driver input[type="text"] {
  width: 100%;
}
.ribbon-timer {
  text-align: right;
  align-items: flex-end;
}
.ribbon-timer .session-timer,
.ribbon-timer .seat-timer {
  font-size: 1.15em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.05;
}
@media (max-width: 640px) {
  .session-ribbon {
    grid-template-columns: 1fr 1fr;
  }
  .ribbon-driver { grid-column: 1 / -1; }
}

/* Body: 2 columns side-by-side (Rules | Vehicle). Wraps at narrow widths. */
.session-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 800px) {
  .session-cols { grid-template-columns: 1fr; }
}
.session-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.session-col::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
}
.session-col.section-rules::before {
  background: linear-gradient(180deg, var(--primary-color), #4cc9ff);
}
.session-col.section-vehicle::before {
  background: linear-gradient(180deg, #b794f6, #805ad5);
}
.col-label { margin-bottom: 2px; }

/* Compact field: label above a compact input/select with tight gaps. */
.compact-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.compact-field > label {
  font-size: 0.7em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--text-muted);
}
.compact-field > select,
.compact-field > input {
  width: 100%;
  padding: 5px 8px;
  font-size: 0.85em;
}
.compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

/* Skin grid in compact mode: smaller thumbnails, capped height */
.skin-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  max-height: 140px;
  padding: 4px;
  gap: 4px;
  margin-top: 4px;
}
.skin-grid-compact img {
  border-radius: 4px;
}

/* Full-width variant: spans the whole row-vehicle grid (all columns) so it
   reads as a band under the inline Track/Car/Tires/Class controls. On narrow
   viewports we switch to a single-row horizontal scroller. */
.skin-grid-full {
  grid-column: 1 / -1;
  width: 100%;
}
.skin-grid-full:empty { display: none; }

@media (max-width: 700px) {
  .skin-grid-full {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    max-height: 88px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .skin-grid-full img {
    flex: 0 0 auto;
    width: 80px;
    aspect-ratio: 16 / 9;
  }
}

/* Tools strip: Extend + Assists laid out inline */
.session-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) {
  .session-tools { grid-template-columns: 1fr; }
}
.tool-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
}
.tool-group::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
}
.tool-group.section-time::before {
  background: linear-gradient(180deg, #4ecca3, #1f9b8e);
}
.tool-group.section-assists::before {
  background: linear-gradient(180deg, #ff9f43, #ee5a24);
}
.tool-group .tool-label {
  flex-shrink: 0;
  margin-right: 4px;
}
.tool-group .time-pill {
  padding: 4px 10px;
  font-size: 0.82em;
}
.tool-group input[type="number"] {
  width: 64px;
  padding: 4px 8px;
  font-size: 0.82em;
}

/* Action buttons row — keep compact */
.session-form-compact .intent-actions {
  margin-top: 2px;
}
.session-form-compact .intent-actions .btn-launch,
.session-form-compact .intent-actions .btn-endgame,
.session-form-compact .intent-actions .btn-endsession,
.session-form-compact .intent-actions .btn-neutral {
  padding: 7px 14px;
  font-size: 0.88em;
}

/* The compact session form supersedes the old fat sections — hide
   anything that leaked from the old markup if both render. */
.session-form-compact .form-section { display: none; }


/* ============================================================
   (Legacy) Form sections — kept for any non-compact use sites.
   The compact form above is the primary path.
   ============================================================ */
.form-section {
  position: relative;
  background: color-mix(in srgb, var(--bg-card) 92%, var(--bg-tertiary));
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-md) var(--space-md) calc(var(--space-md) + 6px);
}
.form-section::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 2px;
  background: var(--text-muted);
  opacity: 0.55;
}
.section-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}
.section-label i {
  color: var(--primary-color);
  font-size: 0.95em;
}

/* Per-section accent colors — subtle but visible left-bar tints. */
.section-driver::before  { background: linear-gradient(180deg, #ffd166, #f59f00); opacity: 0.75; }
.section-driver .section-label i  { color: #ffd166; }

.section-rules::before   { background: linear-gradient(180deg, var(--primary-color), #4cc9ff); opacity: 0.75; }
.section-rules .section-label i   { color: var(--primary-color); }

.section-vehicle::before { background: linear-gradient(180deg, #b794f6, #805ad5); opacity: 0.75; }
.section-vehicle .section-label i { color: #b794f6; }

.section-time::before    { background: linear-gradient(180deg, #4ecca3, #1f9b8e); opacity: 0.75; }
.section-time .section-label i    { color: #4ecca3; }

.section-assists::before { background: linear-gradient(180deg, #ff9f43, #ee5a24); opacity: 0.75; }
.section-assists .section-label i { color: #ff9f43; }

/* Wrap-tight the driver-only top section */
.section-driver input[type="text"] {
  width: 100%;
}

/* ============================================================
   Action buttons — tinted by intent. Same .btn base so they
   sit cleanly next to .btn-sm / .btn-primary elsewhere.
   ============================================================ */
.intent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-sm);
}
.btn-launch,
.btn-endgame,
.btn-endsession,
.btn-neutral {
  padding: 8px 16px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Launch — primary cyan, glow accent */
.btn-launch {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 30%, transparent),
              0 0 12px color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.btn-launch:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary-color) 60%, transparent),
              0 0 18px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

/* End Game — amber/warning (stops AC, keeps session) */
.btn-endgame {
  background: color-mix(in srgb, #f0ad4e 18%, var(--bg-tertiary));
  border-color: color-mix(in srgb, #f0ad4e 60%, var(--border-primary));
  color: #ffc266;
}
.btn-endgame:hover {
  background: color-mix(in srgb, #f0ad4e 30%, var(--bg-tertiary));
  color: #fff;
}

/* End Session — red/danger (clears driver) */
.btn-endsession {
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-tertiary));
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border-primary));
  color: var(--danger);
}
.btn-endsession:hover {
  background: var(--danger);
  color: #fff;
}

/* Neutral — for refresh / cancel / secondary */
.btn-neutral {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.btn-neutral:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
}

/* ============================================================
   Status dots on the row — racing pulses, logged-in glows
   steady, idle/offline are muted.
   ============================================================ */
.sim-row-dot-live {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
  animation: simDotPulse 1.6s ease-in-out infinite;
}
@keyframes simDotPulse {
  0%, 100% { box-shadow: 0 0 6px color-mix(in srgb, var(--success) 60%, transparent); }
  50%      { box-shadow: 0 0 14px var(--success); }
}
.sim-row-dot-idle {
  background: var(--text-muted);
  opacity: 0.6;
}
.sim-row-dot-offline {
  background: var(--danger);
  opacity: 0.7;
}

/* Live row left-edge accent (already had it, intensified) */
.sim-row[data-state="live"] {
  border-left: 3px solid var(--success);
  background: color-mix(in srgb, var(--success) 5%, var(--bg-card));
}

/* ============================================================
   Group-race row + banner — purple/orange accent
   ============================================================ */
.sim-row.in-group-session,
.sim-row[data-group-race="1"] {
  border-left: 3px solid #b794f6;
  background: color-mix(in srgb, #b794f6 6%, var(--bg-card));
}

.group-session-info {
  background: linear-gradient(135deg,
    color-mix(in srgb, #b794f6 18%, var(--bg-tertiary)) 0%,
    color-mix(in srgb, #ff9f43 10%, var(--bg-tertiary)) 100%);
  border: 1px solid color-mix(in srgb, #b794f6 40%, var(--border-primary));
  border-left: 3px solid #b794f6;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.group-session-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95em;
  color: var(--text-primary);
}
.group-session-title i { color: #b794f6; }
.group-session-pin {
  margin-left: auto;
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 600;
}
.group-session-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px var(--space-md);
  font-size: 0.88em;
  color: var(--text-secondary);
}
@media (max-width: 540px) {
  .group-session-meta { grid-template-columns: 1fr; }
}

/* ── Task 4.3: Master action bar ─────────────────────────────────────────── */
.launcher-action-bar {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.action-bar-btn {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9em;
}
.action-bar-btn:hover { border-color: var(--primary-color); }
.action-bar-btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.action-bar-btn-danger:hover {
  background: var(--danger);
  color: var(--text-primary);
}
.action-bar-btn-primary {
  background: var(--primary-color);
  color: var(--text-primary);
  border-color: var(--primary-color);
  font-weight: 600;
}
.action-bar-btn-primary:hover {
  filter: brightness(1.1);
  border-color: var(--primary-color);
}

/* ============================================================
   Task 5.1: Per-sim assist panel
   ============================================================ */
.assist-section {
  margin-top: var(--space-md);
}
.assist-section-label {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}
.assist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-xs);
}
.assist-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: 0.85em;
  gap: var(--space-sm);
}
.assist-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.assist-stepper button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
}
.assist-stepper-value {
  min-width: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.assist-cap {
  font-size: 0.75em;
  color: var(--text-muted);
}
.assist-toggle {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 0;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 600;
  cursor: pointer;
}
.assist-toggle.on {
  background: var(--primary-color);
  color: var(--text-primary);
}
.assist-queued {
  opacity: 0.7;
}
.assist-queued.staged {
  opacity: 1;
  border-color: var(--warning);
}
.assist-queued-badge {
  background: var(--warning);
  color: var(--bg-primary);
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.7em;
  font-weight: 600;
}

/* ============================================================
   Task 5.3: Race-wide assists dialog
   ============================================================ */
.race-assists-dialog {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
}
.race-assists-dialog.open {
  display: flex;
}
.race-assists-dialog-content {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  width: min(90vw, 600px);
  display: flex;
  flex-direction: column;
}
.race-assists-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--border-primary);
}
.race-assists-dialog-header h3 {
  margin: 0;
  font-size: 1.1em;
}
.race-assists-dialog-header button {
  background: transparent;
  color: var(--text-muted);
  border: 0;
  font-size: 1.5em;
  cursor: pointer;
  line-height: 1;
}
.race-assists-dialog-body {
  padding: var(--space-md);
}
.race-assists-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: 1px solid var(--border-primary);
}
.race-assists-dialog-footer button {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.race-assists-dialog-footer button:hover {
  border-color: var(--primary-color);
}
.race-assists-dialog-footer button.primary {
  background: var(--primary-color);
  color: var(--text-primary);
  border: 0;
  padding: 8px 18px;
  font-weight: 600;
}
.race-assists-dialog-footer button.primary:hover {
  filter: brightness(1.1);
}

/* ================================================================
   Stats Dashboard (Reports page) — full visual redesign
   ================================================================ */

.reports-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  animation: reportsFadeIn 0.35s ease-out;
  /* Safety net: if any nested grid child overflows (long sim names,
     a 12-driver podium with long ids, etc.), clip horizontally so the
     whole page doesn't stretch sideways. */
  min-width: 0;
  overflow-x: hidden;
}

/* Sections all live inside #stats-content; give that wrapper its own
   vertical gap so cards are spaced apart, not stacked flush. */
#stats-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

/* Header */
.reports-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.reports-header h2 {
  margin: 0 0 var(--space-xs) 0;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.reports-header h2 i {
  color: var(--primary-color);
  font-size: 0.85em;
}
.reports-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
}
.reports-actions {
  display: flex;
  gap: var(--space-sm);
}

/* Loading skeleton */
.stats-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl) 0;
}
/* The browser's [hidden] { display: none } rule is overridden by the
   .stats-skeleton class above, so we re-assert it with the same
   specificity (class+attr). Same for the error banner below. */
.stats-skeleton[hidden],
.stats-error[hidden] {
  display: none !important;
}
.skeleton-row {
  height: 80px;
  background: linear-gradient(
    90deg,
    var(--bg-card) 0%,
    var(--bg-tertiary) 50%,
    var(--bg-card) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.stats-error {
  background: var(--bg-card);
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--danger);
}

/* Generic card shell used across this page */
.reports-page .card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-soft, 0 1px 2px rgba(0,0,0,0.18));
  transition: border-color var(--transition-fast);
}
.reports-page .card:hover {
  border-color: rgba(var(--primary-rgb, 71, 166, 255), 0.35);
}
.reports-page .card-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.reports-page .card-header h3 {
  margin: 0;
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.reports-page .card-header h3 i {
  color: var(--primary-color);
  font-size: 0.9em;
}
.reports-page .card-subtitle {
  color: var(--text-muted);
  font-size: 0.78em;
  letter-spacing: 0.04em;
}
.reports-page .card-actions {
  margin-left: auto;
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ---- Hero stats (3 big cards) ---- */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: 1fr; }
}
.hero-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.hero-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.02) 0%, transparent 50%);
  pointer-events: none;
}
.hero-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.12);
}
.hero-stat--primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 18%, var(--bg-card)) 0%,
    var(--bg-card) 100%);
  border-color: color-mix(in srgb, var(--primary-color) 40%, var(--border-primary));
}
.hero-stat--primary::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary-color) 25%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.hero-stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-tertiary));
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  margin-bottom: var(--space-xs);
}
.hero-stat--primary .hero-stat-icon {
  background: color-mix(in srgb, var(--primary-color) 30%, transparent);
}
.hero-stat-value {
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.05;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.hero-stat-label {
  color: var(--text-muted);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Quick stats strip ---- */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .quick-stats { grid-template-columns: repeat(2, 1fr); }
}
.quick-stat {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.quick-stat > i {
  font-size: 1.1em;
  color: var(--primary-color);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}
.quick-stat-value {
  font-size: 1.35em;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.quick-stat-label {
  color: var(--text-muted);
  font-size: 0.78em;
}

/* ---- Fastest Lap spotlight ---- */
.fastest-lap-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary-color) 14%, var(--bg-card)) 0%,
    var(--bg-card) 60%);
}
.fastest-lap-banner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-color);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: var(--space-sm);
}
.fastest-lap-time {
  font-size: 3.2em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-md);
}
.fastest-lap-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .fastest-lap-meta { grid-template-columns: repeat(2, 1fr); }
}
.fastest-lap-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fastest-lap-meta-item .meta-label {
  color: var(--text-muted);
  font-size: 0.7em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.fastest-lap-meta-item .meta-value {
  color: var(--text-primary);
  font-size: 0.95em;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Two-column: Hall of Fame + Hot Content ---- */
.reports-two-col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 1000px) {
  .reports-two-col { grid-template-columns: 1fr; }
}

/* Hall of Fame podium

   Layout strategy: a 3-col grid where each column is a flex column with
   `justify-content: flex-end`, so each slot's CONTENT sits on top of its
   PEDESTAL at the bottom. Different pedestal heights per rank create the
   staircase. No tricky margin/alignment math — each slot is independent. */
.podium-stage {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: stretch;
  margin-top: var(--space-md);
}
.podium-slot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-height: 240px;
  /* Critical: without min-width:0, the grid cell's min-content (longest
     unbreakable token) forces the column wider, blowing out the 3-col
     grid past the page width. */
  min-width: 0;
  overflow: hidden;
}
.podium-slot--empty {
  visibility: hidden;
}
.podium-medal {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15em;
  margin-bottom: 4px;
  color: #fff;
  flex-shrink: 0;
}
.podium-slot--gold .podium-medal {
  background: linear-gradient(135deg, #f6d36b 0%, #d4a93a 100%);
  box-shadow: 0 0 18px rgba(212, 169, 58, 0.45);
}
.podium-slot--silver .podium-medal {
  background: linear-gradient(135deg, #d9dbe0 0%, #9aa0a8 100%);
}
.podium-slot--bronze .podium-medal {
  background: linear-gradient(135deg, #d29662 0%, #a06633 100%);
}
.podium-rank {
  font-size: 0.7em;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.podium-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.95em;
  margin: 2px 0;
  max-width: 100%;
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 4px;
  box-sizing: border-box;
}
.podium-stat {
  color: var(--text-primary);
  font-size: 0.85em;
}
.podium-stat-sub {
  color: var(--text-muted);
  font-size: 0.75em;
  margin-bottom: var(--space-sm);
}
/* The pedestal: a flat-bottom rectangle whose height varies by rank.
   It sits at the bottom of the slot (justify-content: flex-end pushes
   the content above it up). */
.podium-block {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  position: relative;
  flex-shrink: 0;
}
.podium-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.podium-slot--p1 .podium-block { height: 96px; }
.podium-slot--p2 .podium-block { height: 64px; }
.podium-slot--p3 .podium-block { height: 36px; }
.podium-slot--gold .podium-block::before   { background: linear-gradient(90deg, #f6d36b, #d4a93a); }
.podium-slot--silver .podium-block::before { background: linear-gradient(90deg, #d9dbe0, #9aa0a8); }
.podium-slot--bronze .podium-block::before { background: linear-gradient(90deg, #d29662, #a06633); }
.podium-empty {
  padding: var(--space-xl);
  color: var(--text-muted);
  text-align: center;
}

.leaderboard-rest {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
}
.leaderboard-rest-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: var(--space-md);
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-primary);
  font-size: 0.88em;
}
.leaderboard-rest-row:last-child { border-bottom: 0; }
.leaderboard-rest-rank {
  color: var(--text-muted);
  font-size: 0.85em;
  letter-spacing: 0.05em;
}
.leaderboard-rest-name {
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-rest-laps {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.leaderboard-rest-avg {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

/* Hot Content */
.hot-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.hot-content-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}
.hot-content-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 18%, transparent);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  flex-shrink: 0;
}
.hot-content-info { min-width: 0; flex: 1; }
.hot-content-label {
  color: var(--text-muted);
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.hot-content-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1em;
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hot-content-meta {
  color: var(--text-muted);
  font-size: 0.82em;
}

/* ---- Driver Achievements ---- */
.achievements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) {
  .achievements { grid-template-columns: repeat(2, 1fr); }
}
.achievement-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.achievement-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--text-muted);
}
.achievement-card--gold::before   { background: linear-gradient(90deg, #f6d36b, #d4a93a); }
.achievement-card--silver::before { background: linear-gradient(90deg, #d9dbe0, #9aa0a8); }
.achievement-card--bronze::before { background: linear-gradient(90deg, #d29662, #a06633); }
.achievement-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3em;
  color: var(--primary-color);
  margin: var(--space-xs) 0 var(--space-sm);
}
.achievement-card--gold .achievement-icon   { color: #f6d36b; }
.achievement-card--silver .achievement-icon { color: #d9dbe0; }
.achievement-card--bronze .achievement-icon { color: #d29662; }
.achievement-title {
  color: var(--text-muted);
  font-size: 0.72em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.achievement-name {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.achievement-detail {
  color: var(--text-muted);
  font-size: 0.8em;
}

/* ---- Fun Facts ---- */
.fun-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .fun-facts { grid-template-columns: 1fr; }
}
.fun-fact {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}
.fun-fact-icon {
  font-size: 1.3em;
  color: var(--primary-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fun-fact-value {
  font-size: 1.6em;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.fun-fact-label {
  color: var(--text-muted);
  font-size: 0.85em;
}

/* ---- Content Usage: utilization bars + tables ---- */
.utilization-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.utilization-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.utilization-bar-label {
  color: var(--text-secondary, var(--text-muted));
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.utilization-bar-label i { color: var(--primary-color); }
.utilization-bar-value {
  color: var(--text-muted);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}
.utilization-bar-value strong {
  color: var(--text-primary);
  font-weight: 700;
}
.utilization-bar-track {
  height: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.utilization-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,
    var(--primary-color) 0%,
    color-mix(in srgb, var(--primary-color) 70%, white) 100%);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
  transition: width 0.5s ease-out;
  min-width: 36px;
}

.usage-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-primary);
}
.usage-tab {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.88em;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-fast);
}
.usage-tab:hover { color: var(--text-primary); }
.usage-tab.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

.usage-panel { display: none; }
.usage-panel.active { display: block; }

.usage-table {
  width: 100%;
  border-collapse: collapse;
}
.usage-table th,
.usage-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary);
  font-size: 0.88em;
}
.usage-table th {
  color: var(--text-muted);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.usage-table tbody tr:hover { background: var(--bg-tertiary); }
.usage-rank {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 600;
}
.usage-rank--top { color: var(--text-primary); }
.usage-rank--1 { color: #f6d36b; }
.usage-rank--2 { color: #d9dbe0; }
.usage-rank--3 { color: #d29662; }
.usage-name-cell {
  color: var(--text-primary);
  font-weight: 500;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--text-primary);
}
.usage-trend { white-space: nowrap; }
.trend-up { color: var(--success); }
.trend-down { color: var(--danger); }
.trend-stable { color: var(--text-muted); }
.usage-lastused { color: var(--text-muted); white-space: nowrap; }
.usage-row-declining td { opacity: 0.75; }

.empty-state-cell {
  text-align: center;
  padding: var(--space-xl);
  color: var(--text-muted);
}

.unused-description {
  color: var(--text-muted);
  font-size: 0.9em;
  margin: 0 0 var(--space-md) 0;
}
.unused-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 700px) {
  .unused-grid { grid-template-columns: 1fr; }
}
.unused-section h4 {
  margin: 0 0 var(--space-sm) 0;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.unused-section h4 i { color: var(--primary-color); }
.unused-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}
.unused-list li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-secondary, var(--text-primary));
  font-size: 0.88em;
}
.unused-list li:last-child { border-bottom: 0; }
.unused-list .unused-list-empty {
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: var(--space-lg);
}

/* Hide the trailing usage-table columns when there's no room (the table is
   still horizontally scrollable via .table-container if the user wants
   every column, but on phones we drop drivers/trend/last-used so the
   primary signal — name + laps + hours — fits without sliding). */
@media (max-width: 720px) {
  .usage-table th.col-drivers,
  .usage-table td.col-drivers,
  .usage-table th.col-trend,
  .usage-table td.col-trend,
  .usage-table th.col-lastused,
  .usage-table td.col-lastused {
    display: none;
  }
  .usage-table th, .usage-table td { padding: 8px 8px; }
  .usage-name-cell { max-width: 180px; }
}

/* ================================================================
   Reports page — mobile rules
   Scales down hero numbers, tightens padding, stacks the header,
   relaxes the utilization-bar header, and shrinks the podium so it
   still fits side-by-side without overflowing a phone viewport.
   ================================================================ */
@media (max-width: 768px) {
  /* Header — stack title block and refresh button vertically. */
  .reports-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }
  .reports-actions { justify-content: flex-end; }
  .reports-header h2 { font-size: 1.15em; }
  .reports-subtitle { font-size: 0.85em; }

  /* Card shells use less padding on phones — recovers ~16px per side. */
  .reports-page .card { padding: var(--space-md); }
  .reports-page .card-header {
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
  }
  .reports-page .card-header h3 { font-size: 0.95em; }
  .reports-page .card-subtitle { font-size: 0.8em; flex-basis: 100%; }
  .reports-page .card-actions {
    margin-left: 0;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .reports-page .card-actions > * { flex: 1 1 auto; min-width: 0; }

  /* Hero stats — already 1-col at this breakpoint, shrink the inner sizing. */
  .hero-stat { padding: var(--space-md); }
  .hero-stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1em;
    border-radius: 10px;
  }
  .hero-stat-value { font-size: 1.9em; }
  .hero-stat-label { font-size: 0.75em; }

  /* Quick-stats — keep 2 cols on tablets / large phones. */
  .quick-stats { gap: var(--space-sm); }
  .quick-stat { padding: var(--space-sm) var(--space-md); }
  .quick-stat-value { font-size: 1.1em; }

  /* Fastest Lap — its 3.2em is huge on a phone; scale to fit. */
  .fastest-lap-time {
    font-size: clamp(2em, 9vw, 2.8em);
    margin-bottom: var(--space-sm);
  }
  .fastest-lap-banner {
    font-size: 0.7em;
    letter-spacing: 0.14em;
  }
  .fastest-lap-meta { gap: var(--space-sm); }
  .fastest-lap-meta-item .meta-value { font-size: 0.88em; }

  /* Utilization bar header — wrap so the label/value can stack on phones. */
  .utilization-bar-header { flex-wrap: wrap; gap: 4px; }
  .utilization-bar-label { flex: 1 1 100%; }

  /* Hall of Fame podium — shrink so it stays 3-up without overflow. */
  .podium-slot { min-height: 180px; gap: 2px; }
  .podium-medal {
    width: 30px;
    height: 30px;
    font-size: 0.95em;
  }
  .podium-name { font-size: 0.85em; padding: 0 2px; }
  .podium-stat { font-size: 0.78em; }
  .podium-stat-sub { font-size: 0.7em; }
  .podium-slot--p1 .podium-block { height: 64px; }
  .podium-slot--p2 .podium-block { height: 42px; }
  .podium-slot--p3 .podium-block { height: 24px; }

  /* Hot Content — keep horizontal but compact the icons. */
  .hot-content-icon { width: 36px; height: 36px; font-size: 1em; }
  .hot-content-name { font-size: 0.92em; }

  /* Achievements + fun-facts — already 1/2-up but compact the inner padding. */
  .achievement-card,
  .fun-fact { padding: var(--space-sm); }
  .achievement-icon { width: 38px; height: 38px; font-size: 1.05em; }
  .fun-fact-icon { width: 32px; height: 32px; font-size: 1.05em; }
  .fun-fact-value { font-size: 1.3em; }

  /* Tabs — let them wrap rather than getting clipped. */
  .usage-tabs { flex-wrap: wrap; }
  .usage-tab { padding: 8px 10px; font-size: 0.82em; }
}

/* Phone-sized — single-column everything that's still 2-up at 768. */
@media (max-width: 480px) {
  .quick-stats { grid-template-columns: 1fr; }
  .achievements { grid-template-columns: 1fr; }
  .fastest-lap-meta { grid-template-columns: 1fr; }

  /* Podium can't go single-column (the staircase visual breaks) but at
     this size the gap should be tiny to avoid horizontal scroll. */
  .podium-stage { gap: 4px; }
  .podium-medal { width: 26px; height: 26px; font-size: 0.85em; }
  .podium-name { font-size: 0.8em; }

  /* Hero stat — keep big and bold but cap the icon */
  .hero-stat-value { font-size: 1.7em; }
}

/* ===================== League Races ===================== */
.leagues-container { padding: var(--space-lg); }
.leagues-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-md);
}
.leagues-empty, .league-hint {
  color: var(--text-muted); padding: var(--space-md) 0; font-size: 0.9em;
}
.leagues-section { margin-bottom: var(--space-lg); }
.leagues-section-title {
  text-transform: uppercase; font-size: 0.75em; color: var(--text-muted);
  letter-spacing: 1px; margin-bottom: var(--space-sm);
}
.league-row {
  display: flex; gap: var(--space-md); align-items: center;
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-left: 4px solid var(--primary-color);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: 6px;
  cursor: pointer;
}
.league-row:hover { border-left-color: var(--success); }
.league-row-name { flex: 1; }
.league-row-open { color: var(--text-muted); font-size: 0.85em; }
.league-status {
  font-size: 0.75em; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-tertiary); text-transform: capitalize;
}
.league-status-active { color: var(--success); }
.league-status-draft { color: var(--warning); }
.league-status-completed, .league-status-archived { color: var(--text-muted); }
.league-status-pending { color: var(--warning); }
.league-status-approved { color: var(--success); }

.league-breadcrumb { margin-bottom: var(--space-md); color: var(--text-secondary); }
.league-breadcrumb a { color: var(--primary-color); cursor: pointer; }
.league-tabs { display: flex; gap: 4px; margin-bottom: var(--space-md); }
.league-tab {
  background: var(--bg-tertiary); border: none; color: var(--text-secondary);
  padding: 8px 16px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer;
}
.league-tab.active { background: var(--primary-color); color: #fff; }
.league-subbar { display: flex; gap: 8px; margin-bottom: var(--space-md); flex-wrap: wrap; }
.league-subbar input { flex: 1; min-width: 120px; }
.leagues-container .btn-sm { padding: 4px 10px; font-size: 0.85em; }

.league-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; justify-content: flex-end; z-index: 20000; backdrop-filter: blur(3px);
}
.league-drawer {
  width: min(94vw, 780px); height: 100%; overflow-y: auto;
  background: var(--bg-card); border-left: 1px solid var(--border-hairline);
  padding: var(--space-lg); box-shadow: var(--shadow-heavy);
  position: relative;
}
.league-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-md); }
.league-field span { font-size: 0.8em; color: var(--text-muted); }
.league-checkbox { display: flex; gap: 8px; align-items: center; margin-bottom: var(--space-sm); }
.league-drawer-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: var(--space-lg); }
.league-settings { max-width: 480px; }
.league-error { color: var(--danger); margin-top: var(--space-sm); }

/* ── Leagues drawer Phase-2: roomier 2-column race/round setup ──────────────
   Scoped to the LEAGUE drawer only; the narrow Groups launch .race-drawer
   (~440px) keeps its single-column layout. */
.league-drawer .rc-editor { columns: 2; column-gap: var(--space-xl); }
.league-drawer .rc-editor .rc-section-label,
.league-drawer .rc-editor .rc-presets,
.league-drawer .rc-editor .rc-row,
.league-drawer .rc-editor .rc-adv-grp,
.league-drawer .rc-editor .rc-advanced { break-inside: avoid; }
.league-drawer .rc-section-label { column-span: all; }   /* "Simple" header spans both cols */
/* meta fields read better capped than stretched across 780px */
.league-drawer > .league-field,
.league-drawer > .league-checkbox { max-width: 460px; }
/* keep Save/Cancel reachable as the (taller) form scrolls */
.league-drawer .league-drawer-actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: var(--space-lg) calc(-1 * var(--space-lg)) 0;
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--border-hairline);
}
.league-drawer > h3 {
  position: sticky; top: calc(-1 * var(--space-lg)); z-index: 2;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--border-hairline);
}

/* Settings: rig SteamID input (Task 6b) */
.saved-sim-item .sim-steam-guid {
  margin-left: auto; max-width: 240px; font-size: 0.85em;
  background: var(--bg-tertiary); border: 1px solid var(--border-primary);
  color: var(--text-primary); border-radius: var(--radius-sm); padding: 4px 8px;
}
.saved-sim-item .sim-steam-guid.saved-flash { border-color: var(--success); }

/* ----- League standings + results (Phase 2A) ----- */
.standings-wrap { overflow-x: auto; }
.standings-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.standings-table th, .standings-table td {
  padding: 6px 8px; text-align: center; border-bottom: 1px solid var(--border-primary);
}
.standings-table th { color: var(--text-muted); font-size: 0.8em; text-transform: uppercase; }
.standings-name { text-align: left; }
.standings-pos { color: var(--text-muted); }
.standings-total { font-weight: bold; color: var(--primary-color); }
.standings-num { color: var(--text-muted); font-size: 0.85em; margin-right: 4px; }
.standings-podium.standings-p1 .standings-pos { color: #ffd166; font-weight: bold; }
.standings-podium.standings-p2 .standings-pos { color: #cfd8dc; font-weight: bold; }
.standings-podium.standings-p3 .standings-pos { color: #bf8970; font-weight: bold; }
.pts-dropped { color: var(--text-muted); opacity: 0.45; text-decoration: line-through; }
.res-pos, .res-status { background: var(--bg-tertiary); border: 1px solid var(--border-primary);
  color: var(--text-primary); border-radius: var(--radius-sm); padding: 3px 6px; }

/* ----- League race-night console (Phase 2B) ----- */
.att-present { transform: scale(1.2); }
.att-sim, .grid-ballast, .grid-restrictor {
  background: var(--bg-tertiary); border: 1px solid var(--border-primary);
  color: var(--text-primary); border-radius: var(--radius-sm); padding: 3px 6px;
}
.phase-status { margin-top: var(--space-md); }
.phase-status-card {
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-left: 4px solid var(--success); border-radius: var(--radius-md);
  padding: var(--space-md); display: flex; flex-direction: column; gap: 6px;
}
.live-timing { margin-top: var(--space-md); }
.live-timing .standings-table thead th {
  position: sticky; top: 0;
  background: var(--bg-card);
}
.live-timing .league-hint { margin-top: 6px; }

/* ===================== Race Config Editor ===================== */
.rc-editor { border: 1px solid var(--border-primary); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg-tertiary); }
.rc-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-md); }
.rc-preset { font-size: 0.8em; padding: 3px 10px; border: 1px solid var(--border-primary); border-radius: 999px; cursor: pointer; background: var(--bg-card); }
.rc-preset:hover { border-color: var(--primary-color); }
.rc-preset-save { border-style: dashed; }
.rc-preset-x { color: var(--danger); margin-left: 4px; }
.rc-section-label { font-size: 0.7em; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin: var(--space-sm) 0; }
.rc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.rc-lbl { width: 84px; font-size: 0.8em; color: var(--text-muted); }
.rc-field, .rc-num { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: var(--radius-sm); color: var(--text-primary); padding: 4px 8px; }
.rc-num { width: 72px; }
.rc-mini { display: inline-flex; align-items: center; gap: 4px; font-size: 0.85em; }
.rc-seg { display: inline-flex; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); overflow: hidden; }
.rc-seg span { padding: 4px 12px; cursor: pointer; font-size: 0.85em; }
.rc-seg span.on { background: var(--primary-color); color: #fff; }
.rc-prev { width: 46px; height: 30px; object-fit: cover; border-radius: var(--radius-sm); }
.rc-adv { margin-top: var(--space-sm); }
.rc-adv summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9em; }
.rc-adv-grp { margin: var(--space-sm) 0; }
.rc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rc-hint { color: var(--text-muted); font-size: 0.8em; }
.rc-soon { opacity: 0.45; }
.rc-editor.rc-has-overrides { border-left: 3px solid var(--warning); }
/* Weather controls (shared helper: rc-editor + group launch form) */
.rc-weather { width: 100%; }
.rc-weather-adv { margin-top: var(--space-sm); }
.rc-weather-adv summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9em; }
.rc-weather-adv .rc-adv-grp { margin: var(--space-sm) 0; }

/* ── Race-config editor cleanup (2026-06-16 restyle) ───────────────────────
   Was label-beside (rc-lbl 84px), which crammed the Cars/Sessions rows and let
   the <b> group heading collide with the "Time multiplier" label in the narrow
   group drawer (the original screenshot). Switch to a consistent label-above
   layout + tidy advanced groups / wind-temp grid. Holds in the 440px drawer
   and the wider league editor alike. */
.rc-row { margin-bottom: var(--space-md); }
.rc-lbl {
  flex: 0 0 100%;
  width: auto;
  margin-bottom: 3px;
  font-size: 0.72em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.rc-field { min-width: 0; max-width: 100%; }
.rc-adv-grp > b {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.rc-adv-grp > label { display: block; font-size: 0.85em; color: var(--text-secondary); }
.rc-adv-grp .rc-hint { display: block; margin-top: 4px; }
.rc-grid { gap: 10px 8px; }
.rc-grid label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.rc-grid .rc-num { width: 100%; }
.rc-mini { font-size: 0.82em; color: var(--text-secondary); }
.rc-mini .rc-num { width: 56px; }
.rc-mini select.rc-num { width: auto; }

/* ── Email page: tabs + side-by-side composer (Phase-2 restyle) ─────────────── */
.email-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-hairline);
}
.email-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font: 600 0.9em system-ui, sans-serif;
  padding: 10px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.email-tab:hover { color: var(--text-primary); background: var(--glass-bg); }
.email-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.email-tab i { opacity: 0.8; }

/* Templates tab = editor (left) + colors (left) | live preview (right, sticky) */
.email-composer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: start; }
.email-composer > #email-editor-section   { grid-column: 1; grid-row: 1; margin: 0; }
.email-composer > #colors-section         { grid-column: 1; grid-row: 2; margin: var(--space-lg) 0 0; }
.email-composer > #email-previews-section { grid-column: 2; grid-row: 1 / span 2; margin: 0; position: sticky; top: 0; }
@media (max-width: 1100px) {
  .email-composer { grid-template-columns: 1fr; }
  .email-composer > #email-editor-section,
  .email-composer > #colors-section,
  .email-composer > #email-previews-section { grid-column: 1; grid-row: auto; position: static; margin: 0 0 var(--space-lg); }
}

/* sticky Save footer — reachable from any tab */
#email-save-row {
  position: sticky; bottom: 0; z-index: 5;
  margin-top: var(--space-lg); padding: var(--space-md) 0;
  background: color-mix(in srgb, var(--bg-primary) 80%, transparent);
  backdrop-filter: var(--glass-blur);
}

/* ── API add-on page ───────────────────────────────────────────────────── */
.api-upsell {
  padding: var(--space-lg);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-color, #444);
}
.api-usage-bar {
  height: 10px; margin-top: var(--space-sm);
  background: var(--bg-tertiary); border-radius: 5px; overflow: hidden;
}
.api-usage-fill { height: 100%; background: var(--primary-color); transition: width .3s; }
.api-usage-fill.warn { background: #e6a23c; }
.api-usage-fill.danger { background: #dc3545; }
.api-spark {
  display: flex; align-items: flex-end; gap: 2px; height: 64px;
  padding: 4px; background: var(--bg-tertiary); border-radius: var(--radius-sm);
}
.api-spark-bar { flex: 1 1 0; min-width: 3px; background: var(--primary-color); border-radius: 1px 1px 0 0; }
.api-spark-bar.empty { background: rgba(255,255,255,0.08); }
.api-key-reveal {
  padding: var(--space-md); margin: var(--space-sm) 0;
  background: var(--bg-tertiary); border-radius: var(--radius-sm);
  word-break: break-all; font-size: 1.02em; user-select: all;
}
.api-key-revoked td { opacity: 0.45; }
.badge-info { background: rgba(15,146,208,0.15); color: var(--primary-color); }
.badge-muted { background: rgba(128,128,128,0.15); color: var(--text-muted); }
.wh-event-badge { margin-right: 4px; }
.wh-url { word-break: break-all; }
.wh-err { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }

/* ── Email analytics strip ─────────────────────────────────────────────── */
.email-analytics-strip {
  padding: var(--space-md);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-primary);
}