/* ==========================================================================
   TAQA Transmission - Balanced Scorecard
   Design system. Operations console, not a marketing site: structure is
   carried by hairlines and background steps rather than shadow and radius.
   ========================================================================== */

/* --- type ---------------------------------------------------------------
   IBM Plex is a deliberate choice, not a default: this is an IBM Planning
   Analytics front end, and Plex Mono gives tabular figures, which matter when
   a column of targets has to line up. Fallbacks are real, not decorative.  */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;450;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* structural ink, anchored on the TAQA navy */
  --navy:#0F2B46; --navy-2:#1A3E5F; --navy-3:#27567E;
  --ink:#0E1D2B; --ink-2:#3A4E60; --ink-3:#63788C; --mut:#8296A8;

  /* orange is an accent, used once per view, never as decoration */
  --accent:#D8551A; --accent-weak:#FBEDE5;

  /* surfaces: three steps, no gradients */
  --ground:#EFF2F5; --surface:#FFFFFF; --sunk:#F5F7F9; --rail:#0F2B46;
  --line:#D5DDE5; --line-2:#BFCBD6; --line-strong:#93A5B5;

  /* status. Desaturated on purpose: a wall of pure red and green reads as a
     toy. These hold up next to each other and in print.                     */
  --ok:#1F7A4D; --ok-bg:#E6F1EA; --ok-line:#A8CFBB;
  --watch:#9A6B10; --watch-bg:#F7EFDC; --watch-line:#DDC287;
  --risk:#A8371F; --risk-bg:#F7E7E2; --risk-line:#DDAA9B;
  --shut:#5E7387; --shut-bg:#EAEEF2; --shut-line:#BCC8D3;

  --focus:#27567E;
  --pri-bg:#0F2B46; --pri-bg-h:#1A3E5F; --pri-fg:#FFFFFF;
  --radius:3px;
  --rail-w:220px;
  --shadow-1:0 1px 0 rgba(15,43,70,.05);
  --shadow-2:0 2px 6px rgba(15,43,70,.08);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#0A1826; --navy-2:#16334E; --navy-3:#2E6089;
    --ink:#E7EEF4; --ink-2:#B4C4D2; --ink-3:#8598A9; --mut:#6E8296;
    --accent:#FF7A3D; --accent-weak:#3A2115;
    --ground:#0B141D; --surface:#121F2B; --sunk:#0E1922; --rail:#08131E;
    --line:#22333F; --line-2:#2D4152; --line-strong:#3E566B;
    --ok:#57BC8A; --ok-bg:#10271C; --ok-line:#1F4C36;
    --watch:#D6A03F; --watch-bg:#2A2213; --watch-line:#4E3F1C;
    --risk:#E07A60; --risk-bg:#2B1713; --risk-line:#54291F;
    --shut:#8FA3B5; --shut-bg:#182531; --shut-line:#2B3D4C;
    --focus:#5B9BD1;
    --pri-bg:#2E6089; --pri-bg-h:#3A76A6; --pri-fg:#FFFFFF;
    --shadow-1:0 1px 0 rgba(0,0,0,.3);
    --shadow-2:0 2px 8px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --navy:#0A1826; --navy-2:#16334E; --navy-3:#2E6089;
  --ink:#E7EEF4; --ink-2:#B4C4D2; --ink-3:#8598A9; --mut:#6E8296;
  --accent:#FF7A3D; --accent-weak:#3A2115;
  --ground:#0B141D; --surface:#121F2B; --sunk:#0E1922; --rail:#08131E;
  --line:#22333F; --line-2:#2D4152; --line-strong:#3E566B;
  --ok:#57BC8A; --ok-bg:#10271C; --ok-line:#1F4C36;
  --watch:#D6A03F; --watch-bg:#2A2213; --watch-line:#4E3F1C;
  --risk:#E07A60; --risk-bg:#2B1713; --risk-line:#54291F;
  --shut:#8FA3B5; --shut-bg:#182531; --shut-line:#2B3D4C;
  --focus:#5B9BD1;
  --pri-bg:#2E6089; --pri-bg-h:#3A76A6; --pri-fg:#FFFFFF;
  --shadow-1:0 1px 0 rgba(0,0,0,.3);
  --shadow-2:0 2px 8px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans); font-size:14px; line-height:1.5;
  background:var(--ground); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
