/* PRA — AWRAM-style design layer
 * ---------------------------------------------------------------------------
 * Loaded AFTER styles.css. styles.css stays the component library (it styles the
 * markup app.js generates: .ednode, .wi, .roi-*, .ex-*, tables …). This file
 * does two things:
 *   1. redefines the DESIGN TOKENS, which re-skins every one of those components
 *      at once — MUI-dashboard palette (brand hue 201, gray hue 220), 8px radii,
 *      MUI shadows, Inter;
 *   2. rebuilds the SHELL — drawer nav, page header, cards, stat cards, data
 *      grids, tabs, inputs — in the AWRAM (MUI dashboard) idiom.
 * Five views: Scenario · Network · Assets · Outputs · Decisions.
 * ------------------------------------------------------------------------- */

/* ============================================================ tokens : light */
:root{
  --brand-50:hsl(201,100%,96%);  --brand-100:hsl(201,100%,92%);
  --brand-200:hsl(201,100%,80%); --brand-300:hsl(201,100%,65%);
  --brand-400:hsl(201,98%,48%);  --brand-500:hsl(201,98%,42%);
  --brand-700:hsl(201,100%,35%); --brand-800:hsl(201,100%,16%);

  --gray-50:hsl(220,35%,97%);  --gray-100:hsl(220,30%,94%); --gray-200:hsl(220,20%,88%);
  --gray-300:hsl(220,20%,80%); --gray-400:hsl(220,20%,65%); --gray-500:hsl(220,20%,42%);
  --gray-600:hsl(220,20%,35%); --gray-700:hsl(220,20%,25%); --gray-800:hsl(220,30%,6%);

  /* legacy token names — every component in styles.css reads these */
  --bg:var(--gray-50);
  --panel:rgba(255,255,255,.85);
  --card:#ffffff;
  --card-2:var(--gray-50);
  --inset:var(--gray-50);
  --line:var(--gray-200);
  --line-soft:hsl(220,20%,92%);
  --hover:hsl(220,30%,96%);

  --fg:var(--gray-800);
  --mut:var(--gray-600);
  --dim:var(--gray-500);
  --dim-dec:var(--gray-300);

  --accent:var(--brand-500);
  --accent-2:var(--brand-400);
  --accent-ink:#ffffff;
  --accent-soft:var(--brand-50);
  --ring:hsla(201,98%,48%,.35);
  --ok:hsl(142,64%,32%);
  --run:hsl(35,90%,38%);
  --err:hsl(0,72%,45%);
  --bar:var(--brand-400);
  --viol:hsl(262,72%,58%);

  /* hex, not hsl: app.js builds area fills as CH[0]+'26' (a hex alpha suffix), which
     silently yields an invalid colour — and a black chart — from an hsl() value.
     Validated (lightness band · chroma · CVD ΔE · contrast) on both surfaces. */
  --chart-1:#0b84d1; --chart-2:#0ea371; --chart-3:#d17d16; --chart-4:#8b5cf6; --chart-5:#e5484d;
  --chart-grid:#e0e7eb;
  --chart-text:#567281;
  --chart-ink:#0b1114;

  --r1:8px; --r2:10px; --r3:12px; --pill:8px;
  --sh-1:0 1px 2px hsla(220,30%,5%,.06);
  --sh-2:hsla(220,30%,5%,.05) 0 5px 15px 0, hsla(220,25%,10%,.05) 0 15px 35px -5px;
  --sh-pop:hsla(220,30%,5%,.07) 0 4px 16px 0, hsla(220,25%,10%,.12) 0 12px 32px -6px;

  --drawer:232px;
  --maxw:1560px;
  --maxw-wide:1560px;
  --gap:16px;
  color-scheme:light;
}

/* ============================================================ tokens : dark */
@media (prefers-color-scheme:dark){ :root:not([data-theme]){
  --bg:hsl(220,30%,7%);
  --panel:hsla(220,30%,9%,.85);
  --card:hsl(220,28%,10%);
  --card-2:hsl(220,30%,8%);
  --inset:hsl(220,30%,8%);
  --line:hsl(220,20%,22%);
  --line-soft:hsl(220,20%,17%);
  --hover:hsl(220,25%,15%);
  --fg:hsl(0,0%,100%);
  --mut:var(--gray-400);
  --dim:hsl(220,15%,55%);
  --dim-dec:var(--gray-600);
  --accent:var(--brand-300);
  --accent-2:var(--brand-200);
  --accent-ink:hsl(201,100%,10%);
  --accent-soft:hsla(201,100%,60%,.14);
  --ring:hsla(201,100%,65%,.4);
  --ok:hsl(142,60%,52%);
  --run:hsl(38,95%,58%);
  --err:hsl(0,85%,66%);
  --bar:var(--brand-300);
  --chart-1:#2f97e0; --chart-2:#12a37f; --chart-3:#c67d1c; --chart-4:#8e6ee2; --chart-5:#e35555;
  --chart-grid:#29363d;
  --chart-text:#94acb8;
  --chart-ink:#ffffff;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:rgba(0,0,0,.5) 0 5px 15px 0, rgba(0,0,0,.4) 0 15px 35px -5px;
  --sh-pop:rgba(0,0,0,.6) 0 8px 28px -4px;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:hsl(220,30%,7%);
  --panel:hsla(220,30%,9%,.85);
  --card:hsl(220,28%,10%);
  --card-2:hsl(220,30%,8%);
  --inset:hsl(220,30%,8%);
  --line:hsl(220,20%,22%);
  --line-soft:hsl(220,20%,17%);
  --hover:hsl(220,25%,15%);
  --fg:hsl(0,0%,100%);
  --mut:var(--gray-400);
  --dim:hsl(220,15%,55%);
  --dim-dec:var(--gray-600);
  --accent:var(--brand-300);
  --accent-2:var(--brand-200);
  --accent-ink:hsl(201,100%,10%);
  --accent-soft:hsla(201,100%,60%,.14);
  --ring:hsla(201,100%,65%,.4);
  --ok:hsl(142,60%,52%);
  --run:hsl(38,95%,58%);
  --err:hsl(0,85%,66%);
  --bar:var(--brand-300);
  --chart-1:#2f97e0; --chart-2:#12a37f; --chart-3:#c67d1c; --chart-4:#8e6ee2; --chart-5:#e35555;
  --chart-grid:#29363d;
  --chart-text:#94acb8;
  --chart-ink:#ffffff;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:rgba(0,0,0,.5) 0 5px 15px 0, rgba(0,0,0,.4) 0 15px 35px -5px;
  --sh-pop:rgba(0,0,0,.6) 0 8px 28px -4px;
  color-scheme:dark;
}

/* ============================================================ base */
body{background:var(--bg); font-size:14px; line-height:1.5}
h1,h2,h3,h4{font-family:var(--sans); letter-spacing:-.01em}

/* ============================================================ drawer nav */
.sidebar{
  width:var(--drawer); flex:none; background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; padding:0;
  box-shadow:none;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px; padding:14px 14px; border-bottom:1px solid var(--line);
  margin:0;
}
.sidebar .brand .logo{
  width:34px; height:34px; border-radius:8px; background:var(--accent); display:grid; place-items:center; flex:none;
}
.sidebar .brand .logo svg{width:20px;height:20px}
.sidebar .brand h1{font-size:15px; font-weight:650; letter-spacing:-.01em; margin:0; color:var(--fg)}
.sidebar .brand .sub{font-size:11px; color:var(--dim); margin-top:1px}
.sidebar nav{display:flex; flex-direction:column; gap:2px; padding:10px 8px; overflow-y:auto}
.navgroup{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  padding:12px 10px 5px; font-weight:600;
}
.sidebar nav button{
  display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border:none;
  border-radius:var(--r1); background:none; color:var(--mut); font-size:13.5px; font-weight:500;
  text-align:left; cursor:pointer; transition:background .15s, color .15s; line-height:1.3;
}
.sidebar nav button:hover{background:var(--hover); color:var(--fg)}
.sidebar nav button.active{background:var(--accent-soft); color:var(--accent); font-weight:600}
.sidebar nav button .ni{
  width:20px; height:20px; flex:none; display:grid; place-items:center; opacity:.9; font-size:13px;
}
.sidebar nav button .ni svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.sidebar nav button .nstep{
  margin-left:auto; font-size:10px; font-family:var(--mono); color:var(--dim-dec); font-weight:500;
}
.sidebar nav button.active .nstep{color:var(--accent)}
.sidebar .side-foot{
  margin-top:auto; border-top:1px solid var(--line); padding:10px 12px; display:flex;
  align-items:center; gap:8px; background:none;
}
.theme-btn{
  margin-left:auto; width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; color:var(--mut);
}
.theme-btn:hover{background:var(--hover)}

/* ============================================================ main + page header */
main{flex:1; min-width:0; background:var(--bg); overflow-x:hidden}
main > div{max-width:var(--maxw); padding:0 24px 40px}
main > div.wide{max-width:var(--maxw)}

.pagehead{
  display:flex; align-items:flex-start; gap:16px; padding:22px 0 16px; flex-wrap:wrap;
}
.pagehead .ph-txt h2{font-size:22px; font-weight:650; letter-spacing:-.02em; margin:0; color:var(--fg)}
.pagehead .ph-txt p{font-size:13.5px; color:var(--mut); margin:4px 0 0; max-width:76ch}
.pagehead .ph-act{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.stepbadge{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:600; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:3px 10px; letter-spacing:.02em;
  text-transform:uppercase; margin-bottom:7px;
}

/* ============================================================ cards */
.card,.pcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3);
  box-shadow:var(--sh-1); padding:16px; margin:0;
}
.card.hero{padding:0}
.stack{display:flex; flex-direction:column; gap:var(--gap)}
.row2{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--gap)}
.row3{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gap)}
.grid2{display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:var(--gap)}
.card-head{
  display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; padding:0; border:none;
}
.card-head h3{font-size:15px; font-weight:620; margin:0; letter-spacing:-.01em}
.card-note,.card-head p{font-size:12.5px; color:var(--mut); margin:3px 0 0; line-height:1.5}
/* "read this before you quote the number above" — caution, not error, so it borrows the
   --run amber rather than --err. Both themes redefine that token, so this follows. */
