/* v0.2: wide control room, compact fallback; scene design unchanged. */
main{max-width:none;width:100%;padding:16px clamp(14px,1.5vw,58px) 12px}
.version-label{font-size:11px;white-space:nowrap;color:var(--accent);margin-left:10px}
.workspace{grid-template-areas:"city controls" "situation situation"}
.city-panel{grid-area:city;min-width:0}
.control-panel{grid-area:controls;min-width:0}
.situation-panel{grid-area:situation;display:grid;grid-template-columns:minmax(300px,1fr) 1fr;gap:16px;min-width:0}
.balance-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;min-width:0}
.balance-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.balance-pair span{display:block;color:var(--muted);font-size:12px}
.balance-pair strong{display:block;font-size:clamp(22px,1.5vw,36px);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:4px}
.difference-line{margin-top:18px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.difference-line span{font-size:12px;color:var(--muted)}
.difference-line strong{font-size:23px;white-space:nowrap;font-variant-numeric:tabular-nums}
.surplus{color:var(--green)}.needs-grid{color:var(--accent)}
.balance-explainer{font-size:12px;color:var(--muted);margin-top:12px}
.flow-list{margin:16px 0}.flow-list>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #35464e70}.flow-list>div[hidden]{display:none}
.flow-list dt{color:var(--muted)}.flow-list dd{margin:0;font-weight:650;white-space:nowrap;font-variant-numeric:tabular-nums}
.export-note{display:grid;grid-template-columns:1fr auto;gap:5px 12px;padding-top:6px;align-items:center}.export-note>span{font-size:12px;color:var(--muted)}.export-note strong{color:var(--green);font-size:20px}.export-note small{grid-column:1/-1;color:var(--muted);font-size:11px}
.situation-panel .messages{display:block;margin:0;padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-width:0;align-self:start}
.situation-panel .messages h2{padding:0;margin:0 0 14px;font-size:16px}
.situation-panel #messages{display:flex;flex-direction:column;gap:10px;width:100%}
.situation-panel #messages button{width:100%;text-align:left;line-height:1.5;font-size:13px;padding:12px;white-space:normal}
.situation-panel #messages button:first-child{border-left:3px solid var(--accent)}
.situation-panel #messages p{color:var(--muted);font-size:13px;line-height:1.6}
#money-detail{margin-top:4px;font-size:11px;line-height:1.5}
.benchmark-panel{margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.benchmark-panel[hidden]{display:none}.benchmark-panel h3{font-size:20px;margin-bottom:10px}
#benchmark-context{color:var(--muted);font-size:13px}
#benchmark-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}
#benchmark-values strong{display:block;font-size:26px;color:var(--accent);font-variant-numeric:tabular-nums}
#benchmark-values span{display:block;font-size:12px;color:var(--muted)}
#benchmark-gap{font-weight:650}#benchmark-notes{padding-left:20px;line-height:1.7;color:var(--muted)}
.benchmark-panel details{border-top:1px solid var(--line);padding-top:14px;margin-top:18px}
.benchmark-panel summary{cursor:pointer;color:var(--accent);font-weight:650;padding:6px 0}
#benchmark-cheapest{margin-top:12px;max-width:900px}
#result-values{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1800px){
 .workspace{grid-template-columns:clamp(300px,16vw,540px) minmax(0,1fr) clamp(320px,18vw,560px);grid-template-areas:"situation city controls";gap:clamp(18px,1vw,38px)}
 .situation-panel{display:flex;flex-direction:column;gap:18px}
 .situation-panel>section{width:100%}
 .balance-pair{grid-template-columns:1fr;gap:16px}
 .balance-pair>div{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:5px 10px}
 .balance-pair span{font-size:14px}.balance-pair strong{font-size:clamp(26px,1.2vw,42px)}
 #scene .ss-canvas{max-height:calc(100vh - 620px);min-height:390px}
 .control-heading{gap:12px}.control-row{padding:15px 12px}
 .situation-panel #messages{max-height:43vh;overflow-y:auto}
}
#forecast{height:145px}
@media(min-width:2400px){
 #forecast{height:180px}#scene .ss-canvas{max-height:calc(100vh - 830px)}
 body{font-size:18px}.control-panel .muted,.grid-toggle,#demand-values{font-size:16px}.topbar{padding:22px 1.5vw}.topbar button{font-size:16px}h1{font-size:40px}h2{font-size:22px}
 .daybar{margin-bottom:20px}.day-label{font-size:13px}.day-label select{font-size:18px;max-width:460px}.clock strong{font-size:40px}.clock span{font-size:16px}
 .metrics{gap:22px;margin-bottom:24px}.metrics article{padding:18px 22px}.metrics article>span{font-size:14px}.metrics article>strong{font-size:34px}.metrics article>small,#money-detail{font-size:14px}
 .balance-panel,.situation-panel .messages{padding:24px}.balance-pair span,.difference-line span,.balance-explainer,.export-note>span{font-size:16px}.difference-line strong{font-size:30px}
 .situation-panel .messages h2{font-size:22px}.situation-panel #messages button,.situation-panel #messages p{font-size:17px}
 .flow-list>div{padding:10px 0}.export-note strong{font-size:27px}.export-note small{font-size:14px}
 .control-heading label,.control-heading h3,.control-heading output{font-size:19px}.control-row small,.control-intro{font-size:15px}.control-row input[type=range]{height:32px}
 .city-caption h2{font-size:26px}.city-caption p,.city-footer,.forecast-panel p,.demand-panel p{font-size:15px}.legend{font-size:14px}
}
@media(max-width:1099px){
 .workspace{grid-template-columns:1fr;grid-template-areas:"city" "situation" "controls"}
 .situation-panel{grid-template-columns:1fr 1fr}
}
@media(max-width:650px){
 .metrics{grid-template-columns:1fr 1fr}.metrics article:first-child{grid-column:1/-1}.metrics article:first-child strong{font-size:22px;overflow-wrap:normal}.metrics article:first-child small{font-size:11px}
 .situation-panel{grid-template-columns:1fr}.balance-panel,.situation-panel .messages{padding:16px}
 .balance-pair strong{font-size:24px}.difference-line strong{font-size:22px}
 #benchmark-values,#result-values{grid-template-columns:1fr 1fr;gap:14px}#benchmark-values strong{font-size:22px}
 .benchmark-panel{padding:16px}.benchmark-panel h3{font-size:18px}#money-detail{font-size:10px}
}