/* =========================================================================
   INDUSTRIAL ENERGY MONITOR — Instrument Design System

   A control-room instrument panel, not an admin dashboard.

   Principles:
     - Every metric is drawn as the physical instrument it represents:
       wattmeter, voltmeter, ammeter, PF gauge, thermometer, energy counter.
     - Glow is reserved for LIVE ELECTRICAL ACTIVITY only. It is a signal,
       not decoration — if everything glows, nothing reads as energised.
     - Phase colours follow IEC switchgear marking (R red, Y amber, B blue)
       and are used ONLY for phase identity, never as general accents.
     - Readouts are set in a condensed technical face with tabular figures so
       digits hold position as values update.
   ========================================================================= */

/* -------------------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* --- Surfaces: graphite, the colour of a real control console ---------
       Near-black ground with slate panels. Dark enough for a dimly lit
       control room, warm enough not to read as pure void. */
    --void: #05070a;
    --ground: #0b0e13;
    --panel: #141920;
    --panel-2: #1a2029;
    --panel-3: #222a35;
    --recess: #0d1117;

    /* --- Hairlines: structural, not luminous --- */
    --line: #232b36;
    --line-2: #2f3945;
    --line-hot: #465465;

    /* --- Text: stepped for readability, not decoration --------------------
       ink-2 and ink-3 carry labels, so they sit well above the 4.5:1 contrast
       floor on --panel rather than fading into it. */
    --ink: #e8edf4;
    --ink-2: #b4c0cf;
    --ink-3: #8b97a7;
    --ink-4: #6b7686;

    /* --- Primary accent: amber, the energy-sector convention for power ----
       Switchgear, SCADA and metering equipment use amber for live electrical
       quantity. It also reads warm against graphite without glowing. */
    --live: #f0a92b;
    --live-dim: #9a6a15;
    --live-glow: rgba(240, 169, 43, 0.34);
    --live-wash: rgba(240, 169, 43, 0.09);

    /* --- Semantic state: unambiguous, borrowed from panel indicators --- */
    --ok: #4caf7d;
    --ok-glow: rgba(76, 175, 125, 0.34);
    --ok-wash: rgba(76, 175, 125, 0.1);
    --warn: #e0a33a;
    --warn-glow: rgba(224, 163, 58, 0.34);
    --warn-wash: rgba(224, 163, 58, 0.1);
    --crit: #e05263;
    --crit-glow: rgba(224, 82, 99, 0.38);
    --crit-wash: rgba(224, 82, 99, 0.1);

    /* --- Phase identity (IEC switchgear marking) --------------------------
       Desaturated for a dark ground: full-strength red/yellow/blue vibrate
       against near-black and tire the eye over a shift. */
    --ph-r: #d9534f;
    --ph-r-glow: rgba(217, 83, 79, 0.34);
    --ph-y: #d9a441;
    --ph-y-glow: rgba(217, 164, 65, 0.34);
    --ph-b: #4a8db7;
    --ph-b-glow: rgba(74, 141, 183, 0.34);
    --ph-n: #7c8899;

    /* --- Type --- */
    --f-read: "Rajdhani", "IBM Plex Sans Condensed", ui-sans-serif, system-ui, sans-serif;
    --f-ui: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    /* --- Metrics --- */
    --rail: 210px;
    --header: 58px;
    --r: 3px;
    --gap: 12px;

    color-scheme: dark;
}

/* Daylight variant — for office review, not the control room. Instruments
   keep their identity; the ground inverts. */
:root[data-theme="light"] {
    --void: #dde3ea;
    --ground: #eaeef3;
    --panel: #ffffff;
    --panel-2: #f6f8fa;
    --panel-3: #eef2f6;
    --recess: #e4e9ef;

    --line: #d4dce4;
    --line-2: #bcc8d4;
    --line-hot: #9aabbc;

    --ink: #0f1720;
    --ink-2: #45596c;
    --ink-3: #6b7f92;
    --ink-4: #93a4b5;

    --live: #0e7490;
    --live-dim: #22d3ee;
    --live-glow: rgba(14, 116, 144, 0.25);
    --live-wash: rgba(14, 116, 144, 0.07);

    --ok: #15803d;
    --ok-glow: rgba(21, 128, 61, 0.22);
    --ok-wash: rgba(21, 128, 61, 0.08);
    --warn: #b45309;
    --warn-glow: rgba(180, 83, 9, 0.22);
    --warn-wash: rgba(180, 83, 9, 0.08);
    --crit: #b91c1c;
    --crit-glow: rgba(185, 28, 28, 0.25);
    --crit-wash: rgba(185, 28, 28, 0.08);

    --ph-r: #c2281f;
    --ph-y: #96700a;
    --ph-b: #1d4ed8;
    --ph-n: #52616f;

    color-scheme: light;
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--ink);
    font-family: var(--f-ui);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    /* Flat graphite. A dark console does not glow — depth comes from the
       panels sitting above the ground, not from coloured light washes. */
    background: var(--ground);
}

/* Engineering grid: a faint drafting substrate, neutral rather than tinted,
   so it reads as surface texture and never competes with the data. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(#8b97a7 1px, transparent 1px),
        linear-gradient(90deg, #8b97a7 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.03;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; }
a { color: var(--live); text-decoration: none; }
button { font: inherit; color: inherit; }

:focus-visible {
    outline: 1px solid var(--live);
    outline-offset: 2px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    padding: 10px 16px; background: var(--live); color: #04121a; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------------------------------
   TYPE PRIMITIVES
   ------------------------------------------------------------------------- */

