/* ── Organisation Structure ────────────────────────────────────────────
   The registered "Organisational Structure and Contact Appendix"
   (RN 8583605) as a live portal page. Every member reads it.

   Ported from the Claude Design prototype
   `logo-and-pagination-fixes 3/project/Organisation Structure.dc.html`,
   with the prototype's inline styles lifted into classes and its hardcoded
   hex values replaced by the portal design tokens so all five themes render.

   TWO LAYOUT DECISIONS WORTH KNOWING
   ----------------------------------
   1. THE CHART DOES NOT FIT A PHONE. A four-tier tree of ~30 nodes cannot be
      squeezed into 320px, so there are two representations of the SAME data:
      the chart at >=820px, and the LADDER below it. The ladder is the mobile
      design, not a degraded fallback, and given the audience it may be the one
      most members actually use.
   2. The Safeguarding unit is an absolutely positioned aside on wide screens
      (.safeside) so it reads as sitting OUTSIDE the operational reporting line.
      `.chartcols` reserves the gutter for it. Below 1100px it returns to the
      flow, because a floating card at that width just overlaps.
   ──────────────────────────────────────────────────────────────────────── */
:root{
  --gold:#f0c832;--gold2:#f7d94e;--gdim:rgba(212,175,55,.12);--gglow:rgba(212,175,55,.3);
  --green:#4cd657;--red:#ff4848;--blue:#5588ff;--amber:#f59e0b;
  --text:#f2f7ee;--t2:rgba(242,247,238,.88);--t3:rgba(242,247,238,.62);
  --panel:rgba(255,255,255,.10);--panel2:rgba(255,255,255,.23);--border:rgba(255,255,255,.21);
  --void:#0c1109;--deep:#111a0e;--base:#172213;--lift:#1e2e1b;--hdh:70px;
  --disp:'Cinzel',serif;--mono:'IBM Plex Mono',monospace;--body:'DM Sans',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--void);color:var(--text);font-family:var(--body);font-size:14px;}
body{background:
  radial-gradient(140% 90% at 85% -10%, rgba(4,80,30,.30), transparent 55%),
  radial-gradient(120% 80% at 0% 100%, rgba(240,200,50,.07), transparent 55%),
  var(--void);}
#auth-redirect{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--void);color:var(--t3);font-family:var(--mono);letter-spacing:2px;font-size:13px;}
#shell{display:none;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--text);}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px;}

/* Header (portal standard).
   position is STICKY, set portal-wide in css/header-command.css which loads
   after this file. Declared here too so the page is correct even if that
   shared file is ever removed. */
#hdr{position:sticky;top:0;height:var(--hdh);background:rgba(15,23,12,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;z-index:200;
  animation:hdrDrop .6s var(--ease) both;}
.hdr-left,.hdr-right{display:flex;align-items:center;gap:12px;min-width:0;}
.hdr-back-btn{display:flex;align-items:center;gap:7px;cursor:pointer;color:var(--t3);font-size:13px;font-weight:600;
  min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--panel);transition:.25s var(--ease);}
.hdr-back-btn:hover{color:var(--text);background:var(--panel2);}
.brand-logo-wrap{width:42px;height:42px;border-radius:50%;background:#fff;border:1.5px solid var(--gold);
  overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;}
.brand-logo-img{width:100%;height:100%;object-fit:contain;cursor:pointer;}
.brand-logo{font-family:var(--disp);font-weight:900;color:var(--gold);letter-spacing:2px;}
.page-pill{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--t2);background:var(--gdim);border:1px solid var(--gglow);padding:8px 13px;border-radius:999px;white-space:nowrap;}
.hdr-clock{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--t2);}
.hdr-clock i{color:var(--green);}
.hdr-clock-tz{color:var(--t3);font-size:10px;letter-spacing:1px;}
.hdr-user-chip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);
  border-radius:999px;padding:5px 14px 5px 6px;min-width:0;}
.hdr-user-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold2));
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:600;
  color:var(--void);overflow:hidden;flex-shrink:0;}
#hdr-name{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.hdr-icon-btn{background:var(--panel);border:1px solid var(--border);border-radius:10px;color:var(--t2);
  width:44px;height:44px;cursor:pointer;font-size:13px;transition:.25s var(--ease);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;text-decoration:none;}
.hdr-icon-btn:hover{color:var(--gold);border-color:var(--gglow);}

/* Layout */
/* No top reservation: #hdr is STICKY (in flow) portal-wide, so it occupies
   its own space and nothing hides behind it. */
.os-wrap{max-width:none;margin:0;padding:22px 32px 70px;}
/* Nothing on this page may make the document wider than the viewport. `clip`
   rather than `hidden`: hidden creates a scroll container and breaks the
   sticky header, which cost a debugging cycle already. */
.os-chart-rel{overflow-x:clip;}

