/* Shared native, keyboard-accessible appearance selector. */
.appearance-control {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 10px;
  border: 1px solid #7698b8;
  border-radius: 999px;
  background: #e7f0f9;
  color: #102e48;
  box-shadow: 0 3px 12px #102e4826;
  font: 600 12px/1.3 system-ui, sans-serif;
}
.appearance-control label { margin: 0; font: inherit; color: inherit; }
.appearance-control select {
  box-sizing: border-box;
  width: auto;
  min-width: 76px;
  min-height: 44px;
  height: 44px;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 5px 22px 5px 8px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
html[data-theme="dark"] .appearance-control { background: #132d46; color: #eaf2ff; border-color: #658bab; }
.appearance-control select:focus-visible { outline: 3px solid #167cce; outline-offset: 2px; }
@media (max-width: 480px) { .appearance-control label { display: none; } }

.appearance-control::after { content: "⌄"; position: absolute; right: 14px; pointer-events: none; }
/* Reserve space in the production header rather than covering its menu. */
html[data-theme-v1="on"] .header .container.nav { padding-right: 170px; }
@media (max-width: 900px) {
  .appearance-control label { display: none; }
  html[data-theme-v1="on"] .header .container.nav { padding-right: 110px; }
}
html[data-theme="dark"] .footer__credit { color: var(--text-dark, #eaf2ff); }