/* Instrument readout — condensed technical face, fixed-width digits. */
.readout {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: 0.01em;
}

/* Engraved panel label — the etched legend on a physical instrument.
   Sized and spaced for readability first: 10px with restrained tracking
   stays legible at a glance, where 9px at 0.16em turns into texture. */
.legend {
    font-family: var(--f-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* Secondary legends still clear the contrast floor; they are quieter, not
   unreadable. */
.legend--dim { color: var(--ink-3); }

.unit {
    font-family: var(--f-ui);
    font-size: 0.45em;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin-left: 0.3em;
    text-transform: uppercase;
}

.mono {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------
   PANEL — the instrument bezel
   Corner ticks read as machined bracket marks on a rack-mounted unit.
   ------------------------------------------------------------------------- */
/* A solid instrument card. Depth comes from the panel being lighter than the
   ground plus a hairline border — the way a rack unit reads — not from
   translucency or coloured light. */
.ip {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    min-width: 0;
}

/* Machined bracket marks at opposing corners. */
.ip::before,
.ip::after {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    border-color: var(--line-hot);
    border-style: solid;
    pointer-events: none;
    opacity: 0.9;
}
.ip::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.ip::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }

.ip__head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: var(--panel-2);
    flex-wrap: wrap;
}

.ip__title {
    font-family: var(--f-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
}

/* Small energised tick before a live panel title. */
.ip__title::before {
    content: "";
    width: 2px; height: 11px;
    background: var(--live);
    box-shadow: 0 0 5px var(--live-glow);
    flex: none;
}

.ip__body { padding: 12px; }
.ip__body--flush { padding: 0; }
.ip__body--tight { padding: 8px; }

/* -------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------- */
.hdr {
    position: sticky;
    top: 0;
    z-index: 80;
    height: var(--header);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line-2);
}

/* Energised busbar along the header's lower edge. */
.hdr::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, var(--live-dim) 18%, var(--live) 50%, var(--live-dim) 82%, transparent);
    opacity: 0.4;
}

.hdr__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }

.hdr__bolt {
    width: 28px; height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid var(--live-dim);
    border-radius: 2px;
    background: var(--live-wash);
    color: var(--live);
    box-shadow: 0 0 12px -4px var(--live-glow), inset 0 0 10px -6px var(--live-glow);
}

.hdr__name {
    font-family: var(--f-read);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hdr__site {
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
}

.hdr__sep {
    width: 1px;
    height: 26px;
    background: var(--line-2);
    flex: none;
}

.hdr__spacer { flex: 1 1 auto; min-width: 0; }

.hdr__group { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* A labelled field in the header: legend above, value below. */
.hdr__field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hdr__field .legend { font-size: 8px; letter-spacing: 0.13em; }
.hdr__value {
    font-family: var(--f-read);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   STATUS LAMP — pulses only while genuinely receiving
   ------------------------------------------------------------------------- */
.lamp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--line-2);
    border-radius: 2px;
    background: var(--recess);
    white-space: nowrap;
}

.lamp__led {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--ink-4);
    flex: none;
}

.lamp__text {
    font-family: var(--f-read);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lamp__meta {
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--ink-3);
}

.lamp--online { border-color: color-mix(in srgb, var(--ok) 35%, var(--line-2)); }
.lamp--online .lamp__led {
    background: var(--ok);
    box-shadow: 0 0 7px var(--ok-glow);
    animation: led-pulse 2s ease-in-out infinite;
}
.lamp--online .lamp__text { color: var(--ok); }

.lamp--stale { border-color: color-mix(in srgb, var(--warn) 35%, var(--line-2)); }
.lamp--stale .lamp__led { background: var(--warn); box-shadow: 0 0 7px var(--warn-glow); }
.lamp--stale .lamp__text { color: var(--warn); }

.lamp--offline { border-color: color-mix(in srgb, var(--crit) 40%, var(--line-2)); }
.lamp--offline .lamp__led {
    background: var(--crit);
    box-shadow: 0 0 8px var(--crit-glow);
    animation: led-fault 1.1s steps(1) infinite;
}
.lamp--offline .lamp__text { color: var(--crit); }

@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.32; }
}
@keyframes led-fault {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

/* DEMO MODE — hazard striping, the way a real panel marks simulated input. */
.demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
    border-radius: 2px;
    background: repeating-linear-gradient(
        -45deg,
        var(--warn-wash), var(--warn-wash) 5px,
        transparent 5px, transparent 10px
    );
    color: var(--warn);
    font-family: var(--f-read);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   SHELL + NAVIGATION RAIL
   ------------------------------------------------------------------------- */
.shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    /* start, not stretch: the sticky rail is viewport-tall, and stretching the
       row to match it would leave dead space under a short page. */
    align-items: start;
    min-height: calc(100vh - var(--header));
}

.rail {
    position: sticky;
    top: var(--header);
    /* max-height rather than height: the rail scrolls when its items overflow
       the viewport, but never forces the page taller than its own content. */
    max-height: calc(100vh - var(--header));
    overflow-y: auto;
    /* The column surface is painted by .shell::before so it runs full height;
       the rail itself only carries the navigation. */
    background: transparent;
    padding: 12px 8px 20px;
}