.warnbar{
  margin:12px 0 0; padding:11px 14px; border-radius:var(--r2);
  border:1px solid var(--run); border-left-width:3px;
  background:color-mix(in srgb, var(--run) 9%, var(--card));
  color:var(--fg); font-size:12.5px; line-height:1.55}
.warnbar strong{color:var(--run)}   /* the headline only — inline <b> stays body ink */
.warnbar a{color:var(--accent)}
.card-head .dg-tools{margin-left:auto}
.subtitle{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3); padding:12px 16px;
  font-size:13.5px; font-weight:600; color:var(--fg); box-shadow:var(--sh-1);
  display:flex; align-items:center; gap:10px;
}
.subtitle .n{
  width:22px;height:22px;border-radius:6px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:11px;font-family:var(--mono);font-weight:600;
}
.subtitle .sub{margin-left:auto; font-weight:400; font-size:12.5px; color:var(--mut)}

/* stat cards (AWRAM StatCard) */
.statgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap)}
.statcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3); padding:14px 16px;
  box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:2px; min-width:0;
}
.statcard .k{font-size:12px; color:var(--mut); font-weight:500}
.statcard .v{
  font-size:26px; font-weight:650; letter-spacing:-.03em; color:var(--fg);
  font-variant-numeric:tabular-nums; line-height:1.15; overflow-wrap:anywhere;
}
.statcard .v.sm{font-size:19px}
.statcard .s{font-size:11.5px; color:var(--dim)}
.statcard .trend{
  align-self:flex-start; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent); margin-top:4px;
}
.statcard .trend.good{background:hsla(142,64%,40%,.14); color:var(--ok)}
.statcard .trend.warn{background:hsla(35,90%,45%,.16); color:var(--run)}
.statcard .trend.bad{background:hsla(0,72%,50%,.14); color:var(--err)}

/* ============================================================ controls */
input[type=text],input[type=number],input[type=file],select,textarea{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r1);
  color:var(--fg); padding:8px 11px; font-size:13.5px; font-family:inherit; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
}
label{font-size:12.5px; color:var(--mut); font-weight:500}
.fld{display:flex; flex-direction:column; gap:5px}
.fld > label{margin:0}
.fldrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.hint{font-size:12.2px; color:var(--dim); line-height:1.55; margin-top:6px}

.go{
  background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent); border-radius:var(--r1);
  padding:8px 16px; font-size:13.5px; font-weight:600; cursor:pointer; box-shadow:var(--sh-1);
  transition:filter .15s, background .15s;
}
.go:hover{filter:brightness(1.08)}
.go.ghost{
  background:transparent; color:var(--accent); border:1px solid var(--line); box-shadow:none; font-weight:550;
}
.go.ghost:hover{background:var(--accent-soft); border-color:var(--accent)}
.ebtn{
  background:var(--card); color:var(--mut); border:1px solid var(--line); border-radius:var(--r1);
  padding:6px 11px; font-size:12.5px; font-weight:500; cursor:pointer;
}
.ebtn:hover{background:var(--hover); color:var(--fg)}
.ebtn.danger{color:var(--err); border-color:transparent}
.ebtn.danger:hover{background:hsla(0,72%,50%,.1)}

/* MUI-ish tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:14px; flex-wrap:wrap}
.tabs button{
  background:none; border:none; border-bottom:2px solid transparent; color:var(--mut);
  padding:9px 12px; font-size:13px; font-weight:550; cursor:pointer; margin-bottom:-1px; border-radius:0;
}
.tabs button:hover{color:var(--fg); background:var(--hover); border-radius:6px 6px 0 0}
.tabs button.active{color:var(--accent); border-bottom-color:var(--accent)}
.tabs.vtabs{flex-direction:row}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips label{
  display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:12.5px; color:var(--mut); cursor:pointer; background:var(--card);
}
.chips label:has(input:checked){background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.chips input{width:auto}
.tag{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-family:var(--mono);
  padding:3px 8px; border-radius:6px; background:var(--inset); border:1px solid var(--line-soft); color:var(--mut);
}
.tag.file{color:var(--accent); border-color:transparent; background:var(--accent-soft)}

/* ============================================================ data grid */
.dgrid{
  border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; background:var(--card);
}
.dgrid-bar{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:var(--card); flex-wrap:wrap;
}
.dgrid-bar .grow{flex:1}
.dgrid-scroll{overflow:auto; max-height:var(--gridh,420px)}
table{width:100%; border-collapse:collapse; font-size:13px}
thead th{
  position:sticky; top:0; z-index:2; background:var(--card-2); color:var(--mut); text-align:left;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:9px 12px;
  border-bottom:1px solid var(--line); white-space:nowrap;
}
tbody td{
  padding:8px 12px; border-bottom:1px solid var(--line-soft); color:var(--fg);
  font-variant-numeric:tabular-nums;
}
tbody tr:hover td{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right}

/* ============================================================ view shells */
.viewwrap{display:flex; flex-direction:column; gap:var(--gap)}
.split-main{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:var(--gap); align-items:start}
.split-main > .side{display:flex; flex-direction:column; gap:var(--gap); position:sticky; top:16px}
@media (max-width:1180px){ .split-main{grid-template-columns:1fr} .split-main > .side{position:static} }

/* run strip (progress) */
.runstrip{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r3); padding:12px 16px; box-shadow:var(--sh-1);
}
.runstrip .pill{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 10px; border-radius:999px; background:var(--inset); border:1px solid var(--line-soft);
}
.pips{display:flex; gap:8px; flex-wrap:wrap}
.pips .stage{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--mut); background:var(--inset);
  border:1px solid var(--line-soft); border-radius:999px; padding:4px 10px;
}
.pips .stage .dot{width:7px;height:7px;border-radius:50%;background:var(--dim-dec)}
.pips .stage .dot.done{background:var(--ok)}
.pips .stage .dot.running{background:var(--run); animation:pr 1.1s ease-in-out infinite}
.pips .stage .dot.error{background:var(--err)}
.pips .stage .dot.cancelled{background:var(--dim); animation:none}
@keyframes pr{0%,100%{opacity:1}50%{opacity:.3}}
.rs-metrics{display:flex; gap:8px; flex-wrap:wrap}
.rs-metrics .metric{
  background:var(--inset); border:1px solid var(--line-soft); border-radius:var(--r1); padding:5px 10px;
  display:flex; flex-direction:column; line-height:1.25;
}
.rs-metrics .metric b{font-size:13px; font-variant-numeric:tabular-nums}
.rs-metrics .metric span{font-size:10.5px; color:var(--dim)}
.rs-info{font-size:12px; color:var(--dim); width:100%}
.runstrip .err.alert{
  width:100%; background:hsla(0,72%,50%,.1); border:1px solid hsla(0,72%,50%,.35); color:var(--err);
  border-radius:var(--r1); padding:9px 12px; font-size:12.5px;
}

/* canvas + editor */
.ed-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r3); padding:9px 12px; box-shadow:var(--sh-1); margin:0;
}
.ed-tools{display:flex; gap:2px; background:var(--inset); border-radius:var(--r1); padding:3px; border:1px solid var(--line-soft)}
.etool{
  display:flex; align-items:center; gap:6px; background:none; border:none; border-radius:6px;
  padding:5px 10px; font-size:12.5px; color:var(--mut); cursor:pointer;
}
.etool:hover{background:var(--hover); color:var(--fg)}
.etool.on{background:var(--card); color:var(--accent); box-shadow:var(--sh-1); font-weight:600}
.etool kbd{display:none}
.ed-canvas,.ed-wrap{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3); overflow:hidden;
  box-shadow:var(--sh-1);
}
#ed-graphwrap{background:var(--card)}
.dg-frame{background:var(--card); border-radius:var(--r2)}

/* outputs */
.outcard .card-head .tag{margin-left:auto}
.filehdr{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.filehdr .fname{font-family:var(--mono); font-size:12px; color:var(--accent)}
.dl{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--accent);
  border:1px solid var(--line); border-radius:var(--r1); padding:5px 11px; text-decoration:none;
  background:var(--card); font-weight:550;
}
.dl:hover{background:var(--accent-soft); border-color:var(--accent)}
.chartbox{
  position:relative; height:260px; background:var(--card); border-radius:var(--r2); padding:4px 0 0;
}
.chartbox.sm{height:190px}
.chartbox.lg{height:340px}

/* empty state */
.empty{
  background:var(--card); border:1px dashed var(--line); border-radius:var(--r3); padding:40px 24px;
  text-align:center; box-shadow:none;
}
.empty .empty-art{font-size:30px; color:var(--dim-dec); margin-bottom:8px}
.empty h3{font-size:16px; margin:0 0 6px}
.empty p{font-size:13.5px; color:var(--mut); max-width:62ch; margin:0 auto}
.empty-actions{display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap}

/* the asset sheet is a wide grid — let its in-cell controls shrink, never clip */
#ed-sheet-body select,#ed-sheet-body input{max-width:100%; padding:5px 7px; font-size:12.5px}
#ed-sheet-body table{min-width:920px}