/* Canonical glass recipe */
.glass{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:20px 22px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel)),
    linear-gradient(320deg,var(--gdim),transparent 60%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);}
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);}
.glass-gold{border-color:rgba(212,175,55,.32) !important;
  background:linear-gradient(135deg,var(--gdim) 0%,var(--panel) 60%),linear-gradient(160deg,rgba(255,255,255,.10),transparent 50%) !important;}
.lift{transition:transform .35s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);}
.lift:hover{transform:translateY(-2px);border-color:var(--gglow);
  box-shadow:0 16px 40px -12px rgba(0,0,0,.5),0 0 30px -16px var(--gglow);}

/* Buttons / inputs */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:13.5px;font-weight:600;
  border:1px solid var(--border);border-radius:12px;min-height:44px;padding:0 16px;cursor:pointer;
  background:var(--panel);color:var(--text);transition:.25s var(--ease);}
.btn:hover{transform:translateY(-1px);border-color:var(--gglow);}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);border-color:var(--gglow);}
.btn-outline{background:transparent;color:var(--t2);}
.btn-outline:hover{color:var(--gold);}
.gi{background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-family:var(--body);font-size:14px;min-height:44px;padding:0 14px;width:100%;}
.gi:focus{outline:none;border-color:var(--gglow);}
.gi::placeholder{color:var(--t3);}
.pip{width:7px;height:7px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.pip-green{background:var(--green);animation:blink 2.4s infinite;}

/* ── Header band ───────────────────────────────────────────────────── */
.os-band{padding:26px 26px 22px;border-radius:18px;animation:wgIn .5s var(--ease) .06s both;}
.os-scan{position:absolute;left:0;right:0;top:0;height:1.5px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);background-size:200% 100%;
  animation:mdScan 5.5s var(--ease) infinite;}
.os-band-row{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;}
.os-band-main{min-width:0;flex:1 1 380px;}
.os-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2.6px;text-transform:uppercase;color:var(--gold);}
.os-eyebrow-dim{color:var(--t2);}
.os-title{font-family:var(--disp);margin:9px 0 6px;font-size:clamp(20px,2.4vw,30px);line-height:1.16;font-weight:700;}
.os-motto{font-size:14px;color:var(--t2);font-style:italic;}
.os-lede{margin:14px 0 0;max-width:60ch;font-size:14px;line-height:1.6;color:var(--t2);}
.os-stamps{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.os-stamp{font-family:var(--mono);border:1px solid var(--border);border-radius:12px;padding:11px 14px;min-width:118px;}
.os-stamp-gold{border-color:var(--gglow);background:var(--gdim);}
.os-stamp-k{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--t2);}
.os-stamp-v{margin-top:5px;font-size:15px;}

/* ── Toolbar ───────────────────────────────────────────────────────── */
.os-toolbar{display:flex;align-items:center;gap:14px;margin:18px 0 0;flex-wrap:wrap;}
#os-view-switch{display:flex;gap:6px;padding:5px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.05);}
.vtab{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid transparent;
  border-radius:10px;background:transparent;color:var(--t2);font-family:var(--body);font-size:13.5px;cursor:pointer;
  transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);}
.vtab:hover{background:rgba(255,255,255,.06);color:var(--text);}
.vtab[data-active="true"]{background:rgba(212,175,55,.16);border-color:rgba(240,200,50,.34);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
.vtab[data-active="true"] i{color:var(--gold);}
.os-search-wrap{position:relative;flex:1 1 300px;min-width:240px;}
.os-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:12.5px;color:var(--t3);pointer-events:none;}
.os-search-wrap .gi{padding-left:40px;}
.os-live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--t2);}

/* Search results */
#os-search-results{margin-top:14px;padding:16px 18px;animation:cvIn .38s var(--ease) both;}
.os-res-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.os-res{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 13px;
  border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.04);color:var(--text);
  text-align:left;cursor:pointer;font-family:var(--body);transition:.25s var(--ease);}
.os-res:hover{border-color:var(--gglow);background:var(--gdim);}
.os-res-main{flex:1 1 auto;min-width:0;}
.os-res-t{display:block;font-size:13.5px;font-weight:600;word-break:break-word;}
.os-res-s{display:block;margin-top:3px;font-family:var(--mono);font-size:11px;color:var(--t2);word-break:break-word;}
.os-res-st{font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t2);white-space:nowrap;}
.os-empty{display:flex;align-items:center;gap:12px;margin-top:12px;padding:14px;border:1px dashed var(--border);border-radius:12px;
  font-size:13.5px;color:var(--t2);}
.os-empty i{color:var(--blue);}