/* The rail is a full-height console column, so its surface and border run the
   whole page rather than stopping where the navigation items end. Painted on
   the shell itself because the rail is sticky and only as tall as the
   viewport. */
.shell::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--rail);
    background: var(--panel);
    border-right: 1px solid var(--line);
    pointer-events: none;
    z-index: 0;
}

/* Keeps the navigation above the column it sits on. */
.rail { position: sticky; z-index: 1; }

/* Groups are divided by a rule, so the sections read as distinct banks of
   controls rather than one long list with gaps in it. */
.rail__group + .rail__group {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.rail__legend {
    padding: 0 11px 9px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-4);
}

.rail__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    color: var(--ink-2);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.012em;
    border-radius: 4px;
    /* Colour and background only: transitioning layout would make the whole
       rail shift under the cursor. */
    transition: background 0.14s ease, color 0.14s ease;
}

/* The indicator rail is always present but transparent, so hovering and
   selecting do not change the item's geometry. */
.rail__link::before {
    content: "";
    position: absolute;
    left: 0; top: 7px; bottom: 7px;
    width: 2px;
    border-radius: 0 2px 2px 0;
    background: transparent;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

.rail__link:hover {
    background: var(--panel-2);
    color: var(--ink);
}
.rail__link:hover::before { background: var(--line-hot); }

/* Icons sit in a fixed well, so every label starts on the same x regardless
   of how wide its glyph is. */
.rail__link svg {
    width: 18px;
    height: 18px;
    flex: none;
    opacity: 0.75;
    transition: opacity 0.14s ease;
}
.rail__link:hover svg { opacity: 1; }

/* Active item is ILLUMINATED — a lit indicator on the console, not a fill. */
.rail__link--on {
    background: linear-gradient(90deg, var(--live-wash), transparent 78%);
    color: var(--live);
    font-weight: 700;
}
.rail__link--on svg { opacity: 1; }
.rail__link--on::before {
    background: var(--live);
    box-shadow: 0 0 9px var(--live-glow);
}


/* Unresolved alarm count. Pill-shaped and lit, so it reads as an active
   annunciator rather than a label. */
.rail__count {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    min-width: 19px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--crit);
    color: #fff;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 10px -2px var(--crit-glow);
}

.main {
    padding: 12px;
    min-width: 0;
}

/* -------------------------------------------------------------------------
   ENERGY FLOW DIAGRAM — single-line schematic with animated carriers
   ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
   ENERGY FLOW DIAGRAM — AI Cybernetic Energy Flow Engine
   ------------------------------------------------------------------------- */
.flow {
    position: relative;
    background:
        radial-gradient(ellipse 90% 70% at 50% 30%, rgba(0, 240, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 60% 60% at 50% 80%, rgba(139, 92, 246, 0.06), transparent 70%),
        var(--panel, #0b1120);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: var(--r, 8px);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 240, 255, 0.05);
    user-select: none;
}

/* Futuristic Scanline Overlay */
.flow::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 240, 255, 0.03),
        rgba(0, 240, 255, 0.03) 1px,
        transparent 1px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
}

/* Background Cybernetic Grid */
.flow__grid-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(0, 240, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

/* Canvas Particle Physics Overlay */
.flow__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* SVG Cyber Layout Container */
.flow__svg {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index: 3;
}

/* Conductor: Outer glow cyber tracks */
.flow-conductor-track {
    stroke: rgba(0, 240, 255, 0.15);
    stroke-width: 5;
    fill: none;
    stroke-linecap: round;
}

.flow-conductor-core {
    stroke: rgba(0, 240, 255, 0.5);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 4 4;
    animation: flowTrackPulse 3s linear infinite;
}

@keyframes flowTrackPulse {
    to { stroke-dashoffset: -16; }
}

/* Node Styling */
.flow-node-bg {
    fill: rgba(11, 17, 32, 0.85);
    stroke: rgba(0, 240, 255, 0.3);
    stroke-width: 1.5;
    rx: 6;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 240, 255, 0.15));
}

.flow-node-bg:hover {
    stroke: rgba(0, 240, 255, 0.8);
    filter: drop-shadow(0 0 16px rgba(0, 240, 255, 0.4));
}

/* AI Meter Reactor Box */
.flow-meter-reactor {
    fill: rgba(15, 23, 42, 0.95);
    stroke: #00f0ff;
    stroke-width: 1.5;
    rx: 8;
    filter: drop-shadow(0 0 20px rgba(0, 240, 255, 0.3));
}

/* Metering-point lamp: pulses while current is flowing, holds dark when the
   link drops. A steady spin would keep signalling activity that has stopped. */
.flow-meter-lamp {
    animation: flowLampPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.9));
}

@keyframes flowLampPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* No data, no activity. */
.flow--dead .flow-meter-lamp {
    animation: none;
    opacity: 0.25;
    filter: none;
}

/* Reticle Corner Marks */
.flow-reticle {
    stroke: #00f0ff;
    stroke-width: 1.5;
    opacity: 0.8;
}

/* Text Styles */
.flow-label {
    font-family: var(--f-ui, 'Inter', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: #94a3b8;
}

.flow-value {
    font-family: var(--f-read, 'Outfit', monospace);
    font-size: 19px;
    font-weight: 800;
    fill: #ffffff;
    filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.5));
}

.flow-value--sm { font-size: 14px; }