a{color:var(--navy-3);text-decoration:none}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
svg.i{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
svg.i.sm{width:13px;height:13px}
svg.i.lg{width:18px;height:18px}

/* ==========================================================================
   SHELL: one bar, then the dashboard. Each page is opened on its own, so
   there is no cross-page navigation to carry and the content gets the height.
   ========================================================================== */
.app{min-height:100vh;display:flex;flex-direction:column}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;padding:10px 22px;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-1)}
.brandblock{display:flex;align-items:center;gap:11px;min-width:0}
.mark{width:30px;height:30px;flex:none;border:1.5px solid var(--accent);background:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:9.5px;
  letter-spacing:.02em;color:#fff;white-space:nowrap;line-height:1;border-radius:2px}
.mark b{color:var(--accent);font-weight:700}
.titles{min-width:0}
.titles h1{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titles .lede{margin:0;font-size:11.5px;color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.bar .grow{flex:1 1 20px}

/* context selectors sit inline, labelled above so the row stays shallow */
.ctx{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.ctx .f{display:grid;gap:2px}
.ctx label{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.ctx select{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:4px 26px 4px 8px;cursor:pointer;min-width:120px;
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
                   linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 52%, calc(100% - 9px) 52%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat}
.ctx select:hover{border-color:var(--line-strong)}

.stamp{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
  color:var(--ink-3);white-space:nowrap}
.stamp .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.stamp .dot.stale{background:var(--watch)}
.stamp .dot.dead{background:var(--risk)}

.baracts{display:flex;gap:6px}
.iconbtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--ink-2);font-family:var(--sans);font-size:12px;
  font-weight:500;padding:5px 9px;border-radius:var(--radius);cursor:pointer}
.iconbtn:hover{border-color:var(--line-strong);color:var(--ink)}
.iconbtn.busy{opacity:.5;pointer-events:none}

.content{padding:18px 22px 60px;flex:1}

/* progress: a 2px hairline, no glow */
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:99;
  background:var(--accent);transition:width .2s linear,opacity .35s ease}
#prog.done{opacity:0}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.panel-hd{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--sunk)}
.panel-hd h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
.panel-hd .grow{flex:1}
.panel-bd{padding:14px}

.eyebrow{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.empty{padding:22px 14px;text-align:center;color:var(--ink-3);font-size:13px}

.btn{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  padding:6px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--line-strong);color:var(--ink)}
.btn.pri{background:var(--pri-bg);border-color:var(--pri-bg);color:var(--pri-fg)}
.btn.pri:hover{background:var(--pri-bg-h);border-color:var(--pri-bg-h)}
.btn.warn{color:var(--risk);border-color:var(--risk-line)}
.btn.warn:hover{background:var(--risk-bg)}
.btn:disabled{opacity:.45;pointer-events:none}
.btn.sm{font-size:11.5px;padding:4px 8px}
.btn.on{background:var(--sunk);border-color:var(--accent);color:var(--ink);font-weight:600}
.btn.on:hover{background:var(--sunk);border-color:var(--accent);color:var(--ink)}

/* status chips: a hairline and a tint, no pills */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:2px;border:1px solid;white-space:nowrap;letter-spacing:.01em}
.chip.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.chip.watch{color:var(--watch);background:var(--watch-bg);border-color:var(--watch-line)}
.chip.risk{color:var(--risk);background:var(--risk-bg);border-color:var(--risk-line)}
.chip.shut{color:var(--shut);background:var(--shut-bg);border-color:var(--shut-line)}
.chip.flat{color:var(--ink-3);background:var(--sunk);border-color:var(--line)}
/* A KPI with no target or no actual. Deliberately grey and hatched rather than
   any of the three traffic-light colours: it has not been judged, and picking
   a colour for it would be inventing an answer. */
.chip.none{color:var(--ink-3);background:var(--sunk);border-color:var(--line-2);
  border-style:dashed}
.t.none,.val.none{color:var(--ink-3)}

/* a 3px status spine reads faster than a coloured dot at row scale */
.spine{width:3px;align-self:stretch;flex:none;border-radius:1px;background:var(--line-2)}
.spine.ok{background:var(--ok)} .spine.watch{background:var(--watch)}
.spine.risk{background:var(--risk)} .spine.shut{background:var(--shut)}

/* ==========================================================================
   TABLES: the workhorse. Hairlines, tabular numerals, right-aligned figures.
   ========================================================================== */
.tw{overflow-x:auto}
table.dt{border-collapse:collapse;width:100%;font-size:13px}
table.dt th{text-align:left;font-size:10px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding:8px 12px;
  border-bottom:1px solid var(--line-2);background:var(--sunk);white-space:nowrap;position:sticky;top:0;z-index:1}
table.dt td{padding:8px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
table.dt tr:last-child td{border-bottom:0}
table.dt tbody tr:hover td{background:var(--sunk)}
table.dt td.n,table.dt th.n{text-align:right;font-family:var(--mono);
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.dt td.k{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
table.dt td.strong{color:var(--ink);font-weight:500}
table.dt tr.group td{background:var(--sunk);font-weight:600;color:var(--ink);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
table.dt td.bar{width:124px;min-width:124px}

/* ==========================================================================
   TARGET GRID
   Three cell states, and they carry meaning rather than decoration: a carried
   number is muted because it is a starting point, a number you set is solid
   because it is a decision, and a projected number is marked because it came
   from one of your decisions rather than from you. Projecting overwrites the
   first and never the second, so the colours tell you what will move.
   ========================================================================== */
table.tgrid th.yr{text-align:center;border-bottom:1px solid var(--line);
  color:var(--ink-3);letter-spacing:.14em}
table.tgrid td{padding:6px 8px;vertical-align:middle}
table.tgrid td.n{padding:5px 6px}
input.tc{width:76px;text-align:right;font-family:var(--mono);font-size:12.5px;
  padding:5px 7px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);color:var(--ink-3);font-weight:400}
input.tc:focus{border-color:var(--focus);outline:none;color:var(--ink)}
input.tc.inh{color:var(--ink-3);background:var(--sunk);border-style:dashed}
input.tc.typed{color:var(--ink);font-weight:600;border-color:var(--line-strong);
  background:var(--surface)}
input.tc.proj{color:var(--ink-2);background:var(--accent-weak);
  border-color:var(--accent);border-style:dotted}
select.mini{font-family:var(--sans);font-size:11.5px;color:var(--ink-2);
  padding:4px 6px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);max-width:132px}
select.mini:focus{border-color:var(--focus);outline:none}

.tlegend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;
  margin:14px 0 2px;padding-top:12px;border-top:1px solid var(--line)}
.tlg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-3)}
.tlg b{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:600}
.tlg i{width:11px;height:11px;border-radius:2px;display:inline-block;
  border:1px solid var(--line-2);background:var(--sunk)}
