/* =========================================================================
   netex · pages/capability-energy.css · energy · the load-curve poster + chart and the hero strip layers
   Loaded only on that page, after pages/capability.css (netex_capabilities_enqueue_page_css()).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

.cap-draw .win { fill: var(--molten); opacity: .12; stroke: none; }
.cap-draw .layer { stroke: none; }
.cap-draw .layer--locked { fill: color-mix(in srgb, var(--silver) 16%, var(--bg)); }
.cap-draw .layer--dryers { fill: color-mix(in srgb, var(--silver) 42%, var(--bg)); }
.cap-draw .layer--water { fill: color-mix(in srgb, var(--silver) 30%, var(--bg)); }
.cap-draw .layer--chill { fill: color-mix(in srgb, var(--silver) 52%, var(--bg)); }
.cap-draw .layer--comp { fill: color-mix(in srgb, var(--silver) 36%, var(--bg)); }
.cap-draw .layer--fork { fill: color-mix(in srgb, var(--silver) 26%, var(--bg)); }
.cap-draw .layer--leak { fill: var(--molten); }
.cap-draw .layer-edge { fill: none; stroke: var(--line-art); stroke-width: 1; opacity: .7; }

/* =========================================================================
   s8 energy · load-curve (static poster = the same chart; engine adds the hands)
   ========================================================================= */
.lc-stage { display: grid; gap: var(--s-5); }
.lc-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.lc-readouts .nx-readout { align-content: start; }
.lc-readouts .nx-readout__value { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 4rem); }
.lc-readouts .nx-readout__note { font: 500 .75rem/1.4 var(--f-mono); color: var(--fg-2); }
@media (min-width: 900px) { .lc-readouts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lc-delta { font: 500 .875rem/1.4 var(--f-mono); color: var(--sig); }
.lc-delta .nx-mono-label { display: inline; margin-right: .6em; }
.lc-chart { position: relative; padding: var(--s-3) var(--s-2) var(--s-2); background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.lc-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; }
.lc-svg text { font-family: var(--f-mono); font-size: 13px; fill: var(--fg-2); }
.lc-svg .lc-tick { text-anchor: middle; }
.lc-svg .lc-tick--y { text-anchor: end; }
.lc-band { stroke: none; }
.lc-band--peak { fill: var(--molten); opacity: .13; }
.lc-band--day { fill: transparent; }
.lc-band--night { fill: var(--paper); opacity: .03; }
.lc-grid { stroke: var(--rule); stroke-width: 1; }
.lc-hatchbg { fill: var(--ink-3); }
.lc-hatchline { stroke: var(--silver); stroke-width: 1; opacity: .38; }
.lc-load { stroke: none; }
.lc-load--flex { fill: var(--paper); }
.lc-load--leak { fill: var(--molten); }
.lc-total { fill: none; stroke: var(--paper); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lc-peakline { stroke: var(--molten); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.lc-peakdot { fill: var(--molten); }
.lc-svg .lc-peaktxt { fill: var(--molten); font-weight: 600; font-size: 14px; }
.lc-axis { stroke: var(--fg-2); stroke-width: 1; }
.lc-orig { fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 6 5; opacity: 0; vector-effect: non-scaling-stroke; }
.lc-win { fill: var(--cyan); opacity: .1; }
.lc-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.lc-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font: 500 .75rem/1.3 var(--f-mono); color: var(--fg-2); }
.lc-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.lc-key { display: inline-block; width: 18px; height: 12px; }
.lc-key--peak { background: color-mix(in srgb, var(--molten) 40%, var(--ink)); }
.lc-key--off { background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.lc-key--locked { background: var(--ink-3) repeating-linear-gradient(-47deg, color-mix(in srgb, var(--silver) 45%, transparent) 0 1px, transparent 1px 6px); }
.lc-key--flex { background: var(--paper); }
.lc-ctl { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.lc-loads { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); container-type: inline-size; }
.lc-loadrow, .lc-handle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-5); }
.lc-loadrow { min-height: 52px; border-bottom: var(--bw) solid var(--rule); }
.lc-handle { width: 100%; min-height: 52px; padding: var(--s-2) var(--s-3); text-align: left; color: var(--fg); grid-column: 1 / -1; }
.lc-loadrow__name { font: 500 .9375rem/1.3 var(--f-sans); }
.lc-loadrow__time { font: 600 .875rem/1 var(--f-mono); color: var(--fg); font-variant-numeric: tabular-nums; }
.lc-loadrow__kw { font: 500 .75rem/1 var(--f-mono); color: var(--fg-2); }
.lc-msg { min-height: 1.5em; font: 500 .9375rem/1.5 var(--f-mono); color: var(--fg); max-width: 90ch; }
.lc-msg:empty { display: none; }
/* The message answers the chart, so it sits right under it (legend, controls and the list of loads follow):
   a drop, a bounce or the model's proposal explains itself where the eye already is. While the demo runs on
   wider screens its slot is kept open, so a new message never shifts the list under a keyboard user. */
.lc-stage > .lc-msg { order: 1; }
.lc-stage > .lc-under, .lc-stage > .lc-loads { order: 2; }
@media (min-width: 600px) { .cap-demo--lc.is-running .lc-msg { display: block; min-height: 4.5em; } }
.lc-delta [data-lc-delta-text] { white-space: nowrap; }
@media (min-width: 1024px) { .lc-loads { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } }
/* Phones: the taller, fitted drawing of the same day (whole 24 h on screen, bigger type; a chart that
   scrolled sideways could not also take a drag). PHP prints both; the engine keeps the one in use. */
.lc-svg--narrow { display: none; }
.lc-svg--narrow text { font-size: 42px; }
.lc-svg--narrow .lc-peaktxt { font-size: 44px; }
@media (max-width: 599px) {
	.lc-svg--wide { display: none; }
	.lc-svg--narrow { display: block; }
}

} /* end @layer pages */