.flow-badge {
    font-family: var(--f-ui, 'Inter', sans-serif);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    fill: #00f0ff;
}

/* Offline state */
.flow--dead .flow__canvas { opacity: 0.15; filter: grayscale(100%); }
.flow--dead .flow-value { fill: #64748b; filter: none; }

/* -------------------------------------------------------------------------
   RADIAL GAUGE — wattmeter / load / PF face
   ------------------------------------------------------------------------- */
.gauge {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* The gauge is square and must never exceed its housing. aspect-ratio plus a
   max-height keeps it bounded even inside a stretched grid cell — without
   this, `width:100%` in an unconstrained parent scales the dial off-screen. */
.gauge {
    width: 100%;
    max-width: 100%;
}

.gauge__svg {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: visible;
}

/* Unlit segments must still read as a scale — an invisible track makes a
   part-filled dial look broken rather than partly lit. */
.gauge-track {
    fill: none;
    stroke: #232b36;
    stroke-linecap: round;
}

.gauge-arc {
    fill: none;
    stroke-linecap: butt;
    /* Smooth sweep when the value changes; the needle of a real instrument
       does not teleport. */
    transition: stroke-dashoffset 0.55s cubic-bezier(0.33, 1, 0.68, 1),
                stroke 0.4s ease;
    filter: drop-shadow(0 0 5px currentColor);
}

/* Continuous (unsegmented) arcs keep rounded caps. */
.gauge-arc:not([stroke-dasharray*=" "]) { stroke-linecap: round; }

/* Bloom behind the value arc: the halo of a lit segment, not a glow effect
   applied for its own sake. */
.gauge-halo {
    fill: none;
    stroke-linecap: round;
    opacity: 0.22;
    filter: blur(7px);
    transition: stroke-dashoffset 0.55s cubic-bezier(0.33, 1, 0.68, 1),
                stroke 0.4s ease;
}

.gauge-tick { stroke: rgba(148, 163, 184, 0.4); stroke-width: 1; }
.gauge-tick--major { stroke: #00f0ff; stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.6)); }

.gauge-scale-num {
    font-family: var(--f-read, 'Outfit', monospace);
    font-size: 10.5px;
    font-weight: 800;
    fill: #cbd5e1;
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.9));
}

/* Zone bands sit OUTSIDE the value arc and stay faint: they annotate the
   scale, and must never be mistaken for the reading itself. */
.gauge-zone { fill: none; stroke-width: 3; opacity: 0.6; }

.gauge-needle-group {
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.gauge-needle {
    stroke: #ff0055;
    stroke-width: 2.5;
    stroke-linecap: round;
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
    filter: drop-shadow(0 0 6px #ff0055);
}

.gauge-hub { fill: #0f172a; stroke: #00f0ff; stroke-width: 1.5; }

/* Centred readout stack inside a gauge face. */
.gauge__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    text-align: center;
    padding: 0 12%;
}

.gauge__read {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.gauge__sub {
    font-family: var(--f-ui);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
}

/* -------------------------------------------------------------------------
   PRIMARY WATTMETER — the dominant instrument
   ------------------------------------------------------------------------- */
.wattmeter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
    padding: 14px 12px 12px;
}

.wattmeter__read {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: clamp(40px, 6.4vw, 64px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: -0.015em;
    color: var(--ink);
    /* Glow marks this as a live, energised reading. */
    text-shadow: 0 0 26px var(--live-glow);
}

.wattmeter__unit {
    font-family: var(--f-ui);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #00f0ff;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Secondary parameters beneath the main readout. */
.param-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    border-top: 1px solid var(--line);
}

.param {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 6px;
    min-width: 0;
}
.param + .param { border-left: 1px solid var(--line); }

.param__value {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.param__value--ok { color: var(--ok); }
.param__value--warn { color: var(--warn); }
.param__value--crit { color: var(--crit); }

/* -------------------------------------------------------------------------
   PHASE INSTRUMENT MODULE
   ------------------------------------------------------------------------- */
.phase-rack {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
}

.pm {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    border-top: 2px solid var(--pm-color);
    border-radius: var(--r);
    overflow: hidden;
}

.pm--r { --pm-color: var(--ph-r); --pm-glow: var(--ph-r-glow); }
.pm--y { --pm-color: var(--ph-y); --pm-glow: var(--ph-y-glow); }
.pm--b { --pm-color: var(--ph-b); --pm-glow: var(--ph-b-glow); }

/* Phase-tinted wash bleeding down from the identity band. */
.pm::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 54px;
    /* A restrained tint bleeding from the identity band. On graphite a
       heavier wash would read as a coloured card rather than a labelled one. */
    background: linear-gradient(180deg, color-mix(in srgb, var(--pm-color) 6%, transparent), transparent);
    pointer-events: none;
}

.pm__head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-bottom: 1px solid var(--line);
}

.pm__id {
    width: 21px; height: 21px;
    display: grid;
    place-items: center;
    border: 1px solid var(--pm-color);
    border-radius: 2px;
    background: color-mix(in srgb, var(--pm-color) 14%, transparent);
    color: var(--pm-color);
    font-family: var(--f-read);
    font-size: 12px;
    font-weight: 700;
    flex: none;
    box-shadow: 0 0 9px -3px var(--pm-glow);
}

.pm__name {
    font-family: var(--f-read);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.pm__lamp {
    margin-left: auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 6px var(--ok-glow);
    flex: none;
}
.pm__lamp--warn { background: var(--warn); box-shadow: 0 0 6px var(--warn-glow); }
.pm__lamp--crit { background: var(--crit); box-shadow: 0 0 6px var(--crit-glow); }

/* Phase gauge + primary readouts */
.pm__body {
    position: relative;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
    align-items: center;
}

.pm__readouts { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.pm__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pm__val {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pm__val--md { font-size: 16px; }

/* Secondary metric grid at the module's foot. */
.pm__foot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
}

.pm__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px;
    min-width: 0;
}
.pm__cell + .pm__cell { border-left: 1px solid var(--line); }

.pm__cell-val {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   LINEAR BARGRAPH — LED column, as on a physical panel meter
   ------------------------------------------------------------------------- */
.bargraph {
    display: flex;
    gap: 2px;
    height: 8px;
    align-items: stretch;
}

/* Unlit segments need their own visible ground: --recess is translucent over
   the panel and would make the whole column read as empty. */
.bargraph__seg {
    flex: 1 1 0;
    background: #232b36;
    border-radius: 1px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.bargraph__seg--on {
    background: var(--bar-color, var(--live));
    box-shadow: 0 0 6px -1px var(--bar-glow, var(--live-glow));
}

/* -------------------------------------------------------------------------
   WAVEFORM — live sinusoidal trace on a CRT-style graticule
   ------------------------------------------------------------------------- */
.scope {
    position: relative;
    background:
        linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 25%,
        linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 8.333% 100%,
        var(--recess);
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
}

.scope canvas { display: block; width: 100%; }

.scope__hud {
    position: absolute;
    top: 7px; left: 9px;
    display: flex;
    gap: 12px;
    pointer-events: none;
}

.scope__tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink-3);
}

.scope__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

.scope__freq {
    position: absolute;
    top: 7px; right: 9px;
    font-family: var(--f-read);
    font-size: 14px;
    font-weight: 700;
    color: var(--live);
    text-shadow: 0 0 12px var(--live-glow);
    pointer-events: none;
}

/* -------------------------------------------------------------------------
   PHASOR / BALANCE DIAGRAM
   ------------------------------------------------------------------------- */
.phasor { position: relative; }
.phasor__svg { display: block; width: 100%; height: auto; overflow: visible; }

.phasor-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.phasor-axis { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }

.phasor-vector {
    stroke-width: 2;
    stroke-linecap: round;
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.phasor-poly {
    fill: var(--live-wash);
    stroke: var(--live-dim);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.phasor__center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Backing plate: the vectors and triangle pass behind the centre readout, so
   it needs its own ground to stay legible. */
.phasor__plate {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 11px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid var(--line);
    text-align: center;
}

/* -------------------------------------------------------------------------
   THERMOMETER
   ------------------------------------------------------------------------- */
.thermo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 2px;
}

.thermo__tube {
    position: relative;
    width: 15px;
    height: 108px;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--recess);
    overflow: hidden;
    flex: none;
}

.thermo__fill {
    position: absolute;
    left: 2px; right: 2px; bottom: 2px;
    border-radius: 6px;
    background: linear-gradient(180deg, var(--th-color, var(--ok)), color-mix(in srgb, var(--th-color, var(--ok)) 55%, transparent));
    box-shadow: 0 0 10px -2px var(--th-glow, var(--ok-glow));
    transition: height 0.6s cubic-bezier(0.33, 1, 0.68, 1), background 0.4s ease;
}

.thermo__bulb {
    position: absolute;
    bottom: -5px; left: 50%;
    transform: translateX(-50%);
    width: 21px; height: 21px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: var(--th-color, var(--ok));
    box-shadow: 0 0 12px -2px var(--th-glow, var(--ok-glow));
    transition: background 0.4s ease;
}

.thermo__scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 108px;
    font-family: var(--f-mono);
    font-size: 8.5px;
    color: var(--ink-4);
}

/* -------------------------------------------------------------------------
   ENERGY COUNTER — cyclometer register, as on a physical kWh meter
   ------------------------------------------------------------------------- */
.counter {
    display: flex;
    gap: 2px;
    padding: 7px 8px;
    background: var(--recess);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    justify-content: center;
}

.counter__digit {
    min-width: 20px;
    padding: 3px 0;
    background: linear-gradient(180deg, var(--panel-3), var(--panel));
    border: 1px solid var(--line);
    border-radius: 1px;
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    line-height: 1.05;
}

/* The fractional digits sit on a red drum, as on a real register. */
.counter__digit--frac {
    background: linear-gradient(180deg, #3a1416, #2a0f11);
    border-color: #4d1a1d;
    color: #ff8a80;
}

.counter__sep { width: 3px; }

/* -------------------------------------------------------------------------
   ALERT ANNUNCIATOR — illuminated fault window
   ------------------------------------------------------------------------- */
.annun { display: flex; flex-direction: column; }

.annun__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-left: 3px solid var(--an-color, var(--ink-4));
    background: var(--an-wash, transparent);
}
.annun__item + .annun__item { border-top: 1px solid var(--line); }

.annun__item--critical {
    --an-color: var(--crit);
    --an-wash: var(--crit-wash);
}
/* Only unacknowledged critical faults pulse — an acknowledged one is known. */
.annun__item--critical.is-new::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--crit);
    animation: fault-pulse 1.3s ease-in-out infinite;
}

.annun__item--warning { --an-color: var(--warn); --an-wash: var(--warn-wash); }
.annun__item--info { --an-color: var(--live); }
.annun__item--resolved { --an-color: var(--ink-4); opacity: 0.5; }

@keyframes fault-pulse {
    0%, 100% { box-shadow: 0 0 10px 0 var(--crit-glow); opacity: 1; }
    50% { box-shadow: 0 0 3px 0 var(--crit-glow); opacity: 0.45; }
}

.annun__body { flex: 1 1 auto; min-width: 0; }

.annun__msg {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.annun__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-family: var(--f-mono);
    font-size: 10px;
    color: var(--ink-3);
}

/* Severity tag */
.sev {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 2px;
    border: 1px solid currentColor;
    font-family: var(--f-read);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
}
.sev--critical { color: var(--crit); background: var(--crit-wash); }
.sev--warning { color: var(--warn); background: var(--warn-wash); }
.sev--info { color: var(--live); background: var(--live-wash); }
.sev--ok { color: var(--ok); background: var(--ok-wash); }
.sev--idle { color: var(--ink-3); background: transparent; border-color: var(--line-2); }

/* -------------------------------------------------------------------------
   TELEMETRY LIST — key/value rows in the status panel
   ------------------------------------------------------------------------- */
.telem { display: flex; flex-direction: column; }

.telem__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
}
.telem__row + .telem__row { border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }

.telem__key {
    font-size: 11px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-2);
}

.telem__val {
    font-family: var(--f-read);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
   CHARTS
   ------------------------------------------------------------------------- */
.chart {
    position: relative;
    padding: 10px 10px 8px;
    height: 210px;
}
.chart--tall { height: 270px; }
.chart--short { height: 150px; }
.chart canvas { max-width: 100%; }

/* Range selector — mechanical rotary switch positions. */
.range {
    display: flex;
    gap: 1px;
    padding: 2px;
    background: var(--recess);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    overflow-x: auto;
    max-width: 100%;
}

.range__opt {
    padding: 4px 10px;
    border: none;
    background: transparent;
    color: var(--ink-3);
    border-radius: 1px;
    font-family: var(--f-read);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}
.range__opt:hover { color: var(--ink); }

.range__opt--on {
    background: var(--live-wash);
    color: var(--live);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 35%, transparent);
}

/* Chart series key */
.key { display: flex; gap: 12px; flex-wrap: wrap; }
.key__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    text-transform: uppercase;
}
.key__mark { width: 11px; height: 2px; border-radius: 1px; flex: none; }

/* -------------------------------------------------------------------------
   LAYOUT GRIDS
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }

/* Dashboard hero: flow schematic beside the primary wattmeter. */
.grid--hero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }

/* Console: schematic | primary gauge | secondary instruments. The centre
   column is widest because that gauge is what the page is for. */
.grid--console { grid-template-columns: minmax(0, 1fr) minmax(340px, 1.15fr) minmax(0, 0.62fr); }

/* -------------------------------------------------------------------------
   CONSOLE — the hero instrument housing
   ------------------------------------------------------------------------- */
.console {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 18px 0;
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 12px;
    background:
        radial-gradient(ellipse 90% 70% at 50% 25%, rgba(0, 240, 255, 0.08), transparent 70%),
        radial-gradient(ellipse 70% 60% at 50% 85%, rgba(139, 92, 246, 0.06), transparent 70%),
        #0b1120;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), inset 0 0 25px rgba(0, 240, 255, 0.05);
    overflow: hidden;
}

/* Bracket marks on all four corners — this housing is the page's anchor, so
   it gets the full frame rather than two opposing ticks. */
.console::before,
.console::after {
    content: "";
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--line-hot);
    border-style: solid;
    pointer-events: none;
}
.console::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; }
.console::after { top: 6px; right: 6px; border-width: 1px 1px 0 0; }

/* The readout sits INSIDE the ring, as on a real dial: the gauge is pulled
   down over it with a negative margin rather than stacked above it. */
.console__gauge {
    width: min(100%, 280px);
    margin-bottom: 4px;
    flex: none;
}

.console__read {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 8px 0;
    margin-bottom: 8px;
    width: 100%;
}

/* Load percentage: subordinate to the kW figure it sits beneath, but still a
   primary reading. */
.console__load {
    margin-top: 7px;
    font-size: 21px;
    line-height: 1;
}
.console__load .readout { font-size: 21px; }
.console__load .unit { font-size: 9px; }

.console__state { margin-top: 9px; }

.console__params {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: calc(100% + 32px);
    /* margin-top:auto pins the strip to the housing's foot, so the console
       can stretch to its row without leaving a gap beneath the readings. */
    margin: auto -16px 0;
    border-top: 1px solid var(--line);
    background: var(--recess);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 290px; }

.stack { display: flex; flex-direction: column; gap: var(--gap); }

.section { margin-bottom: var(--gap); }

.section__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.section__name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--f-read);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.section__name::before {
    content: "";
    width: 3px; height: 13px;
    background: var(--live);
    box-shadow: 0 0 7px var(--live-glow);
}

/* -------------------------------------------------------------------------
   PAGE HEADER
   ------------------------------------------------------------------------- */
.page {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}

.page__title {
    font-family: var(--f-read);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.page__meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 3px;
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-2);
}
.page__meta span { white-space: nowrap; }

/* -------------------------------------------------------------------------
   CONTROLS
   ------------------------------------------------------------------------- */
