/* PRA — design system (2026-09-26)
 * ---------------------------------------------------------------------------
 * Loaded LAST, after styles.css (component library) and awram.css (component
 * rules for the network, portfolio and inspection views). Those two files still
 * carry the layout of the markup app.js generates; this one decides how all of it
 * LOOKS: one set of tokens, one type scale, one control height, one card.
 *
 * Palette from the ATS wordmark: navy #0a2235 (chrome), ATS blue #005594
 * (accent, light theme), ATS cyan #6bc8eb (accent, dark theme and the rail).
 * Data colours (--heat-*, --chart-*) are NOT redefined here: they were validated
 * for contrast and colour-vision separation and app.js reads them by name.
 *
 * Contrast (WCAG 2.x, measured on the tokens below):
 *   light  fg 16.9 · mut 7.5 · dim 5.2 on card; accent 7.8 on card, 6.8 on its tint
 *   dark   fg 15.4 · mut 8.3 · dim 5.6 on card; accent 9.6 on card
 * ------------------------------------------------------------------------- */

/* ============================================================ fonts (vendored, OFL) */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/preview-builds/abe65e597eafdf36/vendor/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;
  src:url(/preview-builds/abe65e597eafdf36/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================ tokens : light */
:root{
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --ats-navy:#0a2235; --ats-blue:#005594; --ats-cyan:#6bc8eb;

  --bg:#f3f5f7;
  --panel:#ffffff;
  --card:#ffffff;
  --card-2:#f7f9fa;
  --inset:#f0f3f6;
  --line:#dbe2e8;
  --line-soft:#e7ecf0;
  --hover:#f1f5f8;

  --fg:#0f1b26;
  --mut:#475866;
  --dim:#5c6c79;
  --dim-dec:#5c6c79;
  --art:#b8c4ce;

  --accent:#005594;
  --accent-2:#0a67ad;
  --go-hover:#00477c;
  --accent-ink:#ffffff;
  --accent-soft:#eaf2f9;
  --accent-line:#b7d2e8;
  --ring:rgba(0,85,148,.26);

  --ok:#17783a;   --ok-soft:#e7f4eb;
  --run:#8f5f00;  --run-soft:#fbf2df;
  --err:#bf262d;  --err-soft:#fcecec;
  --bar:#1f78b4;
  --viol:hsl(262,60%,52%);

  --chart-grid:#e3e8ec;
  --chart-text:#5c6c79;
  --chart-ink:#0f1b26;

  --r1:8px; --r2:10px; --r3:12px; --pill:999px;
  --sh-1:0 1px 2px rgba(15,27,38,.05);
  --sh-2:0 1px 2px rgba(15,27,38,.04),0 6px 16px -4px rgba(15,27,38,.08);
  --sh-pop:0 16px 40px -12px rgba(15,27,38,.28),0 2px 6px rgba(15,27,38,.06);
  --t:160ms cubic-bezier(.2,.6,.3,1);

  /* the rail and the transition overlays sit on navy in BOTH themes */
  --chrome:#0b2233;
  --chrome-2:#0f2c42;
  --chrome-line:rgba(255,255,255,.08);
  --chrome-fg:#e8f0f5;
  --chrome-mut:#a2b7c6;
  --chrome-dim:#7e98ab;

  --drawer:240px;
  --topbar:52px;
  --gutter:28px;
  --maxw:1440px;
  --maxw-wide:1440px;
  --gap:16px;
  color-scheme:light;
}

/* ============================================================ tokens : dark */
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0a1117; --panel:#101a22; --card:#101a22; --card-2:#0d161d; --inset:#0c141a;
  --line:#243441; --line-soft:#1a2731; --hover:#152330;
  --fg:#e7eef3; --mut:#a8b8c4; --dim:#8a9dab; --dim-dec:#8a9dab; --art:#3a4c5a;
  --accent:#6bc8eb; --accent-2:#8fd6f0; --go-hover:#8fd6f0; --accent-ink:#04202e;
  --accent-soft:rgba(107,200,235,.11); --accent-line:rgba(107,200,235,.36); --ring:rgba(107,200,235,.34);
  --ok:#4cc38a; --ok-soft:rgba(76,195,138,.12);
  --run:#e3aa42; --run-soft:rgba(227,170,66,.12);
  --err:#f2787d; --err-soft:rgba(242,120,125,.12);
  --bar:#4aa8dc;
  --chart-grid:#22313c; --chart-text:#8a9dab; --chart-ink:#e7eef3;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 8px 20px -6px rgba(0,0,0,.5);
  --sh-pop:0 18px 44px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4);
  --chrome:#07121b; --chrome-2:#0c1c29; --chrome-line:rgba(255,255,255,.07);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0a1117; --panel:#101a22; --card:#101a22; --card-2:#0d161d; --inset:#0c141a;
  --line:#243441; --line-soft:#1a2731; --hover:#152330;
  --fg:#e7eef3; --mut:#a8b8c4; --dim:#8a9dab; --dim-dec:#8a9dab; --art:#3a4c5a;
  --accent:#6bc8eb; --accent-2:#8fd6f0; --go-hover:#8fd6f0; --accent-ink:#04202e;
  --accent-soft:rgba(107,200,235,.11); --accent-line:rgba(107,200,235,.36); --ring:rgba(107,200,235,.34);
  --ok:#4cc38a; --ok-soft:rgba(76,195,138,.12);
  --run:#e3aa42; --run-soft:rgba(227,170,66,.12);
  --err:#f2787d; --err-soft:rgba(242,120,125,.12);
  --bar:#4aa8dc;
  --chart-grid:#22313c; --chart-text:#8a9dab; --chart-ink:#e7eef3;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 1px 2px rgba(0,0,0,.4),0 8px 20px -6px rgba(0,0,0,.5);
  --sh-pop:0 18px 44px -10px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.4);
  --chrome:#07121b; --chrome-2:#0c1c29; --chrome-line:rgba(255,255,255,.07);
  color-scheme:dark;
}

/* ============================================================ base */
html{scroll-padding-top:calc(var(--topbar) + 16px)}
body{
  font-family:var(--sans);font-size:14px;line-height:1.5;letter-spacing:-.003em;
  color:var(--fg);background:var(--bg);
  font-feature-settings:"cv11" 1,"ss03" 1;
}
h1,h2,h3,h4,h5{font-family:var(--sans);color:var(--fg)}
code,kbd,.mono,textarea{font-family:var(--mono)}
code{font-size:.88em;padding:1px 5px;border-radius:5px;background:var(--inset);color:var(--fg);border:1px solid var(--line-soft)}
.hint code{color:var(--fg)}
b,strong{font-weight:600}
.dim{color:var(--dim)} .muted{color:var(--mut)}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
/* numbers read against numbers line their digits up */
td.num,th.num,.kpi .k-val,.metric b,.statcard .v,.fact b,.drow b,.stat b,.pf-risk-hero strong,
.pf-asset-risk strong,.pa-bv,.pf-list em,.rank-top .rv{font-variant-numeric:tabular-nums}

/* ============================================================ sidebar rail */
.sidebar{
  width:var(--drawer);flex:0 0 var(--drawer);height:100vh;position:sticky;top:0;z-index:60;
  display:flex;flex-direction:column;gap:0;padding:0;
  background:var(--chrome);color:var(--chrome-fg);border-right:1px solid var(--chrome-line);
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;overflow:hidden;
}
.sidebar .brand{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;
  padding:22px 20px 18px;border-bottom:1px solid var(--chrome-line);
}
.sidebar .brand-link{display:block;border-radius:6px;line-height:0}
.sidebar .brand-link:hover .brand-logo{opacity:.86}
.sidebar .brand-link:focus-visible{outline:2px solid var(--ats-cyan);outline-offset:4px;box-shadow:none}
.sidebar .brand-logo{display:block;width:118px;height:auto;transition:opacity var(--t)}
.sidebar .brand-txt{display:flex;align-items:baseline;gap:8px;min-width:0}
.sidebar .brand h1{margin:0;font:700 12px/1 var(--sans);letter-spacing:.14em;color:#fff}
.sidebar .brand .sub{margin:0;font:500 11.5px/1.2 var(--sans);letter-spacing:0;color:var(--chrome-mut);white-space:nowrap}

.sidebar nav{flex:1 1 auto;display:flex;flex-direction:column;gap:1px;padding:6px 12px 16px;overflow-y:auto;
  scrollbar-color:rgba(255,255,255,.18) transparent}
.sidebar .navgroup{padding:18px 10px 7px;font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--chrome-dim)}
.sidebar .navlist{gap:1px}
.sidebar nav button{
  position:relative;display:flex;align-items:center;gap:11px;width:100%;min-height:36px;padding:0 10px;margin:0;
  border:0;border-radius:7px;background:transparent;box-shadow:none;
  color:var(--chrome-mut);font:500 13.5px/1.2 var(--sans);letter-spacing:-.005em;text-align:left;cursor:pointer;
  transition:background var(--t),color var(--t);
}
.sidebar nav button:hover{background:rgba(255,255,255,.055);color:#fff}
.sidebar nav button.active{background:rgba(107,200,235,.13);color:#fff;font-weight:600;box-shadow:none}
.sidebar nav button.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--ats-cyan)}
.sidebar nav button .ni{width:18px;height:18px;opacity:1;color:var(--chrome-dim);transition:color var(--t)}
.sidebar nav button:hover .ni{color:var(--chrome-fg)}
.sidebar nav button.active .ni{color:var(--ats-cyan)}
.sidebar nav button .ni svg{width:18px;height:18px;stroke-width:1.6}
.sidebar nav button .nstep{margin-left:auto;font:500 11px/1 var(--mono);color:var(--chrome-dim)}
.sidebar nav button.active .nstep{color:var(--ats-cyan)}
.sidebar nav button:focus-visible{outline:2px solid var(--ats-cyan);outline-offset:-2px;box-shadow:none}
.sidebar .workflow-context{
  margin:0 0 6px;padding:8px 10px;border:1px dashed rgba(255,255,255,.14);border-left:1px dashed rgba(255,255,255,.14);
  border-radius:8px;background:transparent;color:var(--chrome-dim);font:400 12px/1.45 var(--sans);overflow-wrap:anywhere;
}
.sidebar .workflow-context.is-set{border:1px solid rgba(107,200,235,.28);background:rgba(107,200,235,.07);color:#fff;font-weight:550}
.sidebar .workflow-context.is-set::before{content:"Loaded study";display:block;margin-bottom:2px;font:600 10.5px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ats-cyan)}
.sidebar .side-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 16px 14px 20px;border-top:1px solid var(--chrome-line);background:transparent}
.sidebar .theme-btn{margin-left:auto;width:32px;height:32px;border-radius:8px;border:1px solid var(--chrome-line);background:rgba(255,255,255,.04);color:var(--chrome-fg)}
.sidebar .theme-btn:hover{background:rgba(255,255,255,.09)}
.sidebar .bk-user{border-top:1px solid var(--chrome-line);padding:12px 20px}
.sidebar .bk-who{color:var(--chrome-mut)}
.sidebar .bk-user .ebtn{background:rgba(255,255,255,.05);border-color:var(--chrome-line);color:var(--chrome-fg)}

/* ============================================================ main column + top bar */
/* `clip`, not `hidden`: hidden makes <main> a scroll container, and a sticky descendant
   then sticks to a box that never scrolls — the top bar and the editor rail would ride
   off the screen with the page. */
main{flex:1 1 auto;min-width:0;padding:0 0 56px;background:var(--bg);overflow-x:clip}
main>div{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) 8px}
main>div.wide,main>#view-map.wide,main>#view-portfolio.wide{max-width:var(--maxw)}
main>div.reading{max-width:960px}

.topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;min-height:var(--topbar);
  padding:8px max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.topbar-spacer{flex:1 1 auto}
#scopebar,#scopebar.scopebar{width:auto;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;min-width:0;flex:0 1 auto}
.scopebar ol{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:0;padding:0;list-style:none;font-size:13px;color:var(--mut)}
.scopebar li{display:flex;align-items:center;min-width:0}
.scopebar li+li::before{content:"/";padding:0 9px;color:var(--line);font-weight:400}
.scopebar .linkish{color:var(--mut);font-weight:500;text-decoration:none;border-radius:4px}
.scopebar .linkish:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.scopebar b{color:var(--fg);font-weight:600}
.scopebar span{color:var(--mut)}

/* signed-in context bar, the station bar, the run strip and the orgbar: one column,
   lined up with the views below them */
#orgbar,#stationbar,#runstrip.runstrip{
  width:calc(100% - 2 * var(--gutter));max-width:calc(var(--maxw) - 2 * var(--gutter));margin:16px auto 0;
}
#orgbar{padding:10px 14px;border:1px solid var(--line);border-radius:var(--r3);background:var(--card);box-shadow:var(--sh-1)}

