:root{
  /* ---- cartographic palette: cool survey paper, ink, one teal accent ---- */
  --paper:#e8edf1;
  --paper-2:#dfe6ec;
  --graticule:#cfd9e1;
  --card:#ffffff;
  --ink:#12202b;
  --ink-2:#4d5f6d;
  --ink-3:#7c8b98;
  --rule:#a9b8c4;
  --rule-soft:#c6d1da;
  --accent:#1a6f83;
  --accent-soft:#d3e6ea;
  --warn:#9d4b2f;
  --warn-soft:#f7e2dc;
  --ok:#2c7d61;

  /* ---- department hues, carried over from the source drawing ---- */
  --d-board:#b0473f;
  --d-exec:#8a7118;
  --d-ops:#3a6ba5;
  --d-adopt:#2c7d61;
  --d-pgdata:#bd7d15;
  --d-techdata:#3d6280;
  --d-tech:#77599a;
  --d-people:#69707a;
  --d-comms:#0d7f88;

  --gap:14px;      /* horizontal gap between sibling subtrees */
  --drop:26px;     /* card bottom -> connector bar */
  --rise:22px;     /* connector bar -> child card top */
  --sgap:14px;     /* stacked-row gap */
  --indent:26px;   /* stacked-row indent */

  --sans:'Space Grotesk',ui-sans-serif,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:
    linear-gradient(var(--graticule) 1px,transparent 1px) 0 0/100% 88px,
    linear-gradient(90deg,var(--graticule) 1px,transparent 1px) 0 0/88px 100%,
    linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none !important}