/* ── Chart ─────────────────────────────────────────────────────────── */
#os-chart{margin-top:18px;animation:cvIn .38s var(--ease) both;}
.os-chart-rel{position:relative;}
.safeside{position:absolute;right:0;top:0;width:300px;}
@media(min-width:1101px){
  /* The gutter is reserved on the FOUNDING EXECUTIVE ROW ONLY, which is the one
     row the Safeguarding aside actually overlaps. It used to be reserved on
     .chartcols, i.e. on every row, so every rail stopped 322px short of the right
     edge no matter how wide the screen was.
     It is applied to that row's BODY, not to the tier: `.spine` is a sibling of the
     body and centres itself with margin:auto, so padding on the tier would shift the
     trunk and bend the tree. Padding the body moves only the cards. */
  #os-tier-board>.os-tier-body{padding-right:322px;}
  /* The gutter reclaim is GONE. It existed so six department heads could read as
     one rank, but the Heads row now holds four (Programs, IT, Communications and
     Digital Media, Support Services) because HR moved up to General Management and
     the rest hang off Volunteer Management and Engagement. Widening this one row by
     330px made it the only row with a different box, so its connector bar and the
     drop coming down from VME above it no longer shared a centre line. Every row
     now sits in the same box and the tree lines up at every breakpoint. */
}
.os-tier{margin-bottom:0;}
.os-tier--join>.os-tier-h{position:relative;}
.os-tier--join>.os-tier-h::before{
  content:'';position:absolute;left:50%;margin-left:-1px;top:0;bottom:0;width:2px;
  background:rgba(240,200,50,.72);pointer-events:none;
}
/* Nothing hangs below the final tier, so its drop would dangle. */
.os-tier:last-child>.spine{display:none;}
/* The teams row takes no stems (it is a grouped index and always wraps), so its
   trunk has to reach the cards itself or it stops in mid-air above them. */
#os-tier-teams>.os-tier-h::before{bottom:-12px;}
.os-tier-h{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--t2);}
.os-tier-h .os-rule{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(240,200,50,.4),transparent);}
#os-chart .os-tier-h .os-rule{display:none;}
/* Tighter label band, so the trunk crosses as little dead space as possible. */
#os-chart .os-tier-h{padding:2px 0;}
.os-tier-body{margin-top:12px;}
/* Tier grids. Six department heads read best in one row on a wide screen. */
.swrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;--cols:3;}
/* One node in the row: centre it so the incoming line lands on the card. */
.onewrap{display:grid;grid-template-columns:minmax(0,var(--one,480px));justify-content:center;gap:14px;--cols:1;}
/* General Management row: Head of HR, Volunteer Management and Engagement, Coordinator. */
.gwrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;--cols:3;}
.ewrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:660px;margin:0 auto;--cols:2;}
/* SIX across, as the design specifies: all six department heads read as one rank.
   NOT via `width:100vw` + a negative margin, which is what the prototype used.
   `100vw` INCLUDES the vertical scrollbar, so on a scrolling page the row ends up
   about 15px wider than the content box and the negative margin pushes it past
   the left edge: the page then scrolls sideways. Reported by the VP.
   Instead the row reclaims the gutter that `.chartcols` reserves for the
   Safeguarding aside. It never exceeds the page container, so it cannot
   overflow the viewport at any width or scrollbar setting. The aside sits
   beside the tiers ABOVE this row, so nothing collides. */
.dwrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;--cols:4;}
.twrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;--cols:3;}
.dwrap>*,.swrap>*,.twrap>*,.ewrap>*,.gwrap>*,.onewrap>*{min-width:0;}
.spine{width:1px;height:26px;margin:0 auto;background:linear-gradient(180deg,rgba(240,200,50,.5),rgba(240,200,50,.06));}

/* ── Node card. The single most reused component. ──────────────────── */
.os-node{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20);border-radius:16px;padding:16px;
  cursor:pointer;text-align:left;width:100%;font-family:var(--body);color:var(--text);
  background:
    linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03) 42%,var(--panel)),
    linear-gradient(320deg,var(--gdim),transparent 60%);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
  animation:wgIn .5s var(--ease) both;}
/* A VACANT post is the NORMAL case on this chart today: six of eight leadership
   posts are unfilled, so the vacant state is designed first, not as an edge case. */
