/* Grid Stress styles (was inline in index.html). */
/* Layout: control-room console. Live flow diagram is the hero; stats strip above, 24h history below. Deliberately dark single theme. */
:root {
  color-scheme: dark;
  --bg: #080c12;
  --panel: #0e141c;
  --line: #1c2633;
  --fg: #e6edf5;
  --muted: #7d8a9a;
  --accent: #7fe0ff;
  --sea: #0a1018;
  --land: #141c27;
  --land-gb: #182a3a;
  --warn: #ffb020;
  --danger: #ff5d6c;

  --gas: #ff8a3d;
  --coal: #8c7b6b;
  --oil: #c9563c;
  --peaker: #e2453c;
  --wind: #4fd1c5;
  --solar: #ffd23f;
  --hydro: #3b8cff;
  --nuclear: #b48cff;
  --biomass: #7bd36a;
  --other: #a4adb8;
  --imports: #ff6fae;
  --storage: #2ee6a6;

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.5 var(--f-body);
  padding-inline: 16px;
  padding-block: 0 48px;
}
.wrap { max-width: 1280px; margin: 0 auto; display: grid; gap: 20px; }

header.top {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 24px;
  padding-block: 28px 4px;
}
h1 {
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(30px, 5vw, 52px); line-height: 1; margin: 0; text-wrap: balance;
}
h1 span { color: var(--accent); }
.about-link { color: var(--accent); white-space: nowrap; }
.sub { color: var(--muted); margin: 6px 0 0; font-size: 14px; }
.live {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px var(--f-mono); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
}
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--storage); box-shadow: 0 0 10px var(--storage); animation: pulse 2s infinite; }
.live.err i { background: var(--oil); box-shadow: 0 0 10px var(--oil); }
@keyframes pulse { 50% { opacity: .35; } }

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden;
}
.stat { padding: 14px 18px; border-left: 1px solid var(--line); min-width: 0; }
.stat:first-child { border-left: 0; }
.stat .k { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.stat .v { font: 500 clamp(20px, 2.4vw, 28px)/1.2 var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .v small { font-size: .55em; color: var(--muted); margin-left: 2px; }
.stat .d { font: 12px var(--f-mono); color: var(--muted); }

.mixbar { display: grid; gap: 8px; }
.mixbar .bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: var(--line); }
.mixbar .bar div { transition: flex-grow .8s ease; min-width: 0; }
.mixbar .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); }
.mixbar .legend b { color: var(--fg); font: 500 13px var(--f-mono); margin-left: 4px; }
.sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; }
.panel h2 {
  font: 600 13px var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 0 0 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.panel h2 em { font: 400 12px var(--f-mono); text-transform: none; letter-spacing: 0; font-style: normal; }

#flowBox { position: relative; width: 100%; height: clamp(520px, 62vw, 720px); }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tip {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(8, 12, 18, .94); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 10px; font: 12px var(--f-mono); white-space: nowrap; transform: translate(12px, -50%);
}
.tip b { font-family: var(--f-body); font-weight: 600; display: block; font-size: 13px; }

.grid2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; }
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--muted); font: 11px var(--f-mono); }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .cross { stroke: var(--fg); stroke-opacity: .5; stroke-dasharray: 3 3; }

