/* Public appearance palette. Light fallbacks live beside each component's original color. */
:root { color-scheme: light; }
html body { background: var(--white); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) {
  color-scheme: dark;
  --brand: #8dbaff;
  --brand-hover: #b5d2ff;
  --brand-deep: #dbe8ff;
  --brand-light: #1d3350;
  --ink: #e5edf8;
  --muted: #adc0d9;
  --red: #ffadb9;
  --paper: #142238;
  --line: #354963;
  --white: #0e192b;
  --ap-surface: #0e192b;
  --ap-tint: #1d304a;
  --ap-line: #354963;
  --ap-focus: #8dbaff;
  --ap-ink: #e5edf8;
  --ap-heading: #dbe8ff;
  --ap-muted: #adc0d9;
  --ap-link: #8dbaff;
  --ap-danger: #ffadb9;
  --ap-danger-bg: #402632;
  --ap-warning: #f6d38a;
  --ap-warning-bg: #362d1d;
  --ap-success: #91dbb5;
  --ap-success-bg: #173b32;
  }
}
:root[data-color-scheme="dark"] {
  color-scheme: dark;
  --brand: #8dbaff;
  --brand-hover: #b5d2ff;
  --brand-deep: #dbe8ff;
  --brand-light: #1d3350;
  --ink: #e5edf8;
  --muted: #adc0d9;
  --red: #ffadb9;
  --paper: #142238;
  --line: #354963;
  --white: #0e192b;
  --ap-surface: #0e192b;
  --ap-tint: #1d304a;
  --ap-line: #354963;
  --ap-focus: #8dbaff;
  --ap-ink: #e5edf8;
  --ap-heading: #dbe8ff;
  --ap-muted: #adc0d9;
  --ap-link: #8dbaff;
  --ap-danger: #ffadb9;
  --ap-danger-bg: #402632;
  --ap-warning: #f6d38a;
  --ap-warning-bg: #362d1d;
  --ap-success: #91dbb5;
  --ap-success-bg: #173b32;
}
/* A native select supports keyboard, touch and screen readers without a custom popup. */
.theme-control { display: inline-flex; align-items: center; gap: 8px; flex: none; font-size: 14px; }
.theme-control[hidden] { display: none; }
.has-theme .theme-control[hidden] { display: inline-flex; visibility: hidden; }
.theme-control select { min-height: 44px; max-width: 150px; padding: 4px 8px; border: 1px solid #ffffff60; border-radius: 6px; background: #0b2a63; color: #fff; color-scheme: dark; cursor: pointer; }
.theme-control select:focus-visible { outline: 3px solid #8dd8ff; outline-offset: 2px; }
.utility-inner { flex-wrap: wrap; gap: 8px 16px; padding-block: 4px; }
.utility-links { gap: 16px; flex-wrap: wrap; }
@media (max-width: 1180px) { .utility-inner > .live-label { display: none; } }
@media (max-width: 600px) {
  .theme-control { gap: 5px; font-size: 13px; }
  .theme-control select { max-width: 120px; }
}
/* Use the supplied white artwork on dark surfaces, without filtering editorial images. */
.brand-on-dark { display: none; }
:root[data-color-scheme="dark"] .masthead-inner .brand-on-light { display: none; }
:root[data-color-scheme="dark"] .masthead-inner .brand-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme]) .masthead-inner .brand-on-light { display: none; }
  :root:not([data-color-scheme]) .masthead-inner .brand-on-dark { display: block; }
}
/* Native controls inherit the palette, including their placeholder and autofill rendering. */
input, select, textarea { color: inherit; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