.os-node.is-vacant::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold),rgba(240,200,50,0));}
.os-node.is-acting::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--amber),rgba(245,158,11,0));}
.os-node-top{display:flex;align-items:flex-start;gap:14px;}
.os-av{width:60px;height:60px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:18px;font-weight:600;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);}
.os-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
/* A designed empty holder slot, never a grey placeholder blob. */
.os-av-vacant{background:rgba(212,175,55,.08);border:1.5px dashed rgba(240,200,50,.5);color:var(--gold);}
.os-node-main{min-width:0;flex:1 1 auto;}
.os-node-t{font-family:var(--disp);font-size:19px;line-height:1.28;font-weight:600;word-break:break-word;}
.os-node-holder{margin-top:6px;font-size:15px;color:var(--t2);word-break:break-word;line-height:1.3;}
.os-node-vacant{margin-top:7px;font-family:var(--mono);font-size:13px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);}
.os-acting{margin-top:11px;padding:9px 11px;border:1px solid rgba(245,158,11,.45);border-radius:10px;background:rgba(245,158,11,.10);}
.os-acting-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--amber);}
.os-acting-v{margin-top:4px;font-size:13px;color:var(--t2);}
.os-chips{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.os-chip{font-family:var(--mono);padding:5px 11px;border:1px solid var(--border);border-radius:999px;
  font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--t2);
  /* The chip is a flex item holding a long unbroken label such as VOLUNTEER
     MANAGEMENT AND ENGAGEMENT. `overflow-wrap:anywhere` (not break-word) is the
     one that also shrinks min-content, so the item can compress instead of
     forcing the card, and the page, wider than a 320px screen. */
  max-width:100%;min-width:0;overflow-wrap:anywhere;}
.os-teamcount{font-family:var(--mono);font-size:12.5px;color:var(--t2);}
.os-mail{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);}
.os-mail-a{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:11.5px;color:var(--t2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.os-icon-btn{width:34px;height:34px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.05);
  color:var(--text);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;transition:.25s var(--ease);text-decoration:none;}
.os-icon-btn:hover{border-color:var(--gglow);color:var(--gold);}

/* Recruitment chip on a vacant post. This is the link to the internal board and
   the emotional point of the page: most readers are volunteers. */
.os-recruit{display:flex;align-items:center;gap:11px;margin-top:12px;padding:11px 12px;border-radius:12px;}
.os-recruit[data-state="open-internal"]{border:1px solid rgba(240,200,50,.5);
  background:linear-gradient(135deg,rgba(212,175,55,.18),rgba(212,175,55,.06));}
.os-recruit[data-state="external"]{border:1px solid rgba(85,136,255,.4);background:rgba(85,136,255,.10);}
.os-recruit[data-state="none"]{border:1px solid rgba(255,255,255,.14);}
.os-recruit-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);}
.os-recruit[data-state="external"] .os-recruit-k{color:var(--blue);letter-spacing:1.6px;font-size:10px;}
.os-recruit[data-state="none"] .os-recruit-k{color:var(--t2);letter-spacing:1.6px;font-size:10px;}
.os-recruit-main{flex:1 1 auto;min-width:0;}
.os-recruit-a{display:inline-block;margin-top:4px;font-size:13.5px;font-weight:600;}

/* Independent unit */
.os-node.is-independent{border:1.5px dashed rgba(85,136,255,.55);
  background:linear-gradient(160deg,rgba(85,136,255,.14),rgba(255,255,255,.03) 46%,var(--panel));}
.os-indep-k{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;border:1px solid rgba(85,136,255,.5);
  border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);}
.os-indep-t{font-family:var(--disp);margin-top:11px;font-size:17px;line-height:1.25;font-weight:600;}
.os-indep-sub{margin-top:7px;font-size:13px;color:var(--t2);}
.os-indep-fns{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.os-indep-fn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t2);}
.os-indep-fn::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--blue);flex:0 0 auto;}
.os-indep-foot{margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--mono);font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue);}

/* Team group cards */
.os-teamgrp{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20);border-radius:14px;padding:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 42%,rgba(255,255,255,.08));
  animation:wgIn .5s var(--ease) both;}
.os-teamgrp-h{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);}
.os-teamgrp-list{display:flex;flex-direction:column;gap:7px;margin-top:10px;}
.os-teamgrp-i{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--t2);line-height:1.35;}
.os-teamgrp-i i{font-size:10px;color:var(--t3);flex:0 0 auto;}

/* ── Ladder (the mobile design) ────────────────────────────────────── */
#os-ladder{margin-top:18px;animation:cvIn .38s var(--ease) both;}
.os-lad-tier{margin-bottom:20px;}
.os-lad-h{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--gold);}
.os-lad-h::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.os-lad-body{display:flex;flex-direction:column;gap:9px;margin-top:11px;padding-left:14px;
  border-left:1px solid rgba(240,200,50,.28);}
.os-lad-row{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20);border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 42%,rgba(255,255,255,.09));}
.os-lad-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:12px 14px;border:0;
  background:transparent;color:var(--text);text-align:left;cursor:pointer;font-family:var(--body);}
