/* PRA — Substation Risk Assessment · design system
 * Type-led, Apple-flavoured. The hierarchy is carried by TYPOGRAPHY and SPACE, not
 * boxes: large tightly-tracked Inter Display headlines, near-invisible hairlines,
 * generous air, one restrained accent. Adaptive light/dark (OS + manual override).
 *
 * Legacy token NAMES (--bg --panel --card --line --fg --mut --accent --ok --run
 * --err --bar) are preserved — app.js sets some inline. Chart colours live in
 * --chart-* and are read by app.js so charts track the active theme. */

/* =========================================================== fonts */
:root{
  --sans:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --display:"Inter Display","Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
}

/* =========================================================== tokens : light (Apple) */
:root{
  --bg:#fbfbfd;
  --panel:rgba(251,251,253,.72);
  --card:#ffffff;
  --card-2:#f5f5f7;
  --inset:#f5f5f7;
  --line:rgba(0,0,0,.09);
  --line-soft:rgba(0,0,0,.055);
  --hover:rgba(0,0,0,.04);

  --fg:#1d1d1f;
  --mut:#6e6e73;
  --dim:#86868b;
  --dim-dec:#c7c7cc;

  --accent:#0071e3;
  --accent-2:#0077ed;
  --accent-ink:#ffffff;
  --accent-soft:rgba(0,113,227,.09);
  --ring:rgba(0,113,227,.30);
  --ok:#1a8f3c;
  --run:#b9700a;
  --err:#d70015;
  --bar:#0071e3;
  --viol:#8b5cf6;

  --chart-1:#3b82f6; --chart-2:#0ea371; --chart-3:#d17d16; --chart-4:#8b5cf6; --chart-5:#e5484d;
  --chart-grid:rgba(0,0,0,.08);
  --chart-text:#6e6e73;
  --chart-ink:#1d1d1f;
  /* sequential risk ramp — ONE hue (red), light→dark, 6 named steps. Magnitude only:
     it encodes "how much of the system risk does this asset drive", never identity. */
  --heat-0:#b9b9be;                     /* not a failable asset / no score */
  --heat-1:#fae4e1; --heat-2:#f3c2ba; --heat-3:#e99a8c;
  --heat-4:#d96f5c; --heat-5:#bf4735; --heat-6:#95291c;

  --grid-dot:rgba(0,0,0,.06);
  --node-rim:rgba(0,0,0,.17);

  --r1:12px; --r2:16px; --r3:22px; --pill:980px;
  --sh-1:0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --sh-2:0 4px 22px -8px rgba(0,0,0,.14);
  --sh-pop:0 20px 48px -16px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.08);
  --t:220ms cubic-bezier(.22,.61,.36,1);

  --maxw:1080px;
  --maxw-wide:1560px;
  --header-h:59px;
  color-scheme:light;
}

/* =========================================================== tokens : dark (true black) */
@media (prefers-color-scheme: dark){ :root:not([data-theme]){
  --bg:#000000;
  --panel:rgba(20,20,22,.68);
  --card:#1d1d1f;
  --card-2:#161618;
  --inset:#161618;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.07);
  --hover:rgba(255,255,255,.06);
  --fg:#f5f5f7;
  --mut:#a1a1a6;
  --dim:#86868b;
  --dim-dec:#48484a;
  --accent:#2997ff;
  --accent-2:#409cff;
  --accent-ink:#00121f;
  --accent-soft:rgba(41,151,255,.14);
  --ring:rgba(41,151,255,.42);
  --ok:#30d158;
  --run:#ff9f0a;
  --err:#ff453a;
  --bar:#2997ff;
  --viol:#a78bfa;
  --chart-grid:rgba(255,255,255,.09);
  --chart-text:#a1a1a6;
  --chart-ink:#f5f5f7;
  --heat-0:#5a5a60;
  --heat-1:#3d2320; --heat-2:#5d2f28; --heat-3:#833e31;
  --heat-4:#a9523e; --heat-5:#cf6a51; --heat-6:#f18a6d;
  --grid-dot:rgba(255,255,255,.055);
  --node-rim:rgba(255,255,255,.16);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 26px -10px rgba(0,0,0,.7);
  --sh-pop:0 24px 56px -16px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.5);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#000000;
  --panel:rgba(20,20,22,.68);
  --card:#1d1d1f;
  --card-2:#161618;
  --inset:#161618;
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.07);
  --hover:rgba(255,255,255,.06);
  --fg:#f5f5f7;
  --mut:#a1a1a6;
  --dim:#86868b;
  --dim-dec:#48484a;
  --accent:#2997ff;
  --accent-2:#409cff;
  --accent-ink:#00121f;
  --accent-soft:rgba(41,151,255,.14);
  --ring:rgba(41,151,255,.42);
  --ok:#30d158;
  --run:#ff9f0a;
  --err:#ff453a;
  --bar:#2997ff;
  --viol:#a78bfa;
  --chart-grid:rgba(255,255,255,.09);
  --chart-text:#a1a1a6;
  --chart-ink:#f5f5f7;
  --heat-0:#5a5a60;
  --heat-1:#3d2320; --heat-2:#5d2f28; --heat-3:#833e31;
  --heat-4:#a9523e; --heat-5:#cf6a51; --heat-6:#f18a6d;
  --grid-dot:rgba(255,255,255,.055);
  --node-rim:rgba(255,255,255,.16);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 26px -10px rgba(0,0,0,.7);
  --sh-pop:0 24px 56px -16px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* =========================================================== base */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--fg);background:var(--bg);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  font-feature-settings:"ss01" 1,"cv11" 1;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  display:flex;align-items:flex-start;min-height:100vh;
}
::selection{background:color-mix(in srgb,var(--accent) 26%, transparent)}

*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--fg) 20%,transparent) transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--fg) 18%,transparent);border-radius:var(--pill);
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--fg) 30%,transparent);background-clip:content-box}

/* =========================================================== sidebar / nav */
.sidebar{
  flex:0 0 214px;position:sticky;top:0;align-self:stretch;height:100vh;z-index:20;
  display:flex;flex-direction:column;gap:4px;padding:18px 14px;
  background:var(--panel);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-right:1px solid var(--line-soft);overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0;padding:4px 8px 16px}
.logo{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--accent-2),var(--accent));
  box-shadow:0 5px 14px -5px color-mix(in srgb,var(--accent) 55%,transparent), inset 0 1px 0 rgba(255,255,255,.3);
}
.logo svg{width:21px;height:21px;display:block}
.brand-txt{min-width:0}
.brand h1{margin:0;font-family:var(--display);font-size:17px;font-weight:640;letter-spacing:-.02em;line-height:1.1}
.brand .sub{color:var(--mut);font-size:11px;letter-spacing:0;margin-top:2px;line-height:1.25}

nav{display:flex;flex-direction:column;gap:2px}
nav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:transparent;border:0;color:var(--mut);
  padding:9px 12px;border-radius:10px;cursor:pointer;
  font-size:14px;font-weight:500;letter-spacing:-.01em;transition:color var(--t),background var(--t);
}
nav button:hover{color:var(--fg);background:var(--hover)}
nav button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
nav .ni{flex:none;width:18px;text-align:center;font-size:13px;opacity:.85}

