@import url("../shared/standings-table.css");
@import url("./dashboard-controls.css");
@import url("./dashboard-tables.css");
/* Shared components. Native ui-* classes are preferred for new markup.
   Existing page classes are aliases so dynamic/embedded panels share the UI too. */
html body :is(main, dialog:where(.ui-dialog)) :is(
  .ui-card,.panel,.card,.editor,.panel-card,.team-card,.stat-card,.summary > div,
  .sc-card,.sc-session-head,.sc-create-main,.sc-create-aside,.sc-kpi,
  .cp-sidebar,.cp-card,.flag-sidebar,.flag-card,.flag-log-panel,.rules-card,.custom-box,
  .team-info-card,.media-editor,.pit-panel,.engineering-cohort,
  .eq-card,.te-section,.te-team-card,.te-driver-card,.te-flag-card,.te-clock-card,
  .perf-panel,.perf-metrics > article,.garage-journal,.garage-guide > div,
  .te-summary > article,.te-sector-summary > article,.users-stats article,.detail-kpis article,.license-stats article,
  .ch-season,.ch-round-detail,.ch-session-detail,.pr-review,.pr-window,.pr-evidence-card,
  .race-banner,main > .toolbar,.sc-overlay-link,
  .access-card,.account-info-card,.bc-control-card,.bc-message-card,.bc-presets-card,.bc-preview-card,.bc-session-card,
  .circuit-panel,.linked-data-card,.media-card,.online-panel,.recent-panel,.temp-access-card,.user-media-card,.license-create-card,.license-list-panel,
  .ch-round-card,.ch-pov-card,.pov-audio-card,.pov-capture-card,.pov-required-card,.cp-gp,.pilot-kpi,
  .pit-cockpit,.markerCard
) {
  position:relative;
  min-width:0;
  background:var(--ui-card-background)!important;
  border:1px solid var(--ui-card-border);
  border-radius:var(--ui-card-radius)!important;
  box-shadow:var(--ui-card-shadow);
}
html body :is(main, dialog:where(.ui-dialog)) :is(
  .ui-card,.panel,.card,.editor,.panel-card,.team-card,.stat-card,.summary > div,
  .sc-card,.sc-session-head,.sc-create-main,.sc-create-aside,.sc-kpi,
  .cp-sidebar,.cp-card,.flag-sidebar,.flag-card,.flag-log-panel,.rules-card,.custom-box,
  .team-info-card,.media-editor,.pit-panel,.engineering-cohort,
  .eq-card,.te-section,.te-team-card,.te-driver-card,.te-flag-card,.te-clock-card,
  .perf-panel,.perf-metrics > article,.garage-journal,.garage-guide > div,
  .te-summary > article,.te-sector-summary > article,.users-stats article,.detail-kpis article,.license-stats article,
  .ch-season,.ch-round-detail,.ch-session-detail,.pr-review,.pr-window,.pr-evidence-card,
  .race-banner,main > .toolbar,.sc-overlay-link,
  .access-card,.account-info-card,.bc-control-card,.bc-message-card,.bc-presets-card,.bc-preview-card,.bc-session-card,
  .circuit-panel,.linked-data-card,.media-card,.online-panel,.recent-panel,.temp-access-card,.user-media-card,.license-create-card,.license-list-panel,
  .ch-round-card,.ch-pov-card,.pov-audio-card,.pov-capture-card,.pov-required-card,.cp-gp,.pilot-kpi,
  .pit-cockpit,.markerCard
)::before {
  content:"";position:absolute;inset:0 0 auto;height:1px;width:auto;
  /* Faded rule of the card, in its tone: --ui-card-tone (default: the dashboard accent). Stat cards set their colour. */
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ui-card-tone, var(--mfa-accent)) 55%, transparent), transparent)!important;
  border:0;pointer-events:none;
}
html body :is(main, dialog:where(.ui-dialog)) :is(.ui-card-head,.sc-card-head,.panel-heading,.team-card-head,.custom-toolbar,
  .cp-section-head,.te-panel-heading,.eq-heading,.users-panel-head,.users-section-head,
  .license-list-heading,.flag-sidebar-heading,.flag-section-heading,.ch-session-head,.pr-list-head) {
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  min-height:61px;padding:16px 20px;box-sizing:border-box;
  border-bottom:1px solid var(--ui-card-border);background:transparent;
}
html body :is(main, dialog:where(.ui-dialog)) :is(.ui-card-head,.sc-card-head,.panel-heading,.team-card-head,.custom-toolbar,
  .cp-section-head,.te-panel-heading,.eq-heading,.users-panel-head,.users-section-head,
  .license-list-heading,.flag-sidebar-heading,.flag-section-heading,.ch-session-head) :is(h2,h3) {
  display:flex;align-items:center;gap:9px;margin:0;font-size:13px;line-height:1.5;letter-spacing:0;
}
html body :is(main, dialog:where(.ui-dialog)) :is(.ui-card-head,.sc-card-head,.panel-heading,.team-card-head,.custom-toolbar,
  .cp-section-head,.te-panel-heading,.eq-heading,.users-panel-head,.users-section-head,
  .license-list-heading,.flag-sidebar-heading,.flag-section-heading,.ch-session-head) :is(h2,h3)::before {
  content:"";flex:0 0 3px;width:3px;height:12px;border-radius:1px;background:var(--ui-accent);
}
html body :is(main, dialog:where(.ui-dialog)) :is(.ui-card-head,.sc-card-head,.panel-heading,.team-card-head,.custom-toolbar) p {
  margin:5px 0 0;font-size:10px;line-height:1.6;color:var(--muted);
}
.ui-card-body{padding:20px}
.ui-tabs{display:flex;gap:24px;overflow-x:auto;margin:0 0 16px;padding:0;border-bottom:1px solid var(--border)}
.ui-tabs [role=tab]{flex:none;position:relative;min-height:44px;padding:12px 0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap}
.ui-tabs [role=tab][aria-selected=true]{color:var(--text);font-weight:600}
.ui-tabs [role=tab][aria-selected=true]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--ui-accent)}
.ui-tabs [role=tab]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
.ui-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:600px){
  .ui-card-grid{grid-template-columns:minmax(0,1fr)}
  .ui-card-head,.ui-card-body{padding:16px}
}