.os-lad-av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12.5px;font-weight:600;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);}
.os-lad-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.os-lad-av.os-av-vacant{background:rgba(212,175,55,.08);border:1.5px dashed rgba(240,200,50,.5);color:var(--gold);}
.os-lad-main{flex:1 1 auto;min-width:0;}
.os-lad-t{display:block;font-family:var(--disp);font-size:15px;font-weight:600;line-height:1.3;word-break:break-word;}
.os-lad-s{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--t2);}
.os-lad-chev{font-size:11px;color:var(--gold);flex:0 0 auto;transition:transform .3s var(--ease);}
.os-lad-btn[aria-expanded="true"] .os-lad-chev{transform:rotate(180deg);}
.os-lad-panel{padding:0 14px 14px;animation:cvIn .3s var(--ease) both;}
.os-lad-mail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.os-lad-mail .os-mail-a{flex:1 1 140px;white-space:normal;word-break:break-all;}
.os-lad-mail .os-icon-btn{width:44px;height:44px;font-size:12px;border-radius:10px;}
.os-lad-teams{display:flex;flex-direction:column;gap:6px;margin-top:12px;}
.os-lad-team{display:flex;align-items:center;gap:9px;padding-left:6px;font-size:13px;color:var(--t2);line-height:1.35;}
.os-lad-team i{font-size:10px;color:var(--t3);}
.os-lad-open{display:flex;align-items:center;gap:9px;margin-top:13px;min-height:44px;padding:0 15px;
  border:1px solid var(--gglow);border-radius:11px;background:var(--gdim);color:var(--gold);
  font-family:var(--body);font-size:13.5px;font-weight:600;cursor:pointer;}

/* ── Directory ─────────────────────────────────────────────────────── */
#os-directory{margin-top:18px;animation:cvIn .38s var(--ease) both;}
.os-dir-grp{margin-bottom:14px;padding:18px;animation:wgIn .5s var(--ease) both;}
.os-dir-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.os-dir-t{font-family:var(--disp);font-size:17px;font-weight:600;}
.os-dir-c{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:var(--t2);}
.os-dir-list{display:flex;flex-direction:column;gap:8px;margin-top:13px;}
.os-dir-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid rgba(255,255,255,.14);
  border-radius:12px;background:rgba(255,255,255,.03);}
.os-dir-main{flex:1 1 220px;min-width:0;}
.os-dir-post{font-size:13.5px;font-weight:600;line-height:1.3;word-break:break-word;}
.os-dir-holder{margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:1.1px;text-transform:uppercase;color:var(--t2);}
.os-dir-mail{flex:1 1 200px;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--t2);word-break:break-all;}
.os-dir-acts{display:flex;gap:8px;flex:0 0 auto;}
.os-dir-acts .os-icon-btn{width:44px;height:44px;font-size:12px;border-radius:10px;}
.os-dir-open{border-color:var(--gglow);background:var(--gdim);color:var(--gold);}

/* ── Standing notes + changelog ────────────────────────────────────── */
.os-foot{display:grid;grid-template-columns:1.6fr 1fr;gap:14px;margin-top:22px;}
.os-note{margin-top:13px;}
.os-note-h{font-family:var(--disp);font-size:15px;font-weight:600;}
.os-note p{margin:6px 0 0;font-size:14px;line-height:1.62;color:var(--t2);max-width:70ch;}
.os-log-i{display:flex;gap:11px;margin-top:12px;}
.os-log-i::before{content:'';width:8px;height:8px;margin-top:6px;flex:0 0 auto;border-radius:50%;background:var(--green);}
.os-log-t{font-size:13.5px;line-height:1.45;color:var(--t2);}
.os-log-m{margin-top:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--t2);}
.os-legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--border);font-size:12px;line-height:1.7;color:var(--t3);text-align:center;}
.os-legal-rn{font-family:var(--mono);margin-top:6px;color:var(--gold);letter-spacing:1.4px;}

