/* Dark mode for every public page. Loaded after each page's own styles.
   Colours come from the variables below; the rules after them cover the few colours pages set directly.
   ":where(...)" keeps each rule exactly as strong as the one it replaces, so pressed/selected states still win. */
html[data-theme=dark] {
  color-scheme: dark;
  --ink: #F1EEEA;
  --muted: #A9A49F;
  --line: #34363C;
  --ground: #121316;
  --paper: #1C1D21;
  --tint: #24211F;
  --dash: #4A433E;
  --field: #4A4D55;
  --accent: #EF2D46;
  --accent-soft: #3B1D24;
  --ok: #4ADE80;
  --soft: #26282D;
}
:where(html[data-theme=dark]) body { background: var(--ground); }

/* the moon / sun button and the account button */
.theme-btn, .acct-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; color: inherit; text-decoration: none; }
.theme-btn svg, .acct-btn svg { display: block; }
.acct-btn.signed-in { border-color: transparent; }
.acct-initial { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }

/* surfaces that pages paint white */
:where(html[data-theme=dark]) .lang,
:where(html[data-theme=dark]) .near,
:where(html[data-theme=dark]) .arrows button,
:where(html[data-theme=dark]) .install,
:where(html[data-theme=dark]) form,
:where(html[data-theme=dark]) .exact,
:where(html[data-theme=dark]) .seg button,
:where(html[data-theme=dark]) .chips button,
:where(html[data-theme=dark]) .custom input,
:where(html[data-theme=dark]) .custom select,
:where(html[data-theme=dark]) .ac-list,
:where(html[data-theme=dark]) input[type=text],
:where(html[data-theme=dark]) input[type=url],
:where(html[data-theme=dark]) input[type=email],
:where(html[data-theme=dark]) input[type=number],
:where(html[data-theme=dark]) input[type=search],
:where(html[data-theme=dark]) select,
:where(html[data-theme=dark]) textarea { background: var(--paper); border-color: var(--field); }
:where(html[data-theme=dark]) .tag { background: var(--paper); }
:where(html[data-theme=dark]) .near { border-color: var(--ink); }
:where(html[data-theme=dark]) .error { color: #FF8A8A; }
:where(html[data-theme=dark]) .todo { background: #4A3B0A; color: #FFE58A; }
:where(html[data-theme=dark]) .kinds label:has(input:checked) { background: var(--accent-soft); }
:where(html[data-theme=dark]) .lists { background: var(--tint); }

/* ---------- map page ---------- */
:where(html[data-theme=dark]) .viewtoggle,
:where(html[data-theme=dark]) .sort { background: #2A2C31; }
:where(html[data-theme=dark]) .handle span { background: #4A4D55; }
:where(html[data-theme=dark]) .panel-top,
:where(html[data-theme=dark]) .filterbar { border-bottom-color: var(--line); }
:where(html[data-theme=dark]) .foot { border-top-color: var(--line); }
:where(html[data-theme=dark]) .btn,
:where(html[data-theme=dark]) .chip,
:where(html[data-theme=dark]) .link-btn,
:where(html[data-theme=dark]) .filters-btn,
:where(html[data-theme=dark]) .show-more,
:where(html[data-theme=dark]) .banner button,
:where(html[data-theme=dark]) .try { border-color: var(--field); background: var(--paper); }
:where(html[data-theme=dark]) .morefilters summary::before { border-color: var(--field); }
:where(html[data-theme=dark]) .btn.primary,
:where(html[data-theme=dark]) .banner button.go { background: var(--accent); border-color: var(--accent); }
:where(html[data-theme=dark]) .chip[aria-pressed=true] { background: var(--accent); border-color: var(--accent); }
:where(html[data-theme=dark]) .filters-btn[aria-expanded=true] { background: var(--ink); border-color: var(--ink); color: #121316; }
:where(html[data-theme=dark]) .banner { border-color: #3D3631; }
:where(html[data-theme=dark]) .searchbox input { background: #26282D; border-color: transparent; }
:where(html[data-theme=dark]) .searchbox input:focus { background: var(--paper); border-color: var(--accent); }
:where(html[data-theme=dark]) .fchip { background: #2C2E34; }
:where(html[data-theme=dark]) .fchip button:hover { background: #3A3D44; }
:where(html[data-theme=dark]) .result .thumb { background: #2C2E34; }
:where(html[data-theme=dark]) .result .stars,
:where(html[data-theme=dark]) .feat .stars,
:where(html[data-theme=dark]) .pop .rating b { color: #FBBF24; }
:where(html[data-theme=dark]) .badge,
:where(html[data-theme=dark]) .pop .special { background: #3D3210; color: #FDE68A; }

/* featured (sponsored) spots keep their red tint, darker */
:where(html[data-theme=dark]) .feat { border-color: #5A2530; background: linear-gradient(135deg, #3A1A21, #2A1A1E); }
:where(html[data-theme=dark]) .feat .from,
:where(html[data-theme=dark]) .result .spons-inline { color: #FF8A99; }
:where(html[data-theme=dark]) .spons { background: #1C1D21; color: #FF8A99; }
:where(html[data-theme=dark]) .result.sponsored { background: #33191F; }
:where(html[data-theme=dark]) .result.sponsored:hover,
:where(html[data-theme=dark]) .result.sponsored.active { background: #44202A; }

/* pins and clusters stay dark labels with a light outline so they read on the dark map */
:where(html[data-theme=dark]) .pin b { background: #2B2D33; box-shadow: 0 0 0 1px #4A4D55, 0 2px 6px rgba(0,0,0,0.5); }
:where(html[data-theme=dark]) .pin i { background: #4A4D55; }
:where(html[data-theme=dark]) .pin:hover b { background: #393C44; }
:where(html[data-theme=dark]) .pin.active b { background: var(--accent); box-shadow: 0 0 0 3px #121316, 0 2px 8px rgba(0,0,0,0.5); }
:where(html[data-theme=dark]) .pin.active i { background: var(--accent); }
:where(html[data-theme=dark]) .cluster { background: #2B2D33; border-color: #4A4D55; }
:where(html[data-theme=dark]) .cluster:hover { background: var(--accent); }
:where(html[data-theme=dark]) .dot { background: #2B2D33; border-color: #7D828C; }
:where(html[data-theme=dark]) .you { border-color: #121316; }
:where(html[data-theme=dark]) .peek-photo { background: #2C2E34; }

/* restaurant card (map popup) */
:where(html[data-theme=dark]) .leaflet-popup-content-wrapper,
:where(html[data-theme=dark]) .leaflet-popup-tip,
:where(html[data-theme=dark]) .leaflet-tooltip.peek { background: var(--paper); color: var(--ink); }
:where(html[data-theme=dark]) .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
:where(html[data-theme=dark]) .pop li,
:where(html[data-theme=dark]) .pop .rate { border-color: var(--line); }
:where(html[data-theme=dark]) .pop .actions button,
:where(html[data-theme=dark]) .pop .report-form button { background: var(--paper); border-color: var(--field); }
:where(html[data-theme=dark]) .pop .actions button[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); }
:where(html[data-theme=dark]) .pop .report-form button.send { background: var(--accent); border-color: var(--accent); }
:where(html[data-theme=dark]) .pop .report-form textarea { border-color: var(--field); background: var(--paper); }
:where(html[data-theme=dark]) .pop .rate .stars-in button { color: #4A4D55; }
:where(html[data-theme=dark]) .pop .rate .stars-in button.on { color: #FBBF24; }

/* map controls */
:where(html[data-theme=dark]) .leaflet-bar a { background: var(--paper); color: var(--ink); border-color: var(--line); }
:where(html[data-theme=dark]) .leaflet-bar a:hover { background: #2C2E34; }
:where(html[data-theme=dark]) .leaflet-control-attribution { background: rgba(18,19,22,0.8); color: var(--muted); }
:where(html[data-theme=dark]) .leaflet-control-attribution a { color: #9CC3FF; }
:where(html[data-theme=dark]) #map { background: #1A1B1F; }

/* small phones: keep the logo, links and both round buttons on one line (light and dark) */
@media (max-width: 440px) {
  header nav { gap: 8px; }
  .brand span { letter-spacing: 0.1em; }
  header.top .brand span { display: none; }   /* map page: the logo alone, so Map / List fits */
  .acct-btn ~ .theme-btn { display: none; }     /* light / dark moves to the account page on small phones */
}