/* Passage motion measurements, shared by lap details and engineering cockpits. */
.vehicle-motion { display:grid; gap:10px; min-width:0; }
.vehicle-motion-status { justify-self:start; padding:3px 10px; font-size:10px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; }



.vehicle-motion-empty { margin:0; color:var(--muted); font-size:11px; }
.vehicle-motion-values { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin:0; }
.vehicle-motion-values > div { min-width:0; padding:9px 11px; border:1px solid var(--ui-card-border, #ffffff14); border-radius:8px; background:#ffffff03; }
.vehicle-motion-values dt { margin:0; color:var(--muted); font-size:10px; line-height:1.4; }
.vehicle-motion-values dd { margin:4px 0 0; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.vehicle-motion-values dd small { margin-left:4px; color:var(--muted); font-size:10px; font-weight:400; }

.pit-motion { padding:12px 14px 2px; border-top:1px solid var(--border, #ffffff14); }
.pit-motion h3 { margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.4px; }
.pit-motion .pit-method { padding:0; margin:10px 0 8px; }
.history-motion-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.history-motion-sensor { min-width:0; padding:12px; border:1px solid var(--ui-card-border); border-radius:8px; background:#ffffff02; }
.history-motion-sensor h3 { margin:0 0 10px; font-size:11px; letter-spacing:1px; }
.history-motion-help { margin:12px 0 0; color:#858d9b; font-size:10px; line-height:1.6; }
@media(max-width:700px){ .history-motion-list { grid-template-columns:minmax(0,1fr); } }