.side-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 8px 2px;border-top:1px solid var(--line-soft)}

.theme-btn{display:grid;place-items:center;width:32px;height:32px;flex:none;cursor:pointer;
  background:var(--card-2);border:0;border-radius:var(--pill);color:var(--mut);
  transition:color var(--t),background var(--t)}
.theme-btn:hover{color:var(--fg);background:var(--hover)}
.theme-btn svg{width:17px;height:17px;display:block}

/* =========================================================== layout & hero type */
main{flex:1 1 auto;min-width:0;padding:40px clamp(20px,3.5vw,52px) 96px}
main>div{max-width:var(--maxw);margin:0 auto}
/* the diagram-led views (model / results / ROI) are wide objects — the reading views stay narrow */
main>div.wide{max-width:var(--maxw-wide)}
.view-head{margin:6px 2px 30px;max-width:60ch}
.view-head h2{
  margin:0;font-family:var(--display);
  font-size:clamp(2rem, 1.35rem + 2.7vw, 3rem);font-weight:680;
  letter-spacing:-.032em;line-height:1.05;
}
.view-head p{margin:14px 0 0;color:var(--mut);
  font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.5;font-weight:400;letter-spacing:-.01em}

.card{
  background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--r3);
  padding:26px 28px;margin-bottom:20px;box-shadow:var(--sh-1);
}
.card>h2,.card-title{margin:0 0 16px;font-family:var(--display);font-size:19px;font-weight:600;
  letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.card-sub{color:var(--mut);font-weight:400;font-size:13px;letter-spacing:-.01em}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px}
.divider{border:0;border-top:1px solid var(--line-soft);margin:22px 0}

/* =========================================================== forms */
label{display:block;font-size:12.5px;color:var(--mut);margin:15px 0 6px;font-weight:500;letter-spacing:-.008em}
label:first-child{margin-top:0}
select,input[type=number],input[type=text],input[type=file],textarea{
  width:100%;padding:11px 14px;background:var(--card-2);color:var(--fg);
  border:1px solid transparent;border-radius:var(--r1);font-size:14px;font-family:inherit;letter-spacing:-.006em;
  transition:border-color var(--t),box-shadow var(--t),background var(--t);
}
select:hover,input:hover,textarea:hover{background:color-mix(in srgb,var(--card-2) 82%, var(--fg) 4%)}
select:focus,input:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--ring);background:var(--card)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%2386868b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
textarea{font-family:var(--mono);font-size:12.5px;resize:vertical;line-height:1.55;letter-spacing:0}
input::placeholder,textarea::placeholder{color:var(--dim)}

input[type=file]{padding:8px 12px;cursor:pointer}
input[type=file]::file-selector-button{
  margin-right:12px;padding:7px 15px;border:0;border-radius:var(--pill);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:560;font-size:12.5px;letter-spacing:-.01em;
  transition:filter var(--t);
}
input[type=file]::file-selector-button:hover{filter:brightness(1.08)}

.row{display:flex;gap:16px;flex-wrap:wrap}
.row>div{flex:1;min-width:130px}

.chips{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
.chips label{display:flex;align-items:center;gap:8px;margin:0;color:var(--fg);font-size:13.5px;font-weight:450;
  padding:8px 15px;border:1px solid transparent;border-radius:var(--pill);background:var(--card-2);
  cursor:pointer;letter-spacing:-.01em;transition:background var(--t),color var(--t)}
.chips label:hover{background:color-mix(in srgb,var(--card-2) 80%, var(--fg) 5%)}
.chips label:has(input:checked){background:var(--accent-soft);color:var(--accent)}
.chips input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}

.hint{color:var(--mut);font-size:13px;margin-top:12px;line-height:1.55;letter-spacing:-.006em}
.hint b{color:var(--fg);font-weight:560}
.hint code,code{background:var(--card-2);padding:1px 6px;border-radius:6px;
  font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:0}
.muted{color:var(--mut)} .dim{color:var(--dim)}
.hidden{display:none !important}

/* =========================================================== buttons (Apple pill) */
button.go{
  margin-top:18px;padding:12px 24px;border:0;border-radius:var(--pill);cursor:pointer;
  font-family:inherit;font-weight:560;font-size:15px;letter-spacing:-.01em;color:var(--accent-ink);
  background:var(--accent);transition:filter var(--t),transform var(--t),background var(--t),opacity var(--t);
}
button.go:hover{background:var(--accent-2);filter:brightness(1.03)}
button.go:active{transform:scale(.98)}
button.go:disabled{opacity:.4;cursor:default;filter:none}
button.go.ghost{background:var(--card-2);color:var(--fg);font-weight:520}
button.go.ghost:hover{background:color-mix(in srgb,var(--card-2) 78%, var(--fg) 7%);filter:none}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:0;box-shadow:0 0 0 4px var(--ring);border-radius:var(--r1)}

/* =========================================================== segmented tabs */
.tabs{display:inline-flex;gap:2px;margin-bottom:20px;flex-wrap:wrap;max-width:100%;
  padding:3px;background:var(--card-2);border-radius:var(--r1)}
.tabs button{
  background:transparent;border:0;color:var(--mut);padding:9px 17px;border-radius:9px;
  cursor:pointer;font-size:13.5px;font-weight:500;letter-spacing:-.01em;transition:color var(--t),background var(--t);
}
.tabs button:hover{color:var(--fg)}
.tabs button.active{color:var(--fg);background:var(--card);box-shadow:var(--sh-1);font-weight:540}

/* =========================================================== run progress */
#runpanel h2{justify-content:space-between}
.stage{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.stage:last-child{border:0}
.dot{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--fg) 18%,transparent);flex:none}
.dot.running{background:var(--run);box-shadow:0 0 0 4px color-mix(in srgb,var(--run) 18%,transparent);animation:pulse 1.2s infinite}
.dot.done{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 16%,transparent)}
.dot.error{background:var(--err);box-shadow:0 0 0 4px color-mix(in srgb,var(--err) 18%,transparent)}
.dot.skipped{background:var(--dim)}
/* a stage the operator stopped: not an error, not a deliberate skip, and above all not
   still running — `.dot.running` pulses, so without this a cancelled run kept animating */
