.local-time-line{
display:flex;
align-items:baseline;
gap:.65rem;
white-space:nowrap}
#utc-offset{
font-size:1.5rem;
font-weight:300;
color:var(--muted);
font-variant-numeric:tabular-nums}

@media(max-width:700px){
.local-clock time{
font-size:clamp(2rem,11vw,4.4rem)}
#utc-offset{
font-size:clamp(.85rem,3.5vw,1.2rem)}
.local-time-line{
gap:.45rem}
}

.city-local-clock{
display:block;
margin-top:.35rem;
font-size:.8rem;
font-weight:400;
line-height:1.5;
color:#dce6de;
font-variant-numeric:tabular-nums;
overflow-wrap:anywhere}

/* Compact city card: separate heading/clock, no explanatory footer. */
.city-popup{
width:21rem;
padding:.7rem .8rem;
font-size:.82rem}

.city-popup>strong{
font-size:1rem;
line-height:1.3;
margin-bottom:.2rem;
padding-right:2rem}

.city-popup>.city-local-clock{
display:block;
margin:0;
font-size:.76rem;
line-height:1.4;
font-weight:400}

.city-popup>p{
font-size:.67rem;
margin:.2rem 0 .4rem}

.city-popup .solar-event-row{
gap:.6rem;
padding:.3rem 0;
align-items:baseline;
line-height:1.4}

.city-popup .solar-event-row>span{
flex-shrink:0;
white-space:nowrap}

.city-popup .solar-event-row>b{
min-width:0;
font-size:.78rem;
font-weight:500}

.city-popup{
width:28rem;
padding:.8rem}
.city-comparison{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:.8rem;
padding-right:0}
.city-column{
min-width:0}
.city-popup .city-column strong{
padding:0;
font-size:1rem;
line-height:1.25;
overflow-wrap:anywhere}
.city-column>*{
display:block}
.city-zone{
font-size:.64rem;
color:var(--muted);
overflow-wrap:anywhere;
line-height:1.3;
margin:.25rem 0 .45rem}
.city-date{
font-size:.72rem;
color:#b8cbcd}
.city-clock{
font-size:1.2rem;
font-variant-numeric:tabular-nums;
margin:.15rem 0}
.city-offset{
font-size:.7rem;
color:var(--muted)}
.city-difference{
text-align:center;
border-block:1px solid #ffffff20;
padding:.4rem .1rem;
margin:.65rem 0 .2rem;
font-size:.75rem;
color:#d9c18f}
.city-event{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:.2rem .8rem;
padding:.35rem 0}
.city-event-name{
grid-column:1/-1;
font-size:.75rem;
color:#b8cbcd}
.city-event-value>*{
display:block}
.city-event-value b{
font-size:.95rem;
font-weight:500;
color:#f5d49a;
font-variant-numeric:tabular-nums}
.city-event-value small{
font-size:.65rem;
color:var(--muted);
margin-top:.1rem}
.city-column+ .city-column{
border-left:1px solid #ffffff20;
padding-left:.7rem}
.city-event-value:last-child{
border-left:1px solid #ffffff20;
padding-left:.7rem}

.city-popup .city-column:last-child strong{
padding-right:1.6rem}

.capital.overview-city .capital-dot{
fill:#f5d49a;
stroke:#654f26}
.capital.overview-city .capital-name{
fill:#f3f5ed}