/* ValveLine demo — Aurora brand tokens (sujikumar.com), light + dark.
   Pipe colours follow ISO 14726; status colours follow IEC 60073 meanings. */
:root {
  color-scheme: light;
  --bg: #FBFBFD; --surface: #FFFFFF; --inset: #F3F4F8; --line: #E5E7EF;
  --ink: #0A0B12; --muted: #4B5263; --action: #6D28D9; --on-action: #FFFFFF;
  --signal: #0E7490; --spark: #EA580C;
  --g1: #0891B2; --g2: #2563EB; --g3: #7C3AED; --g4: #DB2777;
  --glow-a: rgba(34, 211, 238, .22); --glow-b: rgba(139, 92, 246, .18); --glow-c: rgba(236, 72, 153, .12);
  --glass: rgba(255, 255, 255, .78);
  --shadow: 0 1px 2px rgba(10, 11, 18, .04), 0 12px 32px -16px rgba(10, 11, 18, .16);
  /* IEC 60073 status */
  --st-ok: #15803D; --st-amber: #B45309; --st-red: #DC2626; --st-wait: #2563EB;
  --st-ok-bg: #DCFCE7; --st-amber-bg: #FEF3C7; --st-red-bg: #FEE2E2; --st-wait-bg: #DBEAFE;
  /* P&ID (inherited by the inline SVG) */
  --pid-bg: #FFFFFF; --pid-ink: #0A0B12; --pid-muted: #4B5263; --pid-box: #F6F7FA; --pid-edge: #9AA3B5; --pid-case: #C9CED9;
  --sel: #0891B2;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, Consolas, monospace;
  --sans: Geist, Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 16px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07080D; --surface: #0F1118; --inset: #0B0D13; --line: rgba(255, 255, 255, .09);
  --ink: #F1F3F9; --muted: #A1A8BA; --action: #A78BFA; --on-action: #07080D;
  --signal: #22D3EE; --spark: #FB923C;
  --g1: #22D3EE; --g2: #60A5FA; --g3: #A78BFA; --g4: #F472B6;
  --glow-a: rgba(34, 211, 238, .16); --glow-b: rgba(139, 92, 246, .22); --glow-c: rgba(236, 72, 153, .12);
  --glass: rgba(15, 17, 24, .72);
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -20px rgba(0, 0, 0, .8);
  --st-ok: #4ADE80; --st-amber: #FBBF24; --st-red: #F87171; --st-wait: #60A5FA;
  --st-ok-bg: rgba(74, 222, 128, .14); --st-amber-bg: rgba(251, 191, 36, .14); --st-red-bg: rgba(248, 113, 113, .16); --st-wait-bg: rgba(96, 165, 250, .16);
  --pid-bg: #07080D; --pid-ink: #E6EAF2; --pid-muted: #8E97AA; --pid-box: #0F1118; --pid-edge: #5B6478; --pid-case: #5A6274;
  --sel: #22D3EE;
}
/* the inline SVG ships its own dark defaults on .pid-svg; inside the page it inherits the theme tokens */
:root .pid .pid-svg {
  --pid-bg: inherit; --pid-ink: inherit; --pid-muted: inherit; --pid-box: inherit; --pid-edge: inherit; --pid-case: inherit;
  --st-ok: inherit; --st-amber: inherit; --st-red: inherit; --st-wait: inherit; --sel: inherit;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); }
body { background:
  radial-gradient(900px 420px at 8% -10%, var(--glow-a), transparent 60%),
  radial-gradient(800px 420px at 92% -12%, var(--glow-b), transparent 60%),
  radial-gradient(700px 360px at 50% 110%, var(--glow-c), transparent 60%), var(--bg);
  background-attachment: fixed; min-height: 100vh; }