.btn {
    padding: 6px 12px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    color: var(--ink-2);
    font-family: var(--f-read);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { color: var(--ink); border-color: var(--line-hot); }

.btn--live { background: var(--live-wash); border-color: var(--live-dim); color: var(--live); }
.btn--live:hover { background: color-mix(in srgb, var(--live) 16%, transparent); color: var(--live); }
.btn--danger { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }
.btn--danger:hover { background: var(--crit-wash); color: var(--crit); }
.btn--xs { padding: 3px 8px; font-size: 10px; }

.sel {
    appearance: none;
    padding: 6px 26px 6px 10px;
    background: var(--recess);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--f-read);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    max-width: 230px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%235a6b7d'%3E%3Cpath d='M6 8.5L2.5 5h7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 10px;
}
.sel:hover { border-color: var(--line-hot); }

.inp {
    width: 100%;
    padding: 6px 9px;
    background: var(--recess);
    border: 1px solid var(--line-2);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--f-ui);
    font-size: 12.5px;
}
.inp:focus { border-color: var(--live); outline: none; }
.inp.mono { font-family: var(--f-mono); }
.inp--err { border-color: var(--crit); }

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field__note { font-size: 10.5px; color: var(--ink-4); }
.field__err { font-size: 10.5px; color: var(--crit); }

.toggle { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12.5px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }

/* -------------------------------------------------------------------------
   DATA TABLE — reference readings, kept technical
   ------------------------------------------------------------------------- */
.tbl-wrap { overflow-x: auto; }

.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }

.tbl th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 8px 11px;
    background: var(--panel-2);
    border-bottom: 1px solid var(--line-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
    white-space: nowrap;
}

.tbl td {
    padding: 8px 11px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    white-space: nowrap;
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
}

.tbl td.txt { font-family: var(--f-ui); font-size: 12.5px; }
.tbl tbody tr:hover { background: var(--panel-2); }

/* -------------------------------------------------------------------------
   BANNER
   ------------------------------------------------------------------------- */
.banner {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid transparent;
    border-radius: var(--r);
    margin-bottom: var(--gap);
    font-size: 12.5px;
}
.banner--crit { background: var(--crit-wash); border-color: color-mix(in srgb, var(--crit) 38%, transparent); color: var(--crit); }
.banner--warn { background: var(--warn-wash); border-color: color-mix(in srgb, var(--warn) 38%, transparent); color: var(--warn); }
.banner--ok { background: var(--ok-wash); border-color: color-mix(in srgb, var(--ok) 38%, transparent); color: var(--ok); }
.banner--live { background: var(--live-wash); border-color: var(--live-dim); color: var(--ink); }
.banner__sp { flex: 1 1 auto; }

/* -------------------------------------------------------------------------
   EMPTY STATE
   ------------------------------------------------------------------------- */
.void-state {
    padding: 30px 16px;
    text-align: center;
    color: var(--ink-4);
    font-size: 12.5px;
}
.void-state svg { opacity: 0.3; margin-bottom: 8px; }