.tlg.inh i{background:var(--sunk);border-style:dashed;border-color:var(--line-strong)}
.tlg.typed i{background:var(--ink);border-color:var(--ink)}
.tlg.proj i{background:var(--accent-weak);border-color:var(--accent);border-style:dotted}
.tlg.none i{background:transparent;border-color:var(--line-2)}
/* The bar needs its own width. A div with no intrinsic width lets the auto
   table layout collapse the column to its borders, which is exactly what it
   did: a 4px track that read as a hairline rather than a bar. */
.minibar{width:104px;height:7px;background:var(--sunk);border:1px solid var(--line-2);
  border-radius:1px;overflow:hidden;position:relative}
.minibar i{display:block;height:100%;background:var(--navy-3);min-width:2px}
.minibar i.over{background:var(--risk)}
/* the 100% mark, so an over-allocated bar is readable as 'past the line' */
.minibar::after{content:"";position:absolute;inset:0 0 0 auto;width:1px;background:var(--line-strong);opacity:.5}

/* ==========================================================================
   VISION
   Sits above the perspectives, because that is the reading order of a strategy
   map: what the plan is for, then how it gets there. Every colour comes from
   the token set, so it follows the theme like everything else.
   ========================================================================== */
.vision{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:14px 18px 15px;margin-bottom:14px}
.vision-lbl{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px}
.vision-txt{margin:0;font-size:17px;line-height:1.45;font-weight:450;color:var(--ink);
  max-width:78ch;text-wrap:balance}
