/* v0.3 — layout only. Load after v02.css; audio/dialogs belong to sound.css. */
main{padding-top:10px}
.topbar{padding-top:10px;padding-bottom:10px;gap:20px}
.daybar{margin-bottom:10px;gap:16px;flex-wrap:wrap}
.metrics{margin-bottom:12px;gap:12px}
.metrics article{padding:10px 16px}
.metrics article>strong{font-size:clamp(22px,1.1vw,32px);line-height:1.2;margin:3px 0}
.metrics article>small{line-height:1.35}
#money-detail{margin-top:2px}
.city-caption{padding:12px 18px}
.city-footer{gap:8px;flex-wrap:wrap}
.control-panel,.balance-panel,.situation-panel .messages{align-self:start}
.control-row{padding:10px 8px}
.control-heading{flex-wrap:wrap;gap:4px 8px}
.control-heading output{white-space:nowrap}
@media(min-width:1800px){
 .workspace{grid-template-columns:clamp(280px,12vw,390px) minmax(0,1fr) clamp(320px,13vw,430px);gap:18px}
 .city-panel{display:flex;flex-direction:column;height:calc(100dvh - 285px);min-height:680px}
 #scene{flex:1;min-height:0;display:flex}
 #scene .strom-scene{height:100%;border-radius:0}
 #scene .ss-canvas{height:100%;min-height:0;max-height:none}
 .city-caption,.city-footer,.forecast-panel{flex:none}
 .balance-panel,.situation-panel .messages{padding:16px}
 .balance-pair{margin-top:14px;gap:10px}
 .balance-pair strong{font-size:clamp(24px,1vw,34px)}
 .difference-line{margin-top:12px;padding:10px 0}
 .flow-list{margin:10px 0}
 .situation-panel{gap:14px}
 .situation-panel #messages{max-height:34vh}
}
@media(min-width:2400px){
 .topbar{padding-top:12px;padding-bottom:12px}
 h1{font-size:34px}
 .daybar{margin-bottom:12px}
 .clock strong{font-size:36px}
 .metrics article{padding:10px 18px}
 .metrics article>strong{font-size:30px}
 .city-panel{height:calc(100dvh - 360px)}
 .city-caption h2{font-size:24px}
 .control-heading label,.control-heading h3,.control-heading output{font-size:17px}
 .control-row small,.control-intro{font-size:14px}
 .control-row{padding:11px 8px}
 .balance-pair span,.difference-line span,.balance-explainer,.export-note>span{font-size:15px}
 .difference-line strong{font-size:27px}
 .situation-panel #messages button,.situation-panel #messages p{font-size:15px}
}
@media(max-width:1799px){#scene .ss-canvas{height:auto;min-height:0;max-height:none;aspect-ratio:5/3}}
@media(max-width:650px){
 main{padding:10px}
 .topbar{gap:12px;padding:12px}
 .daybar{gap:10px}
 .metrics{gap:8px;margin-bottom:10px}
 .metrics article{padding:9px 10px}
 .metrics article>strong{font-size:22px}
 .city-caption{padding:12px}
 .city-footer{padding:8px 12px}
 .transport{flex-wrap:wrap}
}