/* Three equal discs; their row/column spans the available viewport. */
main{position:relative;display:block;height:100svh;min-height:600px;padding:12px;overflow:visible}
.celestial{position:absolute;width:var(--orb-size);height:var(--orb-size);margin:0;isolation:isolate;border-radius:50%;color:#fff;container-type:inline-size;background:#080b10;box-shadow:0 0 0 1px #ffffff18,0 8px 28px #0005}
.celestial canvas{width:100%;height:100%;display:block;border-radius:50%}
.sun{box-shadow:0 0 28px #ff931d30;background:radial-gradient(circle,#ffdf63,#b2490a)}
.moon{background:#262a2e}.earth{background:radial-gradient(circle at 40% 35%,#1a6190,#041320)}
.orb-center,.sun-event{position:absolute;z-index:1;left:10%;width:80%;text-align:center;text-shadow:0 2px 5px #000,0 0 14px #000;font-variant-numeric:tabular-nums}
.orb-center{top:50%;transform:translateY(-50%);font-size:clamp(18px,13cqw,50px);line-height:1.1}
.sun .orb-center{font-size:clamp(20px,20cqw,72px)}
.sun-event{display:flex;flex-direction:column;align-items:center;font:600 clamp(10px,7.5cqw,27px)/1.15 Arial,sans-serif}
.sunset{top:8%}.sunrise{bottom:8%}.event-arrow{font-size:clamp(16px,12cqw,38px);line-height:.95}
.earth-clock{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 2px #000)}
.earth-clock line{stroke:#fff;stroke-linecap:round}.earth-clock .minor{stroke-width:.7;opacity:.8}.earth-clock .major{stroke-width:1.5}
#earth-hour{stroke-width:4}#earth-minute{stroke-width:3}#earth-second{stroke:#ffbf72;stroke-width:1.2}.earth-clock circle{fill:#fff;stroke:#203246;stroke-width:1}
.instrument{position:absolute;width:var(--clock-size);height:var(--clock-size);left:50%;top:50%;transform:translate(-50%,-50%)}
.clock-frame{width:100%;max-width:none}#meridiem{width:clamp(38px,5vw,66px);top:0;left:0}
.readout{position:absolute;width:210px;padding:14px 10px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);border-radius:12px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(12px)}
.digital{font-size:clamp(26px,3vw,39px);letter-spacing:-1px}.date{font-size:20px;letter-spacing:1px;margin-top:8px}.weekday{font-size:12px;margin-top:7px}.location{font-size:11px;margin-top:12px}#source-status{font-size:10px;margin-top:4px}
.calendar-details{margin-top:15px;font:12px Arial,sans-serif}.calendar-details summary{cursor:pointer;color:var(--muted);padding:5px 0}.calendar-details .details{padding-top:12px;grid-template-columns:1fr;gap:9px}.detail{font-size:12px}
body[data-layout=landscape] main{min-height:0}
body[data-layout=landscape] .sun{left:12px;top:12px}
body[data-layout=landscape] .moon{left:12px;top:50%;transform:translateY(-50%)}
body[data-layout=landscape] .earth{left:12px;bottom:12px}
body[data-layout=landscape] .instrument{left:calc(var(--orb-size) + 30px + (100% - var(--orb-size) - min(210px,18vw) - 60px)/2)}
body[data-layout=landscape] .readout{right:12px;top:50%;transform:translateY(-50%);width:min(210px,18vw);max-height:calc(100svh - 100px);overflow:auto}
body[data-layout=portrait] main{min-height:100svh;height:auto;padding-top:calc(var(--orb-size) + 30px)}
body[data-layout=portrait] .sun{left:12px;top:12px}
body[data-layout=portrait] .moon{left:50%;top:12px;transform:translateX(-50%)}
body[data-layout=portrait] .earth{right:12px;top:12px}
body[data-layout=portrait] .instrument{position:relative;left:auto;top:auto;transform:none;margin:0 auto}
body[data-layout=portrait] .readout{position:relative;left:auto;top:auto;transform:none;margin:14px auto 12px;width:min(94%,600px);padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:0 12px;align-items:center}
body[data-layout=portrait] .digital{font-size:clamp(28px,6vw,40px)}
body[data-layout=portrait] .date{font-size:18px;margin:0;text-align:right}
body[data-layout=portrait] .weekday{grid-column:1/3;margin-top:4px}
body[data-layout=portrait] .location{grid-column:1/3;margin-top:5px}
body[data-layout=portrait] #source-status{grid-column:1/3}
body[data-layout=portrait] .calendar-details{grid-column:1/3;grid-row:6;margin-top:3px}
body[data-layout=portrait] .details{grid-template-columns:1fr 1fr 1fr;gap:9px 14px}
body[data-layout=square] .sun{left:12px;top:12px}
body[data-layout=square] .moon{left:12px;bottom:12px}
body[data-layout=square] .earth{right:12px;top:12px}
body[data-layout=square] .readout{right:12px;bottom:12px;width:var(--orb-size);max-height:var(--orb-size);overflow:auto}
body[data-layout=square] .digital{font-size:clamp(24px,3.5vw,38px)}
body[data-layout=square] .date{font-size:clamp(16px,2.3vw,22px)}
body[data-layout=square] #meridiem{left:calc(50% - 23px);top:-60px;width:46px}
#menu{right:8px;top:8px;width:36px;height:36px;background:color-mix(in srgb,var(--bg) 88%,transparent)}
.location-buttons{display:flex;flex-wrap:wrap;gap:8px}.location-buttons button{width:auto;height:auto;min-height:42px;padding:10px 12px;border-radius:4px;font:13px Arial,sans-serif}.location-buttons button[hidden]{display:none}
.credits{font:13px/1.5 Arial,sans-serif;margin-top:25px;color:var(--muted)}.credits summary{cursor:pointer}.credits p{margin:10px 0}.credits a{color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-height:500px) and (orientation:landscape){.readout .weekday,.readout .calendar-details{font-size:10px}.readout .digital{font-size:26px}.readout .date{font-size:16px}.readout .location{margin-top:6px}.readout .calendar-details{margin-top:6px}}
/* Always use four corners. Clock geometry clears discs and the actual readout. */
body[data-layout=square] main{height:100svh;min-height:0;padding:12px}
body[data-layout=square] .instrument{left:var(--clock-x);top:var(--clock-y);width:var(--clock-size);height:var(--clock-size)}
body[data-layout=square] .readout{width:var(--readout-width);max-height:none;overflow:visible;padding:12px 10px}
body[data-layout=square] .sun{left:12px;top:12px;bottom:auto}
body[data-layout=square] .moon{left:12px;bottom:12px;top:auto}
body[data-layout=square][data-night=true] .sun{top:auto;bottom:12px}
body[data-layout=square][data-night=true] .moon{top:12px;bottom:auto}
.moon-phase-reading{font:13px/1.4 Arial,sans-serif;margin-top:10px;color:var(--ink)}
body[data-layout=square] .digital{font-size:clamp(25px,3.2vw,39px)}
body[data-layout=square] .date{font-size:clamp(17px,2vw,23px)}
@media(max-width:600px){body[data-layout=square] .readout{padding:9px 8px}.moon-phase-reading{font-size:11px}.readout .weekday{font-size:11px}.readout .location{font-size:10px;margin-top:8px}.readout #source-status{font-size:10px}}
/* Digital companion disc, equal to the three celestial discs. */
body[data-layout=square] .readout{width:var(--orb-size);height:var(--orb-size);border-radius:50%;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--orb-size)*.025);container-type:inline-size;text-align:center;overflow:hidden}
body[data-layout=square] .readout>div{max-width:82%;margin:0}
body[data-layout=square] .readout .digital{font-size:17cqw;line-height:1.05;letter-spacing:-.5px}
body[data-layout=square] .readout .digital small{display:block;font:7cqw/1.1 Arial,sans-serif;margin:2cqw 0 0}
body[data-layout=square] .readout .date{font-size:10cqw;line-height:1.15;letter-spacing:.5px}
body[data-layout=square] .readout .weekday{font:7cqw/1.2 Arial,sans-serif}
body[data-layout=square] .readout .moon-phase-reading{font:7cqw/1.2 Arial,sans-serif;max-width:75%}
#menu{left:auto;right:8px;transform:none;top:8px;width:26px;height:26px;background:#333b;color:#b5b5b5;border-color:#7778}
#menu .menu-icon{width:16px;height:16px;fill:#b5b5b5}#menu:hover{background:#555d}