/* Settings are independent of the scene canvases and audio/GPS pipeline. */
#driverSettingsDialog {
  color: var(--text); background: #111923; border: 1px solid var(--hairline-strong);
  width: min(620px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  padding: 0; margin: auto; border-radius: 24px; overflow-y: auto;
  box-shadow: 0 30px 100px #0008; text-align: left; overscroll-behavior: contain;
  font-family: var(--font-ui); color-scheme: dark;
}
#driverSettingsDialog:not([open]) { display: none; }
#driverSettingsDialog::backdrop { background: rgb(3 10 17 / 66%); }
body.driver-settings-open { overflow: hidden; }
#driverSettingsDialog .ds-header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 28px 18px; background: inherit; border-bottom: 1px solid var(--hairline); }
#driverSettingsDialog h2 { margin: 0; font-size: 26px; font-weight: 650; letter-spacing: -.6px; color: var(--text); }
#driverSettingsDialog .ds-kicker { margin: 0 0 5px; color: var(--accent); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
#driverSettingsDialog #closeDriverSettings { width: 44px; height: 44px; padding: 0; border: 1px solid var(--hairline); border-radius: 50%; background: transparent; color: var(--text-dim); font: 28px var(--font-ui); }
#driverSettingsDialog .controls { display: flex; margin: 0; padding: 24px 28px 28px; gap: 22px; }
#driverSettingsDialog .controls label { font-size: 15px; line-height: 1.5; gap: 10px; color: var(--text); }
#driverSettingsDialog input[type=range] { min-height: 38px; width: 100%; accent-color: var(--accent); }
#driverSettingsDialog input[type=checkbox] { accent-color: var(--accent); width: 22px; height: 22px; flex-shrink: 0; }
#driverSettingsDialog #hideSpeedometer { appearance: none; position: relative; width: 46px; height: 28px; margin: 0; border: 1px solid var(--hairline-strong); border-radius: 20px; background: var(--surface-raised); cursor: pointer; }
#driverSettingsDialog #hideSpeedometer::after { content: ''; position: absolute; width: 20px; height: 20px; top: 3px; left: 3px; border-radius: 50%; background: var(--text-dim); }
#driverSettingsDialog #hideSpeedometer:checked { background: var(--accent); border-color: var(--accent); }
#driverSettingsDialog #hideSpeedometer:checked::after { transform: translateX(18px); background: #fff; }
#driverSettingsDialog .ds-volume-label { display: flex; justify-content: space-between; gap: 12px; }
#driverSettingsDialog output { font-variant-numeric: tabular-nums; color: var(--text-dim); }
#driverSettingsDialog .ds-section { border-top: 1px solid var(--hairline); padding-top: 23px; }
#driverSettingsDialog h3 { color: var(--text-dim); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; margin: 0 0 18px; font-weight: 600; }
#driverSettingsDialog .ds-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0; font-size: 15px; line-height: 1.45; }
#driverSettingsDialog label.ds-row { flex-direction: row; }
#driverSettingsDialog .ds-segments { display: inline-flex; flex-shrink: 0; gap: 4px; padding: 4px; border: 1px solid var(--hairline-strong); border-radius: 30px; }
#driverSettingsDialog .ds-segments button { min-height: 40px; min-width: 62px; padding: 8px 13px; border: 0; border-radius: 24px; font: 14px var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-dim); background: transparent; cursor: pointer; }
#driverSettingsDialog .ds-segments button[aria-pressed=true] { background: var(--accent); color: #071a20; font-weight: 600; }
#driverSettingsDialog .ds-help { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: -8px 0 20px; }
#driverSettingsDialog .ds-save-note { color: var(--text-dim); font-size: 12px; line-height: 1.6; margin: 0; }
#driverSettingsDialog .ds-terms { color: var(--text-dim); font-size: 13px; text-underline-offset: 3px; }
#driverSettingsDialog .settings-group, #driverSettingsDialog .advanced-settings, #driverSettingsDialog .settings-switch { padding: 16px; background: var(--surface-raised); border-color: var(--hairline); }
#driverSettingsDialog .settings-group-title, #driverSettingsDialog .advanced-settings summary, #driverSettingsDialog .settings-switch strong { font-size: 14px; color: var(--text); }
#driverSettingsDialog .settings-help, #driverSettingsDialog .settings-switch small { font-size: 12px; line-height: 1.6; color: var(--text-dim); }
#driverSettingsDialog .segmented-setting button { min-height: 44px; font-size: 13px; }
#driverSettingsDialog .settings-switch { flex-direction: row; align-items: flex-start; }
#driverSettingsDialog button:focus-visible, #driverSettingsDialog input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.hide-speedometer #speedGaugeEl { visibility: hidden; pointer-events: none; }
body.theme-day #driverSettingsDialog { background: #f8fafb; color-scheme: light; }
body.theme-day #driverSettingsDialog .ds-segments button[aria-pressed=true] { color: white; }
/* Existing new scenes remain untouched; only interface surfaces change theme. */
body.theme-day .background-picker, body.theme-day .background-choices { background: #f8fafb; border-color: #b8c8d1; }
body.theme-day .background-picker { --text: #10222d; --text-dim: #4d6473; --accent: #00778f; }
body.theme-day .background-picker #backgroundTrigger, body.theme-day .background-switch, body.theme-day .background-menu-heading, body.theme-day .background-picker .background-choices button { color: #10222d; }
body.theme-day .background-eyebrow, body.theme-day #backgroundMotionWarning, body.theme-day .background-status, body.theme-day .background-choices button small, body.theme-day .background-menu-heading span { color: #4d6473; }
body.theme-day .background-picker .background-choices button:hover, body.theme-day .background-picker .background-choices button[aria-pressed=true] { background: #dbeef2; color: #006e83; }
body.theme-day #soundLibrary { color: #10222d; }
body.theme-day #soundLibrary .sl-eyebrow, body.theme-day #soundLibrary .sl-group-heading>span, body.theme-day #soundLibrary .sl-status, body.theme-day #soundLibrary .sl-bottom { color: #4d6473; }
body.theme-day #soundLibrary .sl-tile, body.theme-day #soundLibrary .sl-empty { background: #edf3f6; color: #365463; border-color: #b8c8d1; }
body.theme-day #soundLibrary .sl-pick, body.theme-day #soundLibrary .sl-star { color: #163d4b; }
body.theme-day #soundLibrary .sl-toggle, body.theme-day #soundLibrary .sl-done, body.theme-day #soundLibrary .sl-selected { background: #dbeef2; color: #006e83; border-color: #83aeba; }
body.theme-day #soundLibrary .sl-selected .sl-pick { color: #006e83; }
#backgroundMotionWarning { max-width: 180px; }
@media (min-width: 1000px) and (min-height: 501px) {
  body.controls-right #controlsSidebar { left: auto; right: 20px; width: 218px; }
  body.controls-right #panelToggle { left: auto; right: 238px; border-left: 1px solid var(--hairline-strong); border-right: 0; border-radius: 14px 0 0 14px; }
  body.controls-right #panelToggle .panel-toggle-icon { transform: rotate(180deg); }
  body.controls-right.panel-hidden #controlsSidebar { transform: translateY(-50%) translateX(120%); }
  body.controls-right.panel-hidden #panelToggle { left: auto; right: 0; }
  body.controls-right.panel-hidden #panelToggle .panel-toggle-icon { transform: none; }
}
@media (max-width: 520px) {
  #driverSettingsDialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  #driverSettingsDialog .ds-header { padding: 18px; }
  #driverSettingsDialog .controls { padding: 20px 18px 24px; }
  #driverSettingsDialog .ds-row { flex-wrap: wrap; gap: 10px; }
  #driverSettingsDialog .ds-segments button { min-height: 44px; padding: 8px 12px; }
  #driverSettingsDialog h2 { font-size: 24px; }
}