/* Clock-only composition: a readable time and a larger sky, fitted to the space
   remaining after controls/calendar. Normal astronomy views keep their layout. */
.desk-clock main>.data-section{display:none}
#clock-planet-labels{position:absolute;inset:0;pointer-events:none;z-index:3}
#clock-planet-labels>svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
#clock-planet-labels path{fill:none;stroke:#b4cde08c;stroke-width:.7}
#clock-planet-labels .clock-planet-label{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;gap:3px;height:26px;min-height:26px;max-height:26px;padding:0 3px;border:0;border-radius:5px;background:radial-gradient(ellipse,#061322c9,transparent);color:#e5edf5;white-space:nowrap;pointer-events:auto;line-height:1;text-shadow:0 1px 5px #000,0 0 4px #000}
#clock-planet-labels .clock-planet-symbol{font:18px/1 'Segoe UI Symbol','Noto Sans Symbols',serif;color:#f5d89f}
#clock-planet-labels .clock-planet-name{font:11px/1.2 'Yu Gothic',system-ui,sans-serif}
#clock-planet-labels .clock-planet-label:hover{background:#1c334ce8}
.observatory.clock-view #clock-mode-toggle{display:inline-flex;align-items:center;justify-content:center;height:44px;min-height:44px;max-height:44px;padding:0 12px;font-size:clamp(14px,calc(14px * var(--sky-text-scale,1)),18px);line-height:1.1}
.observatory.clock-view #clock-mode-toggle.bilingual-label::after{display:none}
.observatory.clock-view .scene-clock{max-width:calc(100% - 32px);gap:12px}
.observatory.clock-view .scene-clock>div{min-width:0;max-width:100%}
.observatory.clock-view .scene-clock #clock-time{font-size:calc(clamp(66px,7vw,92px) * var(--sky-text-scale,1));line-height:1.04;letter-spacing:-.035em;font-variant-numeric:tabular-nums;white-space:nowrap;color:#f5e8ca;text-shadow:0 2px 22px #d4b47a20}
.observatory.clock-view .scene-clock #clock-date{font-size:calc(18px * var(--sky-text-scale,1));line-height:1.3;letter-spacing:.09em;margin:0 0 4px;color:#d0deea}
.observatory.clock-view .scene-clock #clock-linked{display:none}
.observatory.clock-view #clock-daily{max-height:19dvh}
.observatory.clock-view #viewport{mask-image:linear-gradient(to bottom,transparent,#000 10px,#000 calc(100% - 10px),transparent),linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 10px),transparent)}
/* Portrait phone/tablet: use the full width; measure the larger clock above. */
@media(orientation:portrait){
 .observatory.clock-view #clock-stage-controls .clock-stage-brand>p{display:none}
 .observatory.clock-view #clock-stage-controls>label{font-size:0;gap:0}
 .observatory.clock-view #clock-stage-controls>label.bilingual-label::after{display:none}
 .observatory.clock-view #viewport{left:0;right:0;top:calc(var(--clock-readout-bottom,205px) + 2px);bottom:calc(var(--daily-bottom,88px) + var(--daily-height,160px) + 2px)}
 .observatory.clock-view .scene-clock{top:calc(var(--clock-controls-bottom,100px) + 6px);left:4%;right:4%;bottom:auto;flex-direction:row;align-items:center}
 .observatory.clock-view .scene-clock>svg{width:54px;height:54px;flex:none}
 .observatory.clock-view .scene-clock #clock-state,.observatory.clock-view .scene-clock #clock-weekday,.observatory.clock-view .scene-clock .clock-zone{display:none}
 .observatory.clock-view #clock-daily{max-height:17dvh}
}
@media(max-width:600px) and (orientation:portrait){
 .observatory.clock-view #clock-stage-controls>label{margin-top:12px}
 .observatory.clock-view .scene-clock{left:18px;right:14px;gap:10px}
 .observatory.clock-view .scene-clock>svg{width:36px;height:36px}
 .observatory.clock-view .scene-clock #clock-time{font-size:min(calc(clamp(50px,16vw,66px) * var(--sky-text-scale,1)),calc((100vw - 92px)/3.8))}
 .observatory.clock-view .scene-clock #clock-date{font-size:calc(15px * var(--sky-text-scale,1));letter-spacing:.06em}
 .observatory.clock-view #clock-daily{max-height:18dvh}
 .observatory.clock-view #clock-daily .clock-daily-location{display:none}
 .observatory.clock-view #clock-daily-tabs{padding-top:0}
 .observatory.clock-view #clock-daily .clock-daily-grid>article{min-height:88px;padding:8px 10px;gap:5px}
}
/* Landscape: time left, sky right, so enlarging the time cannot squeeze height. */
@media(orientation:landscape) and (min-width:601px){
 .observatory.clock-view .scene-clock{left:3%;top:calc(var(--clock-controls-bottom,105px) + 20px);right:auto;bottom:auto;width:29%;max-width:29%;flex-direction:column;align-items:flex-start}
 .observatory.clock-view .scene-clock #clock-time{font-size:min(calc(clamp(54px,7vw,92px) * var(--sky-text-scale,1)),7.3vw)}
 .observatory.clock-view #viewport{left:32%;right:1%;top:82px;bottom:calc(var(--daily-bottom,78px) + var(--daily-height,145px) + 8px)}
 .observatory.clock-view #clock-daily{max-height:18dvh}
}
@media(orientation:landscape) and (max-height:500px){
 .observatory.clock-view #clock-stage-controls{left:18px;top:18px;width:26%;max-width:none}
 .observatory.clock-view .scene-clock{left:18px;top:calc(var(--clock-controls-bottom,110px) + 10px);width:28%;max-width:28%;gap:4px}
 .observatory.clock-view .scene-clock>svg,.observatory.clock-view .scene-clock #clock-state,.observatory.clock-view .scene-clock #clock-weekday,.observatory.clock-view .scene-clock .clock-zone{display:none}
 .observatory.clock-view .scene-clock #clock-time{font-size:min(calc(54px * var(--sky-text-scale,1)),7.2vw)}
 .observatory.clock-view .scene-clock #clock-date{font-size:14px}
 .observatory.clock-view #viewport{left:32%;right:1%;top:70px;bottom:78px}
 .observatory.clock-view #clock-daily{left:18px;top:calc(var(--clock-readout-bottom,192px) + 12px);right:auto;bottom:88px;width:28%;max-height:none}
}