/* ── Node overlay ──────────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s var(--ease) both;}
.modal-overlay.u-hide{display:none;}
.modal-overlay>.modal-card{width:100%;max-width:min(660px,calc(100vw - 24px));max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain;padding:26px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.20);
  background:linear-gradient(165deg,var(--base),var(--deep));position:relative;animation:mIn .32s var(--ease) both;}
.os-modal-x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:1px solid var(--border);
  border-radius:10px;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;}
.os-modal-x:hover{border-color:var(--gglow);color:var(--gold);}
#os-node-body{padding-right:46px;}
.os-md-t{font-family:var(--disp);margin:9px 0 0;font-size:23px;line-height:1.24;font-weight:700;word-break:break-word;}
.os-md-id{display:flex;align-items:center;gap:12px;margin-top:14px;}
.os-md-av{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:15px;font-weight:600;overflow:hidden;
  background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--void);}
.os-md-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.os-md-av.os-av-vacant{background:rgba(212,175,55,.08);border:1.5px dashed rgba(240,200,50,.5);color:var(--gold);}
.os-md-holder{font-size:15px;font-weight:600;word-break:break-word;line-height:1.3;}
.os-md-status{margin-top:4px;font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--t2);}
.os-md-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;}
.os-md-cell{padding:11px 13px;border:1px solid rgba(255,255,255,.14);border-radius:12px;min-width:0;}
.os-md-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--t2);}
.os-md-v{margin-top:5px;font-size:13.5px;word-break:break-word;}
.os-md-sub{margin-top:4px;font-family:var(--mono);font-size:11px;color:var(--t2);word-break:break-word;}
.os-md-sec{margin-top:18px;}
.os-md-list{display:flex;flex-direction:column;gap:8px;margin-top:9px;}
.os-md-li{display:flex;gap:10px;font-size:13.5px;line-height:1.55;color:var(--t2);}
.os-md-li::before{content:'';width:5px;height:5px;margin-top:7px;flex:0 0 auto;border-radius:50%;background:var(--gold);}
.os-md-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px;}
.os-md-tag{font-family:var(--mono);padding:7px 11px;border:1px solid var(--border);border-radius:999px;font-size:11.5px;color:var(--t2);}
.os-md-note{margin-top:18px;padding:13px 14px;border:1px solid rgba(85,136,255,.4);border-radius:12px;background:rgba(85,136,255,.10);}
.os-md-note-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);}
.os-md-note p{margin:7px 0 0;font-size:13.5px;line-height:1.6;color:var(--t2);}
.os-md-acts{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}

/* Toast */
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);z-index:900;
  display:flex;align-items:center;gap:10px;padding:13px 18px;border-radius:12px;border:1px solid var(--border);
  border-left:3px solid var(--green);background:linear-gradient(165deg,var(--base),var(--deep));
  box-shadow:0 18px 44px -16px rgba(0,0,0,.7);font-size:13.5px;opacity:0;
  transition:.35s var(--ease);pointer-events:none;}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
#toast.error{border-left-color:var(--red);}
#toast i{color:var(--green);}
#toast.error i{color:var(--red);}

/* Skeleton */
.os-skel{border-radius:16px;height:150px;background:linear-gradient(90deg,rgba(255,255,255,.05) 8%,rgba(255,255,255,.10) 18%,rgba(255,255,255,.05) 33%);
  background-size:800px 100%;animation:shim 1.4s linear infinite;}

.u-hide{display:none !important;}
.u-gold{color:var(--gold);}
/* Present in the a11y tree, out of the visual flow. The chart is a picture, so
   the same hierarchy is also a real nested list a screen reader can walk. */
