/* Small persistent affordance; the weather/time panel never reserves space. */
.scene-settings-toggle {
  appearance: none;
  position: fixed;
  z-index: 44;
  top: max(14px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #36595b;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.scene-settings-toggle__disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgb(66 100 104 / .17);
  border-radius: 50%;
  background: rgb(241 248 246 / .64);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background .18s ease, border-color .18s ease;
}
.scene-settings-toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.scene-settings-toggle:hover .scene-settings-toggle__disc,
.scene-settings-toggle[aria-expanded="true"] .scene-settings-toggle__disc { background: rgb(241 248 246 / .94); border-color: rgb(66 100 104 / .4); }
.scene-settings-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html[data-scene-tone="dark"] .scene-settings-toggle { color: #c1d8d5; }
html[data-scene-tone="dark"] .scene-settings-toggle__disc { background: rgb(20 42 48 / .65); border-color: rgb(195 218 216 / .23); }
html[data-scene-tone="dark"] .scene-settings-toggle:hover .scene-settings-toggle__disc,
html[data-scene-tone="dark"] .scene-settings-toggle[aria-expanded="true"] .scene-settings-toggle__disc { background: rgb(28 56 62 / .95); }

#scene-mode-switcher {
  position: fixed;
  z-index: 43;
  top: calc(max(14px, env(safe-area-inset-top)) + 50px);
  right: max(20px, env(safe-area-inset-right));
  left: auto;
  width: min(456px, calc(100vw - 40px));
  max-height: calc(100dvh - max(14px, env(safe-area-inset-top)) - 64px - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: 17px;
  background: rgb(239 248 246 / .95);
  box-shadow: 0 12px 42px -18px rgb(8 30 35 / .4);
}
#scene-mode-switcher[hidden] { display: none !important; }
html[data-scene-tone="dark"] #scene-mode-switcher { background: rgb(17 36 43 / .97); }
#scene-mode-switcher .scene-weather-info { display: block; }
#scene-mode-switcher .scene-weather-status { white-space: normal; }
.scene-settings-credit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  margin: 6px 5px 0;
  padding-top: 7px;
  border-top: 1px solid rgb(91 125 128 / .18);
  color: var(--ink-2);
  font: 400 9px/1.4 var(--sans);
}
.scene-settings-credit a { color: inherit; text-underline-offset: 2px; }
.scene-settings-credit a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.scene-settings-credit span { opacity: .75; }

@media (min-width: 761px) and (max-width: 1100px) {
  /* Restore a normal logo/header gap formerly reserved for the weather panel. */
  .hero { padding-top: 124px; }
  .tyne-hero-logo { width: calc(100% - 110px); }
}
@media (max-width: 760px) {
  .mobile-topbar {
    height: calc(108px + env(safe-area-inset-top));
    padding: calc(20px + env(safe-area-inset-top)) 68px 12px 24px;
    gap: 12px;
  }
  .mobile-topbar img { width: min(205px, calc(100vw - 162px)); min-width: 0; flex: 0 1 auto; }
  .mobile-menu { flex-shrink: 0; }
  .scene-settings-toggle { top: calc(32px + env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
  #scene-mode-switcher {
    top: calc(82px + env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    width: calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right)));
    max-height: calc(100dvh - 94px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  #scene-mode-switcher .scene-mode-choice { min-height: 36px; }
  #scene-mode-switcher .scene-sky-style button { min-height: 32px; }
  #scene-mode-switcher .scene-time-preset { min-height: 36px; }
  #scene-mode-switcher .scene-time-slider { height: 32px; }
  html[data-scene-view="immersive"] .scene-settings-toggle { top: max(10px, env(safe-area-inset-top)); }
  html[data-scene-view="immersive"] #scene-mode-switcher { top: calc(max(10px, env(safe-area-inset-top)) + 50px); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-settings-toggle__disc { transition: none; }
}