/* Value-change tick: a brief brightening, not a flash. */
.tick { animation: tick 0.45s ease-out; }
@keyframes tick {
    0% { color: var(--live); text-shadow: 0 0 16px var(--live-glow); }
    100% { }
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1400px) {
    .grid--hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

@media (max-width: 1200px) {
    :root { --rail: 56px; }

    /* Icon-only rail: labels and section headings are dropped, so the
       indicator moves from the edge to a ring around the icon itself. */
    .rail { padding: 12px 6px 18px; }
    .rail__link { justify-content: center; padding: 11px 6px; margin-bottom: 4px; }
    .rail__link span, .rail__legend { display: none; }

    .rail__group + .rail__group {
        margin-top: 10px;
        padding-top: 10px;
    }

    /* The 2px edge bar is invisible against a 56px column; the lit background
       carries the active state on its own. */
    .rail__link::before { display: none; }
    .rail__link--on { background: var(--live-wash); }

    .rail__count {
        position: absolute;
        top: 4px;
        right: 4px;
        margin: 0;
        transform: none;
        min-width: 16px;
        height: 16px;
        font-size: 9px;
    }

    .grid--hero,
    .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Gauge first: on a narrower screen it is still the thing to look at. */
    .grid--console {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    .grid--console > .console { order: -1; grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .phase-rack { grid-template-columns: minmax(0, 1fr); }
    .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
    .grid--console { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .hdr__site, .hdr__sep { display: none; }
}

@media (max-width: 640px) {
    :root { --gap: 9px; --header: 54px; }

    .main { padding: 9px 9px 74px; }
    .hdr { gap: 8px; padding: 0 10px; }

    /* Rail becomes a fixed console strip at thumb height. */
    .shell { grid-template-columns: minmax(0, 1fr); }
    .rail {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        height: auto;
        display: flex;
        justify-content: space-around;
        border-right: none;
        border-top: 1px solid var(--line-2);
        padding: 5px 3px;
        z-index: 90;
        background: var(--panel);
    }
    /* display:contents dissolves the group wrappers so every link becomes a
       direct flex child of the bar. Their dividing rules go with them. */
    .rail__group,
    .rail__group + .rail__group {
        margin: 0;
        padding: 0;
        border: none;
        display: contents;
    }

    .rail__link { margin-bottom: 0; }

    /* The indicator returns as an underline beneath the active icon, which is
       where a tab bar reads it. */
    .rail__link::before { display: block; }
    .rail__link--on::before {
        top: auto; bottom: 0;
        left: 18%; right: 18%;
        width: auto; height: 2px;
        border-radius: 2px 2px 0 0;
    }
    .rail__link:hover::before { background: transparent; }

    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .param-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .param:nth-child(3) { border-left: none; }
    .param:nth-child(n+3) { border-top: 1px solid var(--line); }

    .pm__body { grid-template-columns: 76px minmax(0, 1fr); }
    .chart { height: 175px; }
    .counter__digit { min-width: 16px; font-size: 18px; }
}

@media (max-width: 420px) {
    .grid--4 { grid-template-columns: minmax(0, 1fr); }
    .demo-tag span { display: none; }
    .pm__body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
}

/* -------------------------------------------------------------------------
   MOTION PREFERENCE
   All animation here is informational (flow, pulse, sweep), so it is reduced
   to a static state rather than removed — the information must survive.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .flow-carrier { animation: none; opacity: 0.7; }
    .lamp--online .lamp__led,
    .lamp--offline .lamp__led,
    .annun__item--critical.is-new::before { animation: none; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* -------------------------------------------------------------------------
   PRINT — shift handover reports
   ------------------------------------------------------------------------- */
@media print {
    body::before, .hdr, .rail, .range, .btn { display: none !important; }
    .shell { grid-template-columns: 1fr; }
    body { background: #fff; color: #000; }
    .ip, .pm, .flow { border-color: #999; break-inside: avoid; }
}

/* -------------------------------------------------------------------------
   VIEW SWITCH
   Standard and Pro are two views of one meter, so they read as a segmented
   pair rather than two unrelated buttons.
   ------------------------------------------------------------------------- */
.view-switch {
    display: flex;
    gap: 3px;
    padding: 3px;
    background: var(--recess);
    border: 1px solid var(--line-2);
    border-radius: 6px;
}

.view-switch__opt {
    padding: 7px 15px;
    border-radius: 4px;
    font-family: var(--f-ui);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-3);
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
}
.view-switch__opt:hover { color: var(--ink); text-decoration: none; }

.view-switch__opt--on {
    background: var(--live);
    color: #14100a;
    font-weight: 700;
}
.view-switch__opt--on:hover { color: #14100a; }

/* -------------------------------------------------------------------------
   FLOW STATUS LAMP
   Reports whether the schematic is showing live flow or a frozen last-known
   state. Colour and the pulse both carry it, so it reads without relying on
   colour alone.
   ------------------------------------------------------------------------- */
.flow-lamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: var(--recess);
    white-space: nowrap;
}

.flow-lamp__led {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-4);
    flex: none;
}

.flow-lamp__txt {
    font-family: var(--f-ui);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.flow-lamp--live { border-color: color-mix(in srgb, var(--ok) 40%, var(--line-2)); }
.flow-lamp--live .flow-lamp__led {
    background: var(--ok);
    box-shadow: 0 0 6px var(--ok-glow);
    animation: flowLampPulse 2s ease-in-out infinite;
}
.flow-lamp--live .flow-lamp__txt { color: var(--ok); }

.flow-lamp--stale { border-color: color-mix(in srgb, var(--warn) 40%, var(--line-2)); }
.flow-lamp--stale .flow-lamp__led { background: var(--warn); box-shadow: 0 0 6px var(--warn-glow); }
.flow-lamp--stale .flow-lamp__txt { color: var(--warn); }

.flow-lamp--dead { border-color: color-mix(in srgb, var(--crit) 45%, var(--line-2)); }
.flow-lamp--dead .flow-lamp__led {
    background: var(--crit);
    box-shadow: 0 0 6px var(--crit-glow);
    animation: flowLampBlink 1.1s steps(1) infinite;
}
.flow-lamp--dead .flow-lamp__txt { color: var(--crit); }

@keyframes flowLampBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
    .flow-lamp--live .flow-lamp__led,
    .flow-lamp--dead .flow-lamp__led { animation: none; }
}

/* -------------------------------------------------------------------------
   HEADER CLOCK
   A single-line control, so it shares the header row's centre line with the
   meter selector and the status lamp.
   ------------------------------------------------------------------------- */
.hdr__clock {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
    white-space: nowrap;
}

/* Every child of the header group is centred on one line. */
.hdr__group { align-items: center; }

/* -------------------------------------------------------------------------
   CONSOLE HEADER
   The console is not an .ip panel but sits in a row with them, so it carries
   a matching header bar to keep the row's cards on one line.
   ------------------------------------------------------------------------- */
.console__head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: calc(100% + 36px);
    margin: -16px -18px 14px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    /* Opaque: the console's radial glow sits behind it, and a translucent
       bar would tint this header differently from the panels beside it. */
    background: var(--panel-2);
    flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   HEADER — SIGNED-IN OPERATOR
   ------------------------------------------------------------------------- */
.hdr__out {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.hdr__user {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr__signout {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--line-2);
    border-radius: 3px;
    background: var(--recess);
    color: var(--ink-3);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.hdr__signout:hover {
    color: var(--crit);
    border-color: color-mix(in srgb, var(--crit) 45%, transparent);
}

/* The operator's name is the first thing to drop on a narrow console. */
@media (max-width: 1100px) {
    .hdr__user { display: none; }
}