/* ── Rider Runtime Supplemental Styles ──────────────────────────────── */
/* Loaded by admin.html for RIDER_MODE. Rider.html keeps its own inline <style>. */

/* Duty toggle thumb turns red when rider-mode-active (signals off-duty danger) */
.rider-mode-active .toggle-switch .toggle-thumb { background: var(--red); }
/* Theme toggle is exempt — its checked state must remain blue regardless of duty state */
.rider-mode-active .toggle-switch.theme-toggle input:checked + .toggle-thumb { background: var(--blue); }

/* Off-duty visual lockdown — grayscale filter on main content + nav */
.phone.off-duty .main-content,
.phone.off-duty .bottom-nav { filter: grayscale(1) contrast(0.9); }
.main-content, .bottom-nav { transition: filter 0.4s ease; }

/* Block interaction on live screen when off-duty */
.phone.off-duty #scr-live { pointer-events: none; }

/* Stock screen scroll-area must flow as block (not flex) */
#scr-loadout .scroll-area { display: block; }

/* Full-width rider profile pill button */
.btn-pill-full {
  width: 100%;
  margin-top: 32px;
  height: 48px !important;
  font-weight: 800;
  font-size: 15px;
  border: 1px solid var(--blue) !important;
  background: var(--blue-dim) !important;
  color: var(--blue) !important;
}

/* Skip / hold variant of the primary action button */
.btn-main-skip {
  background: var(--surface2);
  color: var(--text2);
  box-shadow: none;
}