.sun-compass { position:absolute; left:50%; top:50%; width:60%; max-width:360px; z-index:450; transform:translate(-50%,-50%); isolation:isolate; pointer-events:none; color:#fff; text-align:center; font:14px/1.4 system-ui,Arial,sans-serif; text-shadow:0 1px 2px #142219cc; }
.sun-compass[hidden], #map.editing-place .sun-compass, .embedded-map .sun-compass { display:none; }
.sun-compass::before { content:""; position:absolute; z-index:-1; inset:-60% -45% -75%; pointer-events:none; background:radial-gradient(ellipse 47% 42% at 50% 52%,rgba(19,31,24,.20) 0%,rgba(19,31,24,.11) 52%,transparent 100%); }
.sun-compass > svg { display:block; width:100%; overflow:visible; }
.sun-directions { fill:#e9eceb; font:500 12px system-ui,Arial,sans-serif; text-anchor:middle; stroke:none; text-shadow:none; }
.sun-marker { filter:drop-shadow(0 0 3px #ffc45c99); }
.sun-compass.is-night .sun-marker { filter:none; }
.sun-compass .sun-details { position:absolute; top:100%; left:50%; transform:translateX(-50%); width:330px; max-width:92vw; padding-top:12px; font-variant-numeric:tabular-nums; }
.sun-times { box-sizing:border-box; width:238px; max-width:100%; margin:0 auto 6px; padding:5px 7px 6px; border:1px solid #bcd9e259; border-radius:12px; background:rgba(25,45,56,.36); color:#fff; text-shadow:none; }
.sun-events { display:flex; justify-content:center; align-items:center; gap:18px; font-size:13px; font-weight:550; }
.sun-events > span { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.sun-event-icon { width:27px; height:27px; flex:none; fill:none; stroke:#ffe1a8; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.sun-event-icon .sun-event-sun { fill:#f6b656; stroke:#f6b656; }
.sun-details .sun-countdown { margin:3px 0 0; color:#f5f9fb; font-size:14px; font-weight:550; }
.sun-clock { box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr) 30px; align-items:center; gap:0; width:238px; max-width:100%; min-height:42px; margin:0 auto; padding:3px 2px; overflow:hidden; border:1px solid #ffffff52; border-radius:12px; background:rgba(22,36,28,.36); box-shadow:0 1px 5px rgba(13,24,18,.12); }
.sun-clock input, .sun-clock button { box-sizing:border-box; min-width:0; width:100%; height:34px; pointer-events:auto; color:#fff; background:transparent; border:0; border-radius:7px; padding:4px 1px; font:12px system-ui,Arial,sans-serif; color-scheme:dark; text-shadow:none; }
.sun-clock input + input { border-left:1px solid #ffffff38; border-radius:0; }
.sun-clock button { display:flex; align-items:center; justify-content:center; width:30px; margin-left:0; padding:4px; cursor:pointer; color:#ffe0a0; }
.sun-clock button svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sun-clock button .sun-reset-icon { display:none; }
.sun-clock button.is-virtual .sun-now-icon { display:none; }
.sun-clock button.is-virtual .sun-reset-icon { display:block; }
.sun-clock button:hover { background:rgba(255,255,255,.12); }
.sun-clock :focus-visible { outline:2px solid #ffd36c; outline-offset:2px; }
.user-location-button.sun-toggle[aria-pressed="true"], .user-location-button.sun-toggle[aria-pressed="true"]:hover { background:#ffd36c; color:#503306; }
@media(max-height:660px) { .sun-compass { width:min(60%, max(80px, calc(100dvh - 290px))); } .sun-compass .sun-details { padding-top:8px; } }
@media(max-width:360px) { .sun-clock input { font-size:12px; } }