/* Appearance choices apply to the reading deck as well as navigation and Present. */
body.skin-evergreen { --focus-on-dark: #f0d28c; }
body.skin-ocean { --focus-on-dark: #ffd3ad; }
.dk-hud button:focus-visible { outline-color: var(--on-dark); }
.dk {
  --sl-page: var(--wash2);
  --sl-paper: var(--paper);
  --sl-rule: var(--line2);
  --sl-ink: var(--ink);
  --sl-ink2: var(--ink2);
  --sl-ink3: var(--ink3);
  --sl-slate: var(--brand-d);
  --sl-blue: var(--brand-d);
  --sl-amber: var(--brand-d);
  --sl-gold: var(--accent);
  --sl-sans: var(--font-body);
  --sl-display: var(--font-display);
}
.v5-hero h1, .v5-role h1, .sl--cover h1, .sl__hd h2,
html:not(.dk-present) .sl--cover h1 {
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}
.v5-org-node a:focus-visible { outline-color: var(--focus-on-dark); }

/* Twenty choices remain scannable, including on short phone screens. */
.settingsbar { --panel-w: min(560px, calc(100vw - 24px)); }
.settingsbar[data-open] .settings__toggle { z-index: 3; }
.settings__panel .settings__title {
  position: sticky;
  top: -12px;
  z-index: 2;
  margin-top: -12px;
  padding-block: 12px 8px;
  background: var(--paper);
}
.settings__panel .settings__grouphead { font-size: 13px; line-height: 1.4; }
.settings__panel .settings__item { min-height: 52px; padding: 8px; }
.settings__choice { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings__choice > span { display: block; font-size: 15px; line-height: 1.35; }
.settings__panel .settings__choice small {
  display: block;
  margin: 3px 0 0;
  color: var(--ink3);
  font: 400 12px/1.4 var(--font-body);
}
.settings__panel .settings__reset {
  position: sticky;
  bottom: -16px;
  z-index: 2;
  min-height: 38px;
  background: var(--paper);
  font-size: 13px;
}
.settings__reset:hover { background: var(--wash2); }
@media (max-width: 575.98px) {
  .settings__panel { padding-inline: 12px; }
  .settings__cols { gap: 16px; }
  .settings__list { gap: 4px; }
  .settings__panel .settings__item { align-items: flex-start; gap: 7px; padding: 8px 5px; }
  .settings__aa { width: 28px; height: 26px; }
  .settings__dots { padding-top: 3px; }
  .settings__dot { width: 16px; height: 16px; }
}