/* ============================================================ page header */
.pagehead{display:flex;align-items:flex-end;flex-wrap:wrap;gap:14px 24px;margin:0;padding:26px 0 18px}
.pagehead .ph-txt{flex:1 1 440px;min-width:0}
.pagehead .ph-txt h2{display:flex;align-items:center;gap:10px;margin:0;font:650 26px/1.2 var(--sans);letter-spacing:-.022em;color:var(--fg)}
.pagehead .ph-txt p{margin:6px 0 0;max-width:74ch;font-size:14px;line-height:1.55;color:var(--mut)}
.pagehead .ph-txt p.dim{color:var(--dim);font-size:13px}
.pagehead .ph-act{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto}
.pagehead .ph-act .go,.pagehead .ph-act .ebtn{margin:0}
.workspace-eyebrow,.stepbadge{
  display:block;margin:0 0 6px;padding:0;background:none;border-radius:0;
  font:600 11.5px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)
}
.infobtn{display:inline-grid;place-items:center;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--line);
  background:var(--card);color:var(--dim);font:600 11.5px/1 var(--sans);cursor:pointer;flex:none}
.infobtn:hover{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}

/* ============================================================ controls */
button.go,.go{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;margin:0;padding:0 15px;
  border:1px solid transparent;border-radius:var(--r1);background:var(--accent);color:var(--accent-ink);
  font:600 13.5px/1 var(--sans);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;text-decoration:none;
  box-shadow:0 1px 2px rgba(15,27,38,.12),inset 0 1px 0 rgba(255,255,255,.1);
  transition:background var(--t),border-color var(--t),box-shadow var(--t),transform 80ms;filter:none;
}
button.go:hover,.go:hover{background:var(--go-hover);filter:none}
button.go:active{transform:translateY(.5px)}
button.go:disabled,.go:disabled{opacity:.45;cursor:default;box-shadow:none}
button.go.ghost,.go.ghost{background:var(--card);color:var(--fg);border-color:var(--line);box-shadow:var(--sh-1);font-weight:550}
button.go.ghost:hover,.go.ghost:hover{background:var(--hover);border-color:color-mix(in srgb,var(--fg) 18%,var(--line))}
.ebtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;margin:0;padding:0 11px;
  border:1px solid var(--line);border-radius:var(--r1);background:var(--card);color:var(--fg);
  font:500 13px/1 var(--sans);letter-spacing:-.003em;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.ebtn:hover{background:var(--hover);color:var(--fg);border-color:color-mix(in srgb,var(--fg) 16%,var(--line))}
.ebtn.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.ebtn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 30%,var(--line))}
.ebtn.danger:hover{background:var(--err-soft)}
.ebtn.tiny{min-height:24px;padding:0 8px;font-size:12px}
.ebtn:disabled{opacity:.45;cursor:default}
button.linkish,.linkish{border:0;background:none;padding:0;margin:0;color:var(--accent);font:inherit;font-weight:500;cursor:pointer;text-align:left;
  text-decoration:none;border-radius:3px}
button.linkish:hover,.linkish:hover{text-decoration:underline;text-underline-offset:3px}
a{color:var(--accent)}

label{font-size:13px;color:var(--mut);font-weight:500}
.field-label{display:block;margin:0;font:550 12px/1.35 var(--sans);letter-spacing:0;text-transform:none;color:var(--mut)}
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],select{
  height:36px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r1);background-color:var(--card);color:var(--fg);
  font:400 13.5px/1.3 var(--sans);box-shadow:inset 0 1px 1px rgba(15,27,38,.03);
  transition:border-color var(--t),box-shadow var(--t);
}
select{padding-right:32px;background-position:right 11px center}
input[type=file]{height:auto;padding:5px 6px;border:1px dashed var(--line);border-radius:var(--r1);background:var(--card-2);font-size:13px;color:var(--mut)}
input[type=file]::file-selector-button{height:28px;margin-right:10px;padding:0 12px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--fg);font:550 12.5px/1 var(--sans);box-shadow:var(--sh-1)}
textarea{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r1);background:var(--card);color:var(--fg);font:12.5px/1.55 var(--mono)}
input:hover:not(:focus),select:hover:not(:focus),textarea:hover:not(:focus){border-color:color-mix(in srgb,var(--fg) 20%,var(--line));background-color:var(--card)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.fld{gap:6px}
.hint{font-size:12.5px;line-height:1.55;color:var(--dim)}
.hint b{color:var(--fg)}

/* ============================================================ surfaces */
.card,.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh-1);padding:20px}
.card.hero{padding:0}
.card-head{display:flex;align-items:flex-start;gap:12px 16px;flex-wrap:wrap;margin:0 0 14px}
.card-head h3{margin:0;font:620 15.5px/1.35 var(--sans);letter-spacing:-.01em}
.card-note,.card-head p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--mut);max-width:78ch}
.card-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.viewwrap{gap:16px}
/* section divider: a heading with a rule, not another card */
.subtitle{
  display:flex;align-items:center;gap:10px;margin:10px 0 -4px;padding:0 2px;border:0;border-radius:0;background:none;box-shadow:none;
  font:620 13px/1.3 var(--sans);letter-spacing:.005em;color:var(--fg)
}
.subtitle::after{content:"";order:1;flex:1 1 auto;height:1px;background:var(--line)}
.subtitle .n{order:-1;width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent);font:600 11px/22px var(--mono);text-align:center}
.subtitle .sub{order:2;margin:0;font-weight:400;font-size:12.5px;color:var(--dim)}
.subtitle .sub:empty{display:none}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:0}
.kpi{max-width:none;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r3);background:var(--card);box-shadow:var(--sh-1)}
.kpi .k-lab{font:550 12.5px/1.35 var(--sans);color:var(--mut)}
.kpi .k-val{margin-top:8px;font:650 26px/1.15 var(--sans);letter-spacing:-.022em;color:var(--fg)}
.kpi .k-sub{margin-top:6px;font-size:12px;line-height:1.5;color:var(--dim)}
.kpi.risk .k-val{color:var(--err)}
.kpi.good .k-val{color:var(--ok)}
.kpi.accent .k-val{color:var(--accent)}
.statcard{border-color:var(--line);border-radius:var(--r3)}
.statcard .k{font-weight:550}
.metric{background:var(--card-2);border-radius:var(--r2)}
.mini-facts{gap:8px}
.fact{padding:7px 11px;border-radius:var(--r1);background:var(--inset);border:1px solid var(--line-soft);font-size:12.5px;color:var(--mut)}
.detail{padding:14px 16px;border-radius:var(--r2);background:var(--card-2);border:1px solid var(--line-soft)}
.detail h5{font:620 15px/1.3 var(--sans)}
.warnbar{border-radius:var(--r2);border:1px solid color-mix(in srgb,var(--run) 35%,transparent);border-left:3px solid var(--run);background:var(--run-soft)}
.stale-note{border-radius:var(--r2);background:var(--run-soft);border:1px solid color-mix(in srgb,var(--run) 35%,transparent)}
.empty{padding:48px 24px;border:1px dashed var(--line);border-radius:var(--r3);background:var(--card);box-shadow:none}
.empty .empty-art{font-size:28px;color:var(--art)}
.empty h3{margin:12px 0 6px;font:620 17px/1.3 var(--sans)}
.empty p{font-size:13.5px;color:var(--mut)}
/* neutral progress/info message; red only when app.js adds .bad */
.err.alert:not(:empty){padding:10px 14px;border:1px solid var(--accent-line);border-left:3px solid var(--accent);border-radius:var(--r2);
  background:var(--accent-soft);color:var(--fg);font-size:13px;line-height:1.55}
.err.alert.bad:not(:empty){border-color:color-mix(in srgb,var(--err) 35%,transparent);border-left-color:var(--err);background:var(--err-soft);color:var(--err)}
.note-fold>summary{color:var(--accent)}

/* tags and pills */
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;background:var(--inset);border:1px solid var(--line-soft);
  color:var(--mut);font:500 11.5px/1 var(--mono);letter-spacing:0;text-transform:none}
.tag.file{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.tag.best{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.bk-tag{border-radius:6px}
.pf-demo-tag{display:inline-flex;align-items:center;gap:6px;height:22px;margin:0;padding:0 8px;border-radius:6px;
  background:var(--run-soft);color:var(--run);font:600 12px/1 var(--sans);letter-spacing:0;white-space:nowrap}
.pf-demo-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* tabs: underline for page-level sources, segmented for in-panel switches */
.tabs{display:flex;gap:2px;margin:0 0 16px;padding:0;border-bottom:1px solid var(--line);background:none;border-radius:0}
.tabs button{height:38px;margin:0 0 -1px;padding:0 12px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;
  color:var(--mut);font:550 13.5px/1 var(--sans);cursor:pointer;box-shadow:none}
.tabs button:hover{color:var(--fg);background:none}
.tabs button.active{color:var(--fg);border-bottom-color:var(--accent);background:none;box-shadow:none;font-weight:600}
.tabs.vtabs{flex-direction:row;flex-wrap:wrap;padding:0;margin-bottom:18px}
.tabs.vtabs button{text-align:center;padding:0 12px;border-radius:0}

.pf-tabs,.pf-basemap,.ed-tools,.rail-tabs,.seg{
  display:flex;gap:2px;padding:3px;margin:0;border:1px solid var(--line-soft);border-radius:9px;background:var(--inset);box-shadow:none
}
.pf-tabs button,.pf-basemap button,.rail-tabs button,.seg button{
  flex:1 1 0;min-width:0;height:28px;padding:0 8px;border:0;border-radius:6px;background:transparent;box-shadow:none;
  color:var(--mut);font:550 12.5px/1 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;
  transition:background var(--t),color var(--t)
}
.pf-tabs button:hover,.pf-basemap button:hover,.rail-tabs button:hover,.seg button:hover{color:var(--fg)}
.pf-tabs button[aria-selected="true"],.pf-basemap button[aria-pressed="true"],.rail-tabs button.active,.seg button.on{
  background:var(--card);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(15,27,38,.1),0 0 0 1px var(--line-soft)
}
.pf-tabs button .dim{color:var(--dim);font-weight:500;margin-left:3px}
.pf-tabs button[aria-selected="true"] .dim{color:var(--mut);opacity:1}

.chips label{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--pill);background:var(--card);color:var(--mut);font-size:13px}
.chips label:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.ochip{height:28px;padding:0 11px;border-radius:var(--pill)}
.ochip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}

/* ============================================================ tables */
table{font-size:13px}
thead th,table.pf-at thead th,.lib-table thead th,#res-network thead th{
  height:36px;padding:0 12px;background:var(--card-2);color:var(--mut);border-bottom:1px solid var(--line);
  font:600 12px/1.25 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;vertical-align:middle;text-align:left
}
thead th.num{text-align:right}
tbody td,tbody th[scope="row"]{padding:9px 12px;border-bottom:1px solid var(--line-soft);color:var(--fg);vertical-align:middle}
tbody tr:hover td,tbody tr:hover th[scope="row"]{background:var(--hover)}
td.num,th.num{font-family:var(--sans);font-size:13px;text-align:right}
tbody th[scope="row"]{font-weight:500}
tbody th[scope="row"] .dim{margin-left:4px;font:500 11.5px var(--mono);color:var(--dim)}
td .ebtn,th .ebtn{min-height:28px;padding:0 9px;font-size:12.5px}
/* a scrolled table keeps its header and never grows the page by thousands of pixels */
.tblwrap,.pf-at-wrap,#mit-table,#econ-body,#pareto-body{overflow:auto;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.tblwrap{max-height:min(560px,68vh)}
.tblwrap table,.pf-at-wrap table{margin:0}
.tblwrap thead th,.pf-at-wrap thead th{position:sticky;top:0;z-index:2}
.tblwrap tbody tr:last-child td,.tblwrap tbody tr:last-child th{border-bottom:0}
#econ-body:empty,#pareto-body:empty,#mit-table:empty{border:0}

/* ============================================================ network overview (map) */
.pf-provenance{margin:0 0 14px;border:1px solid var(--line-soft);border-radius:var(--r2);background:var(--card)}
.pf-provenance>summary{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-height:38px;padding:6px 12px;list-style:none;
  font-size:13px;color:var(--fg);cursor:pointer}