.dot.cancelled{background:var(--dim);box-shadow:0 0 0 4px color-mix(in srgb,var(--dim) 20%,transparent)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.sname{width:136px;text-transform:capitalize;flex:none;font-weight:560;font-size:14px;letter-spacing:-.01em}
.sdetail{color:var(--mut);font-size:13px}

/* =========================================================== metrics */
.metrics{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.metric{
  background:var(--card-2);border-radius:var(--r2);
  padding:19px 22px;min-width:140px;flex:1 0 auto;
}
.metric b{display:block;font-family:var(--display);font-size:31px;font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.08}
.metric span{color:var(--mut);font-size:12.5px;font-weight:450;margin-top:7px;display:block;letter-spacing:-.006em}

.pill{font-size:11.5px;padding:4px 12px;border-radius:var(--pill);
  font-weight:560;text-transform:capitalize;display:inline-flex;align-items:center;gap:6px;background:var(--card-2)}

/* =========================================================== tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-soft)}
thead th{position:sticky;top:0;background:var(--card);z-index:1}
th{color:var(--dim);font-weight:560;cursor:pointer;user-select:none;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--hover)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:12.5px}
.barcell{position:relative}
.barcell .bar{position:absolute;left:0;top:4px;bottom:4px;
  background:color-mix(in srgb,var(--bar) 30%,transparent);opacity:.5;border-radius:5px}
.barcell span{position:relative;font-weight:540}

ul.arts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
ul.arts li{padding:13px 16px;background:var(--card-2);border-radius:var(--r1);
  display:flex;align-items:center;gap:10px;transition:background var(--t)}
ul.arts li:hover{background:color-mix(in srgb,var(--card-2) 80%, var(--fg) 5%)}
ul.arts a{color:var(--accent);text-decoration:none;font-weight:540}
ul.arts a:hover{text-decoration:underline}

.err{color:var(--err);white-space:pre-wrap;font-size:13px;margin-top:8px}
.err:not(:empty){background:color-mix(in srgb,var(--err) 8%,transparent);border-radius:var(--r1);padding:12px 14px}
.err.alert:not(:empty){background:color-mix(in srgb,var(--err) 12%,transparent);
  border-left:3px solid var(--err);font-size:13.5px}

/* =========================================================== history rows */
.runrow{display:flex;gap:15px;align-items:center;padding:15px 17px;margin-bottom:10px;
  border-radius:var(--r2);background:var(--card-2);cursor:pointer;
  transition:transform var(--t),background var(--t),box-shadow var(--t)}
.runrow:hover{background:var(--card);transform:translateY(-1px);box-shadow:var(--sh-2)}
.runrow code{font-size:12px;color:var(--mut);font-family:var(--mono)}

/* =========================================================== charts */
.chartbox{position:relative;height:360px;background:var(--card-2);border-radius:var(--r2);padding:16px;margin:10px 0 6px}
.ctlrow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ctlrow label{margin:0;font-size:12.5px}
.ctlrow select{width:auto;min-width:190px}

/* =========================================================== graph editor */
.ed-wrap{display:flex;gap:18px;flex-wrap:wrap}
.ed-canvas{flex:1 1 480px;min-width:320px}
.ed-drawing{flex:1 1 400px;min-width:300px;display:flex;flex-direction:column;
  border-radius:var(--r2);overflow:hidden;background:var(--card-2)}
.ed-drawing-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 13px;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--mut);font-weight:500}
.ed-drawing-tools{display:flex;gap:5px}
.ed-drawing-view{flex:1;height:580px;overflow:auto;background:#fff}
.ed-drawing-view svg{display:block;width:100%;height:auto;transform-origin:top left}
#ed-drawing-toggle.active{background:var(--accent);color:var(--accent-ink)}
.pcard{background:var(--card-2);border-radius:var(--r2);padding:17px 18px}
.pcard h3{margin:0 0 12px;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em;font-weight:600}

.ed-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px;align-items:center}
.ed-toolbar .sep{width:1px;height:22px;background:var(--line);margin:0 2px}
.ed-toolbar .grow{flex:1 1 auto}
.ebtn{background:var(--card-2);border:0;color:var(--fg);
  padding:9px 14px;border-radius:var(--pill);cursor:pointer;font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  transition:background var(--t),color var(--t)}
.ebtn:hover{background:color-mix(in srgb,var(--card-2) 78%, var(--fg) 7%)}
.ebtn.on{background:var(--accent);color:var(--accent-ink);font-weight:560}
.ebtn:disabled{opacity:.4;cursor:default}
.ebtn.danger{color:var(--err)}
.ebtn.danger:hover{background:color-mix(in srgb,var(--err) 12%,transparent)}

kbd{font-family:var(--mono);font-size:10px;font-weight:600;line-height:1;padding:2px 5px;border-radius:5px;
  background:color-mix(in srgb,var(--fg) 8%,transparent);color:var(--mut);vertical-align:baseline;white-space:nowrap}

.ed-tools{display:inline-flex;gap:2px;padding:3px;background:var(--card-2);border-radius:var(--pill)}
.etool{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;color:var(--mut);
  padding:8px 13px;border-radius:var(--pill);cursor:pointer;font-size:12.5px;font-weight:540;letter-spacing:-.01em;
  transition:color var(--t),background var(--t)}
.etool .ti{font-size:13px;opacity:.8;display:inline-flex}
.etool .ti svg{width:13px;height:13px;display:block}
.etool:hover{color:var(--fg)}
.etool.on{background:var(--accent);color:var(--accent-ink)}
.etool.on .ti{opacity:1}
.etool kbd{color:inherit;background:color-mix(in srgb,var(--fg) 9%,transparent)}
.etool.on kbd{background:rgba(0,0,0,.18);color:var(--accent-ink)}

.ed-menu{position:relative;display:inline-block}
#ed-import-btn[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent)}
.ed-menu-pop{position:absolute;top:calc(100% + 7px);left:0;z-index:30;min-width:254px;max-width:300px;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r2);box-shadow:var(--sh-pop);
  padding:7px;display:flex;flex-direction:column;gap:1px}
.ed-menu-pop hr{border:0;border-top:1px solid var(--line-soft);margin:5px 5px}
.ed-menu-item{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--fg);
  padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:540;letter-spacing:-.01em;transition:background var(--t)}
.ed-menu-item:hover{background:var(--hover)}
.ed-menu-item .mi-sub{display:block;margin-top:3px;color:var(--dim);font-size:11.5px;font-weight:400;line-height:1.45;letter-spacing:-.004em}

#ed-svg{width:100%;height:580px;background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0/24px 24px,
    var(--inset);
  border-radius:var(--r2);user-select:none;touch-action:none;display:block}
/* ---- the network canvas: wires, shapes, names ----
   Three layers, painted in that order and never mixed: an edge stops at the rim of the
   shape it meets, a shape is a body under one shared top-lit gradient inside a cut-out of
   the canvas colour, and every name is drawn last, under a halo of the canvas colour so it
   stays readable wherever it crosses a wire. */
