/* Revision 3: anlæg, afvigelse og næste handling i samme blik. */
#app{--bg:#10232d;--card:#1b333e;--ink:#f0eee5;--muted:#a8bec3}
.main{container-type:inline-size}
#content{min-width:0}
.v3-overview{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.8rem;min-width:0}
.v3-overview>*{min-width:0}
.v3-overview .card{animation-duration:.4s}
.operating-summary{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding:.4rem .8rem 1rem}
.operating-stat{padding-left:2.6rem;border-left:1px solid #3b515a}
.operating-stat:first-child{border:0;padding-left:0}
.operating-stat>span{display:block;color:#b0c7c8;font-size:1.15rem}
.operating-stat b{display:block;font-size:3.2rem;font-weight:500;letter-spacing:-.1rem;line-height:1.25;margin:.45rem 0}
.operating-stat b small{font-size:1.25rem;font-weight:400;letter-spacing:0;color:#adc3c4;margin-left:.4rem}
.operating-stat>small{font-size:1.08rem;color:#9bb6bb;display:flex;align-items:center;gap:.6rem}
.operating-stat>small.warning{color:#e9c995}
.operating-stat .status-dot{width:.55rem;height:.55rem}
.site-hero{grid-column:span 7;height:43rem;padding:0;overflow:hidden;background:#647d7d;position:relative;isolation:isolate}
.site-hero>img{width:100%;height:100%;object-fit:cover;object-position:center 64%;display:block}
.site-hero:after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0a1f2920 0%,transparent 44%,#0b202947 67%,#0b2029eb 100%);pointer-events:none}
.site-hero .site-top,.site-hero .site-caption{position:absolute;z-index:1;left:2.6rem;right:2.6rem;display:flex;justify-content:space-between;gap:1.5rem}
.site-top{top:2.4rem;align-items:start}
.site-top .chip{background:#112a32dc;color:#e8eee4;padding:.8rem 1.2rem;font-size:1.12rem;backdrop-filter:blur(12px)}
.site-top .illustration-label{padding:.7rem 1rem;border-radius:2rem;color:#18373b;background:#edf1e5dc;font-size:1rem;backdrop-filter:blur(8px)}
.site-caption{bottom:2.5rem;align-items:end}
.site-caption small{color:#cbded7;font-size:1.1rem;display:block;margin-bottom:.5rem}
.site-hero .site-caption h2{font-size:3.3rem;font-weight:500;letter-spacing:-.1rem;line-height:1.15}
.site-caption p{font-size:1.15rem;color:#c0d2d0;margin:.7rem 0 0}
.site-caption .btn{background:#e7ecdfed;color:#193940;white-space:nowrap;min-height:4.4rem;font-size:1.15rem;flex:none}
.v3-alarm{grid-column:span 5;height:43rem;padding:2.2rem 2.6rem;display:flex;flex-direction:column;background:linear-gradient(145deg,#30464a,#243d45);border:1px solid #6e736143}
.v3-alarm .card-head{margin:0;flex-wrap:wrap;gap:.6rem}
.v3-alarm .card-head h2{font-size:1.7rem}
.v3-alarm .chip{font-size:1rem;background:#665b40;color:#f1d5a4}
.v3-alarm .sensor-line{margin-top:.7rem;padding:0;font-size:1.08rem;color:#b5c9c7}
.v3-alarm .alarm-measure{margin:1rem 0 .5rem}
.v3-alarm .big{font-size:6.1rem;letter-spacing:-.3rem;color:#f3e7cc}
.v3-alarm .alarm-delta{font-size:1.2rem;color:#e7cc9f;text-align:right}
.v3-alarm .alarm-delta small{font-size:1.05rem;color:#b2c7c5}
.v3-alarm .technical-trend{width:100%;height:11rem;min-height:0;flex:none;margin:.5rem 0 .7rem;overflow:visible}
.v3-alarm .technical-trend text{font-size:14px}
.v3-alarm .technical-trend .limit-label{font-size:13px}
.v3-alarm .next-decision{margin:.4rem 0 1rem;align-items:center}
.v3-alarm .next-decision b{font-size:1.18rem;font-weight:500}
.v3-alarm .next-decision p{font-size:1.05rem;line-height:1.45;max-width:35rem}
.v3-alarm .avatar{width:3.4rem;height:3.4rem;background:#4b6263}
.v3-alarm>.btn.sand,.v3-alarm>.btn.primary{width:100%;margin-top:auto;min-height:4.4rem;font-size:1.2rem}
.v3-alarm>.btn.text{align-self:center;min-height:3.3rem;padding:.5rem 0 0;margin:0;font-size:1.08rem}
.v3-network{grid-column:span 5;padding:2.3rem 2.4rem;min-height:28rem}
.v3-network .card-head{margin:0 0 1.2rem;align-items:baseline}
.v3-network .card-head .btn{padding:0;min-height:3rem;font-size:1.06rem;white-space:nowrap}
.station-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.station-summary{display:block;min-width:0;min-height:7.6rem;background:#25434c;border:1px solid transparent;border-radius:1.5rem;text-align:left;padding:1rem 1.2rem;position:relative;transition:background .2s}
.station-summary:hover{background:#32555e}
.station-summary.warn{background:#4a4b3e;border-color:#9f8b5a65}
.station-summary>small{font-size:.96rem;color:#a9c1c2;display:block;margin-bottom:.3rem}
.station-summary>b{font-size:1.22rem;font-weight:500;display:block;white-space:nowrap}
.station-summary>span{font-size:1.06rem;color:#9fc9bd;display:block;margin-top:.45rem}
.station-summary.warn>span{color:#ebce96}
.network-summary-note{font-size:1.05rem;color:#a5bcbf;display:flex;align-items:center;gap:.7rem;margin:1.4rem 0 0}
.v3-next{grid-column:span 4;padding:2.3rem 2.4rem}
.v3-next .card-head{margin-bottom:1rem}
.v3-next .decision-line{padding:1.1rem 0;gap:1rem}
.v3-next .decision-line time{font-size:1.18rem;min-width:4.3rem}
.v3-next .decision-line b{font-size:1.15rem;font-weight:500}
.v3-next .decision-line small{font-size:1.02rem;line-height:1.45}
.v3-next .decision-line .chip{font-size:.9rem;padding:.4rem .7rem}
.v3-next .btn.text{font-size:1.08rem;min-height:3.5rem;padding:.7rem 0 0}
.v3-balance{grid-column:span 3;background:#c6dcd2;color:#1d3c40;padding:2rem 2.4rem}
.v3-balance .card-head{margin:0}
.v3-balance .card-head h2{font-size:1.65rem}
.balance-main{display:flex;align-items:baseline;gap:.6rem;margin:1.2rem 0 .5rem}
.balance-main b{font-size:4.2rem;font-weight:500;letter-spacing:-.2rem;line-height:1.1}
.balance-main span{font-size:1.2rem;color:#4b6e70}
.v3-balance>p{font-size:1.08rem;color:#4c6d6d;margin:.4rem 0 1.2rem}
.balance-bar{display:flex;height:.65rem;gap:.4rem;margin:.8rem 0 1.2rem}
.balance-bar span{flex:178;background:#2e6a66;border-radius:1rem}
.balance-bar span+span{flex:24;background:#789b87}
.v3-balance .balance-row{font-size:1.12rem;margin:1rem 0}
.v3-balance .balance-row span{color:#4c6a6a;display:flex;gap:.6rem;align-items:center}
.balance-dot{width:.6rem;height:.6rem;background:#2e6a66;display:inline-block;border-radius:50%}
.balance-dot.reserve{background:#789b87}
.v3-balance .balance-proof{border-color:#8cab9e;color:#3b6260;font-size:1.08rem;margin-top:1.3rem;padding-top:1.1rem}
.v3-balance .btn.text{color:#1f514d;font-size:1.08rem;min-height:3.5rem;padding:.8rem 0 0}
.network-dialog .network-v2{max-height:58rem}
.asset-photo-strip{height:19rem;border-radius:1.8rem;overflow:hidden;margin:1.5rem 0;position:relative;background:#566f73}
.asset-photo-strip img{width:100%;height:100%;object-fit:cover;object-position:center 54%;display:block}
.asset-photo-strip span{position:absolute;right:1.3rem;bottom:1.3rem;font-size:1rem;color:#e4ede3;background:#142e36d9;padding:.5rem .9rem;border-radius:2rem}
/* Layoutet følger arbejdsfladens plads, også når desktop er bredt og lavt. */
@container(max-width:1030px){
 .site-hero{grid-column:span 6}.v3-alarm{grid-column:span 6}
 .site-caption{flex-wrap:wrap}.site-caption .btn{min-height:44px}
 .v3-network{grid-column:span 7}.v3-next{grid-column:span 5}.v3-balance{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr 1fr;column-gap:3rem;align-items:center;min-height:0}
 .v3-balance .balance-main{grid-row:2}.v3-balance>p{grid-row:3}.v3-balance .balance-bar{grid-column:2/4;grid-row:1}
 .v3-balance .balance-proof{grid-column:2;grid-row:3}.v3-balance>.btn{grid-column:3;grid-row:3}
 .operating-stat{padding-left:1.8rem}.operating-stat b{font-size:2.9rem}
}
@container(max-width:740px){
 .site-hero{grid-column:1/-1;height:34rem}.v3-alarm{grid-column:1/-1;height:auto;min-height:42rem}
 .v3-network{grid-column:1/-1}.v3-next{grid-column:span 7}.v3-balance{grid-column:span 5;display:block}
 .v3-alarm .technical-trend{height:15rem}.operating-summary{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
 .operating-stat:nth-child(3){border:0;padding-left:0}
}
@media(max-width:820px){
 .v3-overview{grid-template-columns:minmax(0,1fr);gap:1.5rem}
 .operating-summary{grid-column:1;padding:0 .5rem 1rem;gap:1.8rem 1rem;order:0}
 .operating-stat{padding-left:1.5rem}.operating-stat>span{font-size:1.18rem}.operating-stat>small{font-size:1.07rem}.operating-stat b{font-size:3.1rem}
 .v3-overview>.card{grid-column:1}.site-hero{order:2;height:31rem}.v3-alarm{order:1;min-height:44rem;padding:2.2rem;height:auto}
 .v3-alarm .card-head h2{font-size:1.7rem}.v3-alarm .big{font-size:5.8rem}.v3-alarm .technical-trend{height:12.5rem}
 .v3-alarm .next-decision{margin:1rem 0 1.6rem}.v3-alarm .next-decision b{font-size:1.25rem}.v3-alarm .next-decision p{font-size:1.15rem}
 .v3-alarm>.btn.sand,.v3-alarm>.btn.primary,.v3-alarm>.btn.text{min-height:44px}.v3-alarm>.btn.text{font-size:1.15rem}
 .site-caption{left:2rem;right:2rem;bottom:2rem;gap:1.5rem}.site-caption h2{font-size:2.8rem}.site-caption .btn{min-height:44px}.site-top{left:2rem;right:2rem}
 .v3-network{order:3;padding:2.2rem}.v3-network .card-head .btn{min-height:44px;font-size:1.12rem}
 .station-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.station-summary{padding:1.5rem;min-height:9rem}.station-summary>b{font-size:1.35rem}.station-summary>small,.station-summary>span{font-size:1.15rem}
 .v3-next{order:4}.v3-next .decision-line b{font-size:1.23rem}.v3-next .decision-line small{font-size:1.12rem}.v3-next .btn.text{min-height:44px;font-size:1.18rem}
 .v3-balance{order:5;display:block}.v3-balance .balance-row{font-size:1.3rem}.v3-balance>p,.v3-balance .balance-proof{font-size:1.2rem}.v3-balance .btn.text{min-height:44px;font-size:1.18rem}
 .asset-photo-strip{height:17rem}
}
/* Demoen er en fast desktopflade, selv når den filmes i en smal ramme. */
.ph-frame .site-hero{grid-column:span 7}.ph-frame .v3-alarm{grid-column:span 5}

/* Vigtigste opgave først. Teksten må ikke blive miniature på lave skærme. */
.v3-overview{gap:1.4rem}
.site-hero{order:0;height:auto;min-height:43rem}
.site-hero>img{position:absolute;inset:0}
.v3-alarm{order:1;height:auto;min-height:43rem}
.operating-summary{order:2;padding-top:1rem}
.v3-network{order:3}.v3-next{order:4}.v3-balance{order:5}
.nav-i{font-size:max(12px,1.3rem)}
.topbar p{font-size:max(12px,1.12rem)}
.search{font-size:max(12px,1.15rem)}
.operating-stat>span,.operating-stat>small{font-size:max(12px,1.1rem)}
.operating-stat b small{font-size:max(12px,1.25rem)}
.v3-overview .card-head h2{font-size:max(16px,1.65rem)}
.site-top .chip,.site-top .illustration-label,.site-caption small,.site-caption p{font-size:max(12px,1.1rem)}
.site-hero .site-caption h2{font-size:max(27px,3.3rem)}
.site-caption .btn{font-size:max(13px,1.2rem);min-height:44px}
.v3-alarm .sensor-line,.v3-alarm .chip,.v3-alarm .alarm-delta small{font-size:max(12px,1.08rem)}
.v3-alarm .alarm-delta{font-size:max(12px,1.2rem)}
.v3-alarm .technical-trend{height:11.5rem;min-height:110px}
.v3-alarm .technical-trend text{font-size:19px}
.v3-alarm .technical-trend .limit-label{font-size:18px}
.v3-alarm .next-decision b{font-size:max(13px,1.18rem)}
.v3-alarm .next-decision p{font-size:max(12px,1.05rem)}
.v3-alarm>.btn.sand,.v3-alarm>.btn.primary{font-size:max(14px,1.2rem);min-height:44px}
.v3-alarm>.btn.text{font-size:max(12px,1.08rem);min-height:36px}
.station-summary>small,.station-summary>span,.network-summary-note{font-size:max(12px,1.06rem)}
.station-summary>b{font-size:max(13px,1.22rem)}
.v3-network .card-head .btn{font-size:max(12px,1.06rem)}
.v3-next .decision-line time,.v3-next .decision-line small,.v3-next .decision-line .chip{font-size:max(12px,1.02rem)}
.v3-next .decision-line b{font-size:max(13px,1.15rem)}
.v3-balance>p,.v3-balance .balance-row,.v3-balance .balance-proof,.balance-main span,.v3-next .btn.text,.v3-balance .btn.text{font-size:max(12px,1.08rem)}
.asset-photo-strip span{font-size:max(12px,1rem)}
@container(max-width:1030px){.v3-next .decision-line{flex-wrap:wrap}.v3-next .decision-line .chip{margin-left:5.3rem}.site-caption{flex-wrap:wrap}}
@media(max-width:820px){
 .v3-alarm{order:0;min-height:0}.operating-summary{order:1;padding:1.2rem .5rem}.site-hero{order:2;height:34rem;min-height:34rem}
 .v3-network{order:3}.v3-next{order:4}.v3-balance{order:5}
 .v3-alarm .card-head{align-items:start}.v3-alarm .card-head h2{font-size:16px;max-width:18rem}
 .v3-alarm .sensor-line{flex-wrap:wrap;gap:.2rem 1rem}.v3-alarm .next-decision{margin:1rem 0 1.6rem}
 .v3-alarm>.btn.text{min-height:44px}
 .v3-next .decision-line{flex-wrap:wrap}.v3-next .decision-line .chip{margin-left:5.3rem}
}

/* På brede arbejdsflader deler anlægsfoto og nøgletal samme venstre kolonne. */
.site-hero{grid-column:1/span 7;grid-row:1;min-height:31rem}
.operating-summary{grid-column:1/span 7;grid-row:2;gap:1.2rem;padding:.6rem .5rem}
.operating-stat{padding-left:1.3rem}
.v3-alarm{grid-column:8/span 5;grid-row:1/span 2}
@container(max-width:1030px){
 .site-hero{grid-column:span 6;grid-row:auto;min-height:40rem}
 .v3-alarm{grid-column:span 6;grid-row:auto}
 .operating-summary{grid-column:1/-1;grid-row:auto;gap:2rem;padding:1rem .5rem}
}
@container(max-width:740px){
 .site-hero,.v3-alarm{grid-column:1/-1;grid-row:auto}.site-hero{min-height:34rem}
}
@media(max-width:820px){
 .v3-alarm,.site-hero,.operating-summary{grid-column:1;grid-row:auto}
 .site-hero{min-height:34rem}.operating-summary{gap:1.8rem 1rem;padding:1.2rem .5rem}
}