button, select { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.grad { background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Header */
.top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.brand strong { font-size: 18px; letter-spacing: -.2px; display: block; line-height: 1.15; }
.brand .sub { color: var(--muted); font-size: 12px; }
.opbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.system-select { font-weight: 600; }
#op-select { max-width: 420px; }
select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.phase { font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .7px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.phase.setting { color: var(--st-wait); background: var(--st-wait-bg); border-color: transparent; }
.phase.running { color: var(--st-ok); background: var(--st-ok-bg); border-color: transparent; }
.phase.alarm { color: #fff; background: var(--st-red); border-color: var(--st-red); }
.phase.completed { color: var(--ink); background: var(--inset); }
.clock { font: 600 13px var(--mono); color: var(--muted); }
.speed { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.speed select { padding: 4px 6px; }
.theme-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }

/* Alarm */
.alarm { display: flex; gap: 12px; align-items: center; padding: 10px 20px; background: var(--st-red); color: #fff; font-weight: 600; position: sticky; top: 61px; z-index: 4; }
.alarm[hidden] { display: none; }
.alarm-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: pulse 1.2s infinite; flex: none; }
#alarm-text { flex: 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.8); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); } }

/* Layout */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 16px; padding: 16px 20px; align-items: start; }
.twin { position: sticky; top: 76px; }
.pid { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--pid-bg); box-shadow: var(--shadow); }
.pid svg { display: block; width: 100%; height: auto; }
.legend-row { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 12px; padding: 8px 2px; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.legend-row b { color: var(--ink); font-weight: 600; }
.ringchip { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 2.5px solid; }
.ringchip.st-pending { border-color: var(--muted); border-style: dotted; }
.ringchip.st-wait { border-color: var(--st-wait); }
.ringchip.st-green { border-color: var(--st-ok); }
.ringchip.st-amber { border-color: var(--st-amber); }
.ringchip.st-red { border-color: var(--st-red); }

.side { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.card h2 { font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: .9px; color: var(--muted); margin: 0 0 10px; }
.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 10px; }

/* Buttons */
.btn { background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; transition: border-color .15s, transform .1s; }
.btn:hover:not(:disabled) { border-color: var(--action); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: linear-gradient(90deg, var(--g1), var(--g2) 45%, var(--g3)); color: #fff; border-color: transparent; font-weight: 700; }
.btn-primary:hover:not(:disabled) { border-color: transparent; filter: brightness(1.08); }
.btn-ghost { background: transparent; }
.btn-light { background: #fff; color: #7f1d1d; border-color: #fff; font-weight: 700; }
.btn-fault { border-style: dashed; text-align: left; }
.btn-req { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.linkish { background: none; border: none; color: var(--action); cursor: pointer; padding: 0; text-decoration: underline; }
.actions, .faults { display: flex; flex-wrap: wrap; gap: 8px; }
.faults .btn { flex: 1 1 45%; }
.fault-msg { margin: 10px 0 0; min-height: 1em; color: var(--action); }

/* Summary */
.summary-text { font-size: 13.5px; margin-bottom: 10px; }
.summary-text b { color: var(--action); }
.progress { height: 6px; background: var(--inset); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
#progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3), var(--g4)); transition: width .3s; }

/* Valve card */
.vhead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vtag { font: 700 18px var(--mono); }
.vsvc { color: var(--muted); font-size: 13px; margin: 2px 0 10px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; font-size: 13px; margin-bottom: 12px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; }
.badge { font: 700 10.5px var(--mono); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.badge.pending { border: 1px dotted var(--muted); color: var(--muted); }
.badge.wait { background: var(--st-wait-bg); color: var(--st-wait); }
.badge.green { background: var(--st-ok-bg); color: var(--st-ok); }
.badge.amber { background: var(--st-amber-bg); color: var(--st-amber); }
.badge.red { background: var(--st-red); color: #fff; }
.badge.off { border: 1px solid var(--line); color: var(--muted); }
.reason { background: var(--st-red-bg); border: 1px solid var(--st-red); color: var(--ink); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.countdown { font: 600 12px var(--mono); color: var(--st-wait); margin-bottom: 10px; }
.vactions { display: flex; flex-wrap: wrap; gap: 8px; }
.vactions .btn { flex: 1 1 auto; }

/* Steps */
.group { font-size: 12px; color: var(--muted); margin: 10px 0 6px; display: flex; justify-content: space-between; align-items: center; }
.group:first-child { margin-top: 0; }
.step { display: grid; grid-template-columns: 74px 64px 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 8px; cursor: pointer; font-size: 12.5px; }
.step:hover { background: var(--inset); }
.step.sel { border-color: var(--action); background: var(--inset); }
.step .t { font: 600 12.5px var(--mono); }
.step .r { font: 600 11px var(--mono); color: var(--muted); }
.step .l { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step.next .t::after { content: " ◂"; color: var(--action); }

/* Log */
.log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; font: 12px/1.5 var(--mono); }
.log li { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 3px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.log li time { opacity: .8; }
.log li.error, .log li.alarm { color: var(--st-red); }
.log li.warn { color: var(--st-amber); }
.log li.ok { color: var(--st-ok); }

/* ---- P&ID live states ---- */
#pid .valve { cursor: pointer; }
#pid .valve.off { opacity: .4; }
/* position (mimic): CLOSED solid, OPEN hollow in medium colour, MOVING flashing, no sensor dashed */
#pid .valve.pos-closed .body { fill: var(--pid-ink); stroke: var(--pid-ink); }
#pid .valve.pos-open .body { fill: var(--pid-bg); stroke: var(--pid-ink); stroke-width: 1.8; }
#pid .valve.pos-moving .body { fill: var(--pid-ink); stroke: var(--pid-ink); animation: blink .6s steps(2) infinite; }
#pid .valve.pos-unknown .body { fill: none; stroke: var(--pid-muted); stroke-dasharray: 3 2; }
/* verification ring (IEC 60073) */
#pid .valve.st-pending .ring { stroke: var(--pid-muted); stroke-dasharray: 2 3; stroke-width: 1.4; }
#pid .valve.st-wait .ring { stroke: var(--st-wait); }
#pid .valve.st-green .ring { stroke: var(--st-ok); }
#pid .valve.st-amber .ring { stroke: var(--st-amber); }
#pid .valve.st-red .ring { stroke: var(--st-red); stroke-width: 3; }
#pid .valve.drift .ring { stroke: var(--st-red); stroke-width: 3.5; animation: ring 0.8s ease-in-out infinite; }
#pid .valve.sel .tag { fill: var(--sel); font-weight: 700; }
#pid .valve.sel .ring { stroke-dasharray: none; }
#pid .valve .req { font: 700 9px var(--mono); }
#pid .pipe.planned { stroke-dasharray: 9 5; }
#pid .pipe.flow { stroke-width: 5.5; stroke-dasharray: 12 7; animation: flow .7s linear infinite; filter: drop-shadow(0 0 3px var(--sel)); }
#pid .pump.running circle { stroke: var(--sel); stroke-width: 2.6; }
#pid .level { opacity: .3; }
#pid .lim { stroke: var(--pid-muted); stroke-width: 1; stroke-dasharray: 3 2; }
#pid .lim-H { stroke: var(--st-red); }
#pid .lim-L { stroke: var(--st-amber); }
#pid .limt { font: 600 7.5px var(--mono); fill: var(--pid-muted); }
#pid .limt.lim-H { fill: var(--st-red); }
#pid .limt.lim-L { fill: var(--st-amber); }
#pid .tank.lvl-near .box { stroke: var(--st-amber); stroke-width: 2.5; }
#pid .tank.lvl-hi .box, #pid .tank.lvl-lo .box { stroke: var(--st-red); stroke-width: 3; animation: ring .8s ease-in-out infinite; }
.zone { font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; margin-right: 4px; }
.zone-port { background: var(--st-amber-bg); color: var(--st-amber); }
.zone-sea { background: var(--st-wait-bg); color: var(--st-wait); }
@keyframes flow { to { stroke-dashoffset: -19; } }
@keyframes blink { 50% { fill: none; } }
@keyframes ring { 50% { stroke-opacity: .25; } }

/* Intro */
.intro { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; max-width: 540px; padding: 22px 24px; box-shadow: var(--shadow); }
.intro::backdrop { background: rgba(3, 6, 12, .6); backdrop-filter: blur(3px); }
.intro h2 { margin: 0 0 10px; }
.intro ol { padding-left: 18px; }
.intro li { margin-bottom: 8px; }

.foot { color: var(--muted); font-size: 12px; padding: 4px 20px 24px; }
.foot a { color: var(--action); }

.report { display: none; }

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding: 12px; }
  .twin { position: static; }
  .alarm { top: 0; }
  .top { position: static; }
}
@media (max-width: 480px) {
  .opbar { width: 100%; }
  #op-select, .system-select { flex: 1 1 100%; max-width: 100%; min-width: 0; width: 100%; }
  .step { grid-template-columns: 74px 64px 1fr; }
  .step .l { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .top, .alarm, .layout, .foot, dialog { display: none !important; }
  .report { display: block; font: 11pt/1.4 var(--sans); color: #000; padding: 0; }
  .report h1 { font-size: 18pt; margin: 0 0 4pt; }
  .report h2 { font-size: 12pt; margin: 14pt 0 6pt; border-bottom: 1px solid #999; padding-bottom: 2pt; }
  .report table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .report th, .report td { border: 1px solid #bbb; padding: 3pt 5pt; text-align: left; vertical-align: top; }
  .report th { background: #eee; }
  .report .meta { color: #333; font-size: 10pt; }
  .report .ok { color: #05603a; font-weight: 700; }
  .report .bad { color: #b00020; font-weight: 700; }
  .report .amb { color: #8a5300; font-weight: 700; }
  .report .note { font-size: 9pt; color: #555; margin-top: 12pt; }
}