/* gb wind additions; styles.css stays a verbatim copy of app-hormuz-live */

/* ---- legend swatches for farm status and the sea layers ---- */
.swatch-gen { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(186, 240, 132, 0.45); border: 1px solid rgba(186, 240, 132, 0.81); }
.swatch-onshore { display: block; width: 14px; height: 14px; border-radius: 50%; background: rgba(76, 155, 232, 0.2); border: 1.2px solid rgba(76, 155, 232, 0.77); }
.swatch-flow {
  display: block; width: 22px; height: 10px;
  background:
    linear-gradient(90deg, transparent 0 2px, rgba(241, 242, 241, 0.85) 2px 9px, transparent 9px 12px,
                    rgba(241, 242, 241, 0.55) 12px 18px, transparent 18px) 0 1px / 22px 2px no-repeat,
    linear-gradient(90deg, rgba(241, 242, 241, 0.65) 0 6px, transparent 6px 10px,
                    rgba(241, 242, 241, 0.9) 10px 19px, transparent 19px) 0 7px / 22px 2px no-repeat;
}
.swatch-energy { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--so-day); }
.swatch-cable { display: block; width: 22px; height: 0; border-top: 2.5px solid #FFB547; border-radius: 2px; }

/* ---- feed header tools (from hormuz insights.css) and upright kpi units ---- */
.hl-head-tools { display: flex; align-items: center; gap: 10px; }
.kpi .kl .u { text-transform: none; }

.filter .count.small { font-size: 11px; font-weight: 600; color: var(--panel-muted); }

/* ---- farm names: faint until zoomed in, like the hormuz port atlas ---- */
.farm-label {
  display: none;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: rgba(24, 48, 54, 0.62);
  color: var(--so-day);
  font-size: calc(10px * var(--label-grow, 1)); font-weight: 500;
  padding: 1px 6px; border-radius: 5px;
  pointer-events: none;
}
.farm-label b { font-weight: 700; color: var(--so-mint); }
.farm-label.curtailed b { color: var(--so-dear); }
.farms-named .farm-label { display: inline-block; }
body.night .farm-label { text-shadow: 0 0 6px rgba(0, 0, 0, 0.9); }

/* ---- outage feed rows ---- */
.out-item { cursor: pointer; }
.out-mw { font-variant-numeric: tabular-nums; }
.inc-badge.unplanned { border-color: var(--so-dear); color: var(--so-dear); }
.inc-badge.active { border-color: var(--so-morning); color: var(--so-morning); }

/* ---- farm popup extras ---- */
.vpop .vtier.construction { background: var(--so-morning); }
.vpop .vtier.planned { background: var(--so-dusk); color: var(--so-day); }
.vpop .bar {
  height: 6px; margin: 2px 0 8px; border-radius: 6px;
  background: var(--panel-hover); overflow: hidden;
}
.vpop .bar i { display: block; height: 100%; background: var(--so-mint); border-radius: 6px; }
.vpop .bar.cut i { background: linear-gradient(90deg, var(--so-mint), var(--so-dear)); }
.vpop td.v.ok { color: var(--so-mint); }
.vpop td.v.no { color: var(--so-dear); }

/* ---- kpi dropdown dot for a farm row ---- */
.kpidrop-dir.farm { background: rgba(96, 208, 184, 0.18); color: var(--so-mint); }
.kpidrop-dir.cut { background: rgba(255, 100, 109, 0.18); color: var(--so-dear); }

/* ---- insights page: gb power additions to the hormuz insights.css ---- */
.ins-pair { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-pair > .ins-section { margin-top: 20px; }
@media (max-width: 900px) { .ins-pair { grid-template-columns: minmax(0, 1fr); gap: 0; } }

.ins-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 12px; color: var(--ins-muted); }
.ins-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.ins-legend-item i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }

.ins-mixbar svg { display: block; width: 100%; height: 44px; border-radius: 12px; overflow: hidden; }
.ins-mixlist { display: grid; gap: 8px 24px; margin-top: 16px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ins-mixrow { display: flex; align-items: center; gap: 10px; background: var(--ins-paper); border-radius: 12px; padding: 9px 12px; }
.ins-mixrow i { flex: none; width: 12px; height: 12px; border-radius: 50%; }
.ins-mixname { flex: 1; font-size: 13px; font-weight: 500; }
.ins-mixval { font-weight: 600; color: var(--ins-deep); }
.ins-mixpct { width: 3em; text-align: right; font-size: 12px; color: var(--ins-muted); }

.ins-ic-head { display: flex; justify-content: space-around; font-size: 12px; color: var(--ins-muted); margin: 0 0 8px; padding-left: 112px; padding-right: 56px; }
.ins-ic-row { display: grid; grid-template-columns: 112px 1fr 56px; align-items: center; gap: 0; padding: 5px 0; }
.ins-ic-name { font-size: 13px; font-weight: 500; }
.ins-ic-track { position: relative; height: 14px; background: var(--ins-paper); border-radius: 7px; }
.ins-ic-track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.ins-ic-val { text-align: right; font-size: 13px; font-weight: 600; color: var(--ins-deep); }
.ins-ic-net { margin-top: 12px; font-size: 13px; color: var(--ins-muted); }
.ins-ic-net b { color: var(--ins-deep); }
.ins-explain { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--ins-muted); }

/* ---- circle key in the header badge ---- */
.cap-key { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--panel-border); }
.cap-key-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-muted); }
.cap-key-row { display: flex; gap: 14px; margin-top: 6px; }
.cap-key-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.cap-key-item svg { display: block; }
/* phone: the key folds into the header strip, without its label */
body.phone .cap-key { flex-basis: 100%; margin-top: 2px; padding-top: 0; border-top: none; }
body.phone .cap-key-label { display: none; }
body.phone .cap-key-row { margin-top: 0; }