.vision-sub{margin-top:8px;font-size:11.5px;color:var(--ink-3);
  font-family:var(--mono);letter-spacing:.01em}
@media (max-width:640px){.vision-txt{font-size:15.5px}}

/* ==========================================================================
   METRIC STRIP
   ========================================================================== */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
  margin-bottom:18px;overflow:hidden}
.metric{padding:12px 15px;border-right:1px solid var(--line)}
.metric:last-child{border-right:0}
.metric .lbl{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);margin-bottom:5px}
.metric .val{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--ink);
  line-height:1.1;letter-spacing:-.02em}
.metric .val.text{font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.25;
  letter-spacing:-.005em}
.metric .val.ok{color:var(--ok)} .metric .val.watch{color:var(--watch)}
.metric .val.risk{color:var(--risk)}
.metric .sub{font-size:11px;color:var(--ink-3);margin-top:3px}

/* ==========================================================================
   STRATEGY MAP
   ========================================================================== */
.mapwrap{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
.mapcanvas{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:0;overflow:hidden}
#arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.band{display:grid;grid-template-columns:132px 1fr;border-bottom:1px solid var(--line);position:relative;z-index:1}
.band:last-child{border-bottom:0}
.band-lbl{padding:14px 12px;border-right:1px solid var(--line);background:var(--sunk)}
.band-lbl .t{font-size:12px;font-weight:600;color:var(--ink);line-height:1.25}
.band-lbl .s{font-size:10.5px;color:var(--ink-3);margin-top:3px}
.band-nodes{padding:12px;display:flex;flex-wrap:wrap;gap:9px;align-content:flex-start}
.onode{position:relative;width:172px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:9px 10px 8px;cursor:pointer;display:flex;gap:8px}
.onode:hover{border-color:var(--line-strong)}
.onode.sel{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.onode.dim{opacity:.4}
.onode .body{min-width:0;flex:1}
.onode .code{font-family:var(--mono);font-size:10px;color:var(--mut);letter-spacing:.04em}
.onode .ttl{font-size:12px;font-weight:500;color:var(--ink);line-height:1.3;margin:2px 0 5px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.onode .foot{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-3)}

.detail{position:sticky;top:16px}
.detail .who{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.detail h3{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.sechd{font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mut);margin:16px 0 7px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.sechd:first-child{margin-top:0}
.kpirow{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--line)}
.kpirow:last-child{border-bottom:0}
.kpirow .body{flex:1;min-width:0}
.kpirow .nm{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.3}
.kpirow .meta{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.kpirow .fig{text-align:right;white-space:nowrap}
.kpirow .fig .v{font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink)}
.kpirow .fig .t{font-size:10px;color:var(--ink-3);margin-top:1px}
.initrow{display:flex;gap:7px;align-items:baseline;padding:5px 0;font-size:12.5px;color:var(--ink-2)}
.restricted{display:flex;gap:9px;padding:11px;background:var(--shut-bg);
  border:1px solid var(--shut-line);border-radius:var(--radius);font-size:12px;color:var(--ink-2)}

/* ==========================================================================
   ORG TREE
   ========================================================================== */
.sc{display:grid;grid-template-columns:262px 1fr;gap:16px;align-items:start}
.tree{position:sticky;top:16px}
.tnode{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:7px 10px;background:none;border:0;border-left:2px solid transparent;
  cursor:pointer;font-family:var(--sans);font-size:12.5px;color:var(--ink-2)}
.tnode:hover{background:var(--sunk)}
.tnode.on{background:var(--sunk);border-left-color:var(--accent);color:var(--ink);font-weight:600}
.tnode:disabled{opacity:.5;cursor:not-allowed}
.tnode .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tnode .rag{display:flex;gap:1px;font-family:var(--mono);font-size:10px;flex:none}
.tnode .rag i{font-style:normal;min-width:16px;text-align:right;padding:0 2px;
  border-right:1px solid var(--line)}
.tnode .rag i:last-child{border-right:0}
.tkids{margin-left:14px;border-left:1px solid var(--line)}

.quads{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quad{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.quad-hd{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--sunk);
  display:flex;align-items:baseline;gap:8px}
.quad-hd .t{font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.03em}
.quad-hd .s{font-size:10px;color:var(--mut)}
.objblk{border-bottom:1px solid var(--line)}
.objblk:last-child{border-bottom:0}
.objhd{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;background:none;
  border:0;width:100%;text-align:left;font-family:var(--sans)}
.objhd:hover{background:var(--sunk)}
.objhd svg.i{transition:transform .12s ease}
.objhd.open svg.i{transform:rotate(90deg)}
.chev svg.i{transition:transform .12s ease}
tr.group.open .chev svg.i{transform:rotate(90deg)}
.objhd .code{font-family:var(--mono);font-size:10.5px;color:var(--mut)}
.objhd .t{flex:1;font-size:12.5px;font-weight:500;color:var(--ink);min-width:0}
.objkpis{padding:0 12px 8px}

/* ==========================================================================
   FORMS / MODAL
   ========================================================================== */
.field{margin-bottom:12px}
.field label{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:13px;
  color:var(--ink);background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:7px 9px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--focus);outline:none}
.field .hint{font-size:11px;color:var(--ink-3);margin-top:3px}

.scrim{position:fixed;inset:0;background:rgba(14,29,43,.5);display:grid;place-items:center;z-index:60;padding:20px}
.modal{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius);
  width:min(520px,100%);max-height:85vh;overflow:auto;box-shadow:var(--shadow-2)}
.modal-hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.modal-hd h3{margin:0;font-size:14px;font-weight:600}
.modal-bd{padding:16px}
.modal-ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--sunk)}

