/* Site appearance is independent of the permanently dark passport/Pro artwork. */
:root[data-appearance="dark"] {
  --bg: #080d18;
  --ink: #f3f6fb;
  --ink-2: #cbd3e0;
  --ink-3: #a0acc0;
  --line: rgba(221, 232, 255, .12);
  --card-light: #111a29;
  --card-warm: #1b1b26;
  --violet: #b49bff;
  color-scheme: dark;
}
.theme-toggle { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.theme-toggle:hover { background: rgba(127, 127, 127, .16); }
.theme-toggle span { display: flex; }
.theme-toggle .i { width: 20px; height: 20px; }
.theme-toggle .theme-sun { display: none; }
[data-appearance="dark"] .theme-toggle .theme-sun { display: flex; }
[data-appearance="dark"] .theme-toggle .theme-moon { display: none; }
.theme-toggle:focus-visible { outline: 2px solid #42b2fe; outline-offset: 3px; }
.render-night { display: none; }
[data-appearance="dark"] .render-day { display: none; }
[data-appearance="dark"] .render-night { display: block; }

/* Navigation, readable copy and elevated surfaces. Never invert image artwork. */
[data-appearance="dark"] .nav-in { color: var(--ink); }
[data-appearance="dark"].scrolled .nav-in { background: rgba(16, 24, 39, .82); border-color: var(--line); }
[data-appearance="dark"] :is(.nav, .footer) .brand { color: #f5f9ff; }
[data-appearance="dark"] .lang-list { background: rgba(18, 27, 43, .97); color: var(--ink); border-color: var(--line); }
[data-appearance="dark"] .hero .lede { color: var(--ink-2); }
[data-appearance="dark"] :is(.badge span, .hc span) { color: var(--ink-3); }
[data-appearance="dark"] .hc { background: #141e2e; color: var(--ink); box-shadow: 0 0 0 1px #c5d9ff14, 0 12px 28px -12px #0008; }
[data-appearance="dark"] .day { background: var(--bg); }
[data-appearance="dark"] :is(.forecast, .widget.white, .rank) { background: #1a2638; color: var(--ink); border-color: var(--line); }
[data-appearance="dark"] .fine::before { background: rgba(221, 232, 255, .22); }
[data-appearance="dark"] .redeem-form input { color: var(--ink); }
[data-appearance="dark"] .apple-in { border: 1px solid var(--line); }
[data-appearance="dark"] .gift-error { color: #ff9b91; }
[data-appearance="dark"] :is(.gift-bulk a, .gift-redeem a, .doc a:not(.mail):not(.pill-link), .rd-more summary, .lang-list a[aria-current]::after) { color: #80b8ff; }
/* These are solid light controls, whose ink must stay dark when page text changes. */
[data-appearance="dark"] :is(.store, .closing .store.dark, .rs-app) { background: #f3f6fb; color: #0b1423; }
[data-appearance="dark"] :is(.store.dark, .pill-link.white, .pr-explore) { color: #0b1423; }

/* Resort search, data tables and map controls share the same appearance. */
[data-appearance="dark"] :is(.rs-map, .rd-map) { background: #101c2c; }
[data-appearance="dark"] .rs-map::before { background: linear-gradient(var(--bg), transparent); }
[data-appearance="dark"] .rs-search { background: rgba(17, 26, 41, .92); }
[data-appearance="dark"] .rs-sheet .rs-in { background: var(--bg); }
[data-appearance="dark"] .rs-table tbody tr:nth-child(even) td { background: #0e1624; }
[data-appearance="dark"] .rs-table tbody tr:hover td { background: var(--card-light); }
[data-appearance="dark"] :is(.rd-near, .rd-btn:not(.blue)) { background: #1a2638; }
[data-appearance="dark"] .s-minor { color: #ffd28a; }
[data-appearance="dark"] .s-major { color: #ff9b91; }
[data-appearance="dark"] .rd-status.s-good { background: #102c25; }
[data-appearance="dark"] .rd-status.s-minor { background: #302718; }
[data-appearance="dark"] .rd-status.s-major { background: #342023; }
[data-appearance="dark"] .g-black { background: #b4c0d3; }
[data-appearance="dark"] .maplibregl-ctrl-attrib { background: #182436e8; color: #cbd3e0; }
[data-appearance="dark"] .maplibregl-ctrl-attrib-button { background-color: #b7c7df; }

@media (max-width: 600px) {
  .nav-end { gap: 2px; }
  .theme-toggle { width: 36px; }
  .get-app { padding-inline: 12px; font-size: 14px; }
  .nav-menu summary { padding: 6px; }
  .nav-menu summary .i, .nav-menu summary .i:last-child { width: 20px; height: 20px; }
}
@media (max-width: 360px) { .nav .brand-name { display: none; } }