/* ---- map layers dropdown ---- */
.layers-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 12px; border: 1px solid var(--panel-border); border-radius: 12px;
  background: var(--panel-hover); color: var(--panel-fg);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.layers-toggle:hover { background: rgba(241, 242, 241, 0.14); }
.layers-chev { transition: transform 0.15s; }
.layers-toggle[aria-expanded="true"] .layers-chev { transform: rotate(180deg); }
.layers-list { margin-top: 8px; }
.layers-list .filter .name { font-size: 12px; }

/* ---- output bars: offshore and onshore rows, each over its own capacity ---- */
#trend { height: auto; }
.trend-row + .trend-row { margin-top: 10px; }
.trend-head { display: flex; justify-content: space-between; font-size: 11px; color: var(--panel-muted); margin-bottom: 4px; }
.trend-head span:first-child { color: var(--panel-fg); font-weight: 600; }
#trend .trend-row svg { height: 34px; }

/* ---- farm finder: same fold-out as the layers, a search field over a scrolling list ---- */
.finder-search {
  width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 8px;
  border: 1px solid var(--panel-border); border-radius: 12px;
  background: rgba(241, 242, 241, 0.06); color: var(--panel-fg); font: inherit; font-size: 13px;
}
.finder-search::placeholder { color: var(--panel-muted); }
.finder-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
.finder-row { cursor: pointer; }
.finder-row .name { font-size: 12px; }
.finder-empty { padding: 8px 4px; font-size: 12px; color: var(--panel-muted); }

/* ---- header, output chart and feed read as one joined column ---- */
.head-trend { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--panel-border); }
.head-trend #trend { margin-top: 6px; }
@media (min-width: 721px) {
  #header { width: 290px; max-width: none; border-radius: var(--radius) var(--radius) 0 0; }
  #headlines { border-top: none; border-radius: 0 0 var(--radius) var(--radius); }
}
@media (max-width: 720px) {
  .head-trend { display: none; }
}

/* ---- night: keep the land readable, make the main grid glow ---- */
body.night .leaflet-tile-pane {
  filter: saturate(0.75) brightness(0.55) contrast(1.2) hue-rotate(-14deg);
}
body.night .leaflet-cables-pane canvas {
  filter: drop-shadow(0 0 2px rgba(255, 181, 71, 0.95)) drop-shadow(0 0 7px rgba(255, 181, 71, 0.55));
}
body.night .leaflet-lines-pane canvas {
  filter: drop-shadow(0 0 2px rgba(241, 242, 241, 0.9)) drop-shadow(0 0 6px rgba(160, 200, 255, 0.45));
}

/* ---- access conditions: three-band swatch and key ---- */
.swatch-wave { display: block; width: 18px; height: 13px; border-radius: 3px; opacity: 0.85;
  background: linear-gradient(90deg, rgb(76, 155, 232) 33%, rgb(166, 128, 171) 33% 66%, rgb(255, 100, 109) 66%); }
.access-scale { display: flex; gap: 10px; margin-top: 5px; font-size: 10px; color: var(--panel-muted); }
.access-scale span { display: inline-flex; align-items: center; gap: 4px; }
.access-scale i { width: 8px; height: 8px; border-radius: 2px; opacity: 0.85; }
.access-scale .open { background: rgb(76, 155, 232); }
.access-scale .ships { background: rgb(166, 128, 171); }
.access-scale .closed { background: rgb(255, 100, 109); }

/* ---- power flow pulse on export cables ---- */
.power-pulse { animation: power-flow linear infinite; }
@keyframes power-flow { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .power-pulse { animation: none; } }
/* the pulse is the cable's own amber, lit by a glow so it reads as light moving along it */
.leaflet-pulse-pane svg { filter: drop-shadow(0 0 2px rgba(255, 181, 71, 0.95)) drop-shadow(0 0 6px rgba(255, 181, 71, 0.6)); }

/* ---- day/night fade: the theme swap cross-fades instead of snapping ---- */
.leaflet-veil-pane { opacity: 0; transition: opacity 1.5s ease; }
body.night .leaflet-veil-pane { opacity: 1; }
.leaflet-tile-pane { transition: filter 1.5s ease; }
.panel, .panel .filter, .panel button { transition: background-color 1.5s ease, color 1.5s ease, border-color 1.5s ease; }
@media (prefers-reduced-motion: reduce) {
  .leaflet-veil-pane, .leaflet-tile-pane, .panel, .panel .filter, .panel button { transition: none; }
}

/* ---- content-aware sizing: the kpi strip sheds one figure at a time, the replay bar its hint ---- */
#kpibar.shed1 .kpi[data-shed="1"], #kpibar.shed2 .kpi[data-shed="2"] { display: none; }
.kpi .kv { font-size: clamp(16px, 1vw + 6px, 20px); }
#timebar.tight .tt-hint { display: none; }
#timebar.tight #tt-stamp { min-width: 0; }
/* a tight corridor takes the phone's compact controls, so the slider can shrink */
#timebar.tight .row { gap: 9px; }
#timebar.tight #tt-range { min-width: 0; }
#timebar.tight #liveBtn { padding: 0 11px; }
/* phones: the auto switch leaves less room, so the insights label must not wrap the dock taller */
@media (max-width: 720px) {
  #phoneDock .insights-banner { white-space: nowrap; padding: 11px 10px; }
  #phoneDock { gap: 8px; }
}
/* compact laptops: narrower side columns leave the map a usable middle */
@media (min-width: 721px) and (max-width: 1279px) {
  #header, #leftcol, #leftcol > .panel, #controls { width: 256px; }
}