/* Compass + "Zon" (sun / time of day) tools, top-left (web/compass.js,
   web/suncontrol.js; moved from bottom-left on 2026-10-19 - clear of the
   Mapbox logo and the phones' bottom sheet). Same card look as the Licht
   control and the reveal sidebar. */
#map-tools { position: absolute; left: 10px; top: 12px; z-index: 2;
             display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#map-tools .tool-round { width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
                         display: grid; place-items: center; cursor: pointer; color: #2b2b2b;
                         background: rgba(255, 255, 255, 0.94); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
                         transition: background 150ms ease, color 150ms ease; }
#map-tools .tool-round:hover { background: #fff; }
#map-tools .tool-round:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
#sun-toggle.is-on { background: #2b2b2b; color: #ffc34d; }
#sun-toggle.is-on:hover { background: #454545; }

#compass svg { display: block; overflow: visible; }
#compass .compass-ring { fill: none; stroke: #d6d1ca; stroke-width: 1.2; }
#compass .compass-tick { stroke: #a39a8c; stroke-width: 1.2; }
#compass .compass-north { fill: #e0402f; }
#compass .compass-south { fill: #b9b3aa; }
#compass .compass-n { font: 700 6.5px system-ui, sans-serif; fill: #e0402f; }
#compass .compass-sun circle { fill: #ffb627; stroke: #fff; stroke-width: 1.2; }

/* the popover opens to the right of the stack, top-aligned with it */
#sun-panel { position: absolute; left: 54px; top: 0; width: 300px; max-width: calc(100vw - 76px);
             box-sizing: border-box; padding: 11px 14px 12px; border-radius: 12px; color: #1f1f1f;
             background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
             font-size: 13px; line-height: 1.35; }
#sun-panel[hidden] { display: none; }
#sun-panel .sun-head { display: flex; align-items: baseline; gap: 8px; }
#sun-panel h2 { margin: 0; font-size: 14px; font-weight: 700; }
#sun-panel .sun-time { flex: 1; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
                       text-align: right; }
#sun-panel button { font: inherit; cursor: pointer; }
#sun-panel button:focus-visible, #sun-panel input:focus-visible { outline: 2px solid #2b7fff; outline-offset: 2px; }
#sun-panel .sun-off { border: 1px solid #d8d3cc; border-radius: 999px; background: #fff; color: #444;
                      font-size: 12px; padding: 3px 9px; }
#sun-panel .sun-off:hover { background: #f3efe9; }
#sun-panel .sun-desc { margin: 2px 0 8px; color: #3a3a3a; min-height: 1.35em; }
#sun-panel .sun-seasons { display: flex; gap: 3px; margin: 0 0 8px; }
#sun-panel .sun-season { flex: 1 1 auto; font-size: 12px; padding: 4px 4px; border-radius: 999px;
                         border: 1px solid #d8d3cc; background: #fff; color: #2b2b2b; white-space: nowrap; }
#sun-panel .sun-season:hover { background: #f3efe9; }
#sun-panel .sun-season[aria-pressed="true"] { background: #2b2b2b; border-color: #2b2b2b; color: #fff; }
#sun-panel .sun-slider { width: 100%; margin: 0; height: 22px; background: transparent;
                         -webkit-appearance: none; appearance: none; cursor: pointer; }
#sun-panel .sun-slider::-webkit-slider-runnable-track { height: 8px; border-radius: 999px;
  background: var(--sun-track, #ffe6a3); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#sun-panel .sun-slider::-moz-range-track { height: 8px; border-radius: 999px;
  background: var(--sun-track, #ffe6a3); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
#sun-panel .sun-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -6px;
  border-radius: 50%; background: #ffb627; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
#sun-panel .sun-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #ffb627;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
#sun-panel .sun-times { margin: 4px 0 8px; font-size: 11px; color: #6b6b6b; font-variant-numeric: tabular-nums; }
#sun-panel .sun-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#sun-panel .sun-row .sun-times { flex: 1; margin: 0; }
#sun-panel .sun-now { border: none; border-radius: 8px; padding: 5px 14px; background: #2b2b2b; color: #fff;
                      font-weight: 600; }
#sun-panel .sun-now:hover { background: #454545; }

@media (prefers-reduced-motion: reduce) {
  #map-tools { transition: none; }
}

/* The disclaimer before first use (web/disclaimer.js): a centred card over a
   dimmed map; the map can't be used until it's acknowledged. */
.disclaimer-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center;
  justify-content: center; padding: 16px; background: rgba(20, 20, 20, 0.45); }
.disclaimer-overlay.is-hidden { display: none; }
.disclaimer { max-width: 420px; padding: 20px 22px 18px; border-radius: 14px; background: #fff; color: #1f1f1f;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); font-size: 14px; line-height: 1.5; }
.disclaimer h2 { margin: 0 0 8px; font-size: 17px; }
.disclaimer p { margin: 0 0 16px; }
.disclaimer button { display: block; margin-left: auto; padding: 8px 16px; border: 0; border-radius: 999px;
  background: #1f1f1f; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.disclaimer button:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 2px; }
.disclaimer-ctrl button { padding: 1px 6px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, 0.75);
  color: #333; font: inherit; font-size: 11px; line-height: 16px; cursor: pointer; }
.disclaimer-ctrl button:hover { text-decoration: underline; }