/*
 * Anläggningen live — the plant drawn, with its energy flowing
 * (public/energy/plant.php, public/assets/js/epi-plant.js).
 *
 * The drawing is quiet on purpose: pale walls, one light from the upper left,
 * and colour only where it means something — electricity blue, heat orange
 * (the series colours of every chart), a drying kiln's glow, a kiln's progress
 * in the kiln aqua. Movement means work: a line's pulses are energy on its
 * way, a turning blade is a building running above its own quiet level.
 *
 * Every animation stops for prefers-reduced-motion, for the pause button, and
 * while the page is hidden or the drawing scrolled away (.is-paused).
 */

.ep-stagewrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: 0 0 var(--epi-radius) var(--epi-radius); }
.ep-stage { position: relative; min-width: 980px; container-type: inline-size; }
.ep-stage > svg { display: block; width: 100%; height: auto; }
.ep-stage .ep-empty { padding: 60px 20px; }

/* ── Ground and sky ───────────────────────────────────────────────────── */
.ep-slab      { fill: #e4e9f0; }
.ep-slab-edge { fill: #d3dbe5; }
.ep-yard      { fill: #eef2f6; }
.ep-road      { fill: #dde3ea; }
.ep-road-line { stroke: #f7f9fb; stroke-width: 1.5; stroke-dasharray: 10 12; fill: none; }
.ep-tree      { fill: #cfe0d4; }
.ep-tree-dk   { fill: #b9d1c0; }
.ep-trunk     { fill: #c9b8a3; }
.ep-shadow    { fill: rgba(40, 56, 80, .08); }

/* ── Buildings ────────────────────────────────────────────────────────── */
.ep-wall   { fill: #ffffff; stroke: #c5cfdb; stroke-width: .8; }
.ep-side   { fill: #e2e8ef; stroke: #c5cfdb; stroke-width: .8; }
.ep-roof   { fill: #cdd6e1; stroke: #b7c2cf; stroke-width: .8; }
.ep-roof-b { fill: #dfe5ec; stroke: #b7c2cf; stroke-width: .8; }
.ep-b.is-kiln .ep-wall   { fill: #fbf8f4; stroke: #d6cabb; }
.ep-b.is-kiln .ep-side   { fill: #ebe3d9; stroke: #d6cabb; }
.ep-b.is-kiln .ep-roof   { fill: #d8cdbf; stroke: #c6b8a7; }
.ep-b.is-kiln .ep-roof-b { fill: #e6ddd2; stroke: #c6b8a7; }
.ep-b.is-boiler .ep-wall { fill: #f8f2ee; stroke: #d5c5bb; }
.ep-b.is-boiler .ep-side { fill: #e9ddd5; stroke: #d5c5bb; }
.ep-b.is-boiler .ep-roof { fill: #d7c8bf; stroke: #c4b2a7; }
.ep-b.is-office .ep-wall { fill: #f7fafe; }
.ep-b.is-virtual .ep-wall, .ep-b.is-virtual .ep-side, .ep-b.is-virtual .ep-roof { fill: #f4f6f9; stroke: #b7c2cf; stroke-dasharray: 4 3; }
.ep-chimney   { fill: #e3d8d0; stroke: #c4b2a7; stroke-width: .8; }
.ep-chimney-b { fill: #cdbfb5; }
.ep-band      { fill: #c9b4a6; }
.ep-win       { fill: #eef3f9; stroke: #c5cfdb; stroke-width: .8; }
.ep-win-lit   { fill: #fff1cf; stroke: #e7cf98; stroke-width: .8; }
.ep-door      { fill: #e6ebf1; stroke: #c5cfdb; stroke-width: .8; }
.ep-machine   { fill: none; stroke: #6a7a90; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ep-machine-f { fill: #aab6c6; }
.ep-metal     { fill: #dfe5ec; stroke: #6a7a90; stroke-width: 1.2; }
.ep-wood      { fill: #e2c393; stroke: #b88f58; stroke-width: .8; }
.ep-wood-end  { fill: #efdcb9; stroke: #b88f58; stroke-width: .8; }
.ep-wood-line { stroke: #c9a46d; stroke-width: .7; fill: none; }
.ep-beam      { stroke: #6f8fc8; stroke-width: 2; opacity: .75; }
.ep-flame     { fill: url(#epFlame); }
.ep-firebox   { fill: #3d2f2a; stroke: #c4b2a7; stroke-width: .8; }
.ep-tank      { fill: #e7edf4; stroke: #6a7a90; stroke-width: 1.2; }
.ep-liquid    { fill: #b9d8c9; }
.ep-meter-node { stroke: #fff; stroke-width: 1.5; }

/* Kiln chambers: a drying chamber glows with the heat inside, an empty one
   stands open; the aqua bar under the door is the batch's progress. */
.ep-ch-door        { stroke: #c9b9a6; stroke-width: .8; fill: #efe9e1; }
.ep-ch.is-drying .ep-ch-door { fill: url(#epKilnGlow); stroke: #d98a5c; }
.ep-ch.is-loaded .ep-ch-door { fill: #f3ede5; }
.ep-ch.is-done   .ep-ch-door { fill: #eef6f2; stroke: #9fcdb8; }
.ep-ch.is-empty  .ep-ch-door { fill: #dfe3e8; stroke: #c3cad3; }
.ep-ch-inner  { fill: #cfd5dd; }
.ep-ch-panel  { stroke: rgba(255, 255, 255, .55); stroke-width: .8; fill: none; }
.ep-ch-name   { font-size: 9px; font-weight: 600; fill: #4b5565; text-anchor: middle; }
.ep-ch-track  { fill: rgba(255, 255, 255, .7); }
.ep-ch-bar    { fill: #12815a; }
.ep-ch-glow   { fill: #f6a77f; opacity: 0; }
.ep-ch.is-drying .ep-ch-glow { opacity: .35; }
.ep-fan       { fill: #f4f6f9; stroke: #9aa7b8; stroke-width: .8; }
.ep-fan-blade { fill: #9aa7b8; }
.ep-shimmer   { fill: none; stroke: #eb6834; stroke-width: 1.6; stroke-linecap: round; opacity: 0; }
.ep-smoke     { fill: #d7dde5; opacity: 0; }

/* ── Energy lines ─────────────────────────────────────────────────────── */
.ep-case  { fill: none; stroke: #f7f9fc; stroke-linecap: round; stroke-linejoin: round; }
/* A measured line is solid; light beads travelling along it are the energy on its way. */
.ep-track { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ep-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 15; stroke: rgba(255, 255, 255, .85); }
.ep-flow.is-el .ep-track   { stroke: #2a78d6; }
.ep-flow.is-heat .ep-track { stroke: #eb6834; }
.ep-flow.is-el .ep-meter-node   { fill: #2a78d6; }
.ep-flow.is-heat .ep-meter-node { fill: #eb6834; }
/* No fresh reading: grey, still, dashed — never a flow we did not measure. */
.ep-flow.is-stale .ep-track { stroke: #aab3bf; opacity: .9; stroke-dasharray: 3 4; }
.ep-flow.is-stale .ep-pulse { display: none; }
.ep-flow.is-stale .ep-meter-node { fill: #aab3bf; }
.ep-flow.is-zero .ep-pulse { display: none; }
.ep-flow.is-zero .ep-track { opacity: .45; }

/* ── Movement ─────────────────────────────────────────────────────────── */
@keyframes epFlow    { from { stroke-dashoffset: var(--o, 0px); } to { stroke-dashoffset: calc(var(--o, 0px) - 32px); } }
@keyframes epSpin    { to { transform: rotate(360deg); } }
@keyframes epSpinRev { to { transform: rotate(-360deg); } }
@keyframes epBob     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes epSlide   { from { transform: translateX(var(--from, -40px)); } to { transform: translateX(var(--to, 40px)); } }
@keyframes epScan    { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(var(--scan, 30px)); } }
@keyframes epSmoke   { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .75; }
                       100% { transform: translate(var(--drift, 16px), -58px) scale(1.7); opacity: 0; } }
@keyframes epShimmer { 0% { transform: translateY(4px); opacity: 0; } 35% { opacity: .55; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes epFlicker { 0%, 100% { transform: scaleY(1); opacity: .95; } 30% { transform: scaleY(.82); opacity: .8; }
                       60% { transform: scaleY(1.08); opacity: 1; } }
@keyframes epGauge   { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
@keyframes epBubble  { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes epGlow    { 0%, 100% { opacity: .22; } 50% { opacity: .45; } }
@keyframes epPkg     { from { transform: translateX(0); } to { transform: translateX(var(--run, 800px)); } }

.ep-pulse { animation: epFlow var(--dur, 1s) linear infinite; }
.ep-m     { transform-box: fill-box; transform-origin: center; animation-duration: calc(var(--t, 1s) * var(--k, 1));
            animation-timing-function: linear; animation-iteration-count: infinite; }
.ep-m.is-spin    { animation-name: epSpin; }
.ep-m.is-spinrev { animation-name: epSpinRev; }
.ep-m.is-bob     { animation-name: epBob; animation-timing-function: ease-in-out; }
.ep-m.is-slide   { animation-name: epSlide; }
.ep-m.is-scan    { animation-name: epScan; animation-timing-function: ease-in-out; }
.ep-m.is-gauge   { animation-name: epGauge; animation-timing-function: ease-in-out; transform-origin: 50% 100%; }
.ep-m.is-bubble  { animation-name: epBubble; }
.ep-m.is-flicker { animation-name: epFlicker; transform-origin: 50% 100%; animation-timing-function: ease-in-out; }
.ep-smoke        { transform-box: fill-box; transform-origin: center; animation: epSmoke 4.2s ease-out infinite; }
.ep-shimmer      { animation: epShimmer 2.6s ease-in-out infinite; }
.ep-ch.is-drying .ep-ch-glow { animation: epGlow 3.2s ease-in-out infinite; }
.ep-pkg          { animation: epPkg var(--dur, 30s) linear infinite; }

/* A building that is not running holds still; an idle kiln chamber has no heat rising. */
.ep-b:not(.is-running):not(.is-steady) .ep-m { animation-play-state: paused; }
.ep-b.is-steady { --k: 1.8; }
.ep-b.is-cold .ep-smoke, .ep-b.is-cold .ep-m.is-flicker { animation-play-state: paused; opacity: 0; }
.ep-ch:not(.is-drying) .ep-shimmer, .ep-ch:not(.is-drying) .ep-m { animation-play-state: paused; }
.ep-ch:not(.is-drying) .ep-shimmer { opacity: 0; }
.ep-road-g:not(.is-moving) .ep-pkg { animation-play-state: paused; }

.ep-stage.is-paused *, .ep-stage.is-paused *::before, .ep-stage.is-paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ep-stage:not(.is-motion) * { animation-play-state: paused !important; }
}

/* ── Hover and focus: one building and its lines, the rest step back ────── */
.ep-b, .ep-flow, .ep-src { transition: opacity .2s ease; }
.ep-b { cursor: pointer; }
.ep-stage.is-hovering .ep-b:not(.is-hot), .ep-stage.is-hovering .ep-src:not(.is-hot) { opacity: .42; }
.ep-stage.is-hovering .ep-flow:not(.is-hot) { opacity: .16; }
.ep-b.is-hot .ep-wall { stroke: #6f8fc8; stroke-width: 1.4; }
@media (prefers-reduced-motion: reduce) { .ep-b, .ep-flow, .ep-src { transition: none; } }

/* ── Labels: HTML over the drawing, so they are buttons ──────────────────── */
.ep-label { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; gap: 1px;
            align-items: flex-start; text-align: left; padding: 5px 8px 6px; border-radius: 8px;
            background: rgba(255, 255, 255, .94); border: 1px solid var(--epi-border);
            box-shadow: 0 1px 3px rgba(16, 24, 40, .08); color: var(--epi-ink);
            font-size: clamp(10px, 1.02cqw, 12.5px); line-height: 1.25; cursor: pointer; z-index: 2; }
.ep-label:hover, .ep-label.is-hot { border-color: #9fb4d6; box-shadow: 0 4px 14px rgba(16, 24, 40, .12); z-index: 3; }
.ep-label:focus-visible { outline: 2px solid var(--epi-accent); outline-offset: 2px; }
.ep-label-name { font-weight: 650; display: flex; align-items: center; gap: 5px; max-width: 100%; white-space: nowrap;
                 overflow: hidden; text-overflow: ellipsis; }
.ep-label-name .epi-ic, .ep-label-name i { color: var(--epi-tone-slate); font-size: 1.1em; }
.ep-label-name .epi-ic.is-kiln { color: var(--epi-tone-kiln); }
.ep-label-name .epi-ic.is-heat { color: var(--epi-tone-heat); }
.ep-label-vals { display: flex; gap: 8px; font-variant-numeric: tabular-nums; color: var(--epi-ink-2); white-space: nowrap; }
.ep-label-vals span { display: inline-flex; align-items: center; gap: 4px; }
.ep-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.ep-dot.is-el   { background: var(--epi-el); }
.ep-dot.is-heat { background: var(--epi-heat); }
.ep-dot.is-none { background: transparent; border: 1.5px solid #aab3bf; }
.ep-label-state { font-size: .88em; color: var(--epi-muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ep-label-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c3cad3; }
.ep-label-state.is-running::before { background: var(--epi-good); box-shadow: 0 0 0 3px rgba(12, 163, 12, .15); }
.ep-label-state.is-steady::before  { background: #7bc47b; }
.ep-label-state.is-drying::before  { background: var(--epi-heat); box-shadow: 0 0 0 3px rgba(235, 104, 52, .15); }
.ep-label.is-src { background: rgba(255, 255, 255, .97); }

/* ── Around the drawing ────────────────────────────────────────────────── */
.ep-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: .8rem; color: var(--epi-ink-2); }
.ep-legend .ep-key { display: inline-block; width: 22px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.ep-legend .ep-key.is-el { background: var(--epi-el); }
.ep-legend .ep-key.is-heat { background: var(--epi-heat); }
.ep-legend .ep-key.is-stale { background: repeating-linear-gradient(90deg, #aab3bf 0 3px, transparent 3px 7px); }
.ep-legend .ep-key.is-wide { height: 9px; border-radius: 4px; background: linear-gradient(90deg, #9aa7b8, #9aa7b8) left center / 100% 3px no-repeat,
                                                        linear-gradient(90deg, transparent 55%, #9aa7b8 55%); }
.ep-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
              padding: 10px 14px; border-top: 1px solid var(--epi-hair); }
.ep-note { font-size: .78rem; color: var(--epi-muted); }
.ep-table td .epi-ic { color: var(--epi-tone-slate); margin-right: 6px; }
.ep-state { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; white-space: nowrap; }
.ep-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #c3cad3; }
.ep-state.is-running::before { background: var(--epi-good); }
.ep-state.is-steady::before  { background: #7bc47b; }
.ep-state.is-drying::before  { background: var(--epi-heat); }
.ep-chlist { list-style: none; margin: 0; padding: 0; }
.ep-chlist li { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; padding: 6px 0;
                border-top: 1px solid var(--epi-hair); font-size: .85rem; }
.ep-chlist li:first-child { border-top: 0; }
.ep-chbar { height: 6px; border-radius: 3px; background: var(--epi-tint-kiln); overflow: hidden; }
.ep-chbar span { display: block; height: 100%; background: #12815a; border-radius: 3px; }