/* node prefix — the id every asset gets, shown as a live example */
.prefix-echo{
  display:flex; align-items:center; min-height:38px; padding:8px 11px; border-radius:var(--r1);
  background:var(--inset); border:1px dashed var(--line); font-size:13.5px; color:var(--mut);
}
.prefix-echo b{color:var(--accent); font-weight:700}
input.flash{
  border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);
  animation:flashfield 1.8s ease-out;
}
@keyframes flashfield{
  0%,55%{background:var(--accent-soft)}
  100%{background:var(--card)}
}

/* validation / error message */
.err{font-size:12.5px; color:var(--err)}
/* The run strip is a status banner, not a toolbar: its content is centred rather than
   spread edge to edge, so the stage pips and the percentile ladder read as one block
   under the eye instead of drifting to opposite margins on a wide screen.  `.grow` is the
   flex spacer that used to do the spreading — collapsed here rather than removed from the
   markup, because it is what the cancel/open buttons hang off. Higher specificity than
   styles.css's `.runstrip .grow`, which sets `flex:1 1 auto`. */
/* Geometry, not just alignment. The strip is a card sitting in the views' column, so it has
   to line up with the view CONTENT box — `main > div` is capped at --maxw and centred, then
   inset 24px by its own padding. This rule already asked for `margin-inline:auto`, but the
   element carried an inline `margin:16px 24px 0`, and an inline shorthand beats a
   stylesheet: the strip was pinned 24px from the left edge of `main` while the view below
   it stayed centred. Under --maxw the two coincide, which is why it looked fine on a
   laptop; past it they separate by half the surplus and keep going — 152px adrift at
   2200, 652px at 3200. `width` tracks the narrow case, `max-width` the wide one. */
.runstrip.runstrip{
  justify-content:center; row-gap:10px;
  width:calc(100% - 48px);
  max-width:calc(var(--maxw) - 48px);
  margin:16px auto 0;
}
.runstrip .grow.grow{flex:0 0 100%; height:0}
.runstrip .rs-metrics{justify-content:center}
.runstrip .pips{justify-content:center}
.runstrip .rs-info,.runstrip .err{flex:1 1 100%; text-align:center}
/* the ladder is five money figures side by side — line the digits up */
.rs-metrics .metric b{font-variant-numeric:tabular-nums}

/* edMsg carries progress notes as well as refusals — neutral by default, red only for .bad.
   The `:not(:empty)` is load-bearing, not decoration: styles.css sets `.err.alert:not(:empty)`
   red, which at 0-3-0 outranks a plain `.err.alert` here however late this file loads — so
   without it this rule never applied and EVERY editor message, progress included, was drawn
   as a refusal. */
.err.alert:not(:empty){
  background:var(--accent-soft); border:1px solid transparent; border-left:3px solid var(--accent);
  color:var(--mut); border-radius:var(--r1); padding:10px 13px; font-size:13px;
}
.err.alert.bad:not(:empty){
  background:hsla(0,72%,50%,.09); border-color:hsla(0,72%,50%,.3); border-left-color:var(--err);
  color:var(--err);
}

/* info popover (AWRAM DashboardPageHeader) */
.infobtn{
  width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--card);
  color:var(--mut); cursor:pointer; font-size:12px; font-weight:600; flex:none;
}
.infobtn:hover{background:var(--hover); color:var(--accent)}
.infopop{
  position:absolute; z-index:80; max-width:460px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r2); box-shadow:var(--sh-pop); padding:14px 16px; font-size:13px; color:var(--mut);
  line-height:1.6;
}
.infopop b{color:var(--fg)}
.infopop ul{margin:8px 0 0; padding-left:18px}
.infopop li{margin-bottom:4px}

/* misc overrides so styles.css components sit in the MUI idiom */
.view-head{padding:22px 0 12px}
.view-head h2{font-size:22px; font-weight:650; letter-spacing:-.02em}
.view-head p{font-size:13.5px; color:var(--mut); max-width:80ch}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--gap)}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r3); padding:14px 16px;
  box-shadow:var(--sh-1);
}
.kpi .k-lab{font-size:12px; color:var(--mut)}
.kpi .k-val{font-size:26px; font-weight:650; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:11.5px; color:var(--dim)}
.mini-facts{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--mut); margin-top:10px}
.sheet-bar{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line);
  flex-wrap:wrap; background:var(--card);
}
.sheet-chk{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--mut)}
.sheet-chk input{width:auto}
.fold{border-radius:var(--r3)}
.pager{display:flex; gap:8px; padding:10px 0 0}
.detail,.side-note{font-size:12.5px; color:var(--mut)}
.ranklist{display:flex; flex-direction:column; gap:2px}

@media (max-width:860px){
  body{display:block}
  .sidebar{position:static; width:auto; height:auto; flex-direction:row; align-items:center; overflow-x:auto}
  .sidebar nav{flex-direction:row; padding:8px}
  .navgroup{display:none}
  .sidebar .side-foot{margin-left:auto; border-top:none}
  main > div{padding:0 14px 32px}
  .split-main{grid-template-columns:1fr}
}

/* ============================================================ plate viewer
   A D-size one-line fitted into a card is legible only as a shape. `plateMount` wraps a
   pane so it can be zoomed, panned and thrown full screen — used for the Examples plot,
   the recreated graph beside it, and the editor's drawing panel. */
.plate{position:relative; overflow:hidden; cursor:grab; touch-action:none;
  background:var(--card); user-select:none; min-height:360px}
.plate.grabbing{cursor:grabbing}
/* Pinned to the host's origin, not laid out in it. `.ex-plot` is a centring flexbox, which
   placed a 3825px-wide sheet at x = (746-3825)/2 before the transform was applied — so the
   fit computed the right scale and translate and still put the drawing a thousand pixels
   off the left edge. Absolute positioning makes the stage's origin the host's origin for
   every host, whatever its display mode. */
.plate-stage{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.plate .plate-stage>svg,.plate .plate-stage>img{
  display:block; max-width:none; max-height:none; width:auto; height:auto}
.plate-tools{
  position:absolute; top:8px; right:8px; display:flex; gap:4px; z-index:3;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  border:1px solid var(--line); border-radius:var(--r1); padding:4px;
  box-shadow:var(--sh-1); backdrop-filter:blur(4px);
}
.plate-tools .ebtn{margin:0; padding:4px 9px; font-size:12px; line-height:1.4}
/* full-screen fallback for a browser that refuses the Fullscreen API (it is gated by a
   user gesture and by permissions policy, and an artifact/iframe may have neither) */
.plate-max{position:fixed; inset:0; z-index:9999; border-radius:0; border:0}
.plate:fullscreen,.plate:-webkit-full-screen{background:var(--card); border-radius:0}
.plate:fullscreen .plate-stage>img{image-rendering:auto}

/* ===========================================================================
   QUALITY PASS (2026-08-24) — accessibility, focus, touch, typography.
   Loaded last, so these are the rules that win. Grouped by what they fix
   rather than by selector, because each block is one finding from the audit.
   =========================================================================== */

/* ---- screen-reader-only text + skip link -------------------------------- */
/* Not display:none — that would remove it from the accessibility tree too. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:8px; top:-60px; z-index:200;
  background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:13.5px;
  padding:10px 16px; border-radius:var(--r1); text-decoration:none; box-shadow:var(--sh-pop);
  transition:top .15s ease;
}
.skip-link:focus-visible{top:8px}
main:focus{outline:none}          /* it is a scripted focus target, not a control */
main:focus-visible{outline:none}
h2[tabindex="-1"]:focus{outline:none}

/* ---- focus: every interactive thing, one visible ring -------------------- */
/* styles.css already rings buttons/links; these are the ones it missed, and the
   ring is drawn with outline (not box-shadow) so it survives inside overflow
   containers like the asset sheet, where a shadow is clipped by the scroll box. */
:where(button,a[href],select,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px var(--ring);
}
/* a text field's ring is its border+glow; doubling it with an outline looks broken */
input:where([type=text],[type=search],[type=number],[type=file]):focus-visible,
textarea:focus-visible,select:focus-visible{outline-offset:0}
.tabs button:focus-visible,.etool:focus-visible,.rank:focus-visible,.ex-item:focus-visible{
  outline-offset:-2px;
}

/* ---- touch: no 300ms double-tap delay, no grey flash -------------------- */
button,a[href],summary,label,select,.etool,.ochip,.ex-item,.rank,.runrow{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
/* a scroll that reaches its end must not drag the page with it */
.sheet-scroll,.ranklist,#downloads,.ed-menu-pop,.ex-list,.dgrid-scroll,.card.fold>div,
.plate,.ed-drawing-view{overscroll-behavior:contain}

/* ---- typography --------------------------------------------------------- */
h1,h2,h3,h4,.empty h3,.statcard .k{text-wrap:balance}
p,.card-note,.hint,.mi-sub,.side-note,.ex-ready{text-wrap:pretty}
/* every figure that is read against another figure lines up its digits */
.metric b,.kpi .k-val,.statcard .v,.fact b,.drow b,.stat b,td.num,th.num,
.rank-top .rv,.pkg-row .pk-c,input[type=number]{font-variant-numeric:tabular-nums}
/* device tags, file paths and asset ids are identifiers — machine translation
   turning "OUT" into a verb is worse than leaving them alone */
code,.mono,.tag.file,.csm,.rank-top .rn,.ex-item span{-webkit-hyphens:none;hyphens:none}

/* ---- form furniture ----------------------------------------------------- */
/* A caption that names a read-only read-out; it must LOOK like a label without being
   one, since <label> for a non-control is invalid. NOT called `.lbl` — that class is
   already taken by the asset sheet's totals cell, and `display:block` on a <td> drops
   it out of the table's column grid entirely. */
.field-label{display:block;font-size:12.5px;color:var(--mut);font-weight:500;letter-spacing:-.008em}
.fld-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fld-head label{margin:0}
.ebtn.tiny{padding:2px 9px;font-size:11px}
/* Windows dark mode paints an unstyled <select>'s list white-on-white; both
   halves have to be stated explicitly for the popup to inherit them */
select,select option{background-color:var(--card); color:var(--fg)}
/* `type=search` is not in the styled input set in either sheet, so switching the two
   filters to it dropped them back to the UA's own chrome — a heavy border beside the
   app's own hairline fields. */
input[type=search]{
  -webkit-appearance:none; appearance:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r1);
  color:var(--fg); padding:8px 11px; font-size:13.5px; font-family:inherit; width:100%;
  transition:border-color .15s, box-shadow .15s;
}
input[type=search]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}

