/* Local sky: one day-or-night icon beside the clock, with details below the date. */
.clock-face{width:100%}
.clock-face.has-sky{display:grid;grid-template-columns:48px max-content;justify-content:center;align-items:center;gap:18px}
.local-clock .clock-face>time{width:auto;min-width:0;white-space:nowrap}
.sky-orb{display:grid;place-items:center;width:48px;height:48px;padding:7px;color:var(--gold);border:1px solid #ffffff40;border-radius:50%;background:#ffffff0b}
.sky-orb svg{display:block;width:100%;height:100%}
.sky-orb[data-solar-state="night"]{color:#bccbde;background:#ffffff06}
.sky-orb[data-solar-state="dawn"],.sky-orb[data-solar-state="dusk"]{color:#ffb68a}
.sky-moon-shadow{fill:#172539}
.sky-details{display:grid;gap:7px;width:100%;justify-items:center;margin:8px 0 0;font-size:14px;color:#f9efe2;font-variant-numeric:tabular-nums}
.sky-sun-times{display:flex;align-items:center;justify-content:center;gap:9px 18px;flex-wrap:wrap}
.sky-sun-times>span{white-space:nowrap}
.sky-sun-times time{font-weight:800;color:var(--gold)}
.sky-status{display:inline-block;padding:3px 10px;border:1px solid #ffffff35;border-radius:100px;font-size:12px;font-weight:750}
.sky-moon-details{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 14px}
.sky-moon-details>span{font-weight:700}
.sky-moon-details small{font-size:12px;color:#d4c8c9}
html[data-city="okc"] .sky-moon-details small{color:#c6d8e8}
@media(max-width:650px){
 .clock-face.has-sky{grid-template-columns:34px max-content;gap:8px}
 .local-clock .clock-face.has-sky>time{font-size:clamp(24px,7vw,38px)}
 .sky-orb{width:34px;height:34px;padding:4px}
 .sky-details{font-size:13px;margin-top:6px;gap:8px}
 .sky-sun-times{gap:6px 12px}
 .sky-moon-details{flex-direction:column;gap:3px}
 .sky-moon-details small{font-size:12px}
}
@media(max-width:350px){
 .clock-face.has-sky{grid-template-columns:29px max-content;gap:5px}
 .sky-orb{width:29px;height:29px;padding:3px}
 .local-clock .clock-face.has-sky>time{font-size:23px}
}

.local-clock .sky-sun-times time{font-size:inherit;line-height:inherit;width:auto;min-width:0}

.clock-face.has-sky>.sky-orb{grid-column:1;grid-row:1}
.clock-face.has-sky>[data-local-clock]{grid-column:2;grid-row:1}