/* =============================================================================
   Contemporary network structures in organizations — deck
   Sandia / Graystone family. One navy ground; every enclosure is a line with a
   transparent interior. Within a beat, geometry is laid out once; phases change
   emphasis and run tokens. Northline Systems is fictional; all data synthetic.
   ============================================================================= */
@font-face{font-family:"Geist Variable";font-style:normal;font-weight:100 900;font-display:block;
  src:url(fonts/geist-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Geist Variable";font-style:italic;font-weight:100 900;font-display:block;
  src:url(fonts/geist-latin-wght-italic.woff2) format("woff2-variations")}
@font-face{font-family:"Geist Mono Variable";font-style:normal;font-weight:100 900;font-display:block;
  src:url(fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations")}

:root{
  --bg:#071A2B; --deep:#051521;
  --text:#F6FAFD; --t2:#C6D3DE; --muted:#9FB2C1;
  --mint:#6FD8BE; --node:#D8F2FF; --edge:#6FA79B; --warm:#F2C94C;
  --rule:#ffffff24; --rule-2:#ffffff42;
  --sans:"Geist Variable",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono Variable",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* functions: validated categorical order on the navy ground (dataviz validator, dark mode) */
  --fPE:#5399d1; --fCS:#bd853f; --fSC:#9262b3; --fOP:#71a255; --fCO:#b05457;
  --halo:0 0 7px rgba(111,216,190,.26);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deep);overflow:hidden}
body{font-family:var(--sans);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

#fit{position:fixed;inset:0;display:grid;place-items:center;background:var(--deep)}
#stage{position:relative;width:1920px;height:1080px;flex:none;background:var(--bg);overflow:hidden;
  transform:scale(var(--k,1));transform-origin:center center}

/* ---- header ------------------------------------------------------------- */
.hd{position:absolute;left:76px;right:76px;top:56px;min-height:120px}
.hd__beat{margin:0 0 12px;font-family:var(--mono);font-size:15px;letter-spacing:.19em;text-transform:uppercase;color:var(--mint);opacity:.85}
.hd__title--long{font-size:40px!important}
.hd__title{margin:0;font-size:48px;line-height:1.1;font-weight:600;letter-spacing:-.015em;max-width:1500px}
.hd__lens{display:none;margin:14px 0 0;font-family:var(--mono);font-size:23px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  transition:opacity .45s var(--ease)}
.hd__lens b{font-weight:400;color:var(--mint);opacity:.9;margin-right:14px}
.hd__lens span + span::before{content:'·';margin:0 12px;color:var(--mint);opacity:.6}

/* ---- field -------------------------------------------------------------- */
#field{position:absolute;left:76px;top:212px;width:1768px;height:800px;overflow:visible}
.pg{position:absolute;inset:0}
.pg[hidden]{display:none}

/* ---- footer + progress --------------------------------------------------- */
.ft{position:absolute;left:76px;right:300px;bottom:22px;font-family:var(--mono);font-size:14px;letter-spacing:.08em;color:var(--muted);opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft__syn{color:var(--t2)}
.ft__src::before{content:'·';margin:0 12px;color:var(--mint);opacity:.6}
.ft__src:empty{display:none}
#prog{position:absolute;right:76px;bottom:28px;display:flex;gap:6px}
#prog i{display:block;width:10px;height:2px;background:var(--rule-2)}
#prog i.is-on{background:var(--mint)}

/* ---- the opening / closing composition ---------------------------------- */
.op__over{margin:0 0 24px;font-family:var(--mono);font-size:17px;letter-spacing:.19em;text-transform:uppercase;color:var(--mint);opacity:.85}
.op__title{margin:0;font-size:66px;line-height:1.04;font-weight:600;letter-spacing:-.02em}
.op__sub{margin:22px 0 0;font-size:28px;line-height:1.3;color:var(--t2);font-weight:450}
.op__name{margin:34px 0 0;font-size:30px;font-weight:500}
.op__id{margin:6px 0 0;font-family:var(--mono);font-size:17px;letter-spacing:.05em;color:var(--muted)}
.op__prem{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--rule);font-size:28px;line-height:1.35;color:var(--text)}
.op__note{margin:26px 0 0;font-family:var(--mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ---- svg grammar --------------------------------------------------------- */
svg{overflow:visible}
text{font-family:var(--sans)}
.lab{fill:var(--muted);font-family:var(--mono);font-size:23px;letter-spacing:.05em;text-transform:uppercase}
.lab--hi{fill:var(--mint)}
.lab--t2{fill:var(--t2)}
.lab--sm{font-family:var(--sans);font-size:23px;letter-spacing:0;text-transform:none}
.lab--lg{font-size:26px;letter-spacing:.08em}
.cap{fill:var(--t2);font-size:27px;line-height:1.4}
.cap--sm{font-size:25px}
.num{fill:var(--text);font-family:var(--sans);font-weight:600;font-size:52px;letter-spacing:-.01em}
.num--md{font-size:40px}
.num--hi{fill:var(--mint)}
.muted{fill:var(--muted)}

/* formal structure: straight, faint, orthogonal */
.fm{stroke:#ffffff38;stroke-width:1.2;fill:none;transition:opacity .6s var(--ease)}
.fm-box{stroke:#ffffff2e;stroke-width:1;fill:none;rx:3;transition:opacity .6s var(--ease)}
/* relational ties: organic, thin */
.rt{stroke:var(--edge);stroke-width:1.3;opacity:.22;fill:none;transition:opacity .6s var(--ease),stroke .5s var(--ease),stroke-width .5s var(--ease)}
.rt.is-dim{opacity:.06}
.rt.is-hi{stroke:var(--mint);opacity:.95;stroke-width:2.4;filter:drop-shadow(0 0 3px rgba(111,216,190,.38))}
.rt.is-warm{stroke:var(--warm);opacity:.9;stroke-width:2.2}
.rt.is-gone{opacity:.14;stroke:var(--muted);stroke-dasharray:2 4}
.rt.is-new{stroke:var(--mint);stroke-width:2.6;opacity:1;stroke-dasharray:7 5}
/* relation-specific strokes (constant across the deck) */
.r-comm{stroke:var(--edge);stroke-width:1.6;opacity:.75}
.r-adv{stroke:var(--node);stroke-width:1.6;opacity:.7}
.r-rel{stroke:#E3A6D4;stroke-width:1.8;opacity:.85;stroke-dasharray:7 4}
.r-crd{stroke:var(--muted);stroke-width:1.8;opacity:.8;stroke-dasharray:2 4}
.r-prj{stroke:#7FA7C9;stroke-width:1.4;opacity:.55;stroke-dasharray:10 3 2 3}
.r-one{stroke:var(--muted);stroke-width:1.1;opacity:.55}
.r-skill{stroke:var(--t2);opacity:.35}
.edge,path.edge,.r-comm,.r-adv,.r-rel,.r-crd,.r-prj,.r-one{fill:none}
.edge{transition:opacity .55s var(--ease),stroke-width .55s var(--ease),stroke .55s var(--ease)}

/* nodes */
.nd{fill:var(--bg);stroke:var(--node);stroke-width:2;transition:opacity .55s var(--ease),fill .5s var(--ease),stroke .5s var(--ease),r .5s var(--ease)}
.nd.fPE{stroke:var(--fPE)} .nd.fCS{stroke:var(--fCS)} .nd.fSC{stroke:var(--fSC)} .nd.fOP{stroke:var(--fOP)} .nd.fCO{stroke:var(--fCO)}
.nd.fill.fPE{fill:var(--fPE)} .nd.fill.fCS{fill:var(--fCS)} .nd.fill.fSC{fill:var(--fSC)} .nd.fill.fOP{fill:var(--fOP)} .nd.fill.fCO{fill:var(--fCO)}
.nd.is-dim{opacity:.18}
.nd.is-hi{stroke:var(--mint);stroke-width:3;fill:var(--mint);filter:drop-shadow(0 0 7px rgba(111,216,190,.5))}
.nd.is-ring{stroke:var(--mint);stroke-width:3}
.nd.is-gone{opacity:.25;stroke:var(--muted);stroke-dasharray:3 3;fill:none}
.nd.is-hollow{fill:var(--bg);stroke-dasharray:3 3}
.nd.is-warm{stroke:var(--warm);stroke-width:3}
.nd.remote{stroke:var(--warm);stroke-width:2.6;fill:var(--bg)}
.tag{fill:var(--mint);font-family:var(--mono);font-size:23px;letter-spacing:.06em;text-transform:uppercase}
.tag--w{fill:var(--warm)}

/* team-level org view */
.tm{transition:transform 1.4s var(--ease),opacity .6s var(--ease)}
.tm circle{transition:fill .6s var(--ease),stroke .6s var(--ease),opacity .6s var(--ease),stroke-width .5s}
.tm.is-dim circle{opacity:.25}
.ln1{stroke-dasharray:none} .ln2{stroke-dasharray:4 3} .ln3{stroke-dasharray:1.5 2.5}

/* tokens: the only things that move through structures */
.tk{opacity:0}
.tk__dot{fill:var(--mint)}
.tk__sq{fill:var(--node)}
.tk__w{fill:var(--warm)}
.tk{filter:drop-shadow(0 0 4px rgba(111,216,190,.45))}

/* bits that fade in by phase */
.ph{opacity:0;transition:opacity .55s var(--ease)}
.ph.is-on{opacity:1}
.ph-dim{transition:opacity .55s var(--ease)}
.ph-dim.is-dim{opacity:.16}

/* legend chips */
.lg text{fill:var(--muted);font-family:var(--sans);font-size:23px;letter-spacing:0;text-transform:none}

/* bars (evidence ladder, gap ladder, weekly strip): thin, rounded data end */
.bar{fill:var(--edge);opacity:.8}
.bar--hi{fill:var(--mint);opacity:1}
.bar--w{fill:var(--warm);opacity:.9}
.bar--mu{fill:var(--muted);opacity:.45}
.axis{stroke:var(--rule-2);stroke-width:1}
.grid{stroke:var(--rule);stroke-width:1}
.spark{fill:none;stroke-width:2}
.box{fill:none;stroke:var(--rule-2);stroke-width:1;rx:3}
.box--hi{stroke:var(--mint)}
.is-strong .box{stroke-width:3}
.strike{stroke:var(--muted);stroke-width:1.6}

/* ---- presenter card ------------------------------------------------------ */
#help{position:fixed;inset:0;display:grid;place-items:center;z-index:9;background:#051521cc}
#help[hidden]{display:none}
.help__box{border:1px solid var(--rule-2);padding:32px 40px;background:var(--bg);font-size:19px;line-height:1.85;color:var(--t2)}
.help__h{margin:0 0 12px;font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.help__box ul{margin:0;padding-left:20px}
.help__box b{font-family:var(--mono);color:var(--text);font-weight:400}

html.capture *,html.capture *::before,html.capture *::after{transition:none!important;animation:none!important}
html.still *,html.still *::before,html.still *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* risk / cost / warning: its own hue (not the Client Solutions amber) */
.risk{fill:var(--warm)} .risk-s{stroke:var(--warm)}