table.src { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.src th { text-align: left; font: 600 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.src th.n, .src td.n { text-align: right; }
.src td { padding: 5px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.src td.n { font-family: var(--f-mono); font-size: 13px; }
.src tr.grp td { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-top: 14px; border-bottom: 0; }
.src .exp { color: var(--muted); font-size: 11px; margin-left: 4px; }
.src .meter { height: 4px; background: var(--line); border-radius: 4px; margin-top: 4px; }
.src .meter div { height: 100%; border-radius: 4px; }
.tablewrap { overflow-x: auto; }

footer { color: var(--muted); font-size: 12px; line-height: 1.6; }
footer a { color: var(--accent); }

.tabs-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tabs-row > em { font: 400 12px var(--f-mono); color: var(--muted); font-style: normal; }
.tabs { flex-wrap: wrap; display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.tabs button {
  font: 600 12px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { background: var(--line); color: var(--fg); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mapgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.mapbox { position: relative; width: 100%; max-width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.mapbox svg { display: block; width: 100%; height: 100%; }
.land { fill: var(--land); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.land.gb { fill: var(--land-gb); stroke: var(--accent); stroke-opacity: .35; }
.cable-base { fill: none; stroke: var(--line); stroke-linecap: round; }
.cable-flow { fill: none; stroke-linecap: round; stroke-dasharray: 0.1 15; animation: flowdash linear infinite; }
.cable-flow.in { stroke: var(--imports); filter: drop-shadow(0 0 4px var(--imports)); }
.cable-flow.out { stroke: var(--accent); filter: drop-shadow(0 0 4px var(--accent)); animation-direction: reverse; }
.cable-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; cursor: help; }
.landing { fill: var(--fg); fill-opacity: .7; }
@keyframes flowdash { to { stroke-dashoffset: -30.2; } }
#mapLabels { position: absolute; inset: 0; pointer-events: none; }
.maplabel { position: absolute; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; font: 500 12px var(--f-mono); text-shadow: 0 0 6px var(--bg), 0 0 3px var(--bg); }
.maplabel b { display: block; font: 600 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); }
.maplabel.gb b { color: var(--accent); }
.in { color: var(--imports); } .out { color: var(--accent); } .idle { color: var(--muted); }

.mapside { display: grid; gap: 14px; min-width: 0; }
.mapsum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 10px; }
.mapsum > div { padding: 10px 12px; display: grid; font: 500 16px var(--f-mono); font-variant-numeric: tabular-nums; border-left: 1px solid var(--line); }
.mapsum > div:first-child { border-left: 0; }
.mapsum .k { font: 600 10px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#cableList { list-style: none; margin: 0; padding: 0; }
#cableList li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#cableList .cn { font-weight: 500; min-width: 0; }
#cableList .cn small, #cableList .cv small { display: block; font: 11px var(--f-mono); color: var(--muted); }
#cableList .cv { font: 500 15px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
#cableList .util { grid-column: 1 / -1; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
#cableList .util div { height: 100%; border-radius: 4px; }
#cableList .util .in { background: var(--imports); } #cableList .util .out { background: var(--accent); }
.maplegend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--muted); }
.maplegend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

.hdr-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.emn-pill { font: 600 12px var(--f-mono); color: var(--bg); background: var(--warn); border-radius: 999px; padding: 6px 12px; text-decoration: none; }
.emn-pill:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.tabs .badge { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: 1px; box-shadow: 0 0 8px var(--warn); }
.emn-status { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); }
.emn-status > i { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--muted); }
.emn-status.ok > i { background: var(--storage); box-shadow: 0 0 10px var(--storage); }
.emn-status.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.emn-status.warn > i { background: var(--warn); box-shadow: 0 0 12px var(--warn); animation: pulse 1.6s infinite; }
.emn-status b { display: block; font: 600 16px var(--f-body); }
.emn-status span { font: 12px var(--f-mono); color: var(--muted); }
.emn-note { color: var(--muted); font-size: 13px; max-width: 72ch; margin: 12px 0 20px; }
.emn-cal { display: grid; gap: 8px; }
.emn-cal-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.emn-cal-head span { font: 12px var(--f-mono); color: var(--muted); }
.calwrap { overflow-x: auto; }
.calwrap svg { display: block; min-width: 640px; width: 100%; height: auto; }
.calwrap text { fill: var(--muted); font: 9px var(--f-mono); }
.calwrap rect.none { fill: var(--line); }
.calwrap rect.emn { fill: var(--warn); }
.calwrap rect.today { stroke: var(--fg); stroke-width: 1.5; }
.maplegend i.sq, .sq { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sq.emn { background: var(--warn); } .sq.none { background: var(--line); }
.sub-h { font: 600 13px var(--f-body); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 28px 0 6px; }
.emn-list, .other-list, .ep-log { list-style: none; margin: 0; padding: 0; }
.emn-ep { border-top: 1px solid var(--line); padding-block: 12px; }
.ep-head { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) auto; gap: 16px; align-items: center; }
.ep-date b { display: block; }
.ep-date span { font: 12px var(--f-mono); color: var(--muted); }
.ep-date small { font-size: 11px; }
.ep-steps { display: flex; align-items: flex-end; gap: 6px; min-width: 0; overflow-x: auto; }
.step { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 44px; min-width: 40px; }
.step i { width: 100%; max-width: 34px; background: var(--warn); opacity: .85; border-radius: 3px 3px 0 0; }
.step em { font: 10px var(--f-mono); color: var(--muted); font-style: normal; margin-top: 3px; }
.step.end em { color: var(--storage); }
.ep-pill { font: 600 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ep-pill.cancelled { color: var(--storage); border-color: color-mix(in srgb, var(--storage) 40%, transparent); }
.ep-pill.active, .ep-pill.upcoming { color: var(--bg); background: var(--warn); border-color: var(--warn); }
#emnView details summary, #stressView details summary { cursor: pointer; color: var(--muted); font-size: 13px; margin-top: 8px; }
#emnView details summary:hover, #stressView details summary:hover { color: var(--fg); }
#emnView summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ep-log li { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line); }
.ep-log .lh b { display: block; font-size: 13px; }
.ep-log .lh span { font: 12px var(--f-mono); color: var(--muted); }
#emnView pre, #stressView pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--f-mono); color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto; }
.other-list li { border-top: 1px solid var(--line); padding-block: 8px; }
.other-list summary { margin: 0; }
#emnView .other-list summary { color: var(--fg); margin: 0; }
.other-list time { font: 12px var(--f-mono); color: var(--muted); margin-right: 8px; }
@media (max-width: 640px) {
  .ep-head { grid-template-columns: minmax(0, 1fr) auto; }
  .ep-steps { grid-column: 1 / -1; grid-row: 2; }
}

.stress-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
.stress-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.btn { font: 600 13px var(--f-body); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .4; cursor: default; }
.btn:focus-visible, #stressDate:focus-visible, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#stressDate { font: 500 13px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; color-scheme: dark; }
.stress-title { font: 700 18px var(--f-display); margin: 0; text-wrap: balance; }
.stress-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block: 12px; font-size: 12px; }
.chip { font: 500 12px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.chip:hover { border-color: var(--muted); }
.chip small { margin-left: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.chip.emn small { color: var(--warn); } .chip.emergency small { color: var(--danger); }
.muted { color: var(--muted); }
/* grid lines drawn by each tile (right and bottom edges), clipped at the outer border, so a short last row leaves no grey gap */
.stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.stile { padding: 10px 14px; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.stile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stile .v { font: 500 22px var(--f-mono); font-variant-numeric: tabular-nums; }
.stile .d { font: 12px var(--f-mono); color: var(--muted); }
.stile.bad .v { color: var(--danger); }
.stress-readout { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 3; background: var(--panel); border-bottom: 1px solid var(--line); padding-block: 8px; font: 12px var(--f-mono); display: flex; flex-wrap: wrap; gap: 4px 10px; min-height: 36px; align-items: center; }
.stress-readout .sep { color: var(--line); }
.badv { color: var(--danger); }
.stress-charts { display: grid; gap: 10px; transition: opacity .2s; min-height: 200px; }
.stress-charts.loading { opacity: .45; }
.schart h3 { font: 600 12px var(--f-body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.schart h3 em { font: 400 11px var(--f-mono); text-transform: none; letter-spacing: 0; font-style: normal; }
.schart .lg { font: 400 11px var(--f-body); text-transform: none; letter-spacing: 0; display: inline-flex; align-items: center; gap: 5px; }
.schart .lg i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.schart .lg i.dash { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.schart svg { display: block; width: 100%; height: auto; }
.schart text { fill: var(--muted); font: 10px var(--f-mono); }
.schart text.evn { fill: var(--bg); font: 700 10px var(--f-mono); }
.schart .gl { stroke: var(--line); }
.schart .cross { stroke: var(--fg); stroke-opacity: .6; stroke-dasharray: 3 3; }
.schart .hit { cursor: crosshair; touch-action: pan-y; }
.stress-events { list-style: none; margin: 0; padding: 0; }
.stress-events li { display: flex; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line); min-width: 0; }
.stress-events li > div { min-width: 0; flex: 1; }
.stress-events .num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-mono); color: var(--bg); background: var(--muted); }
.stress-events li.emn .num { background: var(--warn); }
.stress-events li.emergency .num { background: var(--danger); }
.stress-events b { font-weight: 500; }
.stress-events li.none { color: var(--muted); }
.bm-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.bm-head label { font: 400 12px var(--f-body); text-transform: none; letter-spacing: 0; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
#bmThreshold { font: 500 12px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color-scheme: dark; }
#bmThreshold:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bm-table td { vertical-align: top; }
.bm-table td.n0 { font: 12px var(--f-mono); white-space: nowrap; color: var(--muted); }
.unit-sub { display: block; font: 11px var(--f-mono); color: var(--muted); margin-left: 15px; }
.schart text.thr { fill: var(--warn); }
#bmMore { margin-top: 10px; }
.share-btn { font-size: 12px; padding: 4px 10px; }
.emn-ep .ep-head .share-btn { justify-self: end; }
.emn-ep.focus { box-shadow: inset 3px 0 0 var(--warn); padding-left: 12px; }
#shareDlg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--fg); }
#shareDlg::backdrop { background: rgba(4, 7, 11, .72); }
.sh-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.sh-head h3 { margin: 0; font: 600 16px var(--f-body); text-wrap: balance; }
#shareClose { flex: none; font-size: 18px; line-height: 1; padding: 4px 10px; }
.sh-img { margin-block: 12px; aspect-ratio: 1200 / 630; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--bg); }
.sh-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sh-text { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.sh-link { display: flex; gap: 8px; margin-bottom: 12px; }
#shareUrl { flex: 1; min-width: 0; font: 12px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
#shareUrl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sh-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-btns a.btn { text-decoration: none; display: inline-block; }
.sh-main { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
#shareNative { background: var(--accent); color: var(--bg); border-color: var(--accent); }
@media (max-width: 640px) {
  .emn-ep .ep-head .share-btn { grid-column: 2; grid-row: 1; }
  .emn-ep .ep-head .ep-pill { grid-column: 1; }
}
.wind-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-block: 14px 8px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.on { background: var(--line); border-color: var(--muted); }
.wind-bar label { font-size: 12px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
#windSort { font: 500 12px var(--f-mono); color: var(--fg); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color-scheme: dark; }
#windSort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wind-table td { vertical-align: middle; }
.farm-btn { font: 500 14px var(--f-body); color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.farm-btn::before { content: '▸'; display: inline-block; width: 14px; color: var(--muted); transition: transform .15s; }
.farm-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
.farm-btn:hover { color: var(--accent); }
.farm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wind-table .unit-sub { margin-left: 14px; }
.wind-table .bar-h { width: 22%; }
.lf { height: 8px; min-width: 60px; background: var(--line); border-radius: 4px; overflow: hidden; display: flex; }
.lf i { background: var(--wind); }
.lf b { background: repeating-linear-gradient(45deg, var(--warn) 0 3px, transparent 3px 6px); }
.cut { display: block; color: var(--warn); font-size: 11px; }
tr.farm.open td { background: color-mix(in srgb, var(--line) 45%, transparent); }
.farm-detail > td { padding: 10px 4px 16px; }
.wd-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.wd-head .muted { font: 11px var(--f-mono); }
.wd-head .seg { margin-left: auto; }
.wd-stats { display: flex; flex-wrap: wrap; gap: 4px 18px; font: 12px var(--f-mono); color: var(--muted); margin: 8px 0 4px; }
.wd-stats b { color: var(--fg); font-weight: 500; }
.maplegend i.dash-i { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
@media (max-width: 600px) {
  .wind-table .hide-sm, .wind-table .bar-h, .wind-table .bar-c { display: none; }
}
.show-sm { display: none; }
@media (max-width: 600px) {
  .bm-table .hide-sm { display: none; }
  .bm-table .show-sm { display: inline; }
  .unit-sub { margin-left: 0; }
}
@media (max-width: 700px) {
  .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs button { padding: 6px 10px; font-size: 11px; }
}

@media (max-width: 900px) {
  .mapgrid { grid-template-columns: minmax(0, 1fr); }
  .maplabel { font-size: 10px; } .maplabel b { font-size: 9px; }
}
@media (max-width: 600px) {
  .maplabel span, .maplabel.gb { display: none; }
  .maplabel.in b { color: var(--imports); } .maplabel.out b { color: var(--accent); } .maplabel.idle b { color: var(--muted); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:nth-child(even) { border-left: 1px solid var(--line); }
  .stat:nth-child(-n+2) { border-top: 0; }
  #flowBox { height: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  .live i { animation: none; }
  .emn-status.warn > i { animation: none; }
  .cable-flow { animation: none; stroke-dasharray: none; stroke-opacity: .7; }
  .mixbar .bar div { transition: none; }
}