/* Compass + "Zon" (sun / time of day) tools, bottom-left above the Mapbox
   logo (web/compass.js, web/suncontrol.js). Same card look as the Licht
   control and the reveal sidebar. On narrow screens the stack rides above
   the reveal bottom sheet (--sheet-h, set in web/app.js). */
#map-tools { position: absolute; left: 10px; bottom: calc(36px + var(--sheet-h, 0px)); z-index: 2;
             display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
             transition: bottom 420ms cubic-bezier(0.2, 0.8, 0.2, 1); }
#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, bottom-aligned with it */
#sun-panel { position: absolute; left: 54px; bottom: 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-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; }
}