html,
body {
  margin: 0;
}

/*
 * Keep native controls on the selected theme before the app stylesheet loads.
 * The full component styles take over once React/Vite CSS is ready; these
 * low-specificity rules only prevent the browser's default white control
 * surfaces from flashing during refresh.
 */
html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]),
  textarea,
  select
) {
  color: #232a32;
  background-color: transparent;
  border-color: #e0e3e6;
}

:where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]),
  textarea,
  select
)::placeholder {
  color: #747b84;
  opacity: 1;
}

:where(html.dark) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]),
  textarea,
  select
) {
  color: #e8e9e7;
  background-color: hsl(220 7% 24% / 0.3);
  border-color: #3a3e45;
}

:where(html.dark) :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="image"]),
  textarea,
  select
)::placeholder {
  color: #b4b8bd;
}

:where(#mobile-nav-toggle) {
  color: #126c9f;
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

:where(html.dark) :where(#mobile-nav-toggle) {
  color: #72acd0;
}

.app-boot-loader {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: rgb(var(--c-canvas, 248 248 246));
}

.app-boot-spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border: 2px solid rgb(var(--c-line, 224 227 230));
  border-top-color: rgb(var(--c-pp-blue, 18 108 159));
  border-radius: 9999px;
  animation: app-boot-spinner-rotate 700ms linear infinite;
}

@keyframes app-boot-spinner-rotate {
  to { transform: rotate(1turn); }
}

html.dark .app-boot-loader {
  background: #16181c;
}

html.dark .app-boot-spinner {
  border-color: #3a3e45;
  border-top-color: #72acd0;
}

@media (prefers-reduced-motion: reduce) {
  .app-boot-spinner {
    animation: none !important;
    border-top-color: transparent;
    border-right-color: #126c9f;
  }

  html.dark .app-boot-spinner {
    border-right-color: #72acd0;
  }
}