/* Responsive layout: a clear sky, fixed action areas, and scrollable detail tools. */
.scene-top{z-index:8;align-items:flex-start}
.scene-actions{flex:none;align-items:center}.scene-actions>*{flex:none;white-space:nowrap;min-height:44px}
.sky-scene-exit{margin-right:0}.sky-scene-exit span{white-space:nowrap}
.scene-menu-button{background:#132238ed;border-color:#cbb07570;font-size:13px;line-height:1.25}
.mode-tabs{min-width:0}.mode-tabs button{flex:none}
.phone-sky .scene-menu-button{display:none}
body:not(.phone-sky):not(.voyager-active)>#sky-mobile-menu-toggle{display:none}
/* A menu entry must not disappear merely because the viewing area is compact. */
.phone-sky [data-mobile-action="graph"],.phone-sky [data-mobile-action="events"],.phone-sky [data-mobile-mode="shot"]{display:block}
.phone-sky #mobile-voyager-details :is(.voyager-telemetry,.voyager-caption,#voyager-provenance){display:block}
#sky-mobile-menu .layout-menu-section{margin-top:18px;border:1px solid #adc4de33;border-radius:8px;padding:12px;min-width:0}
.layout-menu-section>summary{cursor:pointer;font-size:16px;line-height:1.5;min-height:44px;align-content:center;color:#ead6a8}
.layout-menu-section>summary.bilingual-label::after{font-size:11px}
#sky-mobile-menu .layout-menu-section :is(#map-palette,#map-relocation,#shot-ui,#sky-star-ui,#solar-voyager,.expedition-bar,.expedition-title,#tour-navigation,.map-views,.time-panel,.return-controls){position:static;inset:auto;width:100%;max-width:none;max-height:none;min-width:0;margin:12px 0 0;pointer-events:auto;overflow:visible}
#sky-mobile-menu .layout-menu-section :is(#shot-ui,#sky-star-ui,#solar-voyager,#tour-navigation,.time-panel):not([hidden]){display:block!important}
#sky-mobile-menu .layout-menu-section .time-panel{padding:0;border:0;background:none}
#sky-mobile-menu .layout-menu-section .time-header,#sky-mobile-menu .layout-menu-section .date-row{flex-wrap:wrap}
#sky-mobile-menu .layout-menu-section .time-header time{font-size:22px}
#sky-mobile-menu .layout-menu-section .playback{flex-wrap:wrap;gap:12px}
#sky-mobile-menu .layout-menu-section .slider-wrap{min-width:150px}
#sky-mobile-menu .layout-menu-section .return-controls{display:flex;flex-wrap:wrap;padding:0;border:0}
#sky-mobile-menu .layout-menu-section .return-controls label:first-child{width:100%}
#sky-mobile-menu .layout-menu-section input:not([type=checkbox]):not([type=range]),#sky-mobile-menu .layout-menu-section select{max-width:100%;min-width:0;font-size:16px}
#sky-mobile-menu .layout-menu-section button{min-height:44px;font-size:14px;white-space:normal}
#sky-mobile-menu .layout-menu-section #map-planets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#sky-mobile-menu .layout-menu-section .map-line-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#sky-mobile-menu .layout-menu-section #map-message{display:block;grid-column:1/-1;line-height:1.6}
#sky-mobile-menu .layout-menu-section #map-mini-chart{max-height:220px}
#sky-mobile-menu .layout-menu-section #map-close-place{position:static;float:right}
#sky-mobile-menu .layout-menu-section .expedition-title h2{font-size:28px;margin:0}
#sky-mobile-menu .layout-menu-section .tour-navigation svg{max-height:160px}
#sky-mobile-menu .layout-menu-section #sky-star-ui label{display:flex;gap:8px;align-items:center;min-height:44px}
#sky-mobile-menu .layout-menu-section #shot-ui>div{display:flex;flex-wrap:wrap;gap:8px}
#sky-mobile-menu .layout-menu-section #shot-ui label{font-size:14px;line-height:1.6}
#sky-mobile-menu .layout-menu-section #shot-ui p{font-size:12px;line-height:1.6}
#sky-mobile-menu .layout-menu-section :is(#triple-control,#sightline-control){display:flex;align-items:center;gap:10px;min-height:44px}
#sky-mobile-menu #mobile-voyager-details .voyager-playback{padding:10px;box-sizing:border-box}
#sky-mobile-menu #mobile-voyager-details select{max-width:100%}
#sky-mobile-menu #mobile-voyager-details #voyager-provenance{font-size:12px;line-height:1.6}
dialog{overscroll-behavior:contain;scrollbar-width:thin;overflow-wrap:break-word}
.calendar-controls{flex-wrap:wrap}.calendar-controls input{min-width:0}
.birth-section .form-grid>*{min-width:0}.unknowns,.form-bottom{flex-wrap:wrap}
footer{gap:12px;flex-wrap:wrap}
/* Desktop: reserve a real central viewing area between the two information columns. */
@media(min-width:901px){
 body:not(.phone-sky) .observatory:not(.clock-view):not(.voyager-view){height:clamp(440px,calc(100svh - 96px),980px)}
 body:not(.phone-sky) .observatory:not(.clock-view):not(.voyager-view):not(.launching) #viewport{top:var(--layout-top,100px);bottom:var(--layout-bottom,110px);left:23%;right:20%;overflow:hidden}
 body:not(.phone-sky) .observatory:not(.clock-view) .scene-title{top:var(--layout-top,100px);left:3.2%;max-width:21%}
 body:not(.phone-sky) .scene-title h1{font-size:clamp(24px,2.2vw,36px);letter-spacing:.12em}
 body:not(.phone-sky) .scene-title #scene-subtitle{overflow-wrap:anywhere;line-height:1.8}
 body:not(.phone-sky) .observatory:not(.clock-view) #scene-clock{top:var(--layout-top,100px);right:3.2%;pointer-events:none}
 body:not(.phone-sky) .selection{top:calc(var(--layout-top,100px) + 92px);bottom:var(--layout-bottom,110px);height:max-content;max-height:calc(100% - var(--layout-top,100px) - var(--layout-bottom,110px) - 92px);overflow:auto;width:17%;right:3.2%;padding:12px}
 body:not(.phone-sky) .selection .focus-name{flex-wrap:wrap;gap:8px}
 body:not(.phone-sky) .selection .focus-sign{white-space:normal;line-height:1.6}
 body:not(.phone-sky) .observatory:not(.clock-view):not(.voyager-view) .scene-bottom{bottom:40px;align-items:flex-end}
 body:not(.phone-sky) .scene-tools{max-width:75%}
 body:not(.phone-sky) .gesture-hint{max-width:22%;line-height:1.6}
 body:not(.phone-sky) .scene-caption{bottom:20px;font-size:9px;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body:not(.phone-sky) .observatory.map-view:not(.clock-view) #map-ui{padding-top:var(--layout-top,100px);padding-bottom:var(--layout-bottom,110px)}
 body:not(.phone-sky) .map-view #map-palette{width:min(100%,275px);max-width:25vw}
 body:not(.phone-sky) .map-view #map-planets{grid-template-columns:repeat(4,minmax(0,1fr))}
 body:not(.phone-sky) .map-view .map-line-types{grid-template-columns:repeat(2,minmax(0,1fr))}
 body:not(.phone-sky) .map-view #map-relocation{top:calc(var(--layout-top,100px) + 86px);max-height:calc(100% - var(--layout-top,100px) - var(--layout-bottom,110px) - 86px);overflow:auto}
 body:not(.phone-sky) .observatory:not(.clock-view) .expedition-bar{top:var(--layout-top,100px);right:24%}
 body:not(.phone-sky) .observatory:not(.clock-view) .expedition-title{top:calc(var(--layout-top,100px) + 74px);max-width:20%;max-height:calc(100% - var(--layout-top,100px) - var(--layout-bottom,110px) - 74px);overflow:auto}
 body:not(.phone-sky) .observatory:not(.clock-view) #tour-navigation{right:3%;width:17%;bottom:var(--layout-bottom,110px)}
 body:not(.phone-sky) .observatory:not(.clock-view) #sky-star-ui{top:var(--layout-top,100px);left:3%;max-width:20%}
 body:not(.phone-sky) #sky-star-ui label{display:flex;align-items:center;gap:6px;min-height:44px}
 body:not(.phone-sky) .observatory:not(.clock-view) #shot-ui{top:var(--layout-top,100px);max-height:calc(100% - var(--layout-top,100px) - var(--layout-bottom,110px));overflow:auto}
 body:not(.phone-sky) .observatory:not(.clock-view) #solar-voyager{top:calc(var(--layout-top,100px) + 220px);max-width:20%;max-height:calc(100% - var(--layout-top,100px) - var(--layout-bottom,110px) - 220px);overflow:auto}
}
/* Tablet portrait uses the uncluttered sky with live values and all tools in the menu. */
@media(min-width:601px) and (max-width:900px){
 .phone-sky .readout-grid{grid-template-columns:repeat(10,minmax(0,1fr))}
 .phone-sky .observatory:not(.clock-view) .mobile-view-header{right:140px}
 .phone-sky .observatory:not(.clock-view):not(.voyager-view) #viewport{overflow:hidden}
 .phone-sky .observatory.voyager-view{height:100svh;min-height:0}
 .phone-sky .voyager-toolbar{right:70px}.phone-sky .voyager-title{max-width:64%}
 .phone-sky .voyager-date-block{top:calc(var(--voyager-toolbar-bottom,72px) + 10px);max-width:25%}
 .phone-sky .voyager-locator{top:auto;bottom:calc(var(--mobile-footer-height,104px) + 8px);left:14px;right:auto;width:132px;height:142px}
 .phone-sky .observatory.has-readouts .sky-readouts[data-mode=voyager]{padding-left:142px;min-height:150px}
}
/* Very short displays: use side columns instead of reducing the sky to a strip. */
@media(min-width:481px) and (max-height:500px){
 .phone-sky .observatory:not(.clock-view):not(.voyager-view):not(.launching) #viewport{left:190px;right:190px;top:20px;bottom:92px}
 .phone-sky .observatory:not(.clock-view):not(.voyager-view) .mobile-view-header{left:14px;right:auto;width:168px;max-height:calc(100% - 104px);overflow:auto;pointer-events:auto}
 #mobile-view-title{white-space:normal;font-size:18px}#mobile-view-object{font-size:17px}
 .phone-sky .observatory:not(.clock-view) .scene-top{top:16px;right:16px}
 .phone-sky .observatory.has-readouts:not(.clock-view):not(.launching) .sky-readouts{top:76px;bottom:94px;left:auto;right:14px;width:166px;overflow:auto}
 .phone-sky .readout-heading{flex-wrap:wrap}.phone-sky .readout-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .phone-sky .readout-name{font-size:9px}.phone-sky .readout-number{font-size:10px}
 .phone-sky #mobile-view-actions{width:auto!important;max-width:none!important;right:calc((100% - 44px)/3 + 22px)!important}
 .phone-sky #sky-mobile-menu-toggle{width:calc((100% - 44px)/3)}
 .phone-sky .observatory.voyager-view.has-readouts:not(.clock-view):not(.launching) #viewport{left:220px;right:180px;top:18px;bottom:94px}
 .phone-sky .voyager-view .voyager-toolbar{left:14px;right:auto;width:196px;max-width:none;flex-wrap:wrap}
 .phone-sky .voyager-view .voyager-toolbar button{padding:6px;font-size:12px}.phone-sky .voyager-view .voyager-toolbar select{font-size:12px}
 .phone-sky .voyager-view .voyager-title{left:14px;right:auto;max-width:196px;top:calc(var(--voyager-toolbar-bottom,72px) + 8px)}
 .phone-sky .voyager-view .voyager-title h2{font-size:18px;line-height:1.3}
 .phone-sky .voyager-view .voyager-title>p:last-child,.phone-sky .voyager-view .voyager-title .eyebrow{display:none}
 .phone-sky .voyager-view .voyager-date-block{top:var(--layout-voyager-title,156px);left:14px;right:auto;text-align:left;max-width:196px}
 .phone-sky .voyager-view .voyager-date-block strong{font-size:28px}.phone-sky .voyager-view .voyager-date-block time{font-size:10px}
 .phone-sky .voyager-locator{top:74px;right:14px;left:auto;bottom:auto;width:150px;height:104px!important;padding:0}
 .phone-sky .voyager-locator svg{height:82px;flex:none}
 .phone-sky .observatory.has-readouts:not(.clock-view):not(.launching) .sky-readouts[data-mode=voyager]{top:182px;bottom:94px;padding:0;width:166px;min-height:0}
 .phone-sky .sky-readouts[data-mode=voyager] .readout-grid{grid-template-columns:1fr!important}
 .phone-sky .sky-readouts[data-mode=voyager] .readout-cell{display:flex}
 .phone-sky .sky-readouts[data-mode=voyager] .readout-heading>span{display:none}
}
/* Clock landscape: time and presets on the left, a large sky on the right. */
@media(min-width:481px) and (max-height:500px){
 .observatory.clock-view #clock-stage-controls{left:18px;right:auto;top:20px;width:220px;max-width:none;display:block}
 .clock-stage-brand>span{font-size:28px}.clock-stage-brand>p{display:none}
 #clock-stage-controls>label{margin-top:8px}#clock-scene-select{min-height:40px;font-size:14px}
 .observatory.clock-view .scene-top{top:18px;right:16px;left:auto}
 .clock-view .scene-menu-button,.clock-view .sky-scene-exit{display:none}
 .observatory.clock-view .scene-clock{left:18px;top:150px;right:auto;bottom:auto;padding:0;gap:10px}
 .observatory.clock-view .scene-clock svg{width:36px;height:36px}
 .observatory.clock-view .scene-clock #clock-time{font-size:38px}.observatory.clock-view .scene-clock #clock-date{font-size:12px}
 .observatory.clock-view #viewport{left:260px;right:10px;top:78px;bottom:94px}
 .observatory.clock-view #clock-daily{left:18px;right:auto;top:224px;bottom:94px;width:220px;max-height:none;overflow:auto}
 .clock-view .clock-daily-location{display:none}.clock-view .clock-daily-grid{display:block}
 .clock-view .clock-daily-grid article{margin-bottom:6px}
 .observatory.clock-view #clock-stage-settings{display:none}
 .observatory.clock-view #clock-mobile-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:absolute;left:14px;right:14px;bottom:28px;gap:8px;z-index:8}
 .clock-view #clock-mobile-actions button{min-height:50px;background:#102032;font-size:13px;padding:5px}
}
@media(max-width:360px){
 .clock-view .sky-scene-exit,.clock-view .scene-menu-button{display:none}
 .clock-view #clock-stage-controls .clock-stage-brand>span{font-size:25px}
 .phone-sky #mobile-view-title{font-size:16px;white-space:normal}
 #sky-mobile-menu{padding:14px}.mobile-menu-grid{gap:7px}.mobile-menu-grid button{font-size:14px;padding:8px 5px}
}

#clock-mobile-settings #clock-stage-settings{position:static;display:grid;grid-template-columns:1fr;gap:12px;margin:10px 0 0}
#clock-mobile-settings #clock-stage-settings>*{min-width:0;margin:0;font-size:14px;line-height:1.5}
#clock-mobile-settings #clock-stage-settings>button,#clock-mobile-settings #clock-stage-settings>label{min-height:44px;padding:8px}

@media(min-width:601px){.phone-sky .clock-view .scene-menu-button{display:block}.clock-view #clock-stage-controls{max-width:calc(100% - var(--layout-actions-width,180px) - 175px)}}
@media(min-width:481px) and (max-height:500px){.phone-sky .clock-view .scene-menu-button{display:none}.clock-view #clock-stage-controls{max-width:none}}

.desk-clock #sky-mobile-menu-toggle{display:none}
@media(min-width:901px){
 body:not(.phone-sky) .observatory:not(.clock-view) .scene-title:has(.entry-context){right:auto;max-width:21%}
 body:not(.phone-sky) .scene-title>p#scene-subtitle[data-no-i18n],body:not(.phone-sky) .scene-title h1.entry-context{white-space:normal;overflow:visible;max-width:100%;overflow-wrap:anywhere}
 body:not(.phone-sky) .observatory:not(.clock-view):not(.voyager-view):not(.launching) #viewport{mask-image:linear-gradient(to bottom,transparent,#000 28px,#000 calc(100% - 28px),transparent),linear-gradient(to right,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-composite:intersect}
}

.voyager-view .voyager-toolbar{right:calc(var(--layout-actions-width,52px) + 3.2%)}
@media(min-width:481px) and (max-height:500px){.phone-sky .voyager-view .voyager-toolbar{right:auto}}
@media(max-width:600px){
 .clock-view #clock-stage-controls>label{font-size:0;gap:0;margin-top:max(12px,calc(var(--layout-top,76px) - 48px))}
 .clock-view #clock-stage-controls>label.bilingual-label::after{display:none}
 .clock-view #clock-scene-select{font-size:calc(14px * var(--sky-text-scale,1));min-height:44px}
 .clock-view #clock-mobile-actions button{font-size:calc(12px * var(--sky-text-scale,1));padding:6px 2px;line-height:1.3}
 .clock-view #clock-mobile-actions button.bilingual-label::after{font-size:calc(9px * var(--sky-text-scale,1));line-height:1.25}
 .clock-view #clock-daily{max-height:25dvh}
 .clock-view #clock-daily-tabs button{font-size:calc(12px * var(--sky-text-scale,1));min-height:40px;line-height:1.2}
 .clock-view #clock-daily-tabs button.bilingual-label::after{font-size:calc(9px * var(--sky-text-scale,1));line-height:1.2}
 .clock-view .clock-daily-location>span{font-size:calc(11px * var(--sky-text-scale,1))}
 .clock-view .clock-daily-location>small{font-size:10px}
}
@media(max-width:600px) and (max-height:650px){
 .clock-view #clock-daily{max-height:24dvh}
 .clock-view #clock-daily .clock-daily-location{display:none}
 .clock-view .scene-clock #clock-time{font-size:calc(32px * var(--sky-text-scale,1))}
}

@media(max-width:420px){#sky-mobile-menu .layout-menu-section #map-planets{grid-template-columns:repeat(2,minmax(0,1fr))}}

.observatory:fullscreen{height:100dvh!important;min-height:0!important}
#sky-mobile-menu .language-control{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:14px;margin:12px 0 0}
#sky-mobile-menu .language-control select{width:auto;max-width:100%;font-size:16px;min-height:44px}

@media(max-width:600px) and (max-height:650px){
 #clock-daily .clock-daily-grid>article{padding:6px 10px;gap:5px}
 #clock-daily .clock-daily-grid p.bilingual-label::after{display:none}
}