.pf-provenance>summary::-webkit-details-marker{display:none}
.pf-provenance-hint{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:12.5px;font-weight:550}
.pf-provenance-hint::after{content:"";width:6px;height:6px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.pf-provenance[open]>.pf-provenance-hint::after,.pf-provenance[open] .pf-provenance-hint::after{transform:translateY(3px) rotate(-135deg)}
.pf-provenance[open]{padding:0;background:var(--card);border-color:var(--line)}
.pf-provenance[open]>summary{border-bottom:1px solid var(--line-soft)}
.pf-provenance-body{gap:24px;padding:16px 16px 18px}
.pf-provenance-body h3{margin:0 0 6px;font:620 13.5px/1.35 var(--sans)}
.pf-provenance-body p{font-size:13px;color:var(--mut)}

.pf-card{padding:0;overflow:hidden;box-shadow:var(--sh-2)}
.pf-wrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;height:clamp(560px,calc(100dvh - 246px),900px);min-height:0}
.pf-mapbox{position:relative;min-height:0;border-right:1px solid var(--line);border-bottom:0;isolation:isolate}
.pf-map{background:#0e1319}
.pf-basemap{position:absolute;top:12px;right:12px;z-index:500;background:color-mix(in srgb,var(--card) 92%,transparent);
  border-color:var(--line);box-shadow:var(--sh-2);backdrop-filter:blur(8px)}
.pf-basemap button{flex:0 0 auto;padding:0 11px}
.pf-basemap .pf-svc-btn{margin-left:7px;position:relative}
.pf-basemap .pf-svc-btn::before{content:"";position:absolute;left:-5px;top:22%;bottom:22%;border-left:1px solid var(--line)}
.pf-legend{left:12px;bottom:28px;gap:5px 12px;max-width:min(560px,calc(100% - 24px));padding:10px 12px;border-radius:var(--r2);
  background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid var(--line);box-shadow:var(--sh-2);backdrop-filter:blur(8px);
  font-size:11.5px;color:var(--mut)}
.pf-legend>.field-label{font-size:12px;font-weight:600;color:var(--fg);margin-bottom:2px}
.pf-lt{min-width:112px;font-weight:550;color:var(--fg)}
.pf-key{gap:5px}
.pf-key i{width:14px;height:9px;border-radius:2px;border-color:color-mix(in srgb,var(--fg) 14%,transparent)}
.leaflet-bar{border:1px solid var(--line)!important;border-radius:var(--r1)!important;box-shadow:var(--sh-2)!important;overflow:hidden}
.leaflet-bar a{width:32px!important;height:32px!important;line-height:30px!important;background:var(--card)!important;color:var(--fg)!important;border-bottom-color:var(--line-soft)!important;font:500 17px/30px var(--sans)!important}
.leaflet-bar a:hover{background:var(--hover)!important}
.leaflet-container .leaflet-control-attribution{background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--dim);border-radius:6px 0 0 0;padding:1px 6px}
.leaflet-container .leaflet-control-attribution a{color:var(--mut)}
.pf-map .leaflet-tooltip,.fe-map .leaflet-tooltip,.pm-map .leaflet-tooltip{padding:5px 8px;border-radius:6px;font:550 12px/1.3 var(--sans);box-shadow:var(--sh-2)}

/* the side panel: stacked sections under hairlines, one scroll */
.pf-side{display:flex;flex-direction:column;gap:0;padding:0;max-height:none;min-height:0;overflow:auto;background:var(--card)}
.pf-side>*{padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.pf-side>*:last-child{border-bottom:0}
.pf-side .field-label{margin-bottom:6px}
.pf-pick select{height:38px;font-weight:600;font-size:14px}
.pf-about{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim)}
.pf-finder{padding-bottom:16px}
.pf-find-row{gap:6px}
.pf-find-row input{font-size:13.5px}
.pf-find-row .ebtn{min-height:36px;font-size:12.5px}
.pf-find-results{margin-top:8px;max-height:260px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.pf-find-item{padding:9px 12px;border-bottom:1px solid var(--line-soft);background:var(--card)}
.pf-find-item.feeder{padding-left:24px;border-left:0;box-shadow:inset 2px 0 0 var(--line)}
.pf-find-item b{font:600 13px/1.35 var(--sans)}
.pf-find-item b span{margin-left:4px;font:500 11.5px var(--mono);color:var(--dim)}
.pf-find-item small{font-size:12px;color:var(--dim)}
.pf-find-item:hover{background:var(--hover)}
.pf-find-item[aria-current="true"]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
#pf-find-count{margin:8px 0 0;font-size:12px;color:var(--dim)}

.pf-side>.pf-detail:not(:empty){display:grid;gap:10px;margin:0;padding:16px 18px;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;
  background:linear-gradient(var(--accent),var(--accent)) left/3px 100% no-repeat,var(--card-2)}
.pf-detail-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pf-detail-head .field-label{margin:0;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.pf-detail-head .linkish{font-size:12.5px}
.pf-detail h3{margin:0;font:650 19px/1.25 var(--sans);letter-spacing:-.02em}
.pf-detail h3 .dim{margin-left:4px;font:500 12px var(--mono);letter-spacing:0;color:var(--dim)}
.pf-detail>p{margin:0;font-size:12.5px;line-height:1.5;color:var(--mut)}
.pf-detail .pf-parent{font-size:12.5px;color:var(--mut)}
.pf-dl{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:7px 12px;margin:2px 0 0;font-size:12.5px;line-height:1.45}
.pf-dl dt{color:var(--mut)}
.pf-dl dd{margin:0;color:var(--fg)}
.pf-detail .field-label{margin:4px 0 0}
.pf-mini{margin:0;padding:0;list-style:none;counter-reset:pfm;font:500 12px/1.6 var(--mono)}
.pf-mini li{counter-increment:pfm;display:flex;gap:8px;padding:3px 0;border-bottom:1px dashed var(--line-soft)}
.pf-mini li::before{content:counter(pfm);color:var(--dim);min-width:14px}
.pf-mini li:last-child{border-bottom:0}
.pf-mini em{margin-left:auto;float:none;color:var(--mut)}
table.pf-zones{font-size:12.5px}
table.pf-zones th,table.pf-zones td{padding:5px 6px}
table.pf-zones thead th{height:28px;font-size:11.5px}
.pf-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.pf-go .go,.pf-go .ebtn{flex:1 1 auto;min-height:34px;height:34px;font-size:13px}

.pf-by{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pf-by .field-label{grid-column:1/-1;margin:0 0 6px}
.pf-by button{height:32px;padding:0 10px;border:1px solid var(--line);background:var(--card);color:var(--mut);font:550 12.5px/1 var(--sans);cursor:pointer;box-shadow:none}
.pf-by button:first-of-type{border-radius:var(--r1) 0 0 var(--r1)}
.pf-by button:last-of-type{border-radius:0 var(--r1) var(--r1) 0;margin-left:-1px}
.pf-by button:hover{color:var(--fg);background:var(--hover)}
.pf-by button[aria-pressed="true"]{position:relative;z-index:1;background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.pf-stats{display:block}
.pf-risk-hero{display:grid;gap:2px;padding:0;border:0;background:none;box-shadow:none}
.pf-risk-hero .field-label{margin:0 0 2px}
.pf-risk-hero strong{font:680 34px/1.08 var(--sans);letter-spacing:-.035em;color:var(--fg)}
.pf-risk-hero>span:last-child{font-size:12.5px;color:var(--mut)}
.pf-stats-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.pf-stats-compact .metric{display:flex;flex-direction:column;gap:2px;min-height:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r1);background:var(--card-2)}
.pf-stats-compact .metric b{font:650 16px/1.2 var(--sans);letter-spacing:-.01em}
.pf-stats-compact .metric span{margin:0;font-size:12px;line-height:1.35;color:var(--mut)}
.pf-stats-more{margin-top:10px;font-size:12.5px;color:var(--mut)}
.pf-stats-more>summary{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:550;cursor:pointer;list-style:none}
.pf-stats-more>summary::-webkit-details-marker{display:none}
.pf-stats-more>summary::before{content:"+";display:inline-grid;place-items:center;width:16px;height:16px;border-radius:4px;background:var(--accent-soft);font-weight:700;font-size:12px}
.pf-stats-more[open]>summary::before{content:"−"}
.pf-stats .pf-go-wide{margin-top:14px}
.pf-stats .pf-go-wide .go{width:100%;height:36px}

.pf-rank{display:flex;flex-direction:column;gap:8px}
.pf-rank-title{margin:0!important}
.pf-tabs{margin:0}
.pf-rank-unit{margin:0;font-size:12px;color:var(--dim)}
.pf-list{gap:1px;margin:0 -8px}
.pf-list button{grid-template-columns:10px minmax(0,1fr) auto;column-gap:10px;padding:7px 8px;border-radius:var(--r1)}
.pf-list button:hover,.pf-list button:focus-visible{background:var(--hover)}
.pf-list button i{width:10px;height:10px;border-radius:3px;border:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.pf-list button b{font:550 13px/1.35 var(--sans)}
.pf-list button span{font-size:12px;color:var(--dim)}
.pf-list button em{font:600 12.5px var(--sans);color:var(--fg)}
.pf-bk-note{border-radius:var(--r2)}

/* the asset table under the map */
.pf-at-card{margin-top:16px;padding:0;overflow:hidden}
.pf-at-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:16px 20px 0}
.pf-at-head h3{margin:0;font:650 17px/1.3 var(--sans);letter-spacing:-.015em}
.pf-at-tools{gap:8px}
.pf-at-tools input[type=search]{width:260px;min-width:0}
.pf-at-tools select{width:auto;min-width:160px}
.pf-at-lines{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r1);background:var(--card);font-size:13px;color:var(--mut);cursor:pointer}
.pf-at-lines:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.pf-at-lines input{margin:0}
.pf-at-scope{margin:10px 0 12px;padding:0 20px;font-size:12.5px;line-height:1.55;color:var(--dim)}
.pf-at-wrap{max-height:min(640px,72vh);margin:0;border:0;border-top:1px solid var(--line);border-radius:0}
table.pf-at th,table.pf-at td{padding:0 12px;height:38px;border-bottom:1px solid var(--line-soft)}
table.pf-at thead th{height:36px}
table.pf-at thead th button{display:inline-flex;align-items:center;gap:4px;height:100%;font:600 12px/1 var(--sans);color:var(--mut)}
table.pf-at thead th button:hover{color:var(--fg)}
table.pf-at thead th[aria-sort] button{color:var(--fg)}
table.pf-at tbody th[scope="row"]{font:550 12.5px var(--mono);color:var(--fg)}
table.pf-at td.n{font-family:var(--sans)}
table.pf-at tbody tr:hover{background:var(--hover)}
table.pf-at tbody tr.asset-selected,table.pf-at tbody tr.asset-selected td,table.pf-at tbody tr.asset-selected th{background:var(--accent-soft)}
table.pf-at tbody tr.asset-selected th{box-shadow:inset 3px 0 0 var(--accent);color:var(--accent)}
#pf-at-more{margin:12px 20px 16px}
.pf-at-card>.pf-asset-detail{margin:12px 20px 4px;padding:18px 20px;border:1px solid var(--accent-line);border-radius:var(--r3);
  background:linear-gradient(var(--accent),var(--accent)) left/3px 100% no-repeat,var(--card);box-shadow:var(--sh-2)}
.pf-asset-detail h3{margin:0;font:650 20px/1.25 var(--sans);letter-spacing:-.02em}
.pf-asset-detail .pf-asset-location{font-size:13px;color:var(--mut)}
.pf-asset-risk>div{padding:12px 14px;border-radius:var(--r2);background:var(--card-2);border:1px solid var(--line-soft)}
.pf-asset-risk>div:first-child{background:var(--accent-soft);border-color:var(--accent-line)}
.pf-asset-risk span{font-size:12px;color:var(--mut);font-weight:550}
.pf-asset-risk strong{font:680 24px/1.15 var(--sans);letter-spacing:-.02em}
.pf-asset-risk small{font-size:11.5px;color:var(--dim)}
.pf-asset-actions{gap:8px;align-items:center}
.pf-asset-actions .go,.pf-asset-actions .ebtn{flex:0 0 auto}
.pf-asset-actions small{font-size:12px;color:var(--dim)}
.pf-asset-detail .pf-asset-note{font-size:12px;color:var(--dim)}

/* ============================================================ portfolio analysis */
.pa-crumb{margin:0 0 14px;font-size:13px}
.pa-k{font:600 11px/1 var(--sans);letter-spacing:.07em;color:var(--dim)}
.pa-head{padding:16px 20px;align-items:center}
.pa-head .pf-pick{flex:1 1 320px;max-width:560px}
.pa-head .pf-pick select{max-width:420px}
.pa-head .dim{margin:8px 0 0;font-size:13px}
.pa-context-note{margin:12px 0 16px;font-size:12.5px;color:var(--mut)}
.pa-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 4px}
.pa-kpis .kpi{min-height:0;border-radius:var(--r3)}
.pa-kpis .kpi:nth-child(3){background:var(--accent-soft);border-color:var(--accent-line)}
.pa-kpis .kpi:nth-child(3) .k-lab{color:var(--accent)}
.pa-kpis .kpi:nth-child(3) .k-val{font-size:32px;color:var(--fg)}
.pa-kpis .kpi:nth-child(n+4){background:var(--card-2);box-shadow:none}
.pa-card{margin-top:16px}
.pa-card h3{margin:0 0 4px;font:650 16.5px/1.3 var(--sans);letter-spacing:-.012em}
.pa-card .card-head{margin-bottom:12px}
.pa-card .pf-tabs{display:inline-flex;margin:0 0 12px}
.pa-card .pf-tabs button{flex:0 0 auto;padding:0 12px}
.pa-row{gap:16px}
.pa-row>.pa-card{margin-top:16px}
.pa-controls{gap:10px 20px;margin:0 0 14px}
.pa-in{font-size:13px;color:var(--mut)}
.pa-bars{gap:9px}
.pa-bars li{font-size:13px}
.pa-bt{height:10px;border-radius:5px;background:var(--inset)}
.pa-bt i{border-radius:5px}
.pa-rank button{padding:8px 10px}
.pa-rank b{font:550 13px var(--sans)}
tr.pa-in-pack td,tr.pa-in-pack th{background:var(--accent-soft)}
.pa-foot{font-size:12.5px;color:var(--dim)}
.pa-card tbody th[scope="row"]{white-space:nowrap}
/* long headers ("Probability of line failure / yr") wrap rather than push the last column out of view */
.pa-card thead th{white-space:normal;vertical-align:bottom;min-width:9ch}
.pa-cba th[scope="row"] .bk-tag{display:inline-block;margin-left:8px;vertical-align:middle}

/* portfolios manager */
.pm-levels{gap:12px}
.pm-lic{margin:0 0 14px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--run) 35%,transparent);border-left:3px solid var(--run);border-radius:var(--r2);background:var(--run-soft);color:var(--fg);font-size:13px;line-height:1.5}
.pm-lv{padding:16px 18px;border-radius:var(--r3);background:var(--card-2);border-color:var(--line-soft)}
.pm-card{border-radius:var(--r3);padding:16px 18px;box-shadow:var(--sh-1)}
.pm-listbox{border-radius:var(--r2)}