.ededge{stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:var(--edwire,1.9);stroke-linecap:round}
.ededge.sel{stroke:var(--accent);stroke-width:calc(var(--edwire,1.9) * 1.7)}
#ed-svg marker#edarrow path{fill:color-mix(in srgb,var(--fg) 44%,transparent)}
.ednode{cursor:pointer}
.ednode .nbody{stroke:var(--inset);stroke-width:3}
.ednode .nsheen,.ednode .nring{pointer-events:none}
.ednode .nsheen{fill:url(#edsheen);stroke:var(--node-rim);stroke-width:1}
.ednode .nring{fill:none;stroke:none;stroke-width:2.5;transition:stroke var(--t)}
.ednode:hover .nring{stroke:color-mix(in srgb,var(--fg) 22%,transparent)}
.ednode.role-comp .nbody{fill:#7f8592}
.ednode.role-in .nbody{fill:var(--ok)}
.ednode.role-out .nbody{fill:var(--run)}
/* in and out: a circuit fed from either side; green like an infeed, ringed amber like an outfeed */
.ednode.role-both .nbody{fill:var(--ok);stroke:var(--run);stroke-width:3}
.ednode.sel .nring,.ednode.cfrom .nring,.ednode.msel .nring{stroke:var(--accent)}
.ednode.bad .nring{stroke:var(--err);stroke-width:3}
.ednode.needs .nring{stroke:var(--run);stroke-width:3;stroke-dasharray:4 4}

/* a circuit's service level (edLiteSvg): a few paths, strokes fixed in screen pixels at
   any zoom, over satellite imagery in both themes */
.edlite path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.edlite .lt-low{stroke:rgba(236,239,244,.6);stroke-width:calc(1.1px * var(--ltk,1))}
.edlite .lt-pri-u{stroke:rgba(11,15,20,.55);stroke-width:calc(3.8px * var(--ltk,1))}
.edlite .lt-pri{stroke:#ffd97a;stroke-width:calc(2px * var(--ltk,1))}
.edlite .lt-u{stroke:rgba(11,15,20,.8)}
.edlite .lt-pt{stroke:#8fd0ff;stroke-width:calc(4.2px * var(--ltk,1))}
.edlite .lt-u.lt-pt{stroke-width:calc(6.2px * var(--ltk,1))}
.edlite .lt-tx{stroke:#ffffff;stroke-width:calc(6.5px * var(--ltk,1))}
.edlite .lt-u.lt-tx{stroke-width:calc(9px * var(--ltk,1))}
.edlite .lt-fu{stroke:#ff7a59;stroke-width:calc(7.5px * var(--ltk,1))}
.edlite .lt-u.lt-fu{stroke-width:calc(10px * var(--ltk,1))}
/* the results diagram's service level (dgPaint), drawn as the editor draws it */
.dglite path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.dglite.dim{opacity:.35}
.dglite .dgl-low{stroke:rgba(236,239,244,.55);stroke-width:1px}
.dglite .dgl-pri{stroke:#ffd97a;stroke-width:1.8px}
.dglite .dgl-u{stroke:rgba(11,15,20,.8)}
.fe-dot{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid #0b0f14;margin-right:6px;vertical-align:middle}
details.fe-lat{margin-top:10px}
details.fe-lat>summary{cursor:pointer;color:var(--mut);font-size:13px}
.ed-litekey{display:inline-flex;gap:14px;flex-wrap:wrap;color:var(--mut)}
.ed-litekey i{display:inline-block;margin-right:6px;vertical-align:middle;border:1.5px solid rgba(11,15,20,.8)}
.ed-litekey .lk-pri{width:16px;height:4px;border-radius:2px;background:#ffd97a}
.ed-litekey .lk-low{width:16px;height:3px;border-radius:2px;background:#c9ccd3}
.ed-litekey .lk-pt{width:8px;height:8px;border-radius:50%;background:#8fd0ff}
.ed-litekey .lk-tx{width:10px;height:10px;border-radius:50%;background:#fff}
.ed-litekey .lk-fu{width:10px;height:10px;border-radius:50%;background:#ff7a59}
.ednode.edlitesel .nring{stroke:var(--accent);stroke-width:2.5}
.edlbl{fill:var(--fg);font-size:var(--edlbl,11px);font-weight:600;letter-spacing:-.01em;
  pointer-events:none;paint-order:stroke;stroke:var(--inset);stroke-width:var(--edhalo,3.5);
  stroke-linejoin:round}
#ed-svg.lbl-off .edlbl{display:none}
.edlbl.sel,.edlbl.msel,.edlbl.cfrom{fill:var(--accent)}
.edlbl.bad{fill:var(--err)}

.ed-legend{margin-top:13px;font-size:12.5px;color:var(--mut);display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ed-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}

.seg{display:flex;gap:4px;background:var(--card);padding:3px;border-radius:var(--r1)}
.seg button{flex:1;background:transparent;border:0;color:var(--mut);
  padding:8px 4px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:500;
  transition:background var(--t),color var(--t)}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:560}

.ochips{display:flex;gap:7px;flex-wrap:wrap;margin-top:2px}
.ochip{background:var(--card);border:1px solid var(--line-soft);color:var(--fg);
  padding:6px 13px;border-radius:var(--pill);cursor:pointer;font-size:12.5px;font-weight:450;
  font-family:inherit;transition:background var(--t),color var(--t),border-color var(--t)}
.ochip:hover{border-color:var(--line)}
.ochip.on{background:var(--accent-soft);border-color:transparent;color:var(--accent)}

.moderow{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 13px;background:var(--card);border-radius:10px;margin-top:6px;font-size:13px}
.moderow button{background:transparent;border:0;color:var(--err);cursor:pointer;font-size:17px;
  line-height:1;padding:0 2px;transition:transform var(--t)}
.moderow button:hover{transform:scale(1.2)}

/* ---- box select (marquee) + multi-selection ---- */
.edmarq{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;pointer-events:none}
.selcount{font-size:14px;color:var(--fg);letter-spacing:-.01em}
.selcount b{font-weight:600}

/* ---- sheet view ---- */
.sheet-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:11px}
.sheet-bar .grow{flex:1 1 auto}
.sheet-bar input[type=text]{width:210px;padding:9px 13px;font-size:13px}
.sheet-chk{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:12.5px;color:var(--mut);
  background:var(--card-2);border-radius:var(--pill);padding:7px 14px;cursor:pointer;white-space:nowrap}
.sheet-chk input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;cursor:pointer;margin:0}
.sheet-chk input[type=number]{width:4.4em;padding:4px 8px;font-size:12.5px;text-align:right;background:var(--card)}
.sheet-scroll{max-height:580px;min-height:200px;overflow:auto;background:var(--inset);border-radius:var(--r2)}
.sheet-empty{padding:26px;color:var(--mut);font-size:13.5px}
table.sheet{width:100%;min-width:880px;border-collapse:separate;border-spacing:0;font-size:12.5px}
table.sheet th{position:sticky;top:0;z-index:2;background:var(--card-2);color:var(--dim);
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;cursor:default;
  text-align:left;padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.sheet th .u{text-transform:none;letter-spacing:0;color:var(--dim-dec);font-weight:500}
table.sheet td{padding:2px 5px;border-bottom:1px solid var(--line-soft);color:var(--fg);white-space:nowrap}
table.sheet td.nm{min-width:112px}
table.sheet td.role{min-width:116px}
/* dead: the sheet renderer emits class `decay`, never `dec` — kept as a marker of
   what these widths were meant to do; the live rule is in awram.css */
table.sheet td.prob{min-width:92px}
/* dead likewise: the money column's class is `value`, not `n` */
table.sheet input[type=number]::-webkit-inner-spin-button,
table.sheet input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
table.sheet td.num,table.sheet th.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet tbody tr:hover td{background:var(--hover)}
table.sheet tbody tr.sel td{background:var(--accent-soft)}
table.sheet tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.sheet input,table.sheet select{width:100%;padding:7px 9px;font-size:12.5px;border-radius:8px;
  background:transparent;border:1px solid transparent;box-shadow:none}
table.sheet input[type=number]{text-align:right;font-variant-numeric:tabular-nums}
table.sheet select{padding-right:26px;background-position:right 7px center;font-size:12px}
table.sheet input:hover,table.sheet select:hover{background:var(--card)}
table.sheet input:focus,table.sheet select:focus{background:var(--card);border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
table.sheet td .pp{display:block;font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
table.sheet .up{color:var(--run)}
table.sheet .used{min-width:88px}
table.sheet .mini{display:inline-block;width:44px;height:5px;border-radius:3px;background:var(--line);
  overflow:hidden;vertical-align:middle;margin-right:7px}
table.sheet .mini i{display:block;height:100%;background:var(--accent)}
table.sheet .mini i.warn{background:var(--run)} table.sheet .mini i.over{background:var(--err)}
table.sheet b.warn{color:var(--run)} table.sheet b.over{color:var(--err)}
table.sheet tfoot td{position:sticky;bottom:0;z-index:2;background:var(--card-2);
  border-top:1px solid var(--line);border-bottom:0;padding:11px 10px;font-weight:600;font-variant-numeric:tabular-nums}
table.sheet tfoot .lbl{font-weight:450;color:var(--dim)}

/* ---- life-used meter (inspector) + what-if table ---- */
.lifebar{margin-top:10px}
.lifebar-t{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-bottom:5px}
.lifebar-t b{color:var(--fg);font-weight:600}
.lifebar-t b.over{color:var(--err)}
.lifebar-track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.lifebar-track i{display:block;height:100%;background:var(--accent)}
.lifebar-track i.warn{background:var(--run)} .lifebar-track i.over{background:var(--err)}
table.wi{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px}
table.wi th{padding:0 8px 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--dim);font-weight:600;cursor:default;border:0;background:transparent}
table.wi th.num,table.wi td.num{text-align:right;font-variant-numeric:tabular-nums}
table.wi td{padding:7px 8px;border-bottom:1px solid var(--line-soft);color:var(--mut)}
table.wi tr.wi-alt td{color:var(--fg);font-weight:560;background:var(--accent-soft)}
table.wi tr.wi-alt td:first-child{border-radius:8px 0 0 8px}
table.wi tr.wi-alt td:last-child{border-radius:0 8px 8px 0}
.wi-delta{margin-top:11px;font-size:12.5px;color:var(--mut);line-height:1.5}
.wi-delta b{font-weight:600}
.wi-delta .up,table.sheet .up{color:var(--run)}
.wi-delta .down{color:var(--ok)}

/* =========================================================== manual */
.man h3{font-family:var(--display);font-size:22px;font-weight:600;margin:30px 0 12px;letter-spacing:-.025em;color:var(--fg)}
.man h3:first-of-type{margin-top:2px}
.man p{color:var(--mut);font-size:14.5px;margin:0 0 12px;max-width:70ch;line-height:1.62;letter-spacing:-.008em}
.man p.lead{color:var(--fg);font-size:16px}
.man ul{color:var(--mut);font-size:14.5px;margin:0 0 14px;padding-left:20px;max-width:70ch;line-height:1.62}
.man li{margin:6px 0}
.man b,.man strong{color:var(--fg);font-weight:560}
.man table{margin:4px 0 8px}
.man td:first-child{white-space:nowrap;vertical-align:top}
.man .man-keys td:first-child{text-align:center}

.man-flow{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.man-step{flex:1 1 155px;min-width:155px;display:flex;flex-direction:column;gap:5px;
  background:var(--card-2);border-radius:var(--r2);padding:17px 18px}
.man-step b{font-family:var(--display);font-size:14px;font-weight:600;color:var(--fg);letter-spacing:-.01em}
.man-step span{color:var(--mut);font-size:12px;line-height:1.5}
.man-arrow{align-self:center;color:var(--dim);font-size:17px;flex:0 0 auto}
@media(max-width:720px){.man-arrow{transform:rotate(90deg)}}

.man-roles{display:flex;flex-direction:column;gap:9px;margin:2px 0 14px}
.man-role{display:flex;align-items:baseline;gap:10px;color:var(--mut);font-size:14.5px;line-height:1.55}
.man-role i{flex:0 0 auto;width:11px;height:11px;border-radius:50%;transform:translateY(1px)}

/* =========================================================== examples viewer */
.ex-wrap{display:flex;gap:16px;flex-wrap:wrap}
.ex-list{flex:0 0 240px;min-width:200px;display:flex;flex-direction:column;gap:6px;max-height:660px;overflow:auto;padding-right:2px}
.ex-item{text-align:left;background:var(--card-2);border:1px solid transparent;border-radius:var(--r1);
  padding:11px 13px;cursor:pointer;transition:background var(--t),border-color var(--t)}
.ex-item:hover{background:color-mix(in srgb,var(--card-2) 78%,var(--fg) 7%)}
.ex-item.on{border-color:var(--accent);background:var(--accent-soft)}
.ex-item b{display:block;font-size:13.5px;font-weight:560;letter-spacing:-.01em}
.ex-item span{color:var(--mut);font-size:11px;font-family:var(--mono)}
.ex-main{flex:1 1 480px;min-width:300px}
.ex-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:16px}
.ex-list{max-height:none}

/* a one-line is wide and short, so a fixed-height box leaves the drawing tiny in a sea of
   white; let the box follow the artwork and only cap how tall it may get */
.ex-plot{background:#fff;border:1px solid var(--line);border-radius:var(--r2);
  min-height:180px;max-height:430px;padding:10px;
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.ex-plot.dark{background:var(--inset)}
.ex-plot svg{width:100%;height:auto;max-height:410px;display:block}
/* Whether an example is a runnable MODEL or still a picture, said once, in the same words
   the editor uses on load. A severity stripe rather than a colour-only cue, so the state
   reads at a glance and still reads without colour. */
.ex-ready{margin:14px 0 0;padding:10px 14px;border-radius:var(--r2);font-size:14px;
  line-height:1.5;max-width:86ch;border-left:3px solid var(--ok);
  background:color-mix(in srgb, var(--ok) 7%, transparent);color:var(--fg)}
.ex-ready.warn{border-left-color:var(--run);
  background:color-mix(in srgb, var(--run) 8%, transparent)}
.ex-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.ex-legend{display:flex;align-items:center;gap:13px;color:var(--mut);font-size:12px;flex-wrap:wrap}
.ex-legend i{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:middle}
.ex-legend i.ring{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}
.exgraph .e{stroke:color-mix(in srgb,var(--fg) 30%,transparent);stroke-width:1;stroke-linecap:round}
.exgraph .e-bus{stroke:#8b5cf6;stroke-width:var(--exbar,4.8);stroke-linecap:butt}
.exgraph .n-bus{fill:#8b5cf6}
/* each shape sits in a cut-out of the plate, so a wire passing behind it never reads as
   passing through it — the same separation the editor canvas gets, at plate scale */
.exgraph circle{stroke:var(--card);stroke-width:1}
.exgraph .n-in{fill:#0ea371}.exgraph .n-out{fill:#d9992f}.exgraph .n-c{fill:#8e8e93}
.exgraph .n-w{fill:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:.6}
.exgraph .n-v{stroke:var(--accent);stroke-width:1.6}
.exgraph .exlbl{fill:var(--fg);font-size:7px;font-family:var(--mono);text-anchor:middle;opacity:.85;
  paint-order:stroke;stroke:var(--card);stroke-width:2.2;stroke-linejoin:round}
/* the busbar's own name, once per run rather than once per segment, in the bus colour
   so it reads as the bar's label and not as one more device tag */
.exgraph .exbus{fill:#8b5cf6;opacity:1;font-weight:600}

/* =========================================================== responsive */
/* narrow screens: the sidebar folds up into a horizontal top bar */
@media(max-width:860px){
  body{flex-direction:column;align-items:stretch}
  .sidebar{flex:none;height:auto;width:auto;position:sticky;top:0;
    flex-direction:row;align-items:center;gap:10px;padding:8px 14px;
    border-right:0;border-bottom:1px solid var(--line-soft);overflow-x:auto}
  .brand{padding:0;flex:0 0 auto}
  .brand .sub{display:none}
  nav{flex-direction:row;flex:1 1 auto;gap:2px;overflow-x:auto}
  nav button{padding:8px 12px;white-space:nowrap}
  nav .ni{display:none}
  .side-foot{margin:0;border-top:0;padding:0;flex:0 0 auto}
}
@media(max-width:760px){
  main{padding:26px 16px 64px}
  .card{padding:20px 18px}
  .view-head{margin-bottom:24px}
  .tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tabs button{flex:0 0 auto}
  .tabs::-webkit-scrollbar{height:0}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .dot.running{animation:none}
  .runrow:hover{transform:none}
}

/* ---- mitigation / ROI optimizer ---- */
.mit-inputs{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 14px}
.mit-fld{display:flex;flex-direction:column;gap:5px}
.mit-fld label{margin:0;font-size:12px;color:var(--mut)}
.mit-fld input,.mit-fld select{width:auto;min-width:104px;margin:0}
.mit-baseline{background:var(--card-2);border-radius:var(--r2);padding:12px 14px;font-size:13.5px;margin:4px 0 6px;line-height:1.5}
.mit-tbl td:first-child{max-width:340px}
/* the number columns never wrap: beside the package card the table is ~1050px, and "1.5e-3"
   broke across two lines while "over budget" split in half */
.mit-tbl th.num,.mit-tbl td.num,.pill-over{white-space:nowrap}
/* ...and where even that is too wide, scroll it rather than clip it. A table wider than its
   card overflows the card's rounded edge and the last columns - Payback, NPV, Apply - are
   simply gone, with nothing to say they exist. Costs the sticky header from the shared
   `thead th` rule, which this eight-row table never had cause to use. */
#mit-table{overflow-x:auto}
/* results that no longer match the form.  The duration and the $/minute are on the
   Scenario view and the optimizer runs server-side, so nothing here can recompute on a
   keystroke - the caption updated to the new rate while the money under it stayed on the
   old one.  Dim what is behind and say which setting moved, at full strength. */
.stale-note{margin:0;padding:10px 14px;border-radius:var(--r2);font-size:13px;
  line-height:1.7;color:var(--fg);background:hsla(35,90%,45%,.12);
  border:1px solid hsla(35,90%,45%,.38)}
.stale-note b{font-weight:640}
.stale-note .ebtn{margin-left:8px;vertical-align:baseline}
#roi-body.stale > *:not(#roi-stale){opacity:.55}
.mit-tbl tr.mit-best td{background:color-mix(in srgb,var(--ok) 12%,transparent)}
.mit-tbl tr.mit-over td{opacity:.62}
.pill-over{display:inline-block;font-size:11.5px;color:var(--mut);background:var(--card-2);border-radius:999px;padding:2px 9px}

/* ---- sheet drag-fill + fill-all ---- */
.sheet td.fillable{position:relative}
.sheet .fillh{position:absolute;right:2px;bottom:3px;width:9px;height:9px;background:var(--accent);
  border:1.5px solid var(--card);border-radius:2px;cursor:crosshair;opacity:0;transition:opacity .12s;z-index:2}
.sheet td.fillable:hover .fillh,.sheet td.fillable:focus-within .fillh{opacity:1}
.sheet .fillrange{outline:2px solid var(--accent);outline-offset:-2px;background:var(--accent-soft)!important}
.sheet .fillrange input,.sheet .fillrange select{background:transparent}
.fillall{margin-left:6px;border:0;background:var(--card-2);color:var(--accent);cursor:pointer;
  border-radius:5px;padding:1px 6px;font-size:12.5px;line-height:1.5;vertical-align:middle}
.fillall:hover{background:var(--accent);color:var(--accent-ink)}

/* ===========================================================================
   DIAGRAM-LED VIEWS  (2026-08-12)
   The one-line is the centre of every view: the Model workbench draws it, the
   Results dashboard repaints it by risk, the ROI view marks the money on it.
   =========================================================================== */

/* ---- view header: title, live model stats, primary action ---- */
.wb-head{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;margin:2px 2px 18px}
.wb-title{flex:1 1 320px;min-width:0}
.wb-title h2{margin:0;font-family:var(--display);
  font-size:clamp(1.7rem,1.2rem + 1.7vw,2.35rem);font-weight:680;letter-spacing:-.03em;line-height:1.05}
.wb-sub{margin-top:8px;color:var(--mut);font-size:14px;line-height:1.5;max-width:74ch}
.wb-stats{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stat{display:inline-flex;align-items:baseline;gap:6px;background:var(--card-2);
  border-radius:var(--pill);padding:6px 13px;font-size:12.5px;color:var(--mut);white-space:nowrap}
.stat b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.stat.warn{background:color-mix(in srgb,var(--run) 13%,transparent);color:var(--run)}
.stat.warn b{color:var(--run)}
.stat.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok)}
.stat.ok b{color:var(--ok)}

/* ---- live run strip (sits above the canvas so the diagram stays in view) ---- */
.runstrip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r3);
  box-shadow:var(--sh-1);padding:14px 18px;margin-bottom:18px}
.runstrip .grow{flex:1 1 auto}
.pips{display:flex;gap:7px;flex-wrap:wrap}
.pips .stage{padding:6px 12px;border-radius:var(--pill);background:var(--card-2);
  border:0;gap:8px;font-size:12.5px}
.pips .sname{width:auto;font-size:12.5px}
.pips .sdetail{font-size:11.5px;font-variant-numeric:tabular-nums}
.rs-metrics{display:flex;gap:8px;flex-wrap:wrap}
.rs-metrics .metric{margin:0;padding:0;background:none;border:0;display:inline-flex;
  align-items:baseline;gap:6px;background:var(--card-2);border-radius:var(--pill);padding:6px 13px}
.rs-metrics .metric b{display:inline;font-size:13px;font-family:var(--sans);font-weight:640;letter-spacing:-.01em}
.rs-metrics .metric span{display:inline;margin:0;font-size:11.5px}
.rs-info{flex:1 1 100%;color:var(--mut);font-size:12.5px}
.rs-info code{font-family:var(--mono);font-size:11.5px}
.runstrip .err{flex:1 1 100%;margin:0}
.runstrip .err:empty{display:none}

/* ---- the workbench: canvas + rail ---- */
.wb{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:18px;align-items:start}
.wb-canvas{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r3);
  box-shadow:var(--sh-1);padding:16px 18px 18px;min-width:0}
.wb-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:18px}
.wb-rail .pcard{background:var(--card);border:1px solid var(--line-soft);box-shadow:var(--sh-1);
  border-radius:var(--r3);padding:18px 20px}
.wb-rail .pcard h3{margin:0 0 12px}
.rail-tabs{display:flex;gap:2px;padding:3px;background:var(--card-2);border-radius:var(--pill)}
.rail-tabs button{flex:1;background:transparent;border:0;color:var(--mut);cursor:pointer;
  padding:9px 6px;border-radius:var(--pill);font-size:13px;font-weight:520;letter-spacing:-.01em;
  transition:background var(--t),color var(--t)}
.rail-tabs button:hover{color:var(--fg)}
.rail-tabs button.active{background:var(--card);color:var(--fg);font-weight:600;box-shadow:var(--sh-1)}
.railpane{display:flex;flex-direction:column;gap:14px}
.tabs.vtabs{display:flex;flex-direction:column;gap:2px;padding:4px;margin-bottom:14px;align-items:stretch}
.tabs.vtabs button{text-align:left;padding:9px 12px;border-radius:10px}
#ed-svg{height:min(64vh,660px)}
.sheet-scroll{max-height:min(64vh,660px)}
.ed-drawing-view{height:min(64vh,660px)}
@media(max-width:1180px){
  .wb{grid-template-columns:1fr}
  .wb-rail{position:static}
}

/* ---- KPI strip ---- */
.kpis{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.kpi{flex:1 1 186px;max-width:330px;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r3);box-shadow:var(--sh-1);padding:18px 20px;min-width:0}
.kpi .k-lab{color:var(--mut);font-size:12px;font-weight:500;letter-spacing:-.004em}
.kpi .k-val{margin-top:9px;font-family:var(--display);font-weight:640;letter-spacing:-.032em;
  font-size:clamp(1.35rem,.9rem + .85vw,1.75rem);line-height:1.1;font-variant-numeric:tabular-nums;
  overflow-wrap:break-word}
.kpi .k-sub{color:var(--dim);font-size:12px;margin-top:7px;line-height:1.45}
.kpi.accent .k-val{color:var(--accent)}
.kpi.good .k-val{color:var(--ok)}
.kpi.risk .k-val{color:var(--err)}

/* ---- card head (title + note + inline controls) ---- */
.card-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:16px}
.card-head h3{margin:0;font-family:var(--display);font-size:17.5px;font-weight:620;letter-spacing:-.022em}
.card-note{margin:7px 0 0;color:var(--mut);font-size:13px;line-height:1.55;max-width:66ch}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px;margin-bottom:20px}
.grid2>.card{margin-bottom:0}
/* a compact summary beside the wide table it is drawn from (Decisions).
   Not .grid2: auto-fit gives both halves the same width, and these two do not want the
   same width - the package is three short rows, the ranked list is nine columns. Fixed
   left, the rest to the table. Below the breakpoint the table alone needs the full page,
   so they stack. */
.roi-pair{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px;margin-bottom:20px;
  align-items:start}
.roi-pair>.card{margin-bottom:0;min-width:0}
/* The ranked list is nine columns and stops compressing at ~880px, so the pair only earns
   its keep on a wide screen: 380 + gap + ~930 of table needs ~1330px of content column,
   and the sidebar and page padding take ~375px of the window before that. Below it they
   stack, full width each - which is also where the gap this fixes does not exist, because
   the chart grid above drops to two columns and has no odd card left over. */
@media(max-width:1700px){.roi-pair{grid-template-columns:1fr}}
.card.fold{padding:0}
.card.fold>summary{cursor:pointer;padding:20px 26px;font-family:var(--display);font-size:16px;
  font-weight:600;letter-spacing:-.02em;list-style:none}
.card.fold>summary::-webkit-details-marker{display:none}
.card.fold>summary::before{content:"▸ ";color:var(--dim)}
.card.fold[open]>summary::before{content:"▾ "}
.card.fold>div{padding:0 26px 22px;max-height:520px;overflow:auto}

/* ---- the shared read-only one-line (results + ROI) ---- */
.dg-frame{position:relative;background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0/24px 24px,
    var(--inset);
  border-radius:var(--r2);overflow:hidden;min-width:0}
svg.dg{display:block;width:100%;height:min(58vh,560px);touch-action:none;cursor:grab;user-select:none}
svg.dg.grabbing{cursor:grabbing}
/* every stroke is non-scaling: widths are SCREEN px whatever the drawing's coordinate
   range or the zoom level, and the emphasis rules below then win by source order */
svg.dg .dgedge,svg.dg .dgnode circle{vector-effect:non-scaling-stroke}
svg.dg .dgedge{stroke:color-mix(in srgb,var(--fg) 26%,transparent);stroke-width:1.4;stroke-linecap:round;fill:none}
/* a wire the reconstruction invented to hang an unplaceable asset off a hub — the
   model does not claim it, so it must not read like the conductors that surround it */
svg.dg .dgedge.soft{stroke-dasharray:4 4;stroke:color-mix(in srgb,var(--fg) 14%,transparent)}
svg.dg .dgedge.hot{stroke:var(--err);stroke-width:2.6}
svg.dg .dgnode{cursor:pointer}
svg.dg .dgnode circle{stroke:var(--inset);stroke-width:1.6}
svg.dg .dgnode.role-in circle{stroke:var(--ok);stroke-width:2.4}
svg.dg .dgnode.role-out circle{stroke:var(--run);stroke-width:2.4}
svg.dg .dgnode.role-both circle{stroke:var(--run);stroke-width:2.4;fill:var(--ok)}
svg.dg .dgnode.dim{opacity:.22}
svg.dg .dgnode.on circle,svg.dg .dgnode.hot circle{stroke:var(--fg);stroke-width:3}
svg.dg .dgnode.tgt circle{stroke:var(--accent);stroke-width:3.5}
/* a source's own symbols and bars (an Austin station ships them) take the circle's rules */
svg.dg .dgnode .dgshape,svg.dg .dgjoin,svg.dg .dgbar,svg.dg .dgbarring{vector-effect:non-scaling-stroke}
svg.dg .dgnode .dgshape{stroke:var(--inset);stroke-width:1.6}
svg.dg .dgnode.on .dgshape,svg.dg .dgnode.hot .dgshape{stroke:var(--fg);stroke-width:3}
svg.dg .dgnode.tgt .dgshape{stroke:var(--accent);stroke-width:3.5}
svg.dg .dgjoin{fill:color-mix(in srgb,var(--fg) 40%,transparent)}
svg.dg .dgjoin.hot{fill:var(--err)}
svg.dg .dgbar{stroke-linecap:butt}
svg.dg .dgbarring{stroke:transparent;stroke-linecap:butt}
svg.dg .dgnode.on .dgbarring,svg.dg .dgnode.hot .dgbarring{stroke:var(--fg)}
svg.dg .dgnode.tgt .dgbarring{stroke:var(--accent)}
/* names are painted after every circle and carry a halo of the pane colour, so one stays
   readable where it crosses a wire and none is painted over by a node drawn later.
   `text-anchor` is set per label as an attribute (each one is placed where its own wires
   leave room), so it must NOT be pinned here - a CSS value would beat the attribute. */
svg.dg .dglbl{fill:var(--mut);font-family:var(--mono);pointer-events:none;
  paint-order:stroke;stroke:var(--card);stroke-width:3;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
svg.dg .dglbl.dim{opacity:.22}
svg.dg .dglbl.on,svg.dg .dglbl.hot{fill:var(--fg);font-weight:700}
.dg-scale{position:absolute;left:12px;bottom:11px;display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--card) 88%,transparent);border-radius:var(--pill);
  padding:6px 12px;font-size:11px;color:var(--mut);backdrop-filter:blur(8px)}
.dg-scale .sw{display:flex;gap:2px}
.dg-scale .sw i{width:15px;height:9px;display:block}
.dg-scale .sw i:first-child{border-radius:3px 0 0 3px}
.dg-scale .sw i:last-child{border-radius:0 3px 3px 0}
.dg-note{position:absolute;inset:auto 12px 11px auto;max-width:52%;text-align:right;
  color:var(--mut);font-size:12px;line-height:1.45}
.dg-note:empty{display:none}
.dg-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dg-tools label{margin:0;font-size:12.5px;white-space:nowrap}
.dg-tools select{width:auto;min-width:180px}
.dg-tools input[type=text]{width:210px;padding:9px 13px;font-size:13px}

.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}
@media(max-width:1080px){.hero-grid{grid-template-columns:1fr}}
.hero-side{min-width:0;display:flex;flex-direction:column;gap:10px}
.hero-side h4{margin:0;font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600}
.side-note{color:var(--mut);font-size:12.5px;line-height:1.5}

/* ranked list — the same numbers the diagram is painted with, in order */
.ranklist{display:flex;flex-direction:column;gap:1px;max-height:430px;overflow:auto;margin:0 -8px}
.rank{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:10px;
  cursor:pointer;border:0;background:transparent;text-align:left;width:100%;transition:background var(--t)}
.rank:hover{background:var(--hover)}
.rank.on{background:var(--accent-soft)}
.rank-top{display:flex;align-items:baseline;gap:8px;font-size:13px;min-width:0}
.rank-top .rk{color:var(--dim);font-family:var(--mono);font-size:10.5px;flex:none;width:1.6em}
.rank-top .rn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:560;letter-spacing:-.01em;color:var(--fg)}
.rank-top .rv{flex:none;font-family:var(--mono);font-size:11px;color:var(--mut);font-variant-numeric:tabular-nums}
.rbar{height:5px;border-radius:3px;background:color-mix(in srgb,var(--fg) 8%,transparent);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:3px}

/* node / move scorecard */
.detail{background:var(--card-2);border-radius:var(--r2);padding:15px 17px}
.detail h5{margin:0 0 3px;font-family:var(--display);font-size:16px;font-weight:620;letter-spacing:-.02em}
.detail .d-sub{color:var(--mut);font-size:12.5px;line-height:1.5;margin-bottom:12px}
.drow{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:12.5px}
.drow:last-child{border-bottom:0}
.drow span{color:var(--mut)}
.drow b{font-family:var(--mono);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.drow b.good{color:var(--ok)} .drow b.bad{color:var(--err)}
.detail .d-act{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

.mini-facts{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.fact{background:var(--card-2);border-radius:var(--r1);padding:9px 13px;font-size:12.5px;color:var(--mut)}
.fact b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.fact.alert{background:color-mix(in srgb,var(--err) 10%,transparent);color:var(--err)}
.fact.alert b{color:var(--err)}
.pager{display:flex;gap:8px;margin-top:12px}
tr.cs-row{cursor:default}
tr.cs-row.o1 td:first-child{box-shadow:inset 3px 0 0 var(--err)}

/* ---- empty states ---- */
.empty{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r3);
  box-shadow:var(--sh-1);padding:56px 34px;text-align:center}
.empty-art{font-size:34px;color:var(--dim-dec);line-height:1}
.empty h3{margin:16px 0 0;font-family:var(--display);font-size:21px;font-weight:620;letter-spacing:-.022em}
.empty p{margin:10px auto 0;color:var(--mut);font-size:14px;line-height:1.6;max-width:56ch}
.empty-actions{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.empty-actions .go{margin:0}

/* ---- ROI ---- */
.mit-fld.go-fld{align-self:flex-end}
.mit-fld.go-fld .go{margin:0}
.pkg-row{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--card-2);
  border-radius:var(--r1);margin-bottom:8px;font-size:13px}
.pkg-row .pk-n{flex:1;min-width:0;font-weight:540}
.pkg-row .pk-c{font-family:var(--mono);font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.pkg-sum{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.mit-tbl tr.mit-sel td{background:var(--accent-soft)}
.mit-tbl tbody tr{cursor:pointer}
.tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  border-radius:var(--pill);padding:2px 9px;background:var(--card-2);color:var(--mut)}
.tag.best{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.chartbox.sm{height:236px;margin:8px 0}
.dg-tip{position:absolute;z-index:6;pointer-events:none;background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:12px;
  line-height:1.5;box-shadow:var(--sh-pop);max-width:230px}
.dg-tip.hidden{display:none}
.dg-tip b{font-weight:640}
td.csmem{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.csm{font-family:var(--mono);font-size:11.5px;background:var(--card-2);color:var(--fg);
  border-radius:6px;padding:2px 7px;white-space:nowrap}
.csmore{font-size:11.5px;color:var(--dim)}
.kpi.tight .k-val{font-size:1.15rem;line-height:1.3;letter-spacing:-.018em;overflow-wrap:break-word}
#downloads{max-height:420px;overflow:auto}
#ed-graphwrap{position:relative}
.ed-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;
  text-align:center;padding:24px;pointer-events:none}
.ed-empty>*{pointer-events:auto}
.ed-empty h3{margin:14px 0 0;font-family:var(--display);font-size:20px;font-weight:620;letter-spacing:-.022em}
.ed-empty p{margin:9px 0 0;color:var(--mut);font-size:13.5px;line-height:1.55;max-width:44ch}
@media(max-width:560px){.kpi .k-val{font-size:1.2rem}}

/* A fragmented busbar on the editor canvas: bar stock, not a row of identical circles.
   Same violet the Examples plate uses for a bus segment, so the two views agree. The run
   between two segments is the conductor itself, so it is drawn at the segment's own width
   and passes BEHIND them - bar and taps read as one continuous piece rather than a string
   of beads threaded on a line. */
.ednode.edbus .nbody{fill:var(--viol);stroke:none}
/* the source's own conductors (an Austin station ships them): routed, dotted at a junction */
.ededge.eroute{fill:none;stroke-linejoin:round}
.ednet .edhit{fill:none;stroke:transparent;stroke-width:calc(var(--edwire,1.9) * 6);pointer-events:stroke;cursor:pointer}
.edjoin{fill:color-mix(in srgb,var(--fg) 55%,transparent);pointer-events:none}
.edjoin.sel{fill:var(--accent)}
.ednode .nglyph{fill:none;stroke:rgba(255,255,255,.92);stroke-width:var(--edwire,1.9);stroke-linecap:round;pointer-events:none}
.ednode.edsym .nbody{stroke-width:2}
#ed-symkey .edkey{margin-right:.6em;white-space:nowrap}
.ednode.edwire .nbody{fill:color-mix(in srgb,var(--fg) 45%,transparent);stroke:none}
.ednode.edwire.role-comp .nbody{fill:color-mix(in srgb,var(--fg) 45%,transparent)}
.edlbl.edbuslbl{fill:var(--viol);font-weight:650}
.ededge.ebusrun{stroke:var(--viol);stroke-width:var(--edbar,15);stroke-linecap:butt;marker-end:none}