/* ---- prose that was a wall of text, now a disclosure -------------------- */
.note-fold{margin-top:10px; border-top:1px solid var(--line-soft); padding-top:10px}
.note-fold>summary{
  cursor:pointer; font-size:12.5px; font-weight:600; color:var(--accent);
  list-style:none; padding:2px 0;
}
.note-fold>summary::-webkit-details-marker{display:none}
.note-fold>summary::before{content:"▸ "; color:var(--dim)}
.note-fold[open]>summary::before{content:"▾ "}
.note-fold p{font-size:12.2px; color:var(--dim); line-height:1.55; margin:8px 0 0; max-width:72ch}
.note-fold p b{color:var(--fg); font-weight:600}

/* ---- nav ---------------------------------------------------------------- */
.navlist{display:flex; flex-direction:column; gap:2px}
@media (max-width:860px){ .navlist{flex-direction:row} }

/* ---- the editor legend belongs INSIDE the canvas card ------------------- */
/* It was a sibling of the SVG inside #ed-graphwrap, which .ed-canvas clips —
   so the keyboard hints were painted on the page ground below the rounded
   border, reading as stray text rather than as the canvas's own caption. */
.ed-canvas{display:flex; flex-direction:column}
.ed-canvas .ed-legend{
  margin:0; padding:9px 14px; border-top:1px solid var(--line-soft);
  background:var(--card-2); font-size:12px; gap:14px; row-gap:6px;
}
.ed-canvas .ed-legend i{width:9px;height:9px}
.ed-legend .sw-comp{background:#8e8e93}
.ed-legend .sw-in{background:var(--ok)}
.ed-legend .sw-out{background:var(--run)}
.ed-legend .ed-keys{margin-left:auto}
@media (max-width:1024px){ .ed-legend .ed-keys{display:none} }

/* ---- the asset sheet ---------------------------------------------------- */
/* "Constant (age-independent)" was clipped to "Constant (age-indepe" — the
   decay column was sized for the shortest option name, not the longest. */
/* "Constant (age-independent)" is the longest option name and the select clipped it
   mid-word. A min-width on the CELL does not help: the <select> inside is width:100%,
   so it contributes no intrinsic width and the auto-layout column collapses to the
   header text. The floor has to sit on the control itself. */
/* `.dec` and `.n` in styles.css never matched anything: the renderer emits `decay`
   and `value`. That is why the column stayed narrow however the rule was tuned. */
table.sheet td.decay{min-width:215px}
table.sheet td.decay select{min-width:200px}
table.sheet td.value{min-width:96px}
.sheet-scroll{max-height:min(62vh,620px)}
.sheet-foot{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);margin:0}
.sheet-foot .hint{margin:0;flex:1 1 320px}
.sheet-foot .go{flex:0 0 auto}
/* rows far off screen cost nothing to skip; the size hint keeps the scrollbar honest */
table.sheet tbody tr{content-visibility:auto; contain-intrinsic-size:auto 34px}

/* ---- the file list ------------------------------------------------------ */
/* Two nested scroll containers: #downloads had its own max-height AND held a
   .dgrid-scroll with one, so the outer scrollbar did nothing and the inner one cut
   the last row in half — which reads as a rendering fault, not as "scroll for more".
   One container, and a fade at the bottom edge that says there is more below. */
#downloads{max-height:none; overflow:visible}
#downloads .dgrid-scroll{scrollbar-gutter:stable; mask-image:none}
#downloads .dgrid{position:relative}
#downloads .dgrid::after{
  content:""; position:absolute; left:1px; right:1px; bottom:1px; height:26px;
  pointer-events:none; border-radius:0 0 var(--r2) var(--r2);
  background:linear-gradient(to top, var(--card), transparent);
}
#downloads table{margin:0}
#downloads tbody tr:last-child td,#downloads tbody tr:last-child th{border-bottom:0}
#downloads tbody tr:last-child th[scope="row"]{padding-bottom:26px}

/* ---- reading views keep a reading measure ------------------------------- */
/* awram.css caps EVERY main>div at --maxw (1560px), which is right for the
   diagram-led views and wrong for Manual and Runs: their tables then stretched
   to 1560px and the eye lost the row on the way across. */
main > div.reading{max-width:920px}
.man table{max-width:100%}
.man td:last-child{text-wrap:pretty}

/* ---- run history rows --------------------------------------------------- */
.runrow{
  display:flex; gap:14px; align-items:center; width:100%; text-align:left;
  font:inherit; color:inherit; border:1px solid var(--line); background:var(--card);
  padding:12px 16px; border-radius:var(--r2); cursor:pointer; margin-bottom:8px;
  transition:background var(--t),border-color var(--t);
}
.runrow:hover{background:var(--hover); border-color:var(--accent); transform:none; box-shadow:none}
.runrow .rr-when{color:var(--dim); font-size:12px; white-space:nowrap}
.runrow .rr-id{font-family:var(--mono); font-size:11.5px; color:var(--mut)}
.runrow .rr-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.runrow .rr-met{color:var(--mut); font-size:12.5px; white-space:nowrap; font-variant-numeric:tabular-nums}
.rr-status{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; background:var(--inset); color:var(--mut); flex:none}
.rr-status.done{background:color-mix(in srgb,var(--ok) 14%,transparent); color:var(--ok)}
.rr-status.error{background:color-mix(in srgb,var(--err) 14%,transparent); color:var(--err)}
.rr-status.running{background:color-mix(in srgb,var(--run) 16%,transparent); color:var(--run)}
.rr-status.cancelled{background:var(--inset); color:var(--dim)}

/* ---- examples list is a list ------------------------------------------- */
.ex-item{width:100%; font:inherit}
.ex-item[aria-current="true"]{border-color:var(--accent); background:var(--accent-soft)}
.ex-foot{justify-content:space-between}

/* ---- motion ------------------------------------------------------------- */
/* styles.css disables durations globally under reduced-motion; these are the
   two that animate by keyframe and would otherwise keep looping. */
@media (prefers-reduced-motion: reduce){
  .pips .stage .dot.running,.dot.running,input.flash{animation:none}
  .skip-link{transition:none}
}

/* ---- print -------------------------------------------------------------- */
@media print{
  .sidebar,.runstrip,.ed-toolbar,.ph-act,.skip-link,.pager,.filehdr .dl{display:none !important}
  body{display:block}
  main > div{max-width:none; padding:0}
  .card{break-inside:avoid; box-shadow:none; border-color:#ccc}
  .hidden{display:none !important}
}

/* a grouped echo under a money field — <input type=number> cannot group its own digits,
   so 250000 sat under a label that promised dollars */
.fld-echo{font-size:11px;color:var(--dim);font-variant-numeric:tabular-nums;min-height:1em}
.fld-echo:empty{display:none}
/* the grouped echo sits under the field it explains, sharing its right edge */
table.sheet td .pp{color:var(--dim); text-align:right; padding-right:9px}

/* the skip link's shadow leaked into the corner while it was parked off-screen */
.skip-link{box-shadow:none}
.skip-link:focus-visible{box-shadow:var(--sh-pop)}

/* Side-by-side cards stretched to the tallest one, so the settings card carried a
   200px tail of empty white under its last control. Let each end where it ends. */
.row2,.grid2,.statgrid{align-items:start}

/* The stage names are now written out ("Monetized risk $"), so the capitalize that used
   to dress up the raw identifiers turns them into title case: "Monetized Risk $". */
.pips .sname,.stage .sname{text-transform:none}

/* A view heading is a scripted focus DESTINATION, not a control. Chrome shows
   :focus-visible on it when focus arrives with no preceding pointer event, which puts a
   ring around the page title after an ordinary nav click. The move is still announced. */
h2[tabindex="-1"]:focus-visible,main:focus-visible,#infopop:focus-visible{
  outline:none; box-shadow:none;
}

/* the run strip belongs to the workflow views; `.hidden` is owned by the run lifecycle,
   so parking it needs a second, independent switch */
.runstrip.offstage{display:none !important}

/* ===========================================================================
   CONTRAST — light theme (measured with Lighthouse/axe, 2026-08-24)
   The brand hue was picked for the swatch, not for the text set in it. At
   hsl(201,98%,42%) every accent surface in the light theme failed WCAG AA:
     accent text on white ........ 3.71  (needs 4.5)
     accent text on the soft tint  3.43
     white on the primary button   3.71
   Dropping the lightness to 35% carries all three (5.13 / 4.74 / 5.13) and is
   still visibly the same blue. The dark theme measured clean (8.9 / 6.9 / 8.2)
   and is left alone. Only the LIGHT tokens are restated here.
   =========================================================================== */