/* ============================================================ station workflow */
#stationbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;min-height:48px;padding:7px 8px 7px 16px;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--card);box-shadow:var(--sh-1)}
#stationbar .field-label{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:var(--accent-soft);
  color:var(--accent);font:650 11px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase}
#stationbar .sb-facts{flex:1 1 280px;font-size:13px;color:var(--mut)}
#stationbar .ebtn{margin-left:auto}
#stationbar + .runstrip{margin-top:0}
/* the station and its last run read as one object: a bar with its status underneath */
#stationbar:not(.hidden):has(+ .runstrip:not(.hidden):not(.offstage)){border-bottom-left-radius:0;border-bottom-right-radius:0}
#stationbar:not(.hidden) + #runstrip.runstrip:not(.hidden):not(.offstage){margin-top:-1px;border-top-left-radius:0;border-top-right-radius:0}

#runstrip.runstrip{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-areas:"pill pips cancel open" "metrics metrics info info" "err err err err";
  align-items:center;justify-content:stretch;gap:10px 12px;padding:12px 14px 12px 16px;
  border:1px solid var(--line);border-radius:var(--r3);background:var(--card-2);box-shadow:var(--sh-1)
}
#runstrip #pill{grid-area:pill;height:22px;padding:0 9px;border:0;border-radius:6px;background:var(--inset);font:650 11px/22px var(--sans);letter-spacing:.07em;text-transform:uppercase}
#runstrip #stagesbox{grid-area:pips;justify-content:flex-start;gap:6px}
#runstrip .grow,#runstrip .grow.grow{display:none}
#runstrip #metrics{grid-area:metrics;justify-content:flex-start;gap:6px}
#runstrip #cancelbtn{grid-area:cancel}
#runstrip #rs-open{grid-area:open;height:32px;font-size:13px}
#runstrip #runinfo{grid-area:info;width:auto;text-align:right;font-size:12px;color:var(--dim);align-self:end}
#runstrip #runinfo code{font-size:11.5px}
#runstrip #runerr{grid-area:err;text-align:left}
#runstrip #runerr:empty{display:none}
#runstrip:has(#runerr:empty){grid-template-areas:"pill pips cancel open" "metrics metrics info info"}
.pips .stage{height:26px;padding:0 10px 0 8px;border:1px solid var(--line-soft);border-radius:var(--pill);background:var(--card);font-size:12px;color:var(--mut);gap:7px}
.pips .sname{font-weight:600;color:var(--fg)}
.pips .sdetail{max-width:30ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim)}
.pips .stage .dot{width:7px;height:7px}
.pips .stage .dot.done{background:var(--ok)}
.rs-metrics .metric{display:flex;flex-direction:column-reverse;gap:1px;padding:6px 11px;border:1px solid var(--line-soft);border-radius:var(--r1);background:var(--card)}
.rs-metrics .metric b{font:650 13.5px/1.25 var(--sans)}
.rs-metrics .metric span{font-size:11.5px;color:var(--dim)}

.site-flowbar{display:flex;align-items:center;gap:12px 18px;margin:0 0 14px;padding:10px 10px 10px 16px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r2);background:var(--card);box-shadow:none}
.site-flowbar>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.site-flowbar .field-label{font:650 11px/1.4 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.site-flowbar strong{font:620 14px/1.35 var(--sans);margin:0}
.site-flowbar small{flex-basis:100%;font-size:12.5px;color:var(--dim)}
.site-flowbar .ebtn{margin-left:auto}

.ed-toolbar{gap:6px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r3);background:var(--card);box-shadow:var(--sh-1)}
.ed-toolbar .sep{height:20px;margin:0 3px;background:var(--line)}
.ed-toolbar .ebtn{min-height:30px;font-size:12.5px}
.ed-tools{padding:2px;border-radius:8px}
.etool{height:26px;padding:0 9px;border-radius:6px;font:550 12.5px/1 var(--sans);color:var(--mut)}
.etool:hover{background:transparent;color:var(--fg)}
.etool.on{background:var(--card);color:var(--fg);box-shadow:0 1px 2px rgba(15,27,38,.1),0 0 0 1px var(--line-soft);font-weight:600}
.etool .ti{opacity:.9}
.ed-menu-pop{border-radius:var(--r3);border-color:var(--line);box-shadow:var(--sh-pop)}
.ed-canvas,.ed-wrap{border-color:var(--line);border-radius:var(--r3)}
.ed-wrap{background:transparent;border:0;box-shadow:none;overflow:visible;gap:16px}
#ed-graphwrap{background:var(--card)}
#ed-svg{height:clamp(440px,calc(100dvh - 330px),860px);border-radius:0}
.ed-drawing-view,.sheet-scroll{height:auto;max-height:clamp(440px,calc(100dvh - 330px),860px)}
.ed-drawing-view{height:clamp(440px,calc(100dvh - 330px),860px)}
.ed-canvas .ed-legend{padding:9px 14px;font-size:12px;background:var(--card-2);border-top:1px solid var(--line-soft)}
.split-main{grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.split-main>.side{top:calc(var(--topbar) + 16px)}
.pcard h3,.pcard>h3{font:650 11.5px/1.3 var(--sans)!important;letter-spacing:.07em!important;text-transform:uppercase;color:var(--dim)!important;margin:0 0 12px!important}
.site-inspect-action{border-radius:var(--r2);background:var(--accent-soft);border-color:var(--accent-line)}
.site-inspect-action .go{width:100%}

/* data sheet */
.dgrid{border-color:var(--line);border-radius:var(--r3);box-shadow:var(--sh-1)}
.sheet-bar{padding:10px 12px;background:var(--card)}
.sheet-chk{height:32px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r1);background:var(--card);font-size:12.5px}
table.sheet th{height:34px;padding:0 10px;background:var(--card-2);color:var(--mut);font:600 11.5px/1.2 var(--sans);letter-spacing:0;text-transform:none}
table.sheet input,table.sheet select{height:30px;font-size:12.5px}

/* outputs + decisions */
.outcard .card-head{margin-bottom:10px}
.filehdr{gap:8px;margin-bottom:12px}
.dl{height:30px;padding:0 11px;border-radius:var(--r1);font:550 12.5px/1 var(--sans)}
.chartbox{background:var(--card);border-radius:var(--r2)}
.dg-frame{border:1px solid var(--line-soft);border-radius:var(--r2);background:
  radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0) 0 0/22px 22px,var(--card-2)}
.dg-scale,.dg-note{font-size:11.5px}
.dg-scale{border:1px solid var(--line-soft);box-shadow:var(--sh-1)}
.hero-grid{gap:18px;padding:0 16px 16px}
.card.hero>.card-head{padding:16px 16px 0!important}
.hero-side h4{font:650 11.5px/1.3 var(--sans);letter-spacing:.07em;color:var(--dim)}
.ranklist{margin:0 -6px}
.rank{padding:7px 8px;border-radius:var(--r1)}
.rank-top .rn{font:550 13px var(--sans)}
.rank-top .rv{font:500 12px var(--sans);color:var(--mut)}
.rbar{height:4px;background:var(--inset)}
.mit-inputs{gap:12px}
.mit-fld label{font-size:12.5px;font-weight:550}
.pkg-row{border-radius:var(--r2);background:var(--card-2);border:1px solid var(--line-soft)}
#res-network .kpis-sm .kpi .k-val{font-size:22px}

/* ============================================================ catalog, examples, library, runs */
.ex-wrap{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.au-side{gap:10px;position:sticky;top:calc(var(--topbar) + 16px);max-height:calc(100dvh - var(--topbar) - 48px);min-height:0}
.au-side .ex-list,.ex-wrap>.ex-list{max-height:calc(100dvh - var(--topbar) - 120px);overflow:auto;padding:2px;margin:0 -2px}
.ex-wrap>.ex-list{position:sticky;top:calc(var(--topbar) + 16px)}
.ex-list{gap:4px}
.ex-item{padding:10px 12px;border:1px solid transparent;border-radius:var(--r2);background:transparent;transition:background var(--t),border-color var(--t)}
.ex-item:hover{background:var(--hover)}
.ex-item.on,.ex-item[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:inset 3px 0 0 var(--accent)}
.ex-item b{font:600 13.5px/1.35 var(--sans);color:var(--fg)}
.ex-item span{display:block;margin-top:3px;font:500 11.5px/1.5 var(--mono);color:var(--dim)}
.ex-list li.ex-group{padding:14px 12px 4px;font:650 11px/1.3 var(--sans);letter-spacing:.08em;color:var(--dim)}
.au-tabs,#au-tabs .pf-tabs{margin:0}
#au-tabs .pf-tabs button{height:auto;min-height:28px;padding:4px 6px;white-space:normal;line-height:1.2;font-size:12px}
.au-head{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.au-head h3{margin:0 0 6px;font:650 24px/1.2 var(--sans);letter-spacing:-.022em}
.au-head h3 .dim,.au-head h3 span{color:var(--dim)}
.au-head p{font-size:13.5px;line-height:1.6;color:var(--mut);max-width:80ch}
.ex-cols{gap:16px}
.ex-cols figure{margin:0;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;background:var(--card)}
.ex-cols figcaption{padding:10px 14px;background:var(--card-2);border-bottom:1px solid var(--line-soft);font:600 12.5px/1.4 var(--sans);color:var(--fg)}
.ex-plot{border-radius:var(--r2);border-color:var(--line)}
.plate-tools{border-radius:var(--r1);padding:3px;gap:3px;box-shadow:var(--sh-2)}
.plate-tools .ebtn{min-height:26px;padding:0 8px;font-size:12px}
.ex-ready{border-radius:var(--r2)}
.fe-map,.pm-map{border-radius:var(--r2);isolation:isolate}
.fe-fig figcaption{font-size:12.5px;color:var(--mut)}
.runrow{padding:12px 16px;border-radius:var(--r2);border-color:var(--line);background:var(--card);box-shadow:var(--sh-1)}
.runrow:hover{border-color:var(--accent-line);background:var(--card)}
.rr-status{border-radius:6px}
.man h3{font:650 19px/1.3 var(--sans);letter-spacing:-.015em;margin:28px 0 10px}
.man p,.man ul{font-size:14px;color:var(--mut)}
.man-step{border-radius:var(--r2);background:var(--card-2);border:1px solid var(--line-soft)}
.eyebrow{font:650 11.5px/1.3 var(--sans);letter-spacing:.07em;color:var(--accent)}
.lib-card{gap:16px}

/* ============================================================ popovers, dialogs, transition */
.infopop{border-radius:var(--r3);box-shadow:var(--sh-pop);font-size:13px}
.dg-tip{border-radius:var(--r1);box-shadow:var(--sh-pop)}
.tx-dialog{border-radius:16px;border-color:var(--line)}
.tx-head{padding:16px 20px}
.tx-head h2{font:650 22px/1.2 var(--sans);letter-spacing:-.02em}
.tx-eyebrow,.tx-label{font:650 11px/1.4 var(--sans);letter-spacing:.08em;color:var(--accent)}
.tx-evidence h3{font:650 17px/1.25 var(--mono)}
.tx-facts dt{font-size:12px}
.tx-facts dd{font:650 16px/1.3 var(--sans)}
.tx-parts button{border-radius:var(--r1);font:600 12px var(--sans)}
.tx-scope{border-radius:var(--r2);font-size:12.5px}
.site-loading{padding:10px 16px 10px 14px;display:flex;align-items:center;gap:10px;border-radius:var(--r2);border:1px solid var(--line);background:var(--card);
  box-shadow:var(--sh-pop);font:600 13px/1.3 var(--sans)}
.site-loading::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--accent-line);border-top-color:var(--accent);animation:pra-spin .8s linear infinite}
@keyframes pra-spin{to{transform:rotate(360deg)}}
.site-transition-head{top:20px;left:24px;right:24px;padding:14px 16px 14px 20px;border-radius:var(--r3);border:1px solid var(--line);background:color-mix(in srgb,var(--card) 94%,transparent);
  box-shadow:var(--sh-pop);backdrop-filter:blur(10px)}
.site-transition-head .field-label{font:650 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.site-transition-head strong{font:650 20px/1.25 var(--sans);letter-spacing:-.02em}
.site-transition footer{left:24px;right:auto;max-width:560px;padding:8px 12px;border-radius:var(--r1);border:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--card) 92%,transparent);font-size:11.5px;color:var(--mut)}

