/* ============================================================================
   Vantage UI — HMI / Operational Surface Tokens   (ADDITIVE DROP-IN)
   ----------------------------------------------------------------------------
   Companion to vantage-tokens.css — load AFTER it. Changes NOTHING by itself:
   every rule here is scoped to `.hmi-surface`, so existing apps are untouched
   until a container opts in.

   WHY THIS EXISTS
   The base system is the DOCUMENT register: warm, restrained, document-grade —
   right for navigation, forms, tables, intelligence panels. Plant-facing
   OPERATIONAL surfaces (mimics, faceplates, alarm banners) follow a second,
   equally deliberate register grounded in ISA-101 / High-Performance HMI:
   cool neutral grey, colour by exception. An operator's eye must land on the
   one abnormal thing; on a healthy screen, nothing shouts.

   Rules of the operational register (full text:
   vantage-ui-guidelines-hmi-addendum.md):
     1. Cool neutral grey canvas — the ONLY sanctioned departure from warmth,
        and only inside .hmi-surface.
     2. Colour by exception: equipment is always grey line-work; state is a
        small marker (run / hold / alarm). Alarms are the only loud element.
     3. Real process cues: level fills, PV bars with limit ticks, solid pipes
        with direction arrows.
     4. Status colours ANCHOR to the base semantic tokens (success/warning/
        error/uns) so green/amber/red/steel mean the same thing in every app.
     5. The intelligence layer (precog, overlays) keeps base-register styling —
        a calm grey plant with intelligent colour on top.

   Theming: same mechanism as the base file — [data-theme="dark"] re-themes;
   components only ever read var(--hmi-*). SVG mimics use the utility classes
   at the bottom or read the vars directly.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. LIGHT (default) — cool neutral greys, scoped
   --------------------------------------------------------------------------- */
