/* Shared by every page, including the map (website 2.0): phone bottom bar (D-063), Sunlight switch (D-062), and Sunlight fixes
   for colours the pages set by hand. Colours come from /ds-tokens.css. */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.themeBtn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; }
.themeBtn.iconOnly { width: 40px; height: 40px; justify-content: center; padding: 0; flex: none; }
.themeBtn.iconOnly .i { width: 20px; height: 20px; }
.themeBtn.inMenu { border: 0; padding: 10px 12px; width: 100%; text-align: left; font: inherit; color: var(--ink); }
.themeBtn[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.themeBtn:hover { border-color: var(--cyan); }
#tabBar { display: none; }

@media (max-width: 760px) {
  body.hasTabBar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.hasTabBar #menuBtn { display: none !important; }
  body.hasTabBar #top { z-index: 1495; }
  body.hasTabBar #siteHead { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ground); }   /* a blurred header would trap the menu sheet inside it */
  .themeBtn.iconOnly { width: 38px; height: 38px; }
  #tabBar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0,0,0,.25); }
  #tabBar a, #tabBar button { flex: 1; min-width: 0; display: grid; place-items: center; align-content: center; gap: 3px; padding: 6px 2px 4px; background: none; border: 0; color: var(--ink-muted);
    text-decoration: none; font: 700 12px var(--font-display, var(--font-sans)); letter-spacing: .02em; cursor: pointer; }
  #tabBar a[hidden] { display: none; }
  #tabBar .i { width: 24px; height: 24px; }
  #tabBar a[aria-current="page"], #tabBar button[aria-expanded="true"] { color: var(--cyan); }
  #tabBar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cyan); }
  #tabBar a { position: relative; }
  /* "More" opens the whole menu as a sheet just above the bar */
  body.hasTabBar #siteNav { position: fixed !important; top: auto !important; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 1490; max-height: 72vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -12px 40px rgba(0,0,0,.45); padding: 10px 16px 14px; background: var(--surface); }
  body.hasTabBar #siteNav .themeBtn.inMenu { padding: 12px 8px; }
  body.hasTabBar #siteNav > a:is([href="/explore"], [href="/spots"], [href="/aircraft"], [href="/aircraft/photos"]) { display: none; }   /* already in the bar */
  /* the map: its sheet sits on top of the bar */
  body.hasTabBar #body { bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
  body.hasTabBar #toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* Sunlight (light) theme: the few colours pages set by hand */
[data-theme="daylight"] { color-scheme: light; --line-2: #dbe2ea; }
[data-theme="daylight"] body { background: var(--ground); color: var(--ink); }
[data-theme="daylight"] .pageHead { background: radial-gradient(900px 300px at 85% -40%, rgba(10,111,116,.10), transparent 70%); }
[data-theme="daylight"] #siteHead { background: color-mix(in srgb, var(--ground) 92%, transparent); }
[data-theme="daylight"] .phone { background: #0b1520; }
[data-theme="daylight"] #tabBar, [data-theme="daylight"] body.hasTabBar #siteNav { box-shadow: 0 -6px 18px rgba(11,21,32,.12); }
[data-theme="daylight"] .leaflet-container { background: #dfe5e8; }