.u-visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Keyframes (house grammar, cubic-bezier(.16,1,.3,1) only) */
@keyframes hdrDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}
@keyframes wgIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes cvIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes mIn{from{transform:translateY(18px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shim{0%{background-position:-380px 0}100%{background-position:380px 0}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mdScan{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* Stagger: .06s then +.04s per item (house standard). */
.os-tier-body>*:nth-child(1){animation-delay:.06s}
.os-tier-body>*:nth-child(2){animation-delay:.10s}
.os-tier-body>*:nth-child(3){animation-delay:.14s}
.os-tier-body>*:nth-child(4){animation-delay:.18s}
.os-tier-body>*:nth-child(5){animation-delay:.22s}
.os-tier-body>*:nth-child(6){animation-delay:.26s}

/* ── Responsive. Breakpoints per house standard, floor 320px. ───────── */
@media(max-width:1400px){
  /* Six no longer fit, so drop to three and give the gutter back to the aside. */
  .dwrap{gap:14px;}


}
@media(max-width:1100px){
  .swrap,.twrap{grid-template-columns:repeat(2,minmax(0,1fr));--cols:2;}


  /* The floating aside just overlaps at this width, so it rejoins the flow. */
  .safeside{position:static !important;width:auto !important;margin-top:14px !important;}
  .os-foot{grid-template-columns:1fr;}
}
@media(max-width:820px){
  .swrap,.twrap,.ewrap,.dwrap,.gwrap,.onewrap{grid-template-columns:1fr;--cols:1;justify-content:stretch;}
  /* The design hides the connector spine at this width rather than shortening it,
     and it is right to: every grid above has just collapsed to a single column, so
     the tree is a vertical stack and a one pixel line between stacked blocks reads
     as a stray mark rather than as a branch. This was height:18px with no recorded
     reason, which is drift rather than a decision. */
  .spine{display:none;}
  .hidesm{display:none !important;}
  .os-wrap{padding:18px 14px 56px;}
  .os-band{padding:20px 18px 18px;}
}
@media(max-width:640px){
  .hidexs,.page-pill,.hdr-clock{display:none !important;}
  .hdr-back-btn span{display:none;}
  .rowstack{flex-direction:column !important;align-items:stretch !important;}
  .os-stamps{width:100%;}
  .os-stamp{flex:1 1 auto;min-width:0;}
  #os-view-switch{width:100%;}
  .vtab{flex:1 1 auto;justify-content:center;padding:0 10px;}
  #os-node-body{padding-right:0;}
  .os-modal-x{position:static;margin:0 0 12px auto;}
  .os-md-grid{grid-template-columns:1fr;}
  /* Overlay becomes a bottom sheet, with the safe-area inset honoured. */
  .modal-overlay{padding:0;align-items:flex-end;}
  .modal-overlay>.modal-card{max-width:100% !important;border-radius:18px 18px 0 0;
    max-height:88vh;padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .os-md-acts>*{width:100%;justify-content:center;}
}
@media(max-width:400px){
  .os-title{font-size:19px;}
  .os-chip{font-size:11px;letter-spacing:.8px;padding:4px 9px;}
  .os-av{width:52px;height:52px;font-size:16px;}
  .vtab span{display:none;}
  .vtab{padding:0 6px;}
  /* NO overflow-x:hidden on html/body here. It creates a scroll container that
     BREAKS position:sticky, and the header then scrolls away at 320px. Measured.
     Overflow is prevented properly instead: every grid child carries min-width:0
     and long strings word-break, so nothing forces the page wider. */
}

/* Print: the page itself prints cleanly, without needing the PDF export. */
@media print{
  .noprint,#hdr,.os-toolbar,#os-search-results,.os-recruit,.os-modal-x{display:none !important;}
  html,body{background:#fff !important;color:#111 !important;}
  .os-wrap{padding:0;max-width:none;}
  .glass,.os-node,.os-teamgrp,.os-lad-row,.os-dir-grp{background:#fff !important;border:1px solid #bbb !important;
    box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;}
  .os-title,.os-node-t,.os-dir-t,.os-note-h,.os-indep-t{color:#111 !important;}
  .os-motto,.os-lede,.os-node-holder,.os-note p,.os-chip,.os-mail-a{color:#333 !important;}
  .os-eyebrow,.os-node-vacant,.os-legal-rn,.os-teamgrp-h{color:#8a6d00 !important;}
  .safeside{position:static !important;width:auto !important;}
  .chartcols{padding-right:0 !important;}
  #os-ladder,#os-directory{display:none !important;}
  #os-chart{display:block !important;}
  .os-scan{display:none;}
  *{animation:none !important;}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ── Live occupancy: department roster on a card, people in the overlay ──
   Added 2026-07-27 (VP): the chart showed a post as filled while the
   department under it looked empty. Faces are capped at six on a card so a
   large department cannot stretch the tier row. */
.os-node-hrole{margin-top:2px;font-family:var(--mono);font-size:10px;letter-spacing:.7px;
  color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.os-roster{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--border);}
.os-roster-faces{display:flex;align-items:center;}
.os-roster-av{width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  margin-right:-7px;border:1.5px solid var(--base);background:var(--deep);}
.os-roster-av:last-of-type{margin-right:0;}
.os-roster-av img,.os-roster-av .av,.os-roster-av span{width:100%;height:100%;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:9px;}
.os-roster-more{display:inline-flex;align-items:center;justify-content:center;min-width:24px;
  height:24px;padding:0 5px;margin-left:9px;border-radius:12px;border:1px solid var(--border);
  background:var(--deep);font-family:var(--mono);font-size:9.5px;color:var(--t3);}
.os-roster-k{font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--t3);}

.os-md-hrole{margin-top:3px;font-family:var(--mono);font-size:11px;letter-spacing:.8px;color:var(--t3);}
.os-md-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;
  padding:0 6px;margin-left:7px;border-radius:9px;border:1px solid var(--gglow);background:var(--gdim);
  color:var(--gold);font-size:10px;letter-spacing:.5px;}
.os-md-empty{margin-top:8px;font-size:13px;line-height:1.6;color:var(--t3);}
.os-md-people{display:flex;flex-direction:column;gap:8px;margin-top:10px;}
.os-md-person{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--border);background:var(--deep);}
.os-md-pav{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--base);}
.os-md-pav img,.os-md-pav .av,.os-md-pav span{width:100%;height:100%;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-size:12px;}
.os-md-pmain{flex:1 1 auto;min-width:0;}
.os-md-pn{font-weight:600;font-size:13.5px;word-break:break-word;}
.os-md-pr{margin-top:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.7px;color:var(--t3);}
@media(max-width:560px){
  .os-md-person{align-items:flex-start;}
  .os-md-pn{font-size:13px;}
}


/* ── TREE CONNECTORS ──────────────────────────────────────────────────────
   Real tree lines: a drop from the parent, one horizontal bar with ROUNDED
   ELBOWS at each end, and a stem down onto every child. 2px and near-solid,
   because the previous 1px gradient at .42 alpha was barely visible.

   Lines are drawn on the ROW BODY and on a per-child .os-slot wrapper, never on
   the cards. Both .os-node and .os-teamgrp set overflow:hidden, so a stem drawn
   as a card pseudo-element is clipped the instant it leaves the card box.
   Measured, not theorised.

   Geometry has one owner. --cols is the live column count for the current
   breakpoint, declared next to grid-template-columns so the two cannot drift.
   --n is the child count (class os-nN). Effective count is min(cols, n), else a
   row holding fewer cards than columns grows stems pointing at empty space. In a
   repeat(C,1fr) grid column k's centre is (2k-1)/(2C), so the first sits 50%/C
   from the left and the last the same from the right. */
.os-tier-body.has-join{
  --ce:min(var(--cols,1),var(--n,1));
  --jt:26px;                 /* bar sits this far above the row body */
  --line:rgba(240,200,50,.72);
  position:relative;margin-top:var(--jt);
}
/* The bar, plus its two outer verticals, as one bordered box. The rounded top
   corners give the elbow a real org-chart corner instead of a hard T-junction. */
/* The rail STRETCHES THE FULL WIDTH of the row, left end to right end, with a
   turned-down cap at each end. It used to span only first-card-centre to
   last-card-centre, which is the textbook org-chart convention but not what the
   structure says: the Head of HR sits at the LEFT END of this line and the
   Coordinator at the RIGHT END. */
.os-tier-body.has-join::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  top:calc(var(--jt) * -1);height:16px;
  left:0;right:0;
  border:2px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0;
}
/* Per-child stem, from bar level down onto the card. */
.os-slot{position:relative;--sh:var(--jt);}
.os-tier-body.has-join>.os-slot::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  left:50%;margin-left:-1px;width:2px;
  top:calc(var(--jt) * -1);height:var(--sh);
  background:var(--line);
}
/* THE END DROPS. The rail's turned-down cap used to be a 16px stub that led
   nowhere, while the outer card ALSO carried its own stem at its centre: two
   downward lines per end, one of them pointing at nothing. The cap is now the
   start of the real drop. The first and last cards take their stem at the row's
   OUTER EDGE, continuing straight down from the cap on the same 2px axis, so each
   end reads as ONE line: rounded corner, then straight down to the card. Inner
   cards keep a centred stem. `:not(:last-child)` / `:not(:first-child)` leave a
   lone card centred, since a single-card row draws no rail at all.
   The stem starts BELOW the cap so it does not cut across the corner radius. */
.os-tier-body.has-join>.os-slot:first-child:not(:last-child)::before{
  left:0;margin-left:0;
  top:calc(var(--jt) * -1 + 16px);height:calc(var(--sh) - 16px);
}
.os-tier-body.has-join>.os-slot:last-child:not(:first-child)::before{
  left:auto;right:0;margin-left:0;
  top:calc(var(--jt) * -1 + 16px);height:calc(var(--sh) - 16px);
}

/* A lone centred card takes the drop only, no bar and no elbows. */
.os-tier-body.has-join.onewrap::before{display:none;}
.os-n1{--n:1}.os-n2{--n:2}.os-n3{--n:3}.os-n4{--n:4}
.os-n5{--n:5}.os-n6{--n:6}.os-n7{--n:7}.os-n8{--n:8}

/* STAGGER. Head of HR keeps the senior height on the General Management row;
   Volunteer Management and Engagement and the Coordinator sit lower, so the row
   reads as a rank rather than three equals. Driven by `chartDrop` on the node,
   so the chart stays data-led and no nodeId is hardcoded in the renderer. */
.os-slot--low{padding-top:250px;--sh:calc(var(--jt) + 250px);}

/* The parent drop. Was 1px fading to .06 alpha, which read as a smudge and did
   not visibly meet the bar below it. */
.spine{width:2px;height:26px;margin:0 auto;background:rgba(240,200,50,.72);border-radius:2px;}

/* Stacked (single column): the bar has no width, so chain the cards vertically
   instead of leaving each with an orphaned stub. Engages at 820px, which is where
   the grids actually collapse to one column. This is also the case that had NO
   lines at all, because .spine was display:none below 640px. */
@media(max-width:820px){
  .os-tier-body.has-join{--jt:20px;}
  .os-tier-body.has-join::before{display:none;}
  /* No rail in one column, so the edge drops revert to centred stems. */
  .os-tier-body.has-join>.os-slot::before{
    left:50%;right:auto;margin-left:-1px;
    top:calc(var(--jt) * -1);height:var(--sh);
  }
  .os-slot--low{padding-top:0;--sh:var(--jt);}   /* no stagger when stacked */
  .os-tier-body.has-join>.os-slot:not(:last-child)::after{
    content:'';position:absolute;pointer-events:none;
    left:50%;margin-left:-1px;width:2px;
    bottom:calc(var(--jt) * -1);height:var(--jt);
    background:var(--line);
  }
}