/* Time V2 is isolated from the original page, including all interaction styles. */
.beta-badge{
color:var(--accent);
letter-spacing:.06em;
margin-left:.65rem;
white-space:nowrap}
.map-frame{
cursor:grab;
touch-action:none;
user-select:none;
background:#0d2939}
.map-frame.dragging{
cursor:grabbing}
.map-frame:focus-visible{
outline:2px solid var(--accent);
outline-offset:3px}
#world-stage{
position:absolute;
top:0;
left:0;
transform-origin:0 0;
background:#173d52;
will-change:transform;
pointer-events:none}
#world-stage #sun-marker{
display:none}
#places-layer{
overflow:hidden;
pointer-events:none}
.capital-name{
font-family:Arial,sans-serif;
font-weight:500;
fill:#f3f5ed;
paint-order:stroke;
stroke:#0b2331;
stroke-width:3px;
stroke-linejoin:round}
.capital-dot{
fill:#d3e6df;
stroke:#102b3b;
stroke-width:1.2}
.capital[data-kind=national] .capital-dot{
fill:#f5d49a;
stroke:#654f26}
.capital-night .capital-dot{
fill:#ffe0a0}
.capital[data-kind=regional] .capital-name{
fill:#d5e6e5}
#zoom-controls{
position:absolute;
right:.65rem;
top:.65rem;
display:flex;
flex-direction:column;
border:1px solid #65858f80;
border-radius:.4rem;
background:#081a27e8;
overflow:hidden;
cursor:default;
z-index:5}
#zoom-controls button{
font-size:1.4rem;
padding:.2rem .45rem;
border-radius:0;
min-width:2.7rem;
min-height:2.7rem}
#zoom-controls button+button{
border-top:1px solid #31505d}
#zoom-controls button:disabled{
cursor:default;
opacity:.35}
#zoom-controls button:hover{
background:#284552}
#zoom-info{
position:absolute;
left:.6rem;
bottom:.6rem;
max-width:calc(100% - 1.2rem);
font-size:.66rem;
background:#081a27e6;
color:#c4d9df;
padding:.35rem .55rem;
border-radius:.25rem;
pointer-events:none}
#cities-status{
position:absolute;
left:.7rem;
top:.7rem;
right:4.3rem;
font-size:.8rem;
color:var(--accent);
background:#081a27e6;
padding:.5rem;
cursor:default}
#cities-retry{
min-height:2rem;
padding:.2rem .5rem;
border:1px solid var(--line)}
.map-instructions{
display:flex;
justify-content:space-between;
gap:1rem;
font-size:.67rem;
line-height:1.5;
color:var(--muted);
margin-bottom:.75rem}
.map-instructions a{
white-space:nowrap;
color:var(--accent)}
.sun-label{
font-size:.73rem}
.map-area{
min-height:180px}

@media(max-width:700px){
.app{
min-height:880px}
.map-area{
min-height:300px}
.map-instructions{
font-size:.63rem;
align-items:flex-start}
.map-instructions>span{
max-width:62%}
.beta-badge{
font-size:.58rem}
.sun-label{
font-size:.65rem}
#zoom-info{
font-size:.6rem}
#zoom-controls button{
min-width:2.8rem;
min-height:2.8rem}
.capital-name{
stroke-width:2.5px}
}

@media(min-width:3000px){
.capital-name{
stroke-width:7px}
.capital-dot{
stroke-width:3px}
}

.city-popup{
position:absolute;
z-index:10;
width:23rem;
max-width:calc(100% - 12px);
box-sizing:border-box;
padding:1rem;
background:#091d2bf5;
border:1px solid #bda16b;
border-radius:.55rem;
box-shadow:0 .6rem 2rem #0006;
color:#edf2ee;
cursor:default;
font-size:.9rem;
user-select:text;
touch-action:pan-y}
.city-popup strong{
display:block;
font-size:1.1rem;
padding-right:2rem}
.city-popup p{
font-size:.72rem;
color:#9cb6bd;
margin:.65rem 0;
overflow-wrap:anywhere}
.city-popup p:last-child{
margin-bottom:0}
.city-popup>button{
position:absolute;
right:.2rem;
top:.2rem;
min-width:44px;
min-height:44px;
padding:.2rem;
font-size:1.5rem}
.solar-event-row{
display:flex;
justify-content:space-between;
gap:1rem;
padding:.45rem 0}
.solar-event-row b{
color:#f5d49a;
font-variant-numeric:tabular-nums;
text-align:right}
.map-instructions>span{
max-width:100%}

.event-status{
display:inline;
font-size:inherit;
color:var(--muted)}

#flight-panel{
flex:none;
padding:.75rem 1rem;
background:#102a38;
border:1px solid var(--line);
border-radius:.5rem}
#flight-form{
display:flex;
gap:1rem;
align-items:flex-end}
#flight-form label{
flex:1;
min-width:0;
display:grid;
gap:.35rem;
font-size:.8rem;
color:var(--muted)}
#flight-form select{
width:100%;
min-width:0;
max-width:100%;
font:inherit;
font-size:.9rem;
background:#081a27;
color:var(--text);
border:1px solid #476371;
border-radius:.3rem;
padding:.6rem}
#flight-build{
background:#294b58;
white-space:nowrap}
#flight-result{
font-size:1rem;
color:#85e5be;
margin-top:.7rem}
#flight-panel p{
font-size:.7rem;
color:var(--muted);
margin:.5rem 0 0}
#flight-layer{
pointer-events:none}
@media(max-width:700px){
#flight-form{
flex-wrap:wrap;
gap:.6rem}
#flight-form label{
flex-basis:calc(50% - .6rem)}
#flight-build{
width:100%}
.top-actions{
max-width:100%}
.switch button{
padding-inline:.65rem}
}