/* ============================================================ responsive */
@media (max-width:1180px){
  .pf-wrap{grid-template-columns:minmax(0,1fr) 320px}
  .ex-wrap{grid-template-columns:260px minmax(0,1fr)}
}
@media (max-width:1024px){
  .pf-wrap{grid-template-columns:1fr;height:auto}
  .pf-mapbox{height:min(62vh,560px);border-right:0;border-bottom:1px solid var(--line)}
  .pf-side{overflow:visible}
  .pa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-wrap{grid-template-columns:1fr}
  .au-side,.ex-wrap>.ex-list{position:static;max-height:none}
  .au-side .ex-list,.ex-wrap>.ex-list{max-height:320px}
  #runstrip.runstrip{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"pill pips open" "metrics metrics metrics" "info info cancel" "err err err"}
}
@media (max-width:860px){
  :root{--gutter:16px}
  body{display:block}
  .sidebar{position:sticky;top:0;width:auto;height:auto;flex-direction:row;align-items:center;gap:6px;padding:0 10px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--chrome-line)}
  .sidebar .brand{flex-direction:row;align-items:center;padding:10px 6px;border:0;gap:8px}
  .sidebar .brand-logo{width:64px}
  .sidebar .brand-txt{display:none}
  .sidebar nav{flex-direction:row;padding:6px 0;overflow-x:auto;overflow-y:hidden}
  .sidebar .navlist{flex-direction:row}
  .sidebar .navgroup,.sidebar .workflow-context,.sidebar nav button .nstep,.sidebar nav button .ni{display:none}
  .sidebar nav button{min-height:32px;padding:0 10px;white-space:nowrap;font-size:13px}
  .sidebar nav button.active::before{left:10px;right:10px;top:auto;bottom:-6px;width:auto;height:2px;border-radius:2px}
  .sidebar .side-foot{margin:0 0 0 auto;padding:0 4px;border:0}
  .topbar{top:52px;z-index:45;flex-wrap:wrap;padding-block:8px}
  .pagehead{padding-top:20px}
  .pagehead .ph-txt h2{font-size:22px}
  .pf-provenance-body{grid-template-columns:1fr}
  .pf-provenance-hint{margin-left:0}
  .split-main{grid-template-columns:1fr}
}
@media (max-width:600px){
  .pagehead .ph-act{margin-left:0;width:100%}
  .pa-kpis{grid-template-columns:1fr}
  .pf-at-tools input[type=search]{width:100%}
  .pf-at-tools{width:100%}
  #runstrip.runstrip{grid-template-columns:1fr auto;grid-template-areas:"pill open" "pips pips" "metrics metrics" "info cancel" "err err"}
}
@media print{
  .topbar{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .site-loading::before{animation:none}
}

/* ============================================================ icons + fixes (pass 2) */
.ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.etool .ti .ico{width:14px;height:14px}
.ico-caret{width:12px;height:12px;margin-left:-2px;opacity:.7}
.ed-toolbar .ebtn[aria-label]{width:32px;padding:0}
/* a finished stage is its name and its tick; the detail is its title and the metrics row */
.pips .stage:has(.dot.done) .sdetail{display:none}
/* the catalog list is a column flex item: styles.css gave every .ex-list `flex:0 0 240px`,
   which in a column is a 240px HEIGHT — the station list stopped after three rows */
.au-side .ex-list{flex:1 1 auto;min-height:0}
.ex-item b span{display:inline;margin:0 0 0 5px;font:500 11.5px var(--mono);color:var(--dim)}
.pa-rank em{font:600 13px var(--sans);color:var(--fg)}
.pa-rank em .dim,.pa-rank em small{color:var(--dim);font-weight:500}
.pa-rank-head{display:flex;justify-content:space-between;gap:10px;margin:10px 10px 0;padding-bottom:6px;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--dim)}
.pa-rank-head+.pa-rank{margin-top:4px}
@media (max-width:600px){
  .pf-legend{left:8px;right:8px;bottom:22px;max-height:92px;overflow:auto;padding:8px 10px;font-size:11px}
  .pf-lt{min-width:0;flex-basis:100%}
}
/* `.ex-plot svg` (styles.css) sizes the DRAWING to its pane; it must not size the tool icons */
.plate-tools svg.ico,.ex-plot .plate-tools svg.ico{display:inline-block;width:14px;height:14px;max-width:none;max-height:none}

/* ---- the station workflow keeps its canvas in view -------------------------------- */
.rs-metrics .metric{flex-direction:row-reverse;align-items:baseline;gap:6px;height:28px;padding:0 10px}
.rs-metrics .metric span{font-size:12px}
.rs-metrics .metric b{font-size:13px}
#runstrip.runstrip{padding:10px 12px 10px 16px;gap:8px 12px}
:is(#view-setup,#view-edit,#view-assets,#view-outputs,#view-decisions)>.pagehead{padding:18px 0 14px}
:is(#view-setup,#view-edit,#view-assets,#view-outputs,#view-decisions)>.pagehead .ph-txt h2{font-size:24px}
.site-flowbar{padding:8px 8px 8px 14px;min-height:46px}
.site-flowbar>div{align-items:center;gap:4px 10px}
.site-flowbar small{flex-basis:auto}
.ed-toolbar{gap:4px;padding:5px 6px}
.ed-toolbar .ebtn{padding:0 9px}
.ed-toolbar .sep{margin:0 2px}
.etool{padding:0 8px;gap:5px}
.rs-metrics .metric{flex:0 0 auto;min-width:0}
.ed-toolbar{gap:3px}
.ed-toolbar .sep{margin:0 3px}
.ed-toolbar .ebtn{padding:0 8px;gap:5px}
.etool{padding:0 7px}
/* run strip, final geometry: status · stages · run id · actions on one line, the money
   ladder on the next, errors last. Any cell can be empty without moving the others. */
#runstrip.runstrip{grid-template-columns:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"pill pips info cancel open" "metrics metrics metrics metrics metrics" "err err err err err"}
#runstrip:has(#runerr:empty){grid-template-areas:"pill pips info cancel open" "metrics metrics metrics metrics metrics"}
#runstrip #runinfo{align-self:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
#runstrip #metrics:empty{display:none}
.ed-toolbar .ebtn{padding:0 7px}
.etool{padding:0 6px}
/* Decisions inputs: one grid, labels on one line, the echo under its own field only */
.mit-inputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));align-items:start;gap:14px 12px;margin:4px 0 12px}
.mit-fld{gap:6px;min-width:0}
.mit-fld input,.mit-fld select{width:100%;min-width:0}
.mit-fld.go-fld{align-self:start;padding-top:24px}
.mit-fld.go-fld .go{width:100%}
@media (max-width:1024px){
  #runstrip.runstrip{grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"pill pips cancel open" "metrics metrics metrics metrics" "info info info info" "err err err err"}
  #runstrip:has(#runerr:empty){grid-template-areas:"pill pips cancel open" "metrics metrics metrics metrics" "info info info info"}
  #runstrip #runinfo{text-align:left;max-width:none}
}
@media (max-width:600px){
  #runstrip.runstrip,#runstrip:has(#runerr:empty){grid-template-columns:1fr auto;grid-template-areas:"pill open" "pips pips" "metrics metrics" "info cancel" "err err"}
}
/* the sheet's name cell is a <th scope=row> holding an input at width:100% — like the decay
   column, the floor has to sit on the control or the auto-layout column collapses */
table.sheet th[scope="row"].nm{min-width:150px}
table.sheet th[scope="row"].nm input{min-width:140px;font-family:var(--mono);font-size:12px}

/* ============================================================ site → one-line sequence
   Layers, bottom to top: the page veil, the live map's copy, the still imagery, a shade
   that lifts the outlines, the drawing ground, the editor's copy, and the overlay that
   carries outlines, labels, symbols, nodes and wires. Every one is positioned in viewport
   pixels by assets/site-transition.js; nothing here moves on its own. */