/* Work in progress inside a dialog. Approving chains five TI processes and
   takes seconds, so the button has to say so rather than sitting there looking
   unclicked. While busy the scrim ignores click-away, because abandoning a
   dialog does not abandon the work behind it. */
.scrim.busy{cursor:progress}
.scrim.busy .modal{pointer-events:none}
.scrim.busy .modal-ft{pointer-events:auto}
.btn:disabled{opacity:.55;cursor:default}
.spin{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .spin{animation:none;border-right-color:currentColor;opacity:.5}
}
.modal-err{display:none;margin-top:14px;padding:11px 13px;border-radius:var(--radius);
  background:var(--risk-bg);border:1px solid var(--risk-line);color:var(--ink);
  font-size:13px;line-height:1.5}
.modal-err.on{display:block}
.modal-err b{display:block;color:var(--risk);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px}

/* A row whose decision is being carried out, so the page behind the dialog
   shows something too. */
tr.working td{opacity:.55}
tr.working td:last-child::after{content:"working";font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--watch)}

.toast{position:fixed;right:20px;bottom:20px;z-index:80;background:var(--navy);color:#fff;
  border-radius:var(--radius);padding:10px 14px;font-size:12.5px;box-shadow:var(--shadow-2);
  display:flex;align-items:center;gap:8px;max-width:380px}