:root{
  --brand-500:hsl(201,98%,35%);      /* --accent */
  --brand-400:hsl(201,98%,42%);      /* charts / bars — graphics, 3:1 applies */
  --brand-700:hsl(201,100%,26%);     /* the darker press/hover step */
  /* Every status colour is also set as TEXT on a tint of itself (the stat chips,
     the run pips, the warn bar), which is a harder ground than the card — green
     measured 4.62 on white but 3.62 on its own 13% tint. These lightnesses clear
     4.5 against white, the inset grey AND their own tints. */
  --ok:hsl(142,64%,27%);
  --run:hsl(35,90%,30%);
  --err:hsl(0,72%,43%);
  /* the nav's step numerals and the sheet's unit captions were 1.66:1 — decoration-
     grade contrast on real text. 46% clears 4.5 on both the card and the inset grey. */
  --dim-dec:hsl(220,20%,46%);
  --ring:hsla(201,98%,35%,.4);
}
/* A hover state must GAIN contrast, not lose it. `--accent-2` is brighter than
   `--accent`, which is right on a dark ground and backwards on a light one — the
   primary button washed out under the cursor. Resolved through a token, the same
   way every other theme-sensitive value in this file is. */
:root{--go-hover:var(--brand-700); --art:hsl(220,20%,78%)}
@media (prefers-color-scheme:dark){ :root:not([data-theme]){--go-hover:var(--accent-2); --art:var(--gray-600)} }
:root[data-theme="dark"]{--go-hover:var(--accent-2); --art:var(--gray-600)}
button.go:hover{background:var(--go-hover)}
/* --dim-dec is now mid-grey because it sets real TEXT (the nav's step numerals, the
   sheet's unit captions). Its other consumers are pure decoration and want the
   old light tone back, or an idle dot reads as a lit one and the empty-state glyph
   turns into a heavy blot. */
.empty-art{color:var(--art)}
.pips .stage .dot{background:var(--art)}
/* the Pareto scatter cloud: recessive, but a chart mark still has to be visible —
   3:1 against the plot ground rather than the 1.7:1 the decoration tone gives */
:root{--chart-neutral:hsl(220,14%,62%)}
@media (prefers-color-scheme:dark){ :root:not([data-theme]){--chart-neutral:hsl(220,12%,48%)} }
:root[data-theme="dark"]{--chart-neutral:hsl(220,12%,48%)}

/* Row headers, not column headers. `th` is styled globally as an uppercase, dimmed,
   sortable COLUMN head; applied to a <th scope="row"> that carries a file path or a
   name field, it uppercases the content — including the text inside an <input>. */
th[scope="row"],table.sheet th[scope="row"]{
  text-transform:none; letter-spacing:normal; font-size:inherit; font-weight:inherit;
  color:var(--fg); cursor:auto; user-select:auto; position:static; background:none;
  text-align:left; padding:8px 12px; border-bottom:1px solid var(--line-soft);
}
table.sheet th[scope="row"]{padding:2px 5px; white-space:nowrap}
#downloads th[scope="row"]{font-weight:400}
tbody tr:hover th[scope="row"]{background:var(--hover)}
table.sheet tbody tr.sel th[scope="row"]{background:var(--accent-soft); box-shadow:inset 3px 0 0 var(--accent)}

/* the examples picker is a list of choices, so it is marked up as one; strip the
   bullets and the indent the UA gives a <ul>. NOT display:contents on the <li> —
   that drops the item from the accessibility tree in several engines, which is the
   same bug in a new place. */
.ex-list{list-style:none; margin:0; padding:0}
.ex-list li{display:block}
.ex-list li .ex-item{display:block; width:100%}

/* a boundary label on the examples preview: it is what the reader is hunting for on an
   otherwise unlabelled reconstruction, so it is not dimmed like a device tag */
.exgraph .exlbl.exend{opacity:1; font-weight:700; font-size:8px}

/* The ATS masthead band lived here. The wordmark now sits on the navy sidebar rail and a
   slim top bar carries the breadcrumbs and build badge — see assets/pra-ui.css. */

/* Austin network: the station list is headed by role (transmission, distribution), and
   the detail pane names the station before its drawings. */
.ex-list li.ex-group{font:600 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);padding:12px 2px 2px}
.ex-list li.ex-group:first-child{padding-top:0}
.au-head h3{margin:0 0 4px;font:600 20px/1.25 var(--display, var(--sans))}
.au-head p{margin:0 0 12px;font-size:14px;max-width:80ch}
table.au-per{margin-top:14px;border-collapse:collapse;font-size:13px}
table.au-per caption{text-align:left;padding-bottom:4px}
table.au-per th,table.au-per td{padding:4px 14px 4px 0;text-align:left}
table.au-per th[scope="row"]{text-transform:none;font-weight:500;font-family:var(--mono)}
table.au-per td{font-variant-numeric:tabular-nums}

/* Portfolio map: the front page.  The map fills the card; the side panel holds the
   portfolio picker, its roll-up, whatever is selected, and the ranked lists. */
.pf-card{padding:0;overflow:hidden}
.pf-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:680px}
@media (max-width:1180px){.pf-wrap{grid-template-columns:1fr}}
.pf-mapbox{position:relative;min-height:560px;border-right:1px solid var(--line-soft)}
.pf-map{position:absolute;inset:0;background:var(--inset);font:inherit}
@media (max-width:1180px){.pf-mapbox{border-right:0;border-bottom:1px solid var(--line-soft)}}
.pf-map .leaflet-tooltip{font:500 12px/1.3 var(--sans);color:var(--fg);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh-1)}
.pf-map .leaflet-control-attribution{font-size:10px}
.pf-legend{position:absolute;left:12px;bottom:26px;z-index:500;display:flex;flex-wrap:wrap;gap:6px 12px;
  align-items:center;max-width:calc(100% - 24px);padding:8px 12px;border-radius:var(--r1);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1);font-size:12px;color:var(--mut)}
.pf-legend .field-label{flex-basis:100%;margin:0}
.pf-key{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.pf-key i{display:inline-block;width:14px;height:10px;border-radius:2px;border:1px solid var(--line)}
.pf-key i.pf-ring{width:12px;height:12px;border-radius:50%;border:3px solid var(--fg);background:transparent}
.pf-key i.pf-dot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--fg);background:transparent}
.pf-key i.pf-line{width:18px;height:0;border:0;border-top:3px solid var(--mut);border-radius:0}
.pf-key i.pf-line.pf-69{border-top:2px dashed var(--dim)}
.pf-side{display:grid;gap:18px;align-content:start;padding:18px;max-height:820px;overflow:auto}
.pf-pick select{width:100%}
.pf-about{margin:6px 0 0;font-size:13px}
.pf-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-stats .metric b{font-size:18px;font-variant-numeric:tabular-nums}
.pf-detail:empty{display:none}
.pf-detail{display:grid;gap:8px;padding:14px;border-radius:var(--r2);background:var(--accent-soft);border:1px solid var(--line)}
.pf-detail h3{margin:0;font-size:16px}
.pf-detail p{margin:0;font-size:13px}
.pf-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13px}
.pf-dl dt{color:var(--mut)}
.pf-dl dd{margin:0;font-variant-numeric:tabular-nums}
.pf-mini{margin:0;padding-left:18px;font:12.5px/1.5 var(--mono)}
.pf-mini em{font-style:normal;color:var(--mut);float:right}
.pf-go{display:flex;flex-wrap:wrap;gap:8px}
.pf-go .go,.pf-go .ebtn{margin:0}
.pf-tabs{display:flex;gap:4px;margin-bottom:8px}
.pf-tabs button{flex:1;padding:6px 8px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);
  color:var(--mut);font:500 13px var(--sans);cursor:pointer}
.pf-tabs button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pf-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pf-list button{width:100%;display:grid;grid-template-columns:12px minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:10px;align-items:center;text-align:left;padding:7px 8px;border:0;border-radius:var(--r1);
  background:transparent;color:var(--fg);cursor:pointer;font:inherit}
.pf-list button:hover,.pf-list button:focus-visible{background:var(--hover)}
.pf-list button i{grid-row:1/3;width:12px;height:12px;border-radius:3px;border:1px solid var(--line)}
.pf-list button b{font:500 13px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-list button span{grid-column:2;font-size:12px;color:var(--mut)}
.pf-list button em{grid-row:1/3;grid-column:3;font:500 12.5px var(--mono);font-style:normal;font-variant-numeric:tabular-nums}
.pf-by{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pf-by .field-label{margin:0 6px 0 0}
.pf-by button{padding:5px 10px;border-radius:var(--pill);border:1px solid var(--line);background:var(--card);
  color:var(--mut);font:500 12.5px var(--sans);cursor:pointer}
.pf-by button[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--card)}
.pf-rank-unit{margin:0 0 6px;font-size:12px}
.pf-by button:disabled{opacity:.5;cursor:not-allowed}

/* The portfolio's asset table, under the map. */
.pf-at-card{margin-top:18px}
.pf-at-head{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.pf-at-head h3{margin:0;font-size:18px}
.pf-at-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pf-at-tools input[type=search]{min-width:240px}
.pf-at-lines{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--mut)}
.pf-at-scope{margin:8px 0 10px;font-size:13px}
.pf-at-scope .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.pf-at-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r2)}
table.pf-at{width:100%;border-collapse:collapse;font-size:13px}
table.pf-at th,table.pf-at td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
table.pf-at thead th{position:sticky;top:0;background:var(--card-2);text-transform:none;letter-spacing:0}
table.pf-at thead th button{border:0;background:none;padding:0;font:600 12px var(--sans);color:var(--mut);cursor:pointer}
table.pf-at thead th[aria-sort="ascending"] button::after{content:" \2191"}
table.pf-at thead th[aria-sort="descending"] button::after{content:" \2193"}
table.pf-at tbody th[scope="row"]{font:500 12.5px var(--mono);text-transform:none;letter-spacing:0;color:var(--fg)}
table.pf-at td.n{text-align:right;font-variant-numeric:tabular-nums}
table.pf-at tbody tr{cursor:pointer}
table.pf-at tbody tr:hover,table.pf-at tbody tr:focus-visible{background:var(--hover);outline:none}
#pf-at-more{margin-top:10px}
.pf-lrow{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.pf-lt{min-width:108px;color:var(--fg);font-weight:500}

/* An Austin station in the station workflow: where it sits, above the five views. */
/* an id, to outrank `main > div`, whose view padding would otherwise pad the bar; lined
   up with the run strip above it, which solves the same problem the same way */
#stationbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;
  width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin:12px auto 0;
  padding:10px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh-1)}