.site-transition{background:transparent;overflow:hidden}
.site-transition::backdrop{background:transparent}
.site-transition>.site-backdrop,.site-transition>.site-map-layer,.site-transition>.site-shade,
.site-transition>.site-blueprint,.site-transition>.site-editor-layer{position:absolute;inset:0;pointer-events:none}
.site-backdrop{background:#07121b;opacity:0}
.site-transition.plain .site-backdrop{background-color:var(--bg);
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:32px 32px}
.site-map-layer{overflow:visible;border-radius:0}
.site-map-layer>.site-map-copy{position:absolute!important;left:0;top:0;transform-origin:0 0;border-radius:var(--r3);overflow:hidden;will-change:transform}
.site-hires{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;pointer-events:none;will-change:transform,opacity}
.site-shade{background:#030a10;opacity:0}
.site-blueprint{opacity:0}
.site-editor-layer{opacity:0}
.site-overlay{position:absolute;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none}
.site-overlay .reg-fill{fill:currentColor;stroke:none;opacity:0}
.site-overlay .reg-halo{fill:none;stroke:rgba(3,10,16,.72);stroke-width:6;stroke-linejoin:round;stroke-dasharray:1;opacity:0}
.site-overlay .reg-line{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:1;opacity:0}
.site-overlay .k-transformer{color:#ffb454}
.site-overlay .k-bus,.site-overlay .k-enclosure{color:#6bc8eb}
.site-overlay .reg-chip{opacity:0}
.site-overlay .reg-chip>rect:first-child{fill:rgba(6,16,24,.9);stroke:rgba(255,255,255,.16)}
.site-overlay .reg-chip .sw{fill:currentColor}
.site-overlay .reg-chip .t{fill:#fff;font:650 13px var(--sans);letter-spacing:-.005em}
.site-overlay .reg-chip .c{fill:#a9bccb;font:500 11.5px var(--sans)}
.site-overlay .sym{opacity:0}
.site-overlay .sym circle{fill:rgba(6,16,24,.55);stroke:currentColor;stroke-width:2.6}
.site-overlay .sym rect{fill:rgba(6,16,24,.82);stroke:currentColor;stroke-width:2}
.site-overlay .sym text{fill:#fff;font:650 11.5px var(--sans)}
.site-overlay .link{stroke:#6bc8eb;stroke-width:2.2;stroke-dasharray:1;opacity:0;filter:drop-shadow(0 0 2px rgba(0,0,0,.6))}
.site-overlay .nd{opacity:0}
.site-overlay .nd .body{fill:#7f8592;stroke:var(--bg);stroke-width:2}
.site-overlay .nd.role-in .body{fill:var(--ok)}
.site-overlay .nd.role-out .body{fill:var(--run)}
.site-overlay .nd .ring{fill:none;stroke:var(--mut);stroke-width:1.5;stroke-dasharray:3 2.5}
.site-overlay .edge{stroke:color-mix(in srgb,var(--fg) 32%,transparent);stroke-width:1.8;opacity:0}
.site-transition>.site-transition-head,.site-transition>.site-transition-foot{position:absolute;z-index:3;opacity:0}
.site-transition-foot{left:24px;bottom:20px;display:flex;flex-direction:column;gap:4px;max-width:min(640px,calc(100vw - 48px));padding:10px 14px;
  border-radius:var(--r2);border:1px solid var(--line-soft);background:color-mix(in srgb,var(--card) 92%,transparent);
  box-shadow:var(--sh-2);backdrop-filter:blur(10px);font-size:12px;line-height:1.5;color:var(--mut)}
.site-transition-foot b{color:var(--fg)}
.site-transition-foot .site-key{display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.site-transition-foot .site-key i{width:11px;height:11px;border-radius:50%;border:1.5px dashed var(--mut)}
.site-transition-foot .site-foot-attr{font-size:11px;color:var(--dim)}
.site-transition .site-transition-head p{min-height:1.4em}
@media(max-width:700px){.site-transition-foot{left:12px;right:12px;bottom:12px;font-size:11px}}
.site-overlay .hull{fill:currentColor;fill-opacity:.08;stroke:currentColor;stroke-opacity:.55;stroke-width:1.5;stroke-dasharray:5 4;opacity:0}
.site-overlay .hull.k-transformer{color:#e8962e}
.site-overlay .hull.k-bus,.site-overlay .hull.k-enclosure{color:#1f8fbf}

/* The one-time map entrance and the local 2D/3D display share the same graph. */
#ed-graphwrap{position:relative;isolation:isolate}
.ed-dimension-toggle{position:absolute;top:12px;right:12px;z-index:8;display:flex;gap:3px;padding:4px;
  border:1px solid var(--line);border-radius:9px;background:var(--card);box-shadow:var(--sh-pop)}
.ed-dimension-toggle button{border:0;border-radius:6px;background:transparent;color:var(--mut);cursor:pointer;
  min-width:43px;min-height:34px;padding:6px 12px;font:600 12px var(--sans)}
.ed-dimension-toggle button:hover{background:var(--hover);color:var(--fg)}
.ed-dimension-toggle button[aria-pressed="true"]{background:var(--accent);color:#fff}
.ed-dimension-toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ed-dimension-toggle[aria-busy="true"]{cursor:progress}
.ed-model-stage{position:absolute;inset:0;z-index:4;overflow:hidden;isolation:isolate;opacity:0;pointer-events:none;
  --one-line-reveal:0;--one-line-paper:0;--one-line-chrome:0}
.ed-model-stage.ready{opacity:1;pointer-events:auto}
.ed-model-stage .one-line-canvas{opacity:1;transition:none}
.ed-model-stage .one-line-projection{pointer-events:none}
/* its copy's wire hit-areas set their own pointer-events: they would take the 3D view's drag */
.one-line-projection *{pointer-events:none!important}
.ed-model-stage.interactive .one-line-canvas{cursor:grab;touch-action:none}
.ed-model-stage.interactive .one-line-canvas:active{cursor:grabbing}
.ed-model-hint{position:absolute;left:14px;bottom:12px;z-index:3;font-size:11px;color:var(--mut);pointer-events:none;opacity:0}
.ed-model-stage.interactive .ed-model-hint{opacity:1}
#ed-graphwrap.is-3d>#ed-svg{visibility:hidden}
/* An Austin example's graph: the editor's own canvas (tools/example_scenes.py), themed by
   the same rules, with the editor's 2D/3D toggle and 3D stage on top of it. */
.ex-plot.ex-scene{position:relative;display:block;padding:0;isolation:isolate}
.ex-scene>svg.ex-scene-svg{width:100%;height:430px;max-height:none;display:block;user-select:none;
  background:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0) 0 0/24px 24px,var(--inset)}
.ex-scene-svg .ednode{cursor:default}
.ex-scene-svg marker path{fill:color-mix(in srgb,var(--fg) 44%,transparent)}
.ex-scene.is-3d>svg.ex-scene-svg{visibility:hidden}
#view-edit .ed-toolbar[inert]{opacity:.55}
@media(max-width:600px){.ed-dimension-toggle{top:8px;right:8px}.ed-dimension-toggle button{min-width:44px;min-height:40px}
  .ed-model-hint{font-size:10px;left:10px;bottom:10px}}

/* Model-to-diagram stays within the editor canvas, with the application shell visible. */
.one-line-transition{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;
  margin:0;padding:0;border:0;overflow:hidden;background:transparent;color:var(--fg);
  --one-line-chrome:1;--one-line-reveal:0;--one-line-paper:0;}
.one-line-transition::backdrop{background:transparent}
.one-line-stage{position:absolute;overflow:hidden;isolation:isolate;z-index:5;opacity:0;transition:opacity .16s ease}
.one-line-transition.ready .one-line-stage{opacity:1}
.one-line-transition.from-map.preparing .one-line-stage{opacity:1}
.one-line-previous{z-index:4;background:var(--bg);pointer-events:none;overflow:hidden;opacity:1;transition:opacity .35s ease}
.one-line-transition.ready .one-line-previous{opacity:0}
.one-line-transition.from-map .one-line-previous{transition:none;opacity:var(--one-line-workspace,1)}
.one-line-transition.from-map .one-line-stage{transition:none}
.one-line-transition.from-map .one-line-canvas{transition:none}
.one-line-map-bridge{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:var(--one-line-imagery,1)}
.one-line-map-bridge .site-map-copy{position:absolute!important;left:0!important;top:0!important;transform-origin:0 0}
.one-line-map-credit{position:absolute;right:8px;bottom:6px;max-width:90%;z-index:4;padding:2px 4px;
  background:rgba(255,255,255,.8);color:#333;font-size:9px;opacity:var(--one-line-imagery,1);pointer-events:none}
.one-line-transition.from-map .one-line-heading{z-index:5;padding:10px 12px;border-radius:8px;
  background:color-mix(in srgb,var(--card) 92%,transparent);width:max-content;max-width:calc(100% - 40px)}
.site-approach{position:absolute;inset:0;z-index:1100;pointer-events:none}
.site-approach-heading{position:absolute;left:12px;right:12px;top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--fg);display:flex;justify-content:space-between;align-items:center;gap:12px;box-shadow:var(--sh-pop)}
.site-approach-heading span{display:block;font-size:11px;color:var(--mut);margin-bottom:3px}
.site-approach-heading strong{font-size:14px;font-weight:600}
.site-locator{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s ease}
.site-approach.settled .site-locator{opacity:1}
.site-locator i{position:absolute;width:18px;height:18px;border:2px solid #e7f4ee;filter:drop-shadow(0 1px 3px #123)}
.site-locator i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.site-locator i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.site-locator i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.site-locator i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.one-line-ground,.one-line-paper{position:absolute;inset:0;pointer-events:none}
.one-line-ground{background:radial-gradient(circle at 1px 1px,var(--grid-dot) 1px,transparent 0) 0 0/24px 24px,var(--inset);opacity:calc(1 - var(--one-line-reveal))}
.one-line-paper{background:var(--inset);opacity:calc(var(--one-line-paper) * (1 - var(--one-line-reveal)))}
.one-line-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .24s ease .14s}
.one-line-transition.ready .one-line-canvas{opacity:1}
.one-line-projection{overflow:hidden;z-index:2;max-width:none!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.one-line-projection.lbl-off .edlbl{display:none}
.one-line-projection marker path{fill:color-mix(in srgb,var(--fg) 44%,transparent)}
.one-line-heading{position:absolute;left:20px;right:20px;top:16px;z-index:3;
  display:flex;align-items:start;justify-content:space-between;gap:20px;opacity:var(--one-line-chrome);pointer-events:none}
.one-line-heading span{color:var(--accent);font:600 10px var(--sans);letter-spacing:.08em}
.one-line-heading h2{color:inherit;font:550 17px/1.2 var(--sans);letter-spacing:-.02em;margin:5px 0}
.one-line-heading p{color:var(--mut);font:400 12px/1.5 var(--sans);margin:0}
.one-line-skip{pointer-events:auto;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:7px 12px;
  color:var(--fg);font:500 12px var(--sans);cursor:pointer}
.one-line-skip:hover{background:var(--hover)}.one-line-skip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:600px){.one-line-heading{left:12px;right:12px;top:12px}.one-line-heading h2{max-width:190px;font-size:15px}.one-line-heading p{display:none}}
@media(prefers-reduced-motion:reduce){.one-line-stage,.one-line-previous,.one-line-canvas{transition:none}}

/* ============================================================ pass 3 (2026-09-26)
   Satellite ramp, legend, workflow states, out-of-date results, toast, section nav. */

/* On imagery the risk ramp follows the GROUND, not the page theme. The dark theme's ramp
   runs dark-to-bright for a dark canvas, and on dark satellite photos its low end vanished.
   These are the light ramp's values, fixed in both themes (the light-theme validated set). */
:root{--heat-sat-0:#b9b9be;--heat-sat-1:#fae4e1;--heat-sat-2:#f3c2ba;--heat-sat-3:#e99a8c;
  --heat-sat-4:#d96f5c;--heat-sat-5:#bf4735;--heat-sat-6:#95291c}

/* map legend: a header that folds the key away and keeps the ramp in sight */
.pf-legend{padding:0;gap:0;flex-direction:column;align-items:stretch;flex-wrap:nowrap}
.pf-legend-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:6px 10px 6px 12px;
  border:0;background:transparent;color:var(--fg);cursor:pointer;text-align:left;border-radius:var(--r2)}
.pf-legend-toggle .field-label{margin:0;font-size:12px;font-weight:600;color:var(--fg)}
.pf-legend-toggle .ico{margin-left:auto;width:14px;height:14px;color:var(--dim);transition:transform var(--t)}
.pf-legend.collapsed .pf-legend-toggle .ico{transform:rotate(180deg)}
.pf-legend-toggle:hover{background:var(--hover)}
.pf-legend-strip{display:none;gap:1px}
.pf-legend-strip i{width:12px;height:8px;display:block}
.pf-legend-strip i:first-child{border-radius:2px 0 0 2px}.pf-legend-strip i:last-child{border-radius:0 2px 2px 0}
.pf-legend.collapsed .pf-legend-strip{display:inline-flex}
.pf-legend-body{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;padding:0 12px 10px}
.pf-legend-body[hidden]{display:none}
@media (max-width:600px){.pf-legend{max-height:none;overflow:visible}.pf-legend-body{max-height:84px;overflow:auto}}

/* study-workflow steps: nothing behind them yet, done, or out of date */
.sidebar nav button[data-state="empty"]{color:var(--chrome-dim)}
.sidebar nav button[data-state="empty"] .ni{opacity:.6}
.sidebar nav button[data-state="empty"]:hover{color:var(--chrome-fg)}
.sidebar nav button[data-state="done"] .nstep,.sidebar nav button[data-state="stale"] .nstep{position:relative;color:transparent;width:14px;text-align:center}
.sidebar nav button[data-state="done"] .nstep::after{content:"";position:absolute;left:3px;top:1px;width:7px;height:4px;
  border-left:1.6px solid #4cc38a;border-bottom:1.6px solid #4cc38a;transform:rotate(-45deg)}
.sidebar nav button[data-state="stale"] .nstep::after{content:"";position:absolute;left:3px;top:0;width:8px;height:8px;border-radius:50%;
  background:#e3aa42;box-shadow:0 0 0 3px rgba(227,170,66,.2)}

/* results that no longer match the model in the editor */
.result-stale{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin:0;padding:10px 12px 10px 14px;border-radius:var(--r2);
  border:1px solid color-mix(in srgb,var(--run) 40%,transparent);border-left:3px solid var(--run);background:var(--run-soft);
  color:var(--fg);font-size:13px;line-height:1.5}
.result-stale b{color:var(--run)}
.result-stale .ebtn{margin-left:auto}
#res-body .result-stale{margin:10px 0 0}
#runstrip.stale #pill{background:var(--run-soft);color:var(--run)!important}
#runstrip.stale #pill::after{content:" · out of date"}
#runstrip.stale #metrics{opacity:.55}
.src-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font:600 11.5px/1 var(--sans);vertical-align:1px}
.src-tag.base{background:var(--inset);color:var(--mut);border:1px solid var(--line)}
.src-tag.ws{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}

/* the merged station bar's disclaimer on the one-line */
#stationbar .sb-note{display:block;margin-top:2px;font-size:12px;color:var(--dim)}

/* toast: bottom right, above page content, below dialogs */
.toast{position:fixed;right:20px;bottom:20px;z-index:1500;display:flex;align-items:flex-start;gap:10px;max-width:min(460px,calc(100vw - 40px));
  padding:12px 10px 12px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r2);
  background:var(--card);box-shadow:var(--sh-pop);color:var(--fg);font-size:13px;line-height:1.5;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:none;pointer-events:auto}
.toast p{margin:0}
.toast-x{flex:none;width:26px;height:26px;margin:-3px 0 0;border:0;border-radius:6px;background:transparent;color:var(--dim);font-size:18px;line-height:1;cursor:pointer}
.toast-x:hover{background:var(--hover);color:var(--fg)}

/* portfolio analysis: sticky jump links under the top bar */
.pa-sections{position:sticky;top:var(--topbar);z-index:30;display:flex;gap:2px;margin:0 0 14px;padding:6px 0;overflow-x:auto;
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);scrollbar-width:none}
.pa-sections::-webkit-scrollbar{display:none}
.pa-sections button{flex:none;height:30px;padding:0 12px;border:0;border-radius:var(--pill);background:transparent;color:var(--mut);
  font:550 13px/1 var(--sans);cursor:pointer;transition:background var(--t),color var(--t)}
.pa-sections button:hover{color:var(--fg);background:var(--hover)}
.pa-sections button[aria-current="true"]{background:var(--accent-soft);color:var(--accent);font-weight:600}
[id^="pa-sec-"]{scroll-margin-top:calc(var(--topbar) + 60px)}
@media (max-width:860px){.pa-sections{top:calc(var(--topbar) + 52px)}}
@media (prefers-reduced-motion:reduce){.toast{transition:none}}
/* styles.css dresses every `nav button` as a full-width sidebar item; this nav is a row */
.pa-sections{flex-direction:row;align-items:center}
.pa-sections button{display:inline-flex;align-items:center;width:auto;gap:0;margin:0}
/* html already pads scrolling by the top bar (scroll-padding-top); this only adds the
   section nav's height, or a jump would land a nav-height below the reading line */
[id^="pa-sec-"]{scroll-margin-top:52px}

/* ============================================================ a substation drawn from scratch */
/* the bar above the canvas while one is drawn (app.js edDraftUpdate): its name, what it
   still needs before it can run, and the save */
.ed-draft{display:grid;grid-template-columns:minmax(220px,300px) 1fr auto;gap:14px 24px;align-items:start;
  background:var(--card);border:1px solid var(--accent-line);border-left:3px solid var(--accent);
  border-radius:var(--r3);box-shadow:var(--sh-1);padding:14px 18px;margin:0 0 12px}
.ed-draft-name input{width:100%;margin-top:6px}
.ed-draft-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 20px}
.ed-draft-steps li{display:flex;gap:8px;align-items:flex-start;font:400 13px/1.4 var(--sans);color:var(--mut)}
.ed-draft-steps .tick{flex:none;display:inline-grid;place-items:center;width:18px;height:18px;margin-top:1px;
  border:1.5px solid var(--line);border-radius:50%;font:700 11px/1 var(--sans);color:var(--ok)}
.ed-draft-steps li.done{color:var(--fg)}
.ed-draft-steps li.done .tick{border-color:var(--ok);background:var(--ok-soft)}
.ed-draft-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ed-draft-act p{margin:0;max-width:230px;font-size:12px;text-align:right}
@media (max-width:1100px){
  .ed-draft{grid-template-columns:1fr}
  .ed-draft-act{align-items:flex-start}
  .ed-draft-act p{max-width:none;text-align:left}}
/* the library of an org that has drawn nothing yet */
.lib-empty{padding:28px 8px 20px;text-align:center}
.lib-empty h3{margin:0}
.lib-empty p{max-width:520px;margin:6px auto 16px}
/* a new substation (org.js bkAddOpen): name and portfolio across the top, then the source on
   the left and the location on the right, one rule above the action row. Cancel keeps the
   heading row at every width (a grid, where .card-head wraps) */
.lib-add{display:grid;gap:18px;padding:22px 24px;border-color:var(--accent-line);border-left:3px solid var(--accent)}
.lib-add>.card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;margin:0}
.lib-add>.card-head .ebtn{margin:0}
.lib-add .lib-add-dest{margin:2px 0 0;font-size:12.5px;color:var(--dim)}
.lib-add .lib-add-dest:empty{display:none}
.lib-add-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 20px}
.lib-add-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 28px;align-items:start}
.lib-add-sec{display:grid;gap:10px;min-width:0;align-content:start}
.lib-add-sec>.subtitle{margin:0}
.lib-add-src{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.lib-add-src label{display:flex;gap:10px;align-items:flex-start;min-height:64px;margin:0;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r2);background:var(--card-2);color:var(--fg);font-size:13px;line-height:1.4;cursor:pointer}
.lib-add-src label:has(input:checked){border-color:var(--accent);background:var(--card)}
.lib-add-src label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.lib-add-src input{margin-top:2px}
.lib-add-src .dim{display:block;font-size:12.5px}
.lib-add-files{display:grid;gap:10px}
/* one dashed box around the file field, not a dashed field inside a dashed box */
.lib-add-drop{display:grid;gap:6px;padding:10px 12px;border:1.5px dashed var(--line);border-radius:var(--r2);background:var(--card-2)}
.lib-add-drop label{margin:0}
.lib-add-drop input[type=file]{width:100%;min-width:0;border:0;background:none;padding:0}
.lib-add-drop p{margin:0;font-size:12px}
.lib-add.drag .lib-add-drop{border-color:var(--accent);background:var(--accent-soft)}
.lib-add-act{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 16px;
  padding-top:16px;border-top:1px solid var(--line-soft)}
.lib-add-go{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.lib-add-go .go{margin:0}
.lib-add-go p{margin:0;font-size:13px}
.lib-add-next{margin:0;font-size:12.5px;max-width:46ch}

/* the location picker (location.js locWidget): two fields, a status line, a small map */
.loc{display:grid;gap:8px;min-width:0}
.loc-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.loc-fields .fld{min-width:0}
.loc-fields label{margin:0}
.loc-fields input{width:100%;min-width:0;font:450 13px/1.3 var(--mono);letter-spacing:-.01em}
.loc input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
/* 'bad', not 'err': the global .err is an alert style */
.loc-msg{margin:0;min-height:18px;font-size:12px;line-height:1.45;color:var(--dim)}
.loc-msg.bad{color:var(--err)}
.loc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.loc-row .loc-msg{flex:1 1 200px}
.loc-row .ebtn{margin:0}
.loc-map{position:relative;height:236px;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--inset);isolation:isolate}
.loc-map [data-map]{height:100%}
.loc-map .leaflet-container,.lib-map .leaflet-container{height:100%;background:var(--inset);font:12px/1.4 var(--sans)}
.loc-map .leaflet-control-attribution,.lib-map .leaflet-control-attribution{font-size:10px;background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--dim)}
.loc-map .leaflet-control-attribution a,.lib-map .leaflet-control-attribution a{color:var(--dim)}
.loc-map .leaflet-bar a,.lib-map .leaflet-bar a{background:var(--card);color:var(--fg);border-color:var(--line)}
.loc-map .leaflet-bar a:hover,.lib-map .leaflet-bar a:hover{background:var(--hover)}
.loc-map .leaflet-container:focus-visible,.lib-map .leaflet-container:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* a crosshair while the map has focus: arrow keys pan, Enter places the pin under it */
.loc-map:focus-within::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;z-index:650;
  pointer-events:none;background:linear-gradient(var(--accent),var(--accent)) center/2px 100% no-repeat,
  linear-gradient(var(--accent),var(--accent)) center/100% 2px no-repeat;opacity:.9}
/* top right: Leaflet's zoom control holds the top left */
.loc-hint{position:absolute;right:8px;top:8px;z-index:640;max-width:calc(100% - 64px);padding:4px 9px;border-radius:6px;pointer-events:none;
  background:color-mix(in srgb,var(--card) 90%,transparent);color:var(--fg);font-size:12px;line-height:1.4;box-shadow:var(--sh-1)}
.loc-hint:empty{display:none}
/* an L.divIcon: the vendored Leaflet ships no marker images */
.loc-pin{border-radius:50%;background:var(--accent);border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(5,14,23,.45),0 2px 8px rgba(5,14,23,.45);cursor:grab}
.loc-pin:focus-visible{outline:2px solid #fff;outline-offset:3px}
.loc-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.loc-acts .ebtn{margin:0}
.loc-acts .ebtn[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.loc-maptoggle{display:none}
/* a library portfolio's members, edited in place (org.js bkLibMember) */
.lib-member-add{display:flex;justify-content:flex-end;margin:0 0 10px}
.lib-member-add select{width:auto;max-width:320px}
.lib-acts{white-space:nowrap}
.lib-acts .ebtn+.ebtn{margin-left:6px}

/* ============================================================ my substations, publishing, orgs */
/* (org.js bkMyWork, pubOpen, bkOrgs) a member's private changes, the confirmation that
   publishes them to every member, and joining an org */
.bk-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;border-radius:999px;
  background:var(--accent-ink);color:var(--accent);font:700 11px/1 var(--sans);font-variant-numeric:tabular-nums}
.bk-count.hidden{display:none}
.sidebar nav button .nav-count{margin-left:auto;background:rgba(107,200,235,.18);color:var(--ats-cyan)}
#orgbar .bk-pub{margin-left:auto}
.sidebar .bk-user-acts{display:flex;gap:6px;flex-wrap:wrap}
.sidebar .bk-user .ebtn.active{background:rgba(107,200,235,.16);border-color:rgba(107,200,235,.4);color:#fff}

/* the drawing bar: description and location under the name, Save beside Publish, and
   customers per outfeed across the foot */
.ed-draft-name .ed-draft-desc-l{display:block;margin:10px 0 0}
.ed-draft-name .hidden{display:none}
.ed-draft-loc{display:grid;gap:6px;margin-top:10px}
.ed-draft-loc .loc-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:6px}
.ed-draft-name .ed-draft-loc .loc-fields input{height:32px;margin:0;padding:0 9px;font-size:12.5px}
.ed-draft-loc .ebtn{height:32px;margin:0;padding:0 11px}
.ed-draft-loc .loc-msg{min-height:0}
.ed-draft-loc .loc-msg:not(.bad){display:none}
.ed-draft-cust{grid-column:1/-1;margin:2px 0 0;padding-top:12px;border-top:1px solid var(--line-soft)}
.ed-draft-cust>summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;list-style:none;
  font:600 13px/1.4 var(--sans);color:var(--fg);border-radius:6px}
.ed-draft-cust>summary::-webkit-details-marker{display:none}
.ed-draft-cust>summary::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 0 2px;border-right:1.6px solid var(--mut);
  border-bottom:1.6px solid var(--mut);transform:rotate(-45deg);transition:transform var(--t)}
.ed-draft-cust[open]>summary::before{transform:rotate(45deg)}
.ed-draft-cust>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cust-sum{margin-left:auto;display:flex;align-items:baseline;gap:10px;font-weight:400;font-size:12.5px;color:var(--mut)}
.cust-sum b{font:650 14px/1.2 var(--sans);color:var(--fg);font-variant-numeric:tabular-nums}
.cust-grid{list-style:none;margin:10px 0 0;padding:2px 4px 2px 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,248px));gap:6px 28px;max-height:156px;overflow:auto}
.cust-grid li{display:flex;align-items:center;gap:8px;min-width:0;padding:2px 0 2px 8px;border-left:2px solid transparent}
.cust-grid li.sel{border-left-color:var(--accent)}
.cust-grid label{flex:1 1 auto;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 12.5px/1.3 var(--mono);color:var(--fg)}
.cust-grid input{flex:0 0 104px;width:104px;height:30px;padding:0 9px;text-align:right;font-variant-numeric:tabular-nums}
.cust-grid input[aria-invalid="true"],.ed-cust-in[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 16%,transparent)}
.cust-foot{display:flex;gap:6px 16px;flex-wrap:wrap;margin:8px 0 0;font-size:12px;color:var(--dim)}
.cust-foot:empty{display:none}
.cust-foot .bad{color:var(--err)}
.cust-empty{margin:8px 0 0;font-size:12.5px;color:var(--dim)}
/* the inspector's field for one outfeed */
.ed-cust-in{text-align:right;font-variant-numeric:tabular-nums}

/* the drawing bar's Map: the picker in a dialog */
.loc-dlg{width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--line);border-radius:14px;
  background:var(--card);color:var(--fg);box-shadow:var(--sh-pop);overflow:auto}