.toast.err{background:var(--risk)}

.note{padding:10px 12px;border-left:2px solid var(--line-2);background:var(--sunk);
  font-size:12px;color:var(--ink-2);border-radius:0 var(--radius) var(--radius) 0}
.note.warn{border-left-color:var(--watch);background:var(--watch-bg)}
.note.risk{border-left-color:var(--risk);background:var(--risk-bg)}

@media (max-width:1180px){
  .mapwrap,.sc{grid-template-columns:1fr}
  .detail,.tree{position:static}
  .quads{grid-template-columns:1fr}
}
@media (max-width:820px){
  .titles .lede{display:none}
  .bar{padding:9px 14px;gap:10px}
  .ctx{order:3;flex:1 0 100%}
  .ctx select{min-width:0;width:100%}
  .ctx .f{flex:1}
  .content{padding-left:14px;padding-right:14px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* ==========================================================================
   LOAD SCREEN
   Shown once, on the first model read of a session. Later refreshes keep the
   2px hairline: a full overlay on every filter change is an interruption, not
   feedback. The step list is the server's own build legs in plain words, so a
   slow load tells you which leg is slow instead of just spinning.
   ========================================================================== */
#loadscreen{position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;background:var(--ground);
  opacity:1;transition:opacity .28s ease}
#loadscreen.on{display:flex}
#loadscreen.out{opacity:0;pointer-events:none}
#loadscreen .ls-box{width:min(420px,88vw)}
#loadscreen .ls-mark{display:flex;align-items:center;gap:10px;margin-bottom:22px}
#loadscreen .ls-logo{width:34px;height:34px;border-radius:var(--radius);
  background:var(--pri-bg);color:var(--pri-fg);font:600 12px/34px var(--mono);
  text-align:center;letter-spacing:.5px}
#loadscreen .ls-title{font:600 15px/1.2 var(--sans);color:var(--ink)}
#loadscreen .ls-sub{font:400 12px/1.4 var(--sans);color:var(--ink-3);margin-top:2px}
#loadscreen .ls-track{height:2px;background:var(--line);overflow:hidden;margin-bottom:18px}
#loadscreen .ls-fill{height:100%;width:0;background:var(--accent);
  transition:width .35s cubic-bezier(.4,0,.2,1)}
#loadscreen .ls-steps{list-style:none;margin:0;padding:0}
#loadscreen .ls-steps li{display:flex;align-items:center;gap:9px;
  font:400 12.5px/1.9 var(--sans);color:var(--mut);
  transition:color .2s ease}
#loadscreen .ls-steps li .tick{width:13px;height:13px;flex:none;position:relative}
#loadscreen .ls-steps li .tick::before{content:"";position:absolute;inset:4px;
  border-radius:50%;background:var(--line-2)}
#loadscreen .ls-steps li.now{color:var(--ink)}
#loadscreen .ls-steps li.now .tick::before{inset:3px;background:var(--accent);
  animation:lsPulse 1s ease-in-out infinite}
#loadscreen .ls-steps li.done{color:var(--ink-3)}
#loadscreen .ls-steps li.done .tick::before{inset:4px;background:var(--ok)}
@keyframes lsPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
@media (prefers-reduced-motion:reduce){
  #loadscreen .ls-steps li.now .tick::before{animation:none}
  #loadscreen .ls-fill{transition:none}
}
#loadscreen .ls-err{margin-top:16px;padding:11px 13px;border:1px solid var(--risk-line);
  background:var(--risk-bg);color:var(--risk);font:400 12.5px/1.5 var(--sans)}
#loadscreen .ls-err b{display:block;font-weight:600;margin-bottom:3px}
#loadscreen .ls-retry{margin-top:11px}