/* ============================ HEADER ============================ */
.masthead{
  flex:0 0 auto; background:var(--ink); color:#eef3f6;
  padding:14px 20px 0; position:relative; z-index:6;
}
.masthead-top{display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap}
.eyebrow{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.19em; text-transform:uppercase;
  color:#7fa6b2; margin:0 0 4px;
}
h1{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0; line-height:1}
.masthead h1 em{font-style:normal; color:#7fa6b2; font-weight:400}
.spacer{flex:1 1 auto}

/* signed-in identity */
.whoami{display:flex; align-items:center; gap:9px; padding-bottom:2px}
.whoami-name{font-size:12px; font-weight:500; line-height:1.2}
.whoami-mail{font-family:var(--mono); font-size:9px; color:#7fa6b2; display:block}
.avatar{
  width:29px; height:29px; border-radius:50%; background:#2b4150; color:#cfe0e6;
  display:grid; place-items:center; font-size:11px; font-weight:600; flex:0 0 auto;
  border:1px solid #3f5665;
}
.ghost{
  border:1px solid #3f5665; background:transparent; color:#cfe0e6; padding:5px 10px;
  border-radius:3px; cursor:pointer; font-family:var(--mono); font-size:9px;
  letter-spacing:.13em; text-transform:uppercase;
}
.ghost:hover{background:#22323f}

/* live map key — the tally strip, doubling as category filters */
.key{display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; padding:12px 0 13px}
.key-item{display:flex; align-items:center; gap:8px}
button.key-item{
  background:transparent; border:1px solid transparent; border-radius:3px;
  cursor:pointer; padding:3px 8px; text-align:left; color:inherit; font-family:inherit;
}
button.key-item:hover{border-color:#3f5665; background:#1b2b36}
button.key-item[aria-pressed="true"]{border-color:#7fa6b2; background:#22323f}
.key-glyph{width:26px; height:17px; border:1.5px solid #93b4bd; flex:0 0 auto}
.key-glyph.staff{border-radius:6px}
.key-glyph.volunteer{border-radius:1px}
.key-glyph.contractor{border-radius:1px 8px 1px 8px}
.key-glyph.intern{border-radius:999px}
.key-glyph.vacant{border-style:dashed; border-radius:5px}
.key-glyph.group{border-radius:1px; box-shadow:inset 0 0 0 1.5px var(--ink), inset 0 0 0 3px #93b4bd}
.key-num{font-family:var(--mono); font-size:15px; font-weight:600; line-height:1; color:#fff}
.key-lab{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#8fb0bb; display:block; margin-top:3px; white-space:nowrap}

/* ============================ TOOLBAR ============================ */
.toolbar{
  flex:0 0 auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:9px 20px; background:#fbfcfd; border-bottom:1px solid var(--rule-soft);
  position:relative; z-index:5;
}
button,select,input,textarea{font-family:inherit; font-size:12px; color:var(--ink)}
.btn{
  border:1px solid var(--rule); background:#fff; padding:6px 11px; border-radius:3px;
  cursor:pointer; font-weight:500; letter-spacing:.01em; transition:background .12s,border-color .12s;
}
.btn:hover:not(:disabled){background:var(--accent-soft); border-color:var(--accent)}
.btn:disabled{opacity:.45; cursor:default}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn.primary:hover:not(:disabled){background:var(--accent); border-color:var(--accent)}
.btn.primary.dirty{background:var(--warn); border-color:var(--warn)}
.btn.danger:hover{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.seg{display:inline-flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; background:#fff}
.seg button{
  border:0; background:transparent; padding:6px 10px; cursor:pointer;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-2);
}
.seg button + button{border-left:1px solid var(--rule-soft)}
.seg button[aria-pressed="true"]{background:var(--ink); color:#fff}
.tool-lab{
  font-family:var(--mono); font-size:9px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-3); margin-right:2px;
}

/* export menu */
.menu{position:relative; display:inline-flex}
.menu-pop{
  position:absolute; top:calc(100% + 5px); left:0; z-index:12; min-width:212px;
  background:#fff; border:1px solid var(--rule); border-radius:4px;
  box-shadow:0 8px 24px rgba(18,32,43,.16); padding:4px; display:flex; flex-direction:column;
}
.menu-pop button{
  border:0; background:transparent; text-align:left; padding:7px 9px; border-radius:3px;
  cursor:pointer; font-weight:500; display:flex; flex-direction:column; gap:2px;
}
.menu-pop button:hover{background:var(--accent-soft)}
.menu-pop small{
  font-family:var(--mono); font-size:8.6px; letter-spacing:.05em; color:var(--ink-3);
  font-weight:400;
}
#search{border:1px solid var(--rule); border-radius:3px; padding:6px 9px; width:190px; background:#fff}
#search:focus-visible,.btn:focus-visible,.seg button:focus-visible,select:focus-visible,
input:focus-visible,textarea:focus-visible,.card:focus-visible,.ghost:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}
.masthead .ghost:focus-visible{outline-color:#7fa6b2}

/* save state */
.savestate{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap}
.savestate.warn{color:var(--warn)}
.savestate.ok{color:var(--ok)}
.pill{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:10px; padding:3px 8px; color:var(--ink-2);
}
.pill.ro{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}

/* department legend */
.depts{display:flex; gap:14px; flex-wrap:wrap; padding:7px 20px; background:#f4f7f9; border-bottom:1px solid var(--rule-soft)}
.dept-chip{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.dept-chip i{width:12px; height:3px; border-radius:2px; display:block}

/* ============================ BANNER ============================ */
.banner{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 20px; background:#fdf4e6; border-bottom:1px solid #e0b871; font-size:12px;
}
.banner.bad{background:var(--warn-soft); border-bottom-color:var(--warn)}
.banner strong{font-weight:600}
.banner p{margin:0; flex:1 1 260px; line-height:1.45}

/* ============================ CANVAS ============================ */
#canvas{flex:1 1 auto; overflow:auto; padding:40px 44px 90px; display:flex; justify-content:flex-start}
#tree{margin:0 auto}

.branch{display:flex; flex-direction:column; align-items:center; position:relative}
.branch.dimmed{opacity:.22}

/* ---- card ---- */
.card{
  position:relative; width:150px; min-height:50px; background:var(--card);
  border:1.5px solid var(--rule); border-radius:9px; border-left-width:4px;
  padding:7px 9px 7px 10px; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  box-shadow:0 1px 0 rgba(18,32,43,.07);
  transition:box-shadow .13s, transform .13s, border-color .13s;
}
.card:hover{box-shadow:0 3px 10px rgba(18,32,43,.16); transform:translateY(-1px)}
.card:focus-visible{outline-offset:2px}

/* Shape encodes the engagement; the dashed modifier encodes an unfilled seat,
   so "vacant contractor" and "vacant intern" are both expressible. */
.card.is-staff{border-radius:9px}
.card.is-volunteer{border-radius:1px}
.card.is-contractor{border-radius:2px 15px 2px 15px}
.card.is-intern{border-radius:999px; padding-left:18px; padding-right:15px}
.card.is-vacant{border-style:dashed; background:rgba(255,255,255,.5); box-shadow:none}
.card.is-group{
  border-radius:1px; width:172px; background:var(--ink); border-color:var(--ink);
  box-shadow:inset 0 0 0 3px var(--card), inset 0 0 0 4.5px var(--ink);
  padding:9px 11px 9px 12px;
}
.card.is-group .c-name{color:#fff}
.card.is-group .c-role{color:#8fb0bb}
.card.selected{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.card.hit{border-color:var(--accent); box-shadow:0 0 0 3px #f5e2a8, 0 3px 10px rgba(18,32,43,.18)}

.c-name{font-size:12.5px; font-weight:600; line-height:1.2; letter-spacing:-.005em}
.c-name.placeholder{font-weight:500; color:var(--ink-3); font-style:italic}
.c-role{
  font-family:var(--mono); font-size:8.6px; line-height:1.35; letter-spacing:.055em;
  text-transform:uppercase; color:var(--ink-2);
}

/* card controls */
.c-tools{position:absolute; top:-11px; right:-8px; display:flex; gap:3px; opacity:0; pointer-events:none; transition:opacity .12s}
.card:hover .c-tools,.card:focus-within .c-tools,.card.selected .c-tools{opacity:1; pointer-events:auto}
@media (hover:none){ /* touch: no hover to reveal them, so keep them out */
  .c-tools{opacity:1; pointer-events:auto}
}
.c-tools button{
  width:21px; height:21px; border-radius:50%; border:1.5px solid var(--ink); background:#fff;
  cursor:pointer; font-size:12px; line-height:1; padding:0; color:var(--ink);
  display:grid; place-items:center; font-family:var(--mono); font-weight:600;
}
.c-tools button:hover{background:var(--ink); color:#fff}

.c-fold{
  position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
  min-width:22px; height:19px; padding:0 5px; border-radius:10px;
  border:1.5px solid var(--rule); background:#fff; cursor:pointer;
  font-family:var(--mono); font-size:9px; font-weight:600; color:var(--ink-2); z-index:2;
}
.c-fold:hover{border-color:var(--accent); color:var(--accent)}
.branch.mode-stack > .card > .c-fold{left:var(--indent); transform:none}

/* ---- connectors: horizontal (chart) mode ---- */
.kids-row{display:flex; align-items:flex-start; gap:var(--gap); margin-top:var(--drop); position:relative}
.branch.has-kids.mode-row > .card::after{
  content:''; position:absolute; left:50%; top:100%; width:1.5px; height:var(--drop);
  background:var(--rule); transform:translateX(-.75px);
}
.kids-row > .branch{padding-top:var(--rise)}
.kids-row > .branch::before{ /* the spanning bar */
  content:''; position:absolute; top:0; height:1.5px; background:var(--rule);
  left:calc(-1 * var(--gap) / 2 - .75px); right:calc(-1 * var(--gap) / 2 - .75px);
}
.kids-row > .branch::after{ /* stub down into the card */
  content:''; position:absolute; top:0; left:50%; width:1.5px; height:var(--rise);
  background:var(--rule); transform:translateX(-.75px);
}
.kids-row > .branch:first-child::before{left:calc(50% - .75px)}
.kids-row > .branch:last-child::before{right:calc(50% - .75px)}

/* ---- connectors: stacked (outline) mode ---- */
.branch.mode-stack{align-items:flex-start}
.kids-stack{display:flex; flex-direction:column; gap:var(--sgap); margin:var(--sgap) 0 0 var(--indent)}
.kids-stack > .branch{padding-left:var(--indent); align-items:flex-start !important}
.kids-stack > .branch::before{ /* rail down the left */
  content:''; position:absolute; left:0; top:calc(-1 * var(--sgap)); bottom:0;
  width:1.5px; background:var(--rule);
}
.kids-stack > .branch:last-child::before{display:none}
.kids-stack > .branch > .card::before{ /* elbow into card centre */
  content:''; position:absolute; left:calc(-1 * var(--indent)); top:50%;
  width:var(--indent); height:1.5px; background:var(--rule);
}
.kids-stack > .branch:last-child > .card::after{ /* rail tail, stops at card centre */
  content:''; position:absolute; left:calc(-1 * var(--indent)); bottom:50%;
  top:calc(-1 * var(--sgap) - 1.5px); width:1.5px; background:var(--rule);
}
.kids-stack > .branch:last-child > .card.is-group::after{display:none}

/* ============================ FLOW UPWARD ============================
   Root at the bottom, branches growing up — the orientation of the original
   drawing. DOM order is untouched (root first), so assistive tech still reads
   the hierarchy top-down; only the painted geometry inverts. */
.flow-up .branch{flex-direction:column-reverse}

/* row mode: drop line rises from the top of the card instead */
.flow-up .branch.has-kids.mode-row > .card::after{top:auto; bottom:100%}
/* Siblings must line up on the edge the connector bar runs along, which
   inverts with the flow. Downward that's the top (the base rule's
   flex-start); upward it's the bottom. Without this, a leaf sibling and a
   deep-subtree sibling anchor at different heights, their ::before segments
   land at different y, and the spanning bar renders as disjoint pieces
   instead of one line — visible on any parent whose children differ in
   depth. Flow-up is the default, so this was the common case. */
.flow-up .kids-row{margin-top:0; margin-bottom:var(--drop); align-items:flex-end}
.flow-up .kids-row > .branch{padding-top:0; padding-bottom:var(--rise)}
.flow-up .kids-row > .branch::before{top:auto; bottom:0}
.flow-up .kids-row > .branch::after{top:auto; bottom:0}

/* stack mode: the column reverses too, keeping the first report nearest its
   manager the way the leftmost child is in row mode */
.flow-up .kids-stack{flex-direction:column-reverse; margin:0 0 var(--sgap) var(--indent)}
.flow-up .kids-stack > .branch::before{top:0; bottom:calc(-1 * var(--sgap))}
.flow-up .kids-stack > .branch:last-child > .card::after{
  top:50%; bottom:calc(-1 * var(--sgap)); height:auto;
}
.flow-up .kids-stack > .branch:last-child > .card.is-group::after{display:none}

/* the fold pill belongs on the side the children are on; `left` and `transform`
   still come from the base rules, which differ per layout mode */
.flow-up .card > .c-fold{bottom:auto; top:-11px}

/* ============================ EDITOR DRAWER ============================ */
#drawer{
  position:fixed; top:0; right:0; width:330px; max-width:92vw; height:100%;
  background:#fbfcfd; border-left:1px solid var(--rule); z-index:20;
  transform:translateX(102%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(18,32,43,.14);
}
#drawer.open{transform:none}
.drawer-head{
  padding:15px 18px 13px; border-bottom:1px solid var(--rule-soft);
  display:flex; align-items:flex-start; gap:10px; background:var(--ink); color:#fff;
}
.drawer-head .eyebrow{margin:0 0 5px}
.drawer-head h2{font-size:15px; margin:0; font-weight:600}
#drawer-close{
  margin-left:auto; background:transparent; border:1px solid #3f5665; color:#cfe0e6;
  width:25px; height:25px; border-radius:3px; cursor:pointer; flex:0 0 auto; line-height:1;
}
#drawer-close:hover{background:#22323f}
.drawer-body{padding:16px 18px 26px; overflow:auto; flex:1 1 auto}
.field{margin-bottom:14px}
.field > label{
  display:block; font-family:var(--mono); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:5px;
}
.field input[type=text],.field select,.field textarea{
  width:100%; padding:7px 9px; border:1px solid var(--rule); border-radius:3px; background:#fff;
}
.field textarea{resize:vertical; min-height:52px}
.radios{display:flex; flex-direction:column; gap:1px}
.radios label{
  display:flex; align-items:center; gap:9px; padding:7px 9px; border:1px solid transparent;
  border-radius:3px; cursor:pointer;
}
.radios label:hover{background:#eef3f6}
.radios input{margin:0}
.radios .muted{color:var(--ink-3)}
.radios .glyph{width:22px; height:15px; border:1.5px solid var(--ink-2); flex:0 0 auto}
.radios .glyph.staff{border-radius:5px}
.radios .glyph.volunteer{border-radius:1px}
.radios .glyph.contractor{border-radius:1px 7px 1px 7px}
.radios .glyph.intern{border-radius:999px}
.radios .glyph.group{border-radius:1px; box-shadow:inset 0 0 0 1.5px #fff, inset 0 0 0 3px var(--ink-2)}
.check{
  display:flex; align-items:center; gap:9px; padding:9px 10px; cursor:pointer;
  border:1px dashed var(--rule); border-radius:4px; background:#fff; margin-top:9px;
}
.check:hover{border-color:var(--accent)}
.check input{margin:0}
.check.off{opacity:.45; cursor:default}
.check .hint{display:block; font-size:10.5px; color:var(--ink-3); margin-top:1px}
.drawer-foot{
  padding:12px 18px; border-top:1px solid var(--rule-soft); display:flex; gap:7px; flex-wrap:wrap;
  background:#f1f5f7;
}

/* ============================ GATE (sign-in / setup) ============================ */
#gate{
  position:fixed; inset:0; z-index:30; background:rgba(232,237,241,.97);
  display:grid; place-items:center; padding:24px;
}
.gate-card{
  width:100%; max-width:430px; background:#fff; border:1px solid var(--rule);
  border-top:4px solid var(--ink); border-radius:4px; padding:26px 26px 22px;
  box-shadow:0 12px 40px rgba(18,32,43,.13);
}
.gate-card h2{margin:0 0 10px; font-size:17px; font-weight:600}
.gate-card p{margin:0 0 14px; font-size:12.5px; line-height:1.55; color:var(--ink-2)}
.gate-card p.small{font-size:11px; color:var(--ink-3)}
.gate-card code{
  font-family:var(--mono); font-size:11px; background:#eef3f6; padding:1px 4px;
  border-radius:2px; word-break:break-all;
}
.gate-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px}
.gate-err{
  background:var(--warn-soft); border-left:3px solid var(--warn); padding:9px 11px;
  font-size:11.5px; line-height:1.5; margin:0 0 14px; color:#6d3520;
}
.spin{
  width:15px; height:15px; border:2px solid var(--rule); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:-3px;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================ TOAST ============================ */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px); z-index:40;
  background:var(--ink); color:#fff; padding:9px 16px; border-radius:3px; max-width:80vw;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; line-height:1.5;
  opacity:0; pointer-events:none; transition:opacity .18s,transform .18s;
}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* ============================ RESPONSIVE / PRINT ============================ */
@media (max-width:720px){
  #canvas{padding:22px 16px 80px}
  .masthead,.toolbar,.depts,.banner{padding-left:14px; padding-right:14px}
  .key{gap:15px}
  #search{width:130px}
  .whoami-mail{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}
@media print{
  body{background:#fff}
  .toolbar,#drawer,#toast,.c-tools,.c-fold,.banner,#gate,.whoami,.menu-pop{display:none !important}
  .masthead{background:#fff; color:var(--ink); border-bottom:2px solid var(--ink)}
  .masthead h1 em,.eyebrow,.key-lab{color:var(--ink-2)}
  .key-num{color:var(--ink)}
  .key-glyph{border-color:var(--ink-2)}
  #canvas{overflow:visible; padding:18px 0}
  .card{box-shadow:none}
  .card.is-group{background:#fff; box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--ink)}
  .card.is-group .c-name{color:var(--ink)} .card.is-group .c-role{color:var(--ink-2)}
  .branch.dimmed{opacity:1}
}