.loc-dlg::backdrop{background:rgba(5,14,23,.6)}
.loc-dlg-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px 12px;border-bottom:1px solid var(--line-soft)}
.loc-dlg-head h2{margin:0;font:620 16px/1.3 var(--sans)}
.loc-dlg-body{padding:16px 20px}
.loc-dlg .loc-map{height:min(380px,52vh)}
.loc-dlg-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line-soft);background:var(--card-2);border-radius:0 0 14px 14px}
.loc-dlg-foot .go,.loc-dlg-foot .ebtn{margin:0}

/* the library: compact metrics, the map of located substations, customers per row */
.pf-stats.lib-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;align-content:start}
.lib-stats .metric{display:flex;flex-direction:column;gap:2px;min-height:0;margin:0;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r1);background:var(--card-2)}
.lib-stats .metric b{font:650 17px/1.2 var(--sans);letter-spacing:-.01em}
.lib-stats .metric span{margin:0;font-size:12px;line-height:1.35;color:var(--mut)}
.lib-card{min-width:0}
.lib-mapwrap{display:grid;gap:6px}
.lib-map{height:280px;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--inset);isolation:isolate}
.lib-map-note{margin:0;font-size:12px;color:var(--dim)}
.lib-table tbody tr.on{background:var(--accent-soft)}
.lib-table tbody th[scope="row"]{min-width:9.5em}

@media (max-width:860px){
  .lib-add-cols{grid-template-columns:1fr}
  .lib-add-act{flex-direction:column;align-items:flex-start}}
@media (max-width:600px){
  .lib-add{padding:16px}
  .lib-add-src{grid-template-columns:1fr}
  .lib-add-src label{min-height:0;padding:9px 11px}
  .loc-map{height:200px}
  .loc-map.folded{display:none}             /* folded on a phone (bkAddOpen); Show map unfolds */
  .loc-maptoggle{display:inline-flex}
  .cust-grid{grid-template-columns:1fr;max-height:236px}
  .cust-sum{margin-left:0;width:100%;padding-left:17px}
  .lib-map{height:220px}
  .lib-table .opt{display:none}}
.ed-draft-btns{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:1100px){.ed-draft-btns{justify-content:flex-start}}

/* My substations */
.mw-card{margin-bottom:var(--gap)}
.mw-net+.mw-net{margin-top:22px}
.mw-net-h{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font:620 14px/1.3 var(--sans)}
.mw-net-h .dim{font:400 12.5px var(--sans)}
.mw-list,.mw-plist,.og-list,.pub-list{list-style:none;margin:0;padding:0}
.mw-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;padding:16px 0;border-top:1px solid var(--line-soft)}
.mw-item:first-child{border-top:0;padding-top:4px}
.mw-title{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.mw-title h4{margin:0;font:620 15px/1.3 var(--sans);letter-spacing:-.01em}
.mw-tag-new{background:var(--ok-soft);color:var(--ok)}
.mw-run{display:inline-flex;align-items:center;gap:6px;font:500 12px/1 var(--sans);color:var(--mut);font-variant-numeric:tabular-nums}
.mw-run::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--art)}
.mw-run-ok::before{background:var(--ok)}
.mw-run-go::before{background:var(--run)}
.mw-run-bad{color:var(--err)}.mw-run-bad::before{background:var(--err)}
.mw-diff{margin:6px 0 10px;font:400 13px/1.5 var(--sans);color:var(--fg);font-variant-numeric:tabular-nums}
.mw-main .field-label{display:block;margin:0 0 4px}
.mw-desc{display:block;width:100%;min-height:44px;resize:vertical;font:400 13px/1.5 var(--sans);background:var(--card-2)}
.mw-meta{margin:6px 0 0;font-size:12px}
.mw-saved{color:var(--ok)}.mw-saved.err{color:var(--err)}
.mw-acts{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:104px}
.mw-acts .go,.mw-acts .ebtn{margin:0;justify-content:center}
.mw-confirm{grid-column:1/-1;margin:0}
.mw-ex{margin:0 0 12px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r1);font-size:12.5px;line-height:1.45;color:var(--dim)}
.mw-warn{margin:6px 0;padding:7px 10px;border-radius:var(--r1);background:var(--run-soft);color:var(--fg);font-size:12.5px;line-height:1.45}
.mw-empty{padding:28px 8px 22px;text-align:center}
.mw-empty h3{margin:0}
.mw-empty p{max-width:540px;margin:6px auto 16px}
.mw-empty-acts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mw-plist li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line-soft)}
.mw-plist li:first-child{border-top:0}
.mw-plist li>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mw-plist .dim{font-size:12.5px}
@media (max-width:720px){.mw-item{grid-template-columns:1fr}.mw-acts{flex-direction:row;flex-wrap:wrap}}