#stationbar.hidden{display:none}
#stationbar + .runstrip{margin-top:10px}
.stationbar .sb-crumb{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;font-size:14px;white-space:nowrap}
.stationbar .sb-crumb b{font-weight:640;letter-spacing:-.01em}
.stationbar .sb-facts{flex:1 1 280px;color:var(--mut);font-size:12.5px}
.stationbar .linkish,#res-network .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer}
.stationbar .linkish:hover{text-decoration:underline}
#res-network{display:flex;flex-direction:column;gap:var(--gap)}
#res-network.hidden{display:none}
#res-network .kpis-sm .kpi .k-val{font-size:22px}
#res-network .net-row{margin-top:var(--gap);align-items:start;grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:900px){#res-network .net-row{grid-template-columns:1fr}}
#res-network thead th{font:600 11.5px var(--sans);text-transform:none;letter-spacing:0;color:var(--mut);vertical-align:bottom}
#res-network h4{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--fg)}
#res-network .tblwrap{overflow-x:auto}
#res-network table{width:100%;border-collapse:collapse;font-size:13px}
#res-network th,#res-network td{padding:6px 8px;border-bottom:1px solid var(--line-soft);text-align:left}
#res-network td.num,#res-network th.num{text-align:right;font-variant-numeric:tabular-nums}
#res-network tbody th[scope="row"]{font:500 12.5px var(--mono);text-transform:none;letter-spacing:0;color:var(--fg)}
#res-network .net-rank{margin:0;padding:0;list-style:none;max-height:none}
#res-network .net-rank button{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;border:0;
  background:transparent;padding:7px 10px;border-radius:10px;cursor:pointer;color:var(--fg)}
#res-network .net-rank button:hover{background:var(--hover)}
#res-network .net-rank b{font:560 13px var(--mono)}
#res-network .net-rank span{font-size:12px;color:var(--mut)}

/* ============================================================ behind sign-in (assets/org.js)
   The org, network and model bar sits where the station bar does, lined up with it; the
   Substations library is one card, portfolio above its table. Nothing here shows on the
   public app: the bar stays hidden and .bk-only needs body.bk-on. */
.bk-only{display:none}
body.bk-on .bk-only{display:flex}
.bk-user{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 16px;border-top:1px solid var(--line-soft)}
.bk-who{font-size:12.5px;color:var(--mut);word-break:break-all}
#orgbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin:12px auto 0;
  padding:10px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--sh-1)}
#orgbar.hidden{display:none}
#orgbar .field-label{margin:0}
#orgbar select{max-width:260px}
#orgbar .bk-status{color:var(--mut);font-size:12.5px;font-variant-numeric:tabular-nums}
#orgbar .bk-note{flex:1 1 200px;font-size:12.5px;color:var(--ok)}
#orgbar .bk-note.err{color:var(--err)}
#orgbar + #stationbar{margin-top:10px}
.pf-bk-note{margin:0 0 12px;padding:8px 12px;border-radius:var(--r2);background:var(--accent-soft);color:var(--fg);font-size:13px}
.pf-bk-note.hidden{display:none}
.lib-card{display:flex;flex-direction:column;gap:var(--gap)}
.lib-head{display:flex;flex-wrap:wrap;gap:var(--gap);align-items:flex-start;justify-content:space-between}
.lib-head .pf-pick{flex:1 1 280px;max-width:420px}
.lib-stats{flex:2 1 420px}
.lib-table{width:100%;border-collapse:collapse;font-size:13px}
.lib-table th,.lib-table td{padding:7px 10px;border-bottom:1px solid var(--line-soft);text-align:left}
.lib-table thead th{font:600 11.5px var(--sans);color:var(--mut);text-transform:none;letter-spacing:0}
.lib-table td.num,.lib-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.lib-table tbody th[scope="row"]{font-weight:600;text-transform:none;letter-spacing:0;color:var(--fg)}
.lib-table tbody tr:hover{background:var(--hover)}
.lib-foot{margin:0;font-size:12.5px}
.bk-tag{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11.5px;font-weight:600}
/* folded into the top bar on a narrow screen: sign-out only, the address does not fit */
@media (max-width:860px){
  body.bk-on .bk-user{flex-direction:row;align-items:center;padding:0 6px;border-top:0}
  .bk-who{display:none}
  #orgbar{width:calc(100% - 32px)}
}
#orgbar .bk-f{display:flex;align-items:center;gap:8px}
@media (max-width:860px){ #orgbar .bk-f{flex:1 1 100%} #orgbar .bk-f .field-label{min-width:62px} #orgbar .bk-f select{flex:1;max-width:none} }

/* Data provenance and connected-place navigation. */
.pf-provenance{margin:0 0 16px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card)}
.pf-provenance summary{cursor:pointer;padding:12px 14px;color:var(--fg);font-size:13px}
.pf-demo-tag{margin-right:8px;color:var(--accent);font-weight:650}
.pf-provenance-hint{margin-left:12px;color:var(--mut);font-size:12px}
.pf-provenance-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:4px 16px 16px}
.pf-provenance-body h3{margin:0 0 6px;font-size:13px}
.pf-provenance-body p{margin:0;color:var(--mut);font-size:12.5px;line-height:1.55}
.pf-find-row{display:flex;gap:6px}
.pf-find-row input{width:100%;min-width:0;flex:1}
.pf-find-row button{flex-shrink:0}
#pf-find-count{font-size:12px;margin:6px 0 0}
#pf-find-count:empty{display:none}
.pf-find-results{list-style:none;padding:0;margin:8px 0 0;max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:var(--r1)}
.pf-find-results.hidden{display:none}
.pf-find-item{display:block;width:100%;padding:9px 10px;text-align:left;border:0;border-bottom:1px solid var(--line-soft);background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.pf-find-item.feeder{padding-left:22px;border-left:2px solid var(--line)}
.pf-find-item b{display:block;font-size:13px;font-weight:600}
.pf-find-item b span{font:11px var(--mono);color:var(--mut)}
.pf-find-item small{display:block;margin-top:3px;font-size:11.5px;color:var(--mut)}
.pf-find-item:hover,.pf-find-item[aria-current="true"]{background:var(--accent-soft)}
.pf-find-empty{padding:12px;font-size:13px}
.pf-detail-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px;font-size:12px}
.pf-detail-head .field-label{margin:0}
.pf-detail .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.pf-parent{font-size:12px;color:var(--mut)}
.pf-detail:focus-visible,.pf-find-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.bk-model-note{flex-basis:100%;margin:0;color:var(--mut);font-size:12px;line-height:1.5}
@media (max-width:860px){.pf-provenance-body{grid-template-columns:1fr;gap:14px}.pf-provenance-hint{display:block;margin:6px 0 0}.stationbar .sb-crumb{white-space:normal;flex-wrap:wrap}}

