/* Selected direction B. Reference A remains retained, unchanged. */
html,body{background:#080c0f;color:#f5f7f8}
.shell{padding:4px;max-width:1400px}
header{min-height:28px;justify-content:flex-end}.brand{display:none}
#logout{border:0;border-radius:0;padding:6px 8px;font-size:11px;color:#87959c;min-height:28px}
.candidate{position:absolute;top:12px;margin:0 0 0 8px;font-size:8px;letter-spacing:.1em;color:#7e8c94}
#display .topline{display:none}
.power{grid-area:2/1}.range{grid-area:1/2}
.readings{gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
article,.power.is-active{background:none;border:0;border-radius:0;padding:2px;overflow:hidden;align-items:center;justify-content:center}
.instrument{gap:7px}
.instrument>h2{order:0;font-size:9px;line-height:13px;letter-spacing:.12em;color:#8d9ca6}
.instrument>.value{order:1}.instrument>.age{order:2}
.soc{--number-size:min(82cqw,58cqh,330px);--number-height:min(89cqw,62cqh,350px)}
.power{--number-size:min(48cqw,48cqh,250px);--number-height:min(56cqw,55cqh,280px)}
.range{--number-size:min(50cqw,48cqh,250px);--number-height:min(58cqw,55cqh,280px)}
.thermal{--number-size:min(72cqw,30cqh,180px);--number-height:min(77cqw,32cqh,192px)}
.value{display:flex;align-items:baseline;justify-content:center;font-weight:650;letter-spacing:-.075em;padding-top:calc((var(--number-height) - var(--number-size))/2)}
.soc .value,.power.is-active .value,.thermal .value,.range .value{color:#f5f7f8}
.power .value{color:#54616a}.power h2,.power.is-active h2{color:#8d9ca6}
.unit,.thermal .unit{align-self:baseline;font-size:18px;letter-spacing:0;line-height:1;padding:0;margin-left:3px;color:#a4b0b6}
.age{font-size:10px;color:#83919a;line-height:14px;min-height:28px}
.age.is-stale,.age:has(.is-stale){color:#d5ae7e}
.thermal .instrument{gap:8px}.thermal .instrument>h2{order:0}
.extrema{order:1;gap:12px}.extrema>div{gap:4px}.extrema .age{min-height:14px}
@media(max-height:650px){.instrument{gap:4px}.extrema{gap:8px}.thermal .instrument{gap:5px}}
@media(orientation:landscape) and (max-height:600px){.shell{padding:2px 8px}.candidate{top:10px}.instrument{gap:2px}.unit,.thermal .unit{font-size:13px}.extrema{gap:3px}.extrema>div{gap:0}.thermal .instrument{gap:2px}.age{font-size:9px;line-height:11px;min-height:11px}.extrema .age{min-height:11px}.instrument>h2{font-size:8px;line-height:10px}}
/* Physical viewport orientation only; the same four DOM instruments and state. */
@media(orientation:landscape){
 .readings{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
 .soc{grid-area:1/1}.range{grid-area:1/2}.power{grid-area:1/3}.thermal{grid-area:1/4}
}