/* UI 144 — one visual system for Settings; existing toggles and values stay intact. */
#settingsGrid { --settings-accent:#087fb5; row-gap:12px; }
html[data-theme="dark"] #settingsGrid { --settings-accent:#8fd6fc; }
#settingsGrid > :is(.settings-category,.vehicle-settings-section,.instructions-settings-section,.td-demo-settings) {
  box-sizing:border-box; display:block; grid-column:1/-1; width:100%; min-width:0;
  margin:0; padding:0!important; gap:0; border:1px solid var(--td-border); border-radius:16px;
  background:var(--td-surface-raised); color:var(--td-ink); overflow:hidden; box-shadow:0 4px 14px #08253b08;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) {
  box-sizing:border-box; appearance:none; -webkit-appearance:none; display:grid; grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center; gap:12px; width:100%; min-width:0; min-height:84px; margin:0; padding:14px;
  border:0; border-radius:0; background:var(--td-surface-raised); color:var(--td-ink); box-shadow:none;
  font:400 14px/1.4 system-ui,sans-serif; text-align:left; cursor:pointer; list-style:none;
}
#settingsGrid .td-settings-demo-toggle::-webkit-details-marker { display:none; }
#settingsGrid .td-settings-demo-toggle::marker { content:""; }
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle):hover,
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle)[aria-expanded="true"],
#settingsGrid #demoSettingsSection details[open] > summary { background:var(--td-icon-fill); }
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle):focus-visible {
  outline:3px solid var(--settings-accent); outline-offset:-3px;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) > span:nth-child(2) {
  display:grid; grid-template-columns:minmax(0,1fr); gap:3px; min-width:0; text-align:left;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) :is(h3,strong) {
  display:block; margin:0; padding:0; color:var(--td-ink); font:750 16px/1.3 system-ui,sans-serif; letter-spacing:normal; text-transform:none;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) small {
  display:block; margin:0; padding:0; color:var(--td-muted); font:500 12px/1.4 system-ui,sans-serif; white-space:normal; overflow-wrap:anywhere;
}
#settingsGrid :is(.settings-category-icon,.vehicle-settings-icon,.instructions-settings-icon) {
  box-sizing:border-box; display:grid; place-items:center; width:38px; height:38px; margin:0; padding:0;
  border:1px solid var(--td-border); border-radius:11px; background:var(--td-icon-fill); color:var(--settings-accent); font:750 16px/1 system-ui,sans-serif;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) > b {
  display:grid; place-items:center; width:20px; height:24px; margin:0; padding:0; font-size:0; color:var(--settings-accent); transform:none; transition:none;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) > b::before {
  content:""; display:block; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px); transition:transform .16s ease;
}
#settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle)[aria-expanded="true"] > b::before,
#settingsGrid #demoSettingsSection details[open] > summary > b::before { transform:rotate(225deg) translate(-1px,-1px); }
#settingsGrid :is(.settings-category-content,#vehicleSettingsFields,#instructionsSettingsContent,.td-demo-settings-body) {
  box-sizing:border-box; min-width:0; margin:0; padding:16px; border:0; border-top:1px solid var(--td-border); border-radius:0;
  background:var(--td-surface); color:var(--td-ink); font:400 14px/1.5 system-ui,sans-serif;
}
#settingsGrid :is(.settings-category-content,#vehicleSettingsFields,#instructionsSettingsContent)[hidden] { display:none!important; }
/* Re-match native details content when the theme changes while it is closed. */
html[data-theme="light"] #settingsGrid .td-demo-settings-body,
html[data-theme="dark"] #settingsGrid .td-demo-settings-body {
  background:var(--td-surface); color:var(--td-ink); border-color:var(--td-border);
}
#settingsGrid :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]),select) {
  box-sizing:border-box; min-width:0; max-width:100%; min-height:48px; border:1px solid var(--td-border); border-radius:12px;
  background-color:var(--td-surface-raised); color:var(--td-ink); font:500 16px/1.4 system-ui,sans-serif;
}
#settingsGrid :is(label > span,.vehicle-number-input small,.vehicle-settings-group p,.td-demo-settings-body p) { color:var(--td-muted); }
#settingsGrid :is(.vehicle-settings-group h3,.activity-symbol-guide h3,.td-demo-settings-body > strong) { color:var(--td-ink); font:700 15px/1.4 system-ui,sans-serif; }
#settingsGrid :is(#cardDeadlineSettings,#premiumWarningSettings,#criticalAlertSettings) {
  box-sizing:border-box; margin:0; padding:12px; border:1px solid var(--td-border); border-radius:12px; background:var(--td-surface-raised); box-shadow:none;
}
#settingsGrid #instructionsSettingsContent > p { background:var(--td-surface-raised); color:var(--td-muted); border-left-color:var(--settings-accent); }
#settingsGrid .td-guide-primary { min-height:48px; width:100%; text-align:center; }
@media(max-width:480px) {
  #settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) { padding:12px; gap:10px; }
  #settingsGrid :is(.settings-category-content,#vehicleSettingsFields,#instructionsSettingsContent,.td-demo-settings-body) { padding:12px; }
}
@media(prefers-reduced-motion:reduce) {
  #settingsGrid :is(.settings-category-toggle,.vehicle-settings-toggle,.instructions-settings-toggle,.td-settings-demo-toggle) > b::before { transition:none; }
}