.hmi-surface {
  /* Canvas + panels */
  --hmi-canvas:    #E8EAEC;   /* operational canvas (cool, NOT the warm cream) */
  --hmi-panel:     #DFE2E5;   /* panels, faceplate sections                    */
  --hmi-chrome:    #F2F4F5;   /* toolbars/headers inside the surface           */
  --hmi-banner:    #D6DADD;   /* alarm-banner strip                            */
  --hmi-zone:      #C4C9CE;   /* zone outlines, hairlines, bar frames          */

  /* Process graphics */
  --hmi-line:      #5F666C;   /* equipment line work — ALWAYS grey             */
  --hmi-vessel-bg: #F0F2F3;   /* vessel interior                               */
  --hmi-level:     #C2C9CF;   /* vessel level fill / bar normal band           */
  --hmi-pipe:      #8A9095;   /* process lines + direction arrows              */

  /* Text */
  --hmi-text-1:    #25292D;
  --hmi-text-2:    #5C6166;

  /* State — ANCHORED to the base semantic tokens (fallbacks = base light) */
  --hmi-run:       var(--color-success, #2D7F46);  /* small marker only      */
  /* run-soft: OPTIONAL user-toggled outline for running units (addendum rule 6
     — a user-invoked dynamic, default off). Softened toward the line grey so
     it reads as "alive", never as loud as hold/alarm. */
  --hmi-run-soft:  color-mix(in srgb, var(--color-success, #2D7F46) 65%, var(--hmi-line));
  --hmi-hold:      var(--color-warning, #C18A1E);
  --hmi-alarm:     var(--color-error,   #B7372B);
  --hmi-alarm-text:#FCFBF9;                        /* warm off-white, not #FFF */
  --hmi-transfer:  var(--color-uns,     #1F6FB8);  /* active transfer + focus  */

  background: var(--hmi-canvas);
  color: var(--hmi-text-1);
}

/* ---------------------------------------------------------------------------
   2. DARK — manually chosen cool greys (not an inversion)
   --------------------------------------------------------------------------- */
[data-theme="dark"] .hmi-surface {
  /* Dark canvas anchored to the APP's dark depth (#1A1715 warm near-black) so
     the operational surface no longer floats as a lighter "faded" grey panel
     inside the chrome (Andy, 2026-06-11). Stays COOL (the register identity)
     but at matching luminance; cards/line-work gain contrast, not lose it. */
  --hmi-canvas:    #1B1D1F;
  --hmi-panel:     #232629;
  --hmi-chrome:    #17191B;
  --hmi-banner:    #202326;
  --hmi-zone:      #383D42;

  --hmi-line:      #AEB5BB;
  --hmi-vessel-bg: #24272A;
  --hmi-level:     #353B41;
  --hmi-pipe:      #6F767C;

  --hmi-text-1:    #E8EAEC;
  --hmi-text-2:    #9AA1A8;

  --hmi-run:       var(--color-success, #5BB378);
  --hmi-run-soft:  color-mix(in srgb, var(--color-success, #5BB378) 65%, var(--hmi-line));
  --hmi-hold:      var(--color-warning, #E0B05A);
  --hmi-alarm:     var(--color-error,   #E07868);
  --hmi-alarm-text:#1F2225;
  --hmi-transfer:  var(--color-uns,     #5BA0DD);
}

/* ---------------------------------------------------------------------------
   3. COMPONENTS (all scoped under .hmi-surface)
   Geometry: SQUARE register — radius ≤2px, square corners, mono values,
   no pills, no shadows, no glows. Blink is steps(2) (ISA-18.2 unacked cue),
   never a soft pulse.
   --------------------------------------------------------------------------- */

/* Alarm banner strip */
.hmi-surface .hmi-banner {
  display: flex; align-items: center; gap: 14px;
  background: var(--hmi-banner);
  border-bottom: 1px solid var(--hmi-zone);
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}

/* Alarm priority square (1 = highest). Unacked → add .hmi-blink */
.hmi-surface .hmi-pri {
  width: 17px; height: 17px;
  display: inline-grid; place-items: center;
  font: 700 11px var(--font-mono);
  border-radius: 1px;
  background: var(--hmi-alarm); color: var(--hmi-alarm-text);
}
.hmi-surface .hmi-pri.p2 { background: var(--hmi-hold); }
.hmi-surface .hmi-pri.p3 { background: var(--hmi-pipe); }

.hmi-blink { animation: hmi-blink 1.1s steps(2) infinite; }
@keyframes hmi-blink { 50% { opacity: .35; } }

/* State chip (faceplate header) — square, mono, dot not pill */
.hmi-surface .hmi-statechip {
  display: inline-flex; align-items: center; gap: 7px;
  font: 650 11px var(--font-mono); letter-spacing: .06em;
  padding: 2.5px 9px;
  border: 1px solid var(--hmi-zone); border-radius: 2px;
}
.hmi-surface .hmi-statechip .dot { width: 8px; height: 8px; border-radius: 1px; background: var(--hmi-run); }
.hmi-surface .hmi-statechip .dot.hold  { background: var(--hmi-hold); }
.hmi-surface .hmi-statechip .dot.alarm { background: var(--hmi-alarm); }
.hmi-surface .hmi-statechip .dot.idle  { background: var(--hmi-pipe); }

/* PV bar indicator: frame + normal band + soft/hard limit ticks + PV pointer */
.hmi-surface .hmi-bar  { position: relative; height: 14px; border: 1px solid var(--hmi-zone); background: var(--hmi-vessel-bg); }
.hmi-surface .hmi-band { position: absolute; top: 1px; bottom: 1px; background: var(--hmi-level); opacity: .6; }
.hmi-surface .hmi-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--hmi-text-2); }
.hmi-surface .hmi-tick.hard { background: var(--hmi-alarm); }
.hmi-surface .hmi-ptr  { position: absolute; top: -4px; bottom: -4px; width: 2.5px;
                         background: var(--hmi-text-1); color: var(--hmi-text-1);
                         /* contrast halo so the pointer stays visible ON a limit
                            tick (red-on-red — feedback 0000186c) */
                         box-shadow: 0 0 0 1px var(--hmi-vessel-bg); }
.hmi-surface .hmi-ptr.alarm { background: var(--hmi-alarm); color: var(--hmi-alarm); }
/* caret above the pointer — unmissable PV position marker */
.hmi-surface .hmi-ptr::after {
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: currentColor; border-bottom: none;
  filter: drop-shadow(0 0 1px var(--hmi-vessel-bg));
}

/* Value plate (under ISA instrument bubbles) */
.hmi-surface .hmi-vplate {
  display: inline-block; padding: 2px 8px;
  background: var(--hmi-vessel-bg);
  border: 1px solid var(--hmi-zone); border-radius: 1px;
  font: 650 11.5px var(--font-mono); color: var(--hmi-text-1);
}
.hmi-surface .hmi-vplate.alarm { color: var(--hmi-alarm); border-color: var(--hmi-alarm); }

/* Operator-action block (Interface_Request) — bordered steel blue, no glow */
.hmi-surface .hmi-action {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--hmi-transfer); border-radius: 2px;
  padding: 9px 12px;
}
.hmi-surface .hmi-action .t { font: 600 12.5px var(--font-mono); color: var(--hmi-transfer); }

/* ---------------------------------------------------------------------------
   4. SVG MIMIC UTILITY CLASSES (apply to SVG elements inside .hmi-surface)
   --------------------------------------------------------------------------- */
.hmi-surface .hmi-eq     { stroke: var(--hmi-line); stroke-width: 1.6; fill: var(--hmi-vessel-bg); stroke-linecap: round; }
.hmi-surface .hmi-eq.hold  { stroke: var(--hmi-hold); }
.hmi-surface .hmi-eq.alarm { stroke: var(--hmi-alarm); }
.hmi-surface .hmi-lvl    { fill: var(--hmi-level); }
.hmi-surface .hmi-pipeln { stroke: var(--hmi-pipe); stroke-width: 2; fill: none; }
.hmi-surface .hmi-arrow  { fill: var(--hmi-pipe); }
.hmi-surface .hmi-xfer   { stroke: var(--hmi-transfer); stroke-width: 2.4; fill: none;
                           stroke-dasharray: 8 6; animation: hmi-flow 1s linear infinite; }
@keyframes hmi-flow { to { stroke-dashoffset: -14; } }
.hmi-surface .hmi-runmk  { fill: var(--hmi-run); }      /* small run marker   */
.hmi-surface .hmi-holdmk { fill: var(--hmi-hold); }     /* hold diamond       */
.hmi-surface .hmi-alarmsq{ fill: var(--hmi-alarm); }    /* alarm square (+ .hmi-blink) */
.hmi-surface .hmi-tagid  { font: 600 11px var(--font-mono); fill: var(--hmi-text-2); letter-spacing: .05em; }
.hmi-surface .hmi-val    { font: 650 11px var(--font-mono); fill: var(--hmi-text-1); }
.hmi-surface .hmi-val.alarm { fill: var(--hmi-alarm); }
.hmi-surface .hmi-vlabel { font: 500 10px var(--font-mono); fill: var(--hmi-text-2); }

/* ---------------------------------------------------------------------------
   5. ACCESSIBILITY — reduced-motion (R5 / S4)
   The alarm square stays statically red; information survives even when the
   user has requested reduced motion. The hmi-xfer flow animation also stops.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hmi-blink { animation: none; }
  .hmi-surface .hmi-xfer { animation: none; }
}