/* signed in, refused: not on the sign-up list, or disabled */
.bk-noaccess{width:min(460px,calc(100vw - 32px));padding:24px}
.bk-noaccess h2{margin:0 0 8px;font:650 22px/1.2 var(--display);letter-spacing:-.025em}
.bk-noaccess p{margin:0 0 8px;font-size:14px;line-height:1.55}
.bk-noaccess-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.bk-noaccess-acts a.go{display:inline-flex;align-items:center;padding:10px 20px;border-radius:var(--pill);
  background:var(--accent);color:var(--accent-ink);font-weight:560;text-decoration:none}
.bk-noaccess-acts a.go:hover{background:var(--accent-2)}

/* Publish to org */
.pub-dlg{width:min(760px,calc(100vw - 32px))}
.pub{display:flex;flex-direction:column;max-height:calc(100dvh - 34px)}
.pub-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 24px 16px;border-bottom:1px solid var(--line-soft)}
.pub-head h2{margin:4px 0 6px;font:650 22px/1.2 var(--display);letter-spacing:-.025em}
.pub-head p{margin:0;max-width:60ch;font-size:13px;line-height:1.5;color:var(--mut)}
.pub-body{display:flex;flex-direction:column;gap:18px;padding:18px 24px;overflow:auto}
.pub-body section>.field-label{display:block;margin:0 0 8px}
.pub-item{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.pub-item+.pub-item{margin-top:8px}
.pub-item.on{border-color:var(--accent-line);background:var(--accent-soft)}
.pub-pick{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:14px}
.pub-pick input{margin-top:3px}
.pub-pick .dim{font-size:12.5px}
.pub-diff,.pub-desc,.pub-effect{margin:6px 0 0 26px;font-size:12.5px;line-height:1.5}
.pub-diff{color:var(--fg);font-variant-numeric:tabular-nums}
.pub-desc{color:var(--mut)}
.pub-desc::before{content:"Description: ";color:var(--dim)}
.pub-effect{color:var(--accent);font-weight:550}
.pub-item .mw-warn{margin-left:26px}
.pub-mode{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:10px 0 0 26px;font-size:13px}
.pub-mode label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pub-newname input{height:32px;min-width:220px}
.pub-note{display:flex;flex-direction:column;gap:6px}
.pub-confirm{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid color-mix(in srgb,var(--run) 40%,var(--line));
  border-left:3px solid var(--run);border-radius:var(--r2);background:var(--run-soft);font:550 13px/1.45 var(--sans);cursor:pointer}
.pub-confirm.hidden{display:none}
.pub-confirm input{margin-top:2px}
.pub-foot{display:flex;align-items:center;gap:8px;padding:14px 24px;border-top:1px solid var(--line-soft);background:var(--card-2)}
.pub-foot .ebtn,.pub-foot .go{margin:0}
.pub-msg{flex:1;margin:0;font-size:12.5px;color:var(--mut)}
.pub-msg.err{color:var(--err)}
@media (max-width:540px){.pub-head,.pub-body,.pub-foot{padding-left:16px;padding-right:16px}.pub-foot{flex-wrap:wrap}}

/* Organizations */
.og-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap);align-items:start;margin-bottom:var(--gap)}
.og-side{display:flex;flex-direction:column;gap:var(--gap)}
.og-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:12px 0;border-top:1px solid var(--line-soft)}
.og-row:first-child{border-top:0;padding-top:2px}
.og-row.cur .og-id b{color:var(--accent)}
.og-id{display:flex;flex-direction:column;gap:2px;flex:1 1 200px;min-width:0}
.og-id b{font-weight:620}
.og-id .dim{font-size:12.5px}
.og-tags{display:flex;gap:6px}
.og-cur{background:var(--accent);color:var(--accent-ink)}
.og-pend{background:var(--run-soft);color:var(--run)}
.og-acts{display:flex;align-items:center;gap:6px;margin-left:auto}
.og-acts .go,.og-acts .ebtn{margin:0}
.og-acts select{width:auto;height:32px}
.og-confirm{flex-basis:100%;margin:0}
.og-sub{margin:18px 0 8px;font:620 13px/1.3 var(--sans)}
.og-sub:first-child{margin-top:0}
.og-sub .dim{font-weight:400}
.og-form{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.og-inline{display:flex;gap:8px}
.og-inline input{flex:1;min-width:0}
.og-inline select{width:auto}
.og-inline .go,.og-inline .ebtn{margin:0}
.og-slug{margin:0;font-size:12px}
.og-msg{margin:8px 0 0;font-size:12.5px;color:var(--ok)}
.og-msg:empty{display:none}
.og-msg.err{color:var(--err)}
.og-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.og-members .og-mail{display:block;font:400 12px var(--sans);color:var(--dim)}
@media (max-width:960px){.og-grid,.og-admin-grid{grid-template-columns:1fr}}
@media (max-width:520px){.og-inline{flex-wrap:wrap}.og-acts{margin-left:0}}
.lib-mine{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:10px 14px;
  border:1px solid var(--accent-line);border-radius:var(--r2);background:var(--accent-soft);font-size:13px}
.lib-mine .ebtn{margin:0}
.sidebar .bk-who{word-break:normal;overflow-wrap:anywhere}
/* labels here are layout rows, not field captions: no global label margin */
.pub label,.og-form label,.mw-main label{margin:0}
.pub-pick,.pub-mode label{color:var(--fg);font-weight:450}
@media (max-width:860px){.sidebar .bk-user-acts{flex-wrap:nowrap}.sidebar .bk-user-acts .ebtn{white-space:nowrap}}
/* the transition's footer is the imagery credit only (required by the tile terms), set
   like a map attribution in the corner */
.site-transition footer.site-transition-foot{left:auto;right:12px;bottom:10px;max-width:calc(100vw - 24px);padding:3px 8px;gap:0;border:0;border-radius:6px;
  background:color-mix(in srgb,var(--card) 78%,transparent);box-shadow:none;font-size:11px;line-height:1.4;color:var(--dim)}
@media(max-width:700px){.site-transition footer.site-transition-foot{left:auto;right:8px;bottom:8px;font-size:10px}}

/* ---- graph editing is a platform role (graph-editor): without it the one-line keeps its
   shape; attributes stay editable (assets/org.js bkApplyPlatform, app.js edLocked) ---- */
.ge-locked-note{display:none}
/* an unlicensed account sees the tools a license gives, dimmed; using one says why (bkLicense) */
body.graph-locked .ge-only,body.graph-locked .ed-lic,body.graph-locked [aria-disabled="true"]{opacity:.55;cursor:not-allowed}
body.graph-locked .ge-only:hover,body.graph-locked .ed-lic:hover{opacity:.75}
body.graph-locked .ge-locked-note{display:block;max-width:44ch;color:var(--mut);font-size:13px}
body.graph-locked #ed-nlabel,body.graph-locked .sheet td.nm input{background:transparent;border-color:transparent;cursor:default}
.ed-lockbar{display:none}
body.graph-locked .ed-lockbar{display:flex;align-items:center;gap:8px;padding:6px 10px;margin:0 0 8px;border:1px solid var(--line);
  border-radius:var(--r1);background:var(--inset);color:var(--mut);font-size:12.5px}

/* ---- Accounts (assets/accounts.js): the platform administrators' page ---- */
.ac-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--gap);align-items:start}
@media (max-width:1100px){.ac-grid{grid-template-columns:minmax(0,1fr)}}
.ac-card .card-head{align-items:flex-start;gap:12px}
#ac-q{min-width:min(260px,100%)}
.ac-tbl{max-height:min(680px,72vh)}
.ac-tbl tbody tr{cursor:pointer}
.ac-tbl tbody tr:hover,.ac-tbl tbody tr:focus-visible{background:var(--hover)}
.ac-tbl tbody tr.ac-sel{background:var(--accent-soft)}
.ac-tbl tbody tr.ac-off th b{color:var(--mut)}
.ac-tbl th[scope="row"] b{display:block;font-weight:600}
.ac-tbl th[scope="row"] .dim{display:block;font-weight:400;font-size:12px}
.ac-tbl td{vertical-align:top}
.ac-role{margin:0 4px 4px 0}
.ac-role.adm{background:var(--accent-soft);color:var(--accent)}
.ac-dis{color:var(--err)}
.bk-tag.ac-dis{background:color-mix(in srgb,var(--err) 14%,transparent)}
.bk-tag.ac-ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.ac-detail{position:sticky;top:12px}
.ac-roles{display:flex;flex-direction:column;gap:10px;margin:4px 0 6px}
.ac-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ac-check input{margin-top:3px}
.ac-check b{display:block;font-weight:600}
.ac-check .dim{display:block;font-size:12.5px}
.ac-check input:disabled+span{cursor:default}
.ac-msg{min-height:1.2em;margin:6px 0 0;color:var(--ok);font-size:13px}
.ac-msg.err{color:var(--err)}
.ac-signup{margin-top:var(--gap)}
.ac-su-form .og-inline{flex-wrap:wrap}
.ac-su-form .og-inline input[type=email]{flex:1 1 220px;min-width:0}
.ac-su-form .og-inline input[type=text]{flex:1 1 160px;min-width:0}
.ac-add{margin-top:6px}
.ac-state{margin-top:12px}
.ac-hist{list-style:none;margin:0;padding:0;font-size:13px}
.ac-hist li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line-soft)}

/* the percentile every risk cost is priced at (portfolio.js pctlChips): in the bar, on
   the views that offer a risk level, and the column of a table it picks out */
.pctl-chips{display:inline-flex;gap:4px;flex-wrap:wrap;margin:0;vertical-align:middle}
#orgbar .pctl-chips .ochip,.pa-in .pctl-chips .ochip{height:28px;padding:0 9px}
.pctl-table .pctl-on{background:var(--accent-soft);color:var(--accent)}
.pctl-table th.pctl-on{font-weight:650}
.fact.pctl-on b{color:var(--accent)}
/* the transition's copies are self-contained: their restyles and layouts stay inside them */
.one-line-map-bridge,.one-line-previous{contain:strict}
.one-line-map-bridge .site-map-copy{will-change:transform}
/* a pole-top's sequence (pole-top-transition.js): its imagery and routes ride the ground plane */
.one-line-map-bridge .pole-ground,.one-line-map-bridge .pole-traces{will-change:transform}

/* ============================================================ the org bar stays in reach
   Signed in, the org bar (org, user, portfolio, network, model, percentile, publish) pins
   under the breadcrumb once the page is scrolled past it, as one slimmer row with a soft
   shadow; at the top of the page it is as it was. assets/org.js sets .is-stuck and
   --orgbar-h, which moves down whatever else pins under the breadcrumb. */
.orgbar-mark{display:block;height:0}
/* a map's panes stack up to z-index 1000: kept inside the map, so a page scrolls under the bar */
.leaflet-container{isolation:isolate}
/* Chrome outlines a clicked map line's whole bounding box (Leaflet 1.9): a black rectangle
   that read as part of the map */
.leaflet-interactive:focus{outline:none}
@media (min-width:861px){
  #orgbar{position:sticky;top:var(--topbar);z-index:45;transition:box-shadow .2s ease,background-color .2s ease}
  #orgbar.is-stuck{padding:6px 10px 6px 14px;gap:6px 10px;border-top-color:transparent;border-radius:0 0 var(--r3) var(--r3);
    background:color-mix(in srgb,var(--card) 90%,transparent);
    backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
    box-shadow:0 10px 24px -14px color-mix(in srgb,var(--fg) 45%,transparent)}
  /* the labels stay for screen readers and as hover names; the sentence under it goes */
  #orgbar.is-stuck .field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #orgbar.is-stuck .bk-model-note,#orgbar.is-stuck .bk-status:empty,#orgbar.is-stuck .bk-note:empty{display:none}
  #orgbar.is-stuck .bk-levels{gap:6px}
  #orgbar.is-stuck :is(select,.bk-you){height:30px;font-size:13px}
  #orgbar.is-stuck select{width:auto;min-width:0;max-width:200px}
  #orgbar.is-stuck .pctl-chips .ochip{height:26px;padding:0 8px}
  #orgbar.is-stuck .bk-pub{height:30px;padding:0 12px}
  /* the rest of what pins under the breadcrumb sits under the pinned bar instead */
  html{scroll-padding-top:calc(var(--topbar) + var(--orgbar-h,0px) + 16px)}
  .pa-sections{top:calc(var(--topbar) + var(--orgbar-h,0px))}
  .split-main>.side,.au-side,.ex-wrap>.ex-list{top:calc(var(--topbar) + var(--orgbar-h,0px) + 16px)}
  .au-side{max-height:calc(100dvh - var(--topbar) - var(--orgbar-h,0px) - 48px)}
}
@media (prefers-reduced-motion:reduce){#orgbar{transition:none}}