.workflow-context{margin:0 10px 6px;padding:8px 9px;border-left:2px solid var(--accent);background:var(--inset);color:var(--mut);font-size:11.5px;line-height:1.45;overflow-wrap:anywhere}
#scopebar{width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin:12px auto 0;padding:9px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
#scopebar.hidden{display:none}
.scopebar ol{display:flex;flex-wrap:wrap;gap:5px 0;align-items:center;list-style:none;margin:0;padding:0;font-size:12px;color:var(--mut)}
.scopebar li{display:flex;align-items:center;overflow-wrap:anywhere;max-width:100%}
.scopebar li+li:before{content:'›';padding:0 9px;color:var(--dim)}
.scopebar .linkish,.pf-asset-detail .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-align:left}
.scopebar .linkish:hover,.pf-asset-detail .linkish:hover{text-decoration:underline}
.scopebar b{font-weight:600;color:var(--fg)}
.pf-asset-detail{display:grid;gap:8px;padding:14px;border:1px solid var(--accent);border-radius:var(--r2);background:var(--card)}
.pf-asset-detail.hidden{display:none}
.pf-asset-detail h3{margin:0;font-size:15px;overflow-wrap:anywhere}
.pf-asset-detail p{margin:0;font-size:12px;color:var(--mut)}
.pf-asset-detail .go{margin:0}
.pf-asset-detail .pf-asset-note{font-size:11.5px;line-height:1.5}
table.pf-at tbody tr.asset-selected{background:var(--accent-soft);box-shadow:inset 3px 0 var(--accent)}
@media(max-width:860px){#scopebar{width:calc(100% - 32px)}.workflow-context{display:none}}
/* ===== SATELLITE, FEEDERS AND LINES, PORTFOLIOS (2026-09-25) =====================
   Imagery sits under anything drawn where it stands: the portfolio map, a feeder's or a
   line's map, and a feeder's or line's diagram in the workflow (assets/geo.js puts a
   second <svg> of tiles under the diagram's own).  A station's one-line is a schematic
   and gets none. */
.geo-host{position:relative;background:#0e1319}
.geo-bg{position:absolute;pointer-events:none;z-index:0;border-radius:var(--r2);overflow:hidden}
.geo-host > svg.geo-on{position:relative;z-index:1;background:transparent!important}
.geo-bg rect.geo-dim{fill:#000;opacity:.26}
.geo-attr{position:absolute;right:8px;bottom:6px;z-index:2;max-width:70%;font-size:10px;line-height:1.3;
  color:rgba(255,255,255,.86);background:rgba(0,0,0,.45);padding:2px 7px;border-radius:5px;pointer-events:none}
#ed-svg.geo-on .ededge{stroke:rgba(255,255,255,.82)}
#ed-svg.geo-on marker#edarrow path{fill:rgba(255,255,255,.85)}
#ed-svg.geo-on .edlbl{fill:#fff;stroke:rgba(8,12,16,.78)}
#ed-svg.geo-on .ednode .nbody{stroke:rgba(8,12,16,.6)}
svg.dg.geo-on .dgedge{stroke:rgba(255,255,255,.82);stroke-width:1.8}
svg.dg.geo-on .dglbl{fill:#fff;stroke:rgba(8,12,16,.78);stroke-width:3px;paint-order:stroke;stroke-linejoin:round}
svg.dg.geo-on .dgnode circle{stroke:rgba(8,12,16,.65)}

.pf-basemap{position:absolute;top:10px;right:10px;z-index:500;display:flex;gap:2px;padding:3px;
  border-radius:var(--r1);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-1)}
.pf-basemap button{border:0;background:transparent;color:var(--mut);font:500 12.5px var(--sans);
  padding:5px 10px;border-radius:6px;cursor:pointer}
.pf-basemap button[aria-pressed="true"]{background:var(--fg);color:var(--card)}
.pf-go-wide{grid-column:1/-1;margin-top:4px}
table.pf-zones{width:100%;border-collapse:collapse;font-size:12.5px}
table.pf-zones th,table.pf-zones td{padding:4px 6px;border-bottom:1px solid var(--line-soft);text-align:left}
table.pf-zones th[scope="row"]{text-transform:none;letter-spacing:0;font-weight:500}
table.pf-zones .num{text-align:right;font-variant-numeric:tabular-nums}

.au-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.au-tabs button{font-size:12.5px;padding:5px 6px}
.au-tabs button .dim{font-variant-numeric:tabular-nums}
.au-tabs button[aria-selected="true"] .dim{color:inherit;opacity:.8}
.fe-fig{margin:10px 0 0}
.fe-fig figcaption{font-size:12.5px;color:var(--mut);margin-bottom:6px}
.fe-map{height:min(62vh,520px);border-radius:var(--r2);border:1px solid var(--line);background:#0e1319}
.fe-map .leaflet-tooltip,.pm-map .leaflet-tooltip{font:500 12px/1.3 var(--sans);color:var(--fg);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh-1)}
.fe-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:12px;color:var(--mut)}
.fe-legend .sw{display:inline-flex}
.fe-legend .sw i{width:12px;height:10px;border:0;border-radius:0}
.pf-key i.pf-ring.fe-in{border-color:var(--ok)}
.pf-key i.pf-ring.fe-out{border-color:var(--run)}
.fe-legend .pf-line{border-top:0;height:4px;width:18px;border-radius:2px}
i.fe-zkey{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;border:1px solid var(--line);vertical-align:-1px}

/* the three levels: org, you, portfolio */
.bk-levels{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-right:12px;margin-right:4px;
  border-right:1px solid var(--line-soft);flex:0 1 auto;flex-direction:row;padding-block:0}
.bk-levels .bk-f{flex:0 0 auto}
.bk-sep{color:var(--dim);font-size:18px;line-height:1}
.bk-you{border:1px solid var(--line);background:var(--card);color:var(--fg);border-radius:var(--r1);
  padding:5px 10px;font:500 13px var(--sans);cursor:pointer}
.bk-you:hover{background:var(--hover)}
@media (max-width:860px){.bk-levels{border-right:0;padding-right:0;width:100%}}
.pa-crumb{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 12px;padding:0;font-size:13.5px}
.pa-crumb:empty{display:none}
.pa-lvl{display:inline-flex;align-items:baseline;gap:6px}
.pa-k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.pa-sep{color:var(--dim)}
.pa-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;justify-content:space-between}
.pa-head .pf-pick{flex:1 1 320px;max-width:520px}
.pa-acts{display:flex;flex-wrap:wrap;gap:8px}
.pa-acts .ebtn{margin:0}
.pa-kpis{margin:18px 0}
.pa-card{margin-top:18px}
.pa-card h3{margin:0 0 4px;font-size:18px}
.pa-row{margin-top:0}
.pa-row > .pa-card{margin-top:18px}
.pa-in{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mut)}
.pa-in input[type=number]{width:110px}
.pa-controls{display:flex;flex-wrap:wrap;gap:10px 22px;margin:4px 0 16px}
.pa-bars{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.pa-bars li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.pa-bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-bl .linkish{border:0;background:none;padding:0;color:var(--fg);font:inherit;cursor:pointer;text-align:left}
.pa-bl .linkish:hover{color:var(--accent);text-decoration:underline}
.pa-bt{height:12px;border-radius:3px;background:var(--inset);overflow:hidden}
.pa-bt i{display:block;height:100%;background:var(--chart-1);border-radius:3px}
.pa-tornado .pa-bt i{background:var(--chart-3)}
.pa-bv{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pa-rank{list-style:none;margin:10px 0 0;padding:0}
.pa-rank button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;text-align:left;
  padding:7px 8px;border:0;border-radius:var(--r1);background:transparent;color:var(--fg);cursor:pointer;font:inherit}
.pa-rank button:hover,.pa-rank button:focus-visible{background:var(--hover)}
.pa-rank b{font:500 13px var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-rank span{grid-column:1;font-size:12px;color:var(--mut)}
.pa-rank em{grid-row:1/3;grid-column:2;align-self:center;font:500 13px var(--mono);font-style:normal;font-variant-numeric:tabular-nums}
table.pa-cba th[scope="row"] .linkish{border:0;background:none;padding:0;color:var(--accent);font:500 13px var(--sans);cursor:pointer;text-align:left}
tr.pa-in-pack{background:var(--accent-soft)}

/* Focused network workspace: map first, concise portfolio signal, then detail. */
main > #view-map.wide,main > #view-portfolio.wide{max-width:1360px}
@media(min-width:1181px){
  .pf-wrap{grid-template-columns:minmax(0,1fr) 358px;min-height:720px}
  .pf-mapbox{min-height:720px}
  .pf-side{max-height:820px}
}
.pf-side{gap:14px}
.pf-stats{display:block}
.pf-risk-hero{display:grid;gap:3px;padding:16px 17px;border-radius:var(--r2);background:var(--accent-soft);border:1px solid var(--line)}
.pf-risk-hero .field-label{margin:0}
.pf-risk-hero strong{font:650 clamp(29px,3vw,38px)/1.05 var(--display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--fg)}
.pf-risk-hero > span:last-child{font-size:12px;color:var(--mut)}
.pf-stats-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:9px}
.pf-stats-compact .metric{min-height:0;padding:9px 11px;border:1px solid var(--line-soft);border-radius:var(--r1);background:var(--card-2)}
.pf-stats-compact .metric b{font-size:15px}
.pf-stats-compact .metric span{font-size:11px;line-height:1.35}
.pf-stats-more{margin-top:8px;font-size:12px;color:var(--mut)}
.pf-stats-more summary{cursor:pointer;color:var(--accent);font-weight:600}
.pf-stats-more .pf-stats-compact{margin-top:8px}
.pf-stats .pf-go-wide{margin-top:12px}
.pf-stats .pf-go-wide .go{width:100%}
.pf-asset-detail{gap:11px;padding:17px;box-shadow:var(--sh-1)}
.pf-at-card > .pf-asset-detail{margin:14px 0 16px;scroll-margin-top:24px}
@media(min-width:720px){
  .pf-at-card > .pf-asset-detail{grid-template-columns:minmax(0,1fr) minmax(260px,350px);column-gap:24px}
  .pf-at-card .pf-detail-head,.pf-at-card .pf-asset-actions{grid-column:1/-1}
  .pf-at-card .pf-asset-risk{grid-column:2;grid-row:2/5;align-self:stretch}
  .pf-at-card .pf-asset-risk > div{align-content:center}
  .pf-at-card .pf-asset-detail h3,.pf-at-card .pf-asset-location,.pf-at-card .pf-dl,.pf-at-card .pf-asset-note{grid-column:1}
}
.pf-asset-detail h3{font-size:18px;letter-spacing:-.02em}
.pf-asset-detail .pf-asset-location{font-size:12px}
.pf-asset-risk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.pf-asset-risk > div{display:grid;align-content:start;gap:3px;padding:12px;border-radius:var(--r1);background:var(--accent-soft)}
.pf-asset-risk span{font-size:11px;color:var(--mut)}
.pf-asset-risk strong{font:650 21px/1.15 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pf-asset-risk small{font-size:10.5px;line-height:1.3;color:var(--mut)}
.pf-asset-actions{display:flex;flex-wrap:wrap;gap:7px}
.pf-asset-actions .go,.pf-asset-actions .ebtn{margin:0;flex:1 1 145px}
.pf-at-card{scroll-margin-top:20px}
.pf-at tbody tr.asset-selected th{color:var(--accent)}
.pf-asset-select{display:block;border:0;background:none;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.pf-asset-select:hover{text-decoration:underline;text-underline-offset:2px}
.pf-asset-select:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.pa-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pa-context-note{display:flex;align-items:center;gap:9px;margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--mut)}
.pa-context-note .pf-demo-tag{flex:0 0 auto}
.pa-kpis .kpi{max-width:none;min-height:120px;border-radius:var(--r2)}
.pa-kpis .kpi:nth-child(3){background:var(--accent-soft);border-color:var(--accent);grid-column:span 1}
.pa-kpis .kpi:nth-child(3) .k-val{font-size:34px;color:var(--fg)}
.pa-kpis .kpi:nth-child(n+5){min-height:90px;background:var(--card-2)}
@media(max-width:900px){.pa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pa-kpis{grid-template-columns:1fr}.pf-asset-risk{grid-template-columns:1fr}}

/* Read-only model inspection. 3D is created only after the user asks for it. */
.tx-dialog{width:min(1320px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);padding:0;
  border:1px solid var(--line);border-radius:18px;color:var(--fg);background:var(--card);box-shadow:var(--sh-pop);overflow:auto}
.tx-dialog::backdrop{background:rgba(5,14,23,.78);backdrop-filter:blur(5px)}
.tx-shell{display:grid;grid-template-rows:auto minmax(0,1fr)}
.tx-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.tx-head h2{font:650 24px/1.15 var(--display);letter-spacing:-.03em;margin:4px 0}
.tx-head p{margin:0;color:var(--mut);font-size:12.5px;overflow-wrap:anywhere}
.tx-eyebrow,.tx-label{font:700 10px/1.4 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
.tx-close{flex:0 0 auto;margin:0}
.tx-body{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:min(680px,calc(100vh - 142px))}
.tx-stage{position:relative;min-height:460px;overflow:hidden;background:#162432}
.tx-canvas{position:absolute;inset:0}
.tx-canvas canvas{display:block;width:100%;height:100%}
.tx-toolbar{position:absolute;z-index:2;top:14px;left:14px;display:flex;gap:3px;padding:3px;border-radius:9px;background:rgba(9,22,32,.88);border:1px solid rgba(255,255,255,.22)}
.tx-toolbar button{padding:7px 11px;border:0;border-radius:6px;background:transparent;color:#e5eff5;font:600 12px var(--sans);cursor:pointer}
.tx-toolbar button[aria-pressed="true"]{background:#e8f3f9;color:#102638}
.tx-status{position:absolute;z-index:2;left:14px;top:58px;max-width:calc(100% - 28px);padding:7px 10px;border-radius:7px;background:rgba(9,22,32,.78);color:#f2f8fb;font-size:12px}
.tx-status-idle{display:none}
.tx-stage-foot{position:absolute;z-index:2;left:14px;bottom:12px;max-width:calc(100% - 28px);padding:7px 9px;border-radius:7px;background:rgba(9,22,32,.72);color:#e4edf2;font-size:11px}
.tx-evidence{padding:20px;overflow:auto;border-left:1px solid var(--line-soft)}
.tx-evidence h3{font:650 18px/1.2 var(--mono);margin:5px 0 8px;overflow-wrap:anywhere}
.tx-evidence-lede,.tx-scope{font-size:12px;line-height:1.5;color:var(--mut)}
.tx-evidence-lede{margin:0 0 16px}
.tx-facts{margin:0;display:grid;gap:0}
.tx-facts > div{padding:10px 0;border-top:1px solid var(--line-soft)}
.tx-facts dt{font-size:11px;color:var(--mut)}
.tx-facts dd{margin:3px 0 0;font:650 16px/1.3 var(--display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tx-facts dd small{display:block;font:400 11px/1.3 var(--sans);color:var(--mut)}
.tx-parts-label{display:block;margin:17px 0 8px}
.tx-parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.tx-parts button{padding:9px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card-2);color:var(--fg);font:600 11.5px var(--sans);cursor:pointer}
.tx-parts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.tx-scope{padding:10px 12px;background:var(--inset);border-radius:8px;margin:14px 0}
.tx-one-line{width:100%;margin:0}
.tx-dialog button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(min-width:841px){.tx-shell{height:min(820px,calc(100dvh - 34px))}.tx-body,.tx-stage{min-height:0}.tx-evidence{min-height:0}}
@media(max-width:840px){.tx-body{grid-template-columns:1fr}.tx-stage{min-height:420px}.tx-evidence{border-left:0;border-top:1px solid var(--line-soft)}}
@media(max-width:540px){.tx-dialog{width:calc(100vw - 12px);max-height:calc(100vh - 12px)}.tx-stage{min-height:320px}.tx-head{padding:14px}.tx-evidence{padding:16px}}
.pa-foot{margin:8px 0 0;font-size:12.5px}
.ebtn.danger{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,var(--line))}

.pm-levels{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.pm-lv{flex:1 1 220px;display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r2);
  background:var(--inset);border:1px solid var(--line-soft)}
.pm-lv b{font-size:17px;letter-spacing:-.01em}
.pm-lv .dim{font-size:12.5px}
.pm-lv .go{align-self:flex-start;margin:6px 0 0}
.pm-arrow{align-self:center;color:var(--dim);font-size:24px}
@media (max-width:860px){.pm-arrow{display:none}}
.pm-h{margin:6px 0 10px;font-size:15px}
.pm-list{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.pm-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--r2);border:1px solid var(--line);background:var(--card)}
.pm-ch{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.pm-ch b{font-size:15px}
.pm-card p{margin:0;font-size:13px}
.pm-facts{color:var(--mut);font-variant-numeric:tabular-nums}
.pm-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.pm-acts .go,.pm-acts .ebtn{margin:0}
.pm-confirm{padding:8px 10px;border-radius:var(--r1);background:color-mix(in srgb,var(--err) 10%,var(--card));font-size:13px}
.pm-confirm .ebtn{margin:0 0 0 6px}
.pm-edit{border-color:var(--accent)}
.pm-form{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:6px 0 14px}
.pm-wide{flex:1 1 280px}
.pm-wide input{flex:1}
.pm-vis{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;border:0;padding:0;margin:0;font-size:13px}
.pm-vis legend{float:left;margin-right:10px}
.pm-start{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pm-start .ebtn{margin:0}
.pm-pick{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px}
@media (max-width:980px){.pm-pick{grid-template-columns:1fr}}
.pm-lists{display:flex;flex-direction:column;gap:8px;min-width:0}
.pm-q{width:100%}
.pm-listbox{max-height:440px;overflow:auto;border:1px solid var(--line-soft);border-radius:var(--r2);padding:6px}
.pm-gh{margin:8px 4px 4px}
.pm-item{display:flex;gap:10px;align-items:flex-start;padding:6px;border-radius:var(--r1);cursor:pointer}
.pm-item:hover{background:var(--hover)}
.pm-item input{margin-top:3px;width:auto}
.pm-item span{display:flex;flex-direction:column;font-size:13px;min-width:0}
.pm-item b{font-weight:500}
.pm-item .dim{font-size:12px}
.pm-map{height:min(60vh,500px);border-radius:var(--r2);border:1px solid var(--line);background:#0e1319}
.pm-maphint{margin:6px 0 0;font-size:12.5px}
.pm-foot{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft)}
.pm-foot .go,.pm-foot .ebtn{margin:0}
.pm-summary{flex:1 1 360px;font-size:13px;color:var(--mut)}
.pm-summary b{color:var(--fg);font-variant-numeric:tabular-nums}
#pm-msg.err{color:var(--err)}
#pm-body .linkish{border:0;background:none;padding:0;color:var(--accent);font:inherit;cursor:pointer;text-decoration:underline}
.fe-legend .pf-line{box-shadow:inset 0 0 0 1px var(--line)}
.pf-tabs button[aria-selected="true"] .dim{color:inherit;opacity:.85}

/* Site → assigned schematic: one continuous visual handoff to the real editor. */
.site-loading{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:2000;padding:12px 20px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--fg);box-shadow:0 12px 40px #0003;font-weight:600}
.site-flowbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;margin:0 0 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;background:var(--card)}
.site-flowbar strong,.site-flowbar small{display:block}.site-flowbar strong{font-size:15px;margin:3px 0}.site-flowbar small{color:var(--mut);font-size:12px}.site-flowbar .ebtn{flex-shrink:0;margin:0}
.site-inspect-action{display:grid;gap:7px;padding:12px;margin:0 0 18px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--line)}
.site-inspect-action .go{margin:0;justify-content:center}.site-inspect-action small{font-size:11px;color:var(--mut)}
#ed-svg .ednode:focus-visible{outline:none}#ed-svg .ednode:focus-visible .nring{stroke:var(--accent);stroke-width:4}
.pf-asset-actions small{font-size:11px;color:var(--mut);max-width:260px}
.site-transition{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--bg);color:var(--fg);overflow:hidden}
.site-transition::backdrop{background:transparent}
.site-return-hold{position:fixed;inset:0;z-index:2500;background:var(--bg);pointer-events:none}
.site-map-layer{position:absolute;overflow:hidden;border-radius:10px;pointer-events:none}
.site-map-copy{pointer-events:none!important}
.site-blueprint{position:absolute;inset:0;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;opacity:0}
.site-drawing{position:absolute;transform-origin:50% 50%;pointer-events:none}
.site-drawing svg{display:block;overflow:visible;background:transparent}
.site-transition-head{position:absolute;z-index:2;top:24px;left:32px;right:32px;display:flex;align-items:start;justify-content:space-between;gap:16px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px #0001}
.site-transition-head strong{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;margin:4px 0}
.site-transition-head p{margin:0;font-size:13px;color:var(--mut)}
.site-transition-head .ebtn{margin:0;white-space:nowrap}
.site-transition footer{position:absolute;z-index:2;bottom:20px;left:32px;right:32px;padding:10px 14px;background:var(--card);border-radius:8px;font-size:11px;color:var(--mut)}
@media(max-width:700px){.site-flowbar{align-items:start;flex-direction:column}.site-transition-head{left:12px;right:12px;top:12px;padding:12px}.site-transition-head strong{font-size:17px}.site-transition-head .field-label{font-size:9px}.site-transition footer{left:12px;right:12px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.site-loading{transition:none}.tx-dialog{animation:none}}

/* The "local workspace refresh" overrides that ended this file (hard-coded navy, 9-11px
   type) were replaced by the tokenised design system in assets/pra-ui.css. */