/* ───────────────────────────────────────────────────────────
   MANAS AI — OPERATING MAP  (/manas-workflow)
   The one page that answers "who sees what, and in what order".
   Clinical blueprint surface: ink ground, hairline draughting grid,
   tier-coded cascade, numbered journey spine. Print-clean.
   Brand type only: Satoshi (display/numerals) + Inter (body).
   ─────────────────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

:root{
  /* Ground — tinted ink, never pure black */
  --g0:#07090C; --g1:#0C1014; --g2:#12171C; --g3:#1A2027; --g4:#232B33;
  /* Hairlines — draughting paper */
  --line:rgba(255,255,255,.07);
  --line2:rgba(255,255,255,.13);
  --line3:rgba(255,255,255,.22);
  /* Type */
  --t1:#F2F5F7; --t2:rgba(242,245,247,.76); --t3:rgba(242,245,247,.52); --t4:rgba(242,245,247,.33);
  /* Pro Physio teal — the service-line accent */
  --teal:#2ED3C6; --teal-soft:rgba(46,211,198,.13); --teal-line:rgba(46,211,198,.38);
  /* Tier ramp — the semantic colour system. Each tier also carries a text
     label, so colour is never the only carrier of meaning. */
  --tier1:#F0B429; --tier1-soft:rgba(240,180,41,.13);
  --tier2:#5FE3B4; --tier2-soft:rgba(95,227,180,.13);
  --tier3:#79B4FF; --tier3-soft:rgba(121,180,255,.13);
  --tier4:#C295FF; --tier4-soft:rgba(194,149,255,.13);
  --tier5:#FF9E7A; --tier5-soft:rgba(255,158,122,.13);
  /* Status */
  --ok:#41D69A; --pend:#FFB84D; --todo:rgba(242,245,247,.42);
  --r:10px; --r2:14px; --r3:20px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 46px -28px rgba(0,0,0,.85);
  --grid-ink:rgba(255,255,255,.028);
}

:root[data-theme="light"]{
  --g0:#F4F6F5; --g1:#FFFFFF; --g2:#F7F9F9; --g3:#EEF2F2; --g4:#E2E8E8;
  --line:rgba(6,20,24,.10); --line2:rgba(6,20,24,.16); --line3:rgba(6,20,24,.26);
  --t1:#08131A; --t2:rgba(8,19,26,.76); --t3:rgba(8,19,26,.56); --t4:rgba(8,19,26,.38);
  --teal:#0A8F87; --teal-soft:rgba(10,143,135,.10); --teal-line:rgba(10,143,135,.34);
  --tier1:#96660A; --tier1-soft:rgba(150,102,10,.11);
  --tier2:#0C8560; --tier2-soft:rgba(12,133,96,.11);
  --tier3:#1F5FBF; --tier3-soft:rgba(31,95,191,.10);
  --tier4:#6B3FBF; --tier4-soft:rgba(107,63,191,.10);
  --tier5:#B5501F; --tier5-soft:rgba(181,80,31,.10);
  --ok:#0E8A5C; --pend:#9A6408; --todo:rgba(8,19,26,.45);
  --shadow:0 1px 2px rgba(6,20,24,.05), 0 16px 40px -30px rgba(6,20,24,.45);
  --grid-ink:rgba(6,20,24,.035);
}

body{
  font-family:var(--font-body,'Inter',system-ui,sans-serif);
  background:var(--g0); color:var(--t1);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Draughting grid — fixed, non-interactive, so it never repaints on scroll */
.blueprint{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-ink) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-ink) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(115% 90% at 50% 0%,#000 25%,transparent 82%);
  -webkit-mask-image:radial-gradient(115% 90% at 50% 0%,#000 25%,transparent 82%);
}
.wrap{position:relative; z-index:1}

h1,h2,h3,h4,.num{font-family:var(--font-display,'Satoshi',system-ui,sans-serif)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
a{color:inherit}

/* ── TOP BAR ──────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px clamp(16px,4vw,44px);
  background:color-mix(in srgb,var(--g1) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.bar-back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; color:var(--t3); text-decoration:none;
  padding:8px 11px; border:1px solid var(--line2); border-radius:99px;
  min-height:36px; transition:color .16s,border-color .16s;
}
.bar-back:hover{color:var(--t1); border-color:var(--line3)}
.bar-back svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.bar-id{display:flex; align-items:baseline; gap:9px; min-width:0}
.bar-id b{font-family:var(--font-display,'Satoshi',sans-serif); font-size:14.5px; font-weight:700; letter-spacing:-.01em}
.bar-id span{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--t4)}
.bar-sp{flex:1 1 auto}
.icon-btn{
  width:36px;height:36px;flex:none; display:grid; place-items:center;
  background:transparent; border:1px solid var(--line2); border-radius:9px;
  color:var(--t3); cursor:pointer; transition:color .16s,border-color .16s;
}
.icon-btn:hover{color:var(--t1); border-color:var(--line3)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round}
:root[data-theme="light"] .ico-moon{display:none}
:root:not([data-theme="light"]) .ico-sun{display:none}

/* Segmented service-line switcher */
.seg{display:flex; gap:3px; padding:3px; background:var(--g2); border:1px solid var(--line2); border-radius:99px}
.seg button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body,'Inter',sans-serif); font-size:12.5px; font-weight:500;
  color:var(--t3); padding:7px 14px; border-radius:99px; min-height:34px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  transition:background .18s,color .18s;
}
.seg button:hover{color:var(--t1)}
.seg button[aria-pressed="true"]{background:var(--teal-soft); color:var(--teal); box-shadow:inset 0 0 0 1px var(--teal-line)}
.seg svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}

/* ── LAYOUT ───────────────────────────────────────── */
main{padding:0 clamp(16px,4vw,44px) 100px; max-width:1280px; margin:0 auto}
section{padding-top:clamp(46px,6vw,82px); scroll-margin-top:80px}

.eyebrow{
  display:flex; align-items:center; gap:11px; margin-bottom:16px;
  font-size:11px; letter-spacing:.19em; text-transform:uppercase; color:var(--t4);
}
.eyebrow .rule{flex:1 1 auto; height:1px; background:var(--line)}
.eyebrow .mk{
  font-family:var(--font-display,'Satoshi',sans-serif); font-weight:700;
  color:var(--teal); letter-spacing:.1em;
}
h2{font-size:clamp(23px,3.1vw,33px); font-weight:700; letter-spacing:-.022em; line-height:1.16; margin-bottom:12px}
.lede{font-size:15.5px; color:var(--t2); max-width:74ch; line-height:1.66}
.lede + .lede{margin-top:10px}

/* ── MASTHEAD ─────────────────────────────────────── */
.mast{padding:clamp(44px,7vw,92px) 0 0}
.mast-kick{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:6px 13px 6px 8px; border:1px solid var(--teal-line); border-radius:99px;
  background:var(--teal-soft); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--teal); font-weight:600;
}
.mast-kick i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.mast h1{
  font-size:clamp(38px,7.4vw,80px); font-weight:900; line-height:.95;
  letter-spacing:-.042em; max-width:20ch;
}
.mast h1 em{font-style:normal; color:var(--teal); display:block}
.mast .lede{margin-top:24px; font-size:clamp(16px,1.9vw,19px)}
.mast-facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin-top:40px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r2); overflow:hidden;
}
.fact{background:var(--g1); padding:18px 20px}
.fact b{display:block; font-family:var(--font-display,'Satoshi',sans-serif); font-size:30px; font-weight:900; letter-spacing:-.035em; line-height:1}
.fact span{display:block; margin-top:6px; font-size:12px; color:var(--t3); line-height:1.45}

/* ── AXES GRID (service line × tier) ──────────────── */
.axes{
  margin-top:26px; border:1px solid var(--line); border-radius:var(--r2);
  background:var(--g1); overflow-x:auto; box-shadow:var(--shadow);
}
.axes table{width:100%; border-collapse:collapse; min-width:660px}
.axes th,.axes td{padding:13px 15px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
.axes thead th{
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:11.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--t3);
  background:var(--g2); white-space:nowrap; position:sticky; top:0;
}
.axes tbody th{
  font-family:var(--font-body,'Inter',sans-serif); font-weight:500; font-size:13.5px;
  color:var(--t1); white-space:nowrap; background:var(--g1);
  position:sticky; left:0; border-right:1px solid var(--line);
}
.axes tbody th small{display:block; font-weight:400; font-size:11.5px; color:var(--t4); margin-top:2px}
.axes td{font-size:13px; color:var(--t2)}
.axes tr:last-child th,.axes tr:last-child td{border-bottom:0}
.axes td code{
  display:inline-block; font-family:var(--font-mono,monospace); font-size:11.5px;
  color:var(--teal); background:var(--teal-soft); padding:1px 6px; border-radius:5px;
  margin-top:5px; text-decoration:none;
}
a.route:hover code{text-decoration:underline}

/* ── TIER CASCADE (the flowchart) ─────────────────── */
.cascade{margin-top:30px; display:flex; flex-direction:column; align-items:stretch}

.node{
  position:relative; display:grid; grid-template-columns:64px 1fr;
  border:1px solid var(--line2); border-radius:var(--r2);
  background:var(--g1); box-shadow:var(--shadow); overflow:hidden;
  transition:border-color .2s,opacity .2s;
}
.node-rail{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:8px; padding:18px 0; background:var(--tc-soft);
  border-right:1px solid var(--line);
}
.node-rail b{
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:22px; font-weight:900;
  color:var(--tc); line-height:1; letter-spacing:-.03em;
}
.node-rail span{
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--tc);
  writing-mode:vertical-rl; opacity:.8;
}
.node-body{padding:17px 20px 18px}
.node-head{display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin-bottom:3px}
.node-head h3{margin:0}
/* The card is a plain container; the heading is the disclosure toggle. */
.node-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:inherit; font-size:18.5px; font-weight:700; letter-spacing:-.02em;
  color:inherit; background:none; border:0; padding:0; margin:0;
  text-align:left; cursor:pointer; appearance:none; transition:color .15s;
}
.node-btn::after{
  content:''; flex:none; width:7px; height:7px;
  border-right:2px solid var(--tc); border-bottom:2px solid var(--tc);
  transform:rotate(45deg) translateY(-2px); transition:transform .22s;
}
.node-btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(0)}
.node-btn:hover{color:var(--tc)}
.node-btn:focus-visible{outline:2px solid var(--teal); outline-offset:4px; border-radius:4px}
.node-who{font-size:12px; color:var(--tc); font-weight:600; letter-spacing:.02em}
.node-scope{font-size:13.5px; color:var(--t2); line-height:1.58; max-width:82ch}
.node-chips{display:flex; flex-wrap:wrap; gap:6px; margin:12px 0 0; padding:0; list-style:none}
.chip{
  font-size:11.5px; padding:4px 9px; border-radius:7px; line-height:1.35;
  border:1px solid var(--line2); color:var(--t2); background:var(--g2);
}
.chip.can{border-color:var(--tc); color:var(--tc); background:var(--tc-soft)}
.chip.cant{color:var(--t4)}
.chip.cant::before{content:'✕ '; opacity:.7}
.chip.can::before{content:'✓ '; opacity:.9}
.node-foot{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color:var(--t3);
}
.node-foot a{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  font-family:var(--font-mono,monospace); font-size:11.5px; color:var(--teal);
  border:1px solid var(--teal-line); background:var(--teal-soft);
  padding:5px 10px; border-radius:7px; min-height:30px;
}
.node-foot a:hover{text-decoration:underline}

.t1{--tc:var(--tier1); --tc-soft:var(--tier1-soft)}
.t2{--tc:var(--tier2); --tc-soft:var(--tier2-soft)}
.t3{--tc:var(--tier3); --tc-soft:var(--tier3-soft)}
.t4{--tc:var(--tier4); --tc-soft:var(--tier4-soft)}
.t5{--tc:var(--tier5); --tc-soft:var(--tier5-soft)}

/* Connector between stacked nodes — the delegation act, named */
.link{
  position:relative; display:flex; justify-content:center;
  padding:9px 0; min-height:56px;
}
.link::before{
  content:''; position:absolute; top:0; bottom:0; left:50%;
  width:1px; background:linear-gradient(var(--line3),var(--line2)); transform:translateX(-.5px);
}
.link i{
  position:relative; z-index:1; font-style:normal; align-self:center;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--t3);
  background:var(--g0); border:1px solid var(--line2); border-radius:99px;
  padding:5px 13px; text-align:center; line-height:1.35;
}
.link i b{color:var(--t1); font-weight:600}
.link.arrow::after{
  content:''; position:absolute; bottom:0; left:50%; width:7px; height:7px;
  border-right:1px solid var(--line3); border-bottom:1px solid var(--line3);
  transform:translate(-50%,-2px) rotate(45deg);
}

/* The final split: therapist record fans out to patient + referrer */
.fork{position:relative; height:44px}
.fork::before{
  content:''; position:absolute; top:0; left:50%; width:1px; height:20px;
  background:var(--line3); transform:translateX(-.5px);
}
.fork::after{
  content:''; position:absolute; top:20px; left:25%; right:25%; height:1px;
  background:var(--line3);
}
.fork .drop{position:absolute; top:20px; width:1px; height:24px; background:var(--line3)}
.fork .drop.l{left:25%}
.fork .drop.r{right:25%}
.leaves{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.leaves .node{grid-template-columns:52px 1fr}

/* Focus mode — clicking a tier dims the rest */
.cascade.focused .node:not(.open){opacity:.36}
.cascade.focused .node.open{border-color:var(--tc)}
.node-detail{display:none; margin-top:14px; padding-top:13px; border-top:1px dashed var(--line2)}
.node.open .node-detail{display:block; animation:rise .3s ease both}
.node-detail h4{font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:var(--t4); margin-bottom:8px}
.node-detail ol{margin:0 0 4px; padding-left:0; list-style:none; counter-reset:d}
.node-detail li{
  counter-increment:d; position:relative; padding-left:26px; margin-bottom:7px;
  font-size:13px; color:var(--t2); line-height:1.55;
}
.node-detail li::before{
  content:counter(d,decimal-leading-zero); position:absolute; left:0; top:0;
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:10.5px; font-weight:700;
  color:var(--tc); letter-spacing:.04em;
}
@keyframes rise{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

.legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; font-size:12px; color:var(--t3)}
.legend b{
  display:inline-flex; align-items:center; gap:6px; font-weight:500;
  border:1px solid var(--line2); border-radius:99px; padding:4px 11px;
}
.legend b::before{content:''; width:8px; height:8px; border-radius:2px; background:var(--lc)}

/* ── ACCESS MATRIX ────────────────────────────────── */
.matrix{
  margin-top:26px; border:1px solid var(--line); border-radius:var(--r2);
  background:var(--g1); overflow:auto; box-shadow:var(--shadow); max-height:none;
}
.matrix table{width:100%; border-collapse:separate; border-spacing:0; min-width:880px}
.matrix th,.matrix td{padding:11px 13px; text-align:left; border-bottom:1px solid var(--line)}
.matrix thead th{
  position:sticky; top:0; z-index:2; background:var(--g2);
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.4;
  border-bottom:1px solid var(--line2); vertical-align:bottom;
}
.matrix thead th small{display:block; font-family:var(--font-body,'Inter',sans-serif); font-weight:400; font-size:10.5px; letter-spacing:.04em; text-transform:none; color:var(--t4); margin-top:3px}
.matrix thead th.h1{color:var(--tier1)} .matrix thead th.h2{color:var(--tier2)}
.matrix thead th.h3{color:var(--tier3)} .matrix thead th.h4{color:var(--tier4)}
.matrix thead th.h5{color:var(--tier5)}
.matrix tbody th{
  position:sticky; left:0; z-index:1; background:var(--g1);
  font-family:var(--font-body,'Inter',sans-serif); font-weight:500; font-size:13px;
  color:var(--t1); min-width:246px; border-right:1px solid var(--line);
}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:var(--g2)}
.matrix td{font-size:12px; color:var(--t3); line-height:1.45}
.matrix td b{
  display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:11.5px;
  letter-spacing:.02em; margin-bottom:2px;
}
.matrix td.yes b{color:var(--ok)} .matrix td.yes b::before{content:'●'}
.matrix td.part b{color:var(--pend)} .matrix td.part b::before{content:'◐'}
.matrix td.no b{color:var(--todo)} .matrix td.no b::before{content:'○'}
.matrix td.no{color:var(--t4)}
.matrix tr.grp th{
  background:var(--g3); font-family:var(--font-display,'Satoshi',sans-serif);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--t3);
  font-weight:700;
}
.matrix tr.grp td{background:var(--g3)}

/* ── JOURNEY SPINE ────────────────────────────────── */
.spine{margin-top:30px; position:relative; padding-left:0}
.step{
  position:relative; display:grid; grid-template-columns:78px 1fr; gap:0;
  border-left:1px solid var(--line2); margin-left:26px;
}
.step:first-of-type{border-top-left-radius:2px}
.step:last-of-type{border-left-color:transparent}
.step-mk{
  position:relative; padding:24px 0 0;
}
.step-mk b{
  position:absolute; left:-26px; top:20px;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--g1); border:1px solid var(--line2);
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:16px; font-weight:900;
  color:var(--t2); letter-spacing:-.02em;
}
.step-body{padding:22px 0 26px 18px}
.step-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.step-head h3{font-size:17px; font-weight:700; letter-spacing:-.017em}
.owner{
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  padding:3px 9px; border-radius:99px; border:1px solid var(--oc);
  color:var(--oc); background:var(--oc-soft); white-space:nowrap;
}
.o1{--oc:var(--tier1);--oc-soft:var(--tier1-soft)} .o2{--oc:var(--tier2);--oc-soft:var(--tier2-soft)}
.o3{--oc:var(--tier3);--oc-soft:var(--tier3-soft)} .o4{--oc:var(--tier4);--oc-soft:var(--tier4-soft)}
.o5{--oc:var(--tier5);--oc-soft:var(--tier5-soft)}
.step-body p{font-size:14px; color:var(--t2); line-height:1.62; max-width:78ch}
.step-meta{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.step-meta span{
  font-size:11.5px; color:var(--t3); border:1px solid var(--line);
  background:var(--g2); border-radius:7px; padding:4px 9px;
}
.step-meta span em{font-style:normal; color:var(--t4); letter-spacing:.06em; text-transform:uppercase; font-size:9.5px; margin-right:5px}
.step[data-line]{display:none}
.step[data-line].on{display:grid}

/* ── ROLE RUNBOOKS ────────────────────────────────── */
.runbooks{
  display:grid; gap:16px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
}
.rb{
  border:1px solid var(--line); border-radius:var(--r2); background:var(--g1);
  padding:19px 20px 21px; box-shadow:var(--shadow);
  border-top:2px solid var(--tc);
}
.rb-head{display:flex; align-items:baseline; gap:9px; margin-bottom:4px}
.rb-head b{font-family:var(--font-display,'Satoshi',sans-serif); font-size:11px; font-weight:900; color:var(--tc); letter-spacing:.1em}
.rb-head h3{font-size:16px; font-weight:700; letter-spacing:-.018em}
.rb > p{font-size:12.5px; color:var(--t3); margin-bottom:14px; line-height:1.55}
.rb ol{list-style:none; counter-reset:r; margin:0; padding:0}
.rb li{
  counter-increment:r; position:relative; padding-left:25px; padding-bottom:11px;
  font-size:13px; color:var(--t2); line-height:1.55;
}
.rb li:not(:last-child)::after{
  content:''; position:absolute; left:7.5px; top:19px; bottom:1px; width:1px; background:var(--line2);
}
.rb li::before{
  content:counter(r); position:absolute; left:0; top:1px;
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  background:var(--tc-soft); color:var(--tc); border:1px solid var(--tc);
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:9.5px; font-weight:700;
}
.rb li b{color:var(--t1); font-weight:600}

/* ── SURFACE REGISTER ─────────────────────────────── */
.register{
  margin-top:26px; border:1px solid var(--line); border-radius:var(--r2);
  background:var(--g1); overflow:auto; box-shadow:var(--shadow);
}
.register table{width:100%; border-collapse:collapse; min-width:760px}
.register th,.register td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:13px}
.register thead th{
  background:var(--g2); font-family:var(--font-display,'Satoshi',sans-serif); font-size:11px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); white-space:nowrap;
}
.register tbody tr:hover td,.register tbody tr:hover th{background:var(--g2)}
.register td:first-child{white-space:nowrap}
.register a{font-family:var(--font-mono,monospace); font-size:12px; color:var(--teal); text-decoration:none}
.register a:hover{text-decoration:underline}
.register td.desc{color:var(--t2); min-width:270px}
.tiers{display:flex; gap:4px; flex-wrap:wrap}
.tiers i{
  font-style:normal; width:20px; height:20px; border-radius:5px; display:grid; place-items:center;
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:10px; font-weight:700;
  border:1px solid currentColor;
}
.tiers i.x1{color:var(--tier1);background:var(--tier1-soft)} .tiers i.x2{color:var(--tier2);background:var(--tier2-soft)}
.tiers i.x3{color:var(--tier3);background:var(--tier3-soft)} .tiers i.x4{color:var(--tier4);background:var(--tier4-soft)}
.tiers i.x5{color:var(--tier5);background:var(--tier5-soft)}
.st{display:inline-flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap}
.st::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.st.live{color:var(--ok)} .st.pilot{color:var(--pend)} .st.build{color:var(--todo)}
/* Retired: a surface that existed and was withdrawn. Reads as muted as "to
   build" on purpose — both mean "do not send anyone here" — but the row keeps
   its name and tiers so someone holding an old bookmark can see what happened
   to it rather than finding it simply missing from the register. */
.st.gone{color:var(--todo)}

/* ── CHANGE NOTES ─────────────────────────────────── */
.notes{display:grid; gap:14px; margin-top:26px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.note{
  border:1px solid var(--line); border-left:2px solid var(--teal); border-radius:var(--r);
  background:var(--g1); padding:17px 19px;
}
.note h3{font-size:14.5px; font-weight:700; margin-bottom:4px; letter-spacing:-.012em}
.note code{font-family:var(--font-mono,monospace); font-size:11.5px; color:var(--teal)}
.note p{font-size:13px; color:var(--t2); line-height:1.6; margin-top:7px}
.note ul{margin:9px 0 0; padding-left:17px; font-size:13px; color:var(--t2); line-height:1.6}
.note li{margin-bottom:4px}

.foot{
  margin-top:70px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
  font-size:12px; color:var(--t4);
}
.foot a{color:var(--teal); text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .foot-sp{flex:1 1 auto}

/* ── RESPONSIVE ───────────────────────────────────── */
@media (max-width:860px){
  .leaves{grid-template-columns:1fr; gap:0}
  .fork{height:26px}
  .fork::after,.fork .drop{display:none}
  .leaves .link{min-height:44px}
  .node{grid-template-columns:48px 1fr}
  .node-rail span{display:none}
  .step{grid-template-columns:56px 1fr; margin-left:20px}
  .step-mk b{width:40px;height:40px;left:-20px;font-size:14px}
  .step-body{padding-left:14px}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .bar{padding:9px 14px; gap:9px}
  .bar-id span{display:none}
  .seg{width:100%; order:9; overflow-x:auto}
  .seg button{flex:1 1 auto; justify-content:center; padding:7px 10px}
  .node-body{padding:15px 15px 16px}
  .link i{font-size:10px; padding:4px 10px}
}

/* ── YOUR DOOR ───────────────────────────────────────────────────────────────
   The masthead used to open with two paragraphs of theory. This card replaces
   the second one: it names the reader's own tier and links to their console, so
   the first thing on the page is an action rather than an explanation. Painted
   from the shared access registry; the markup's default state is "not signed
   in", which is also what a visitor with no JavaScript sees. */
.door{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding:14px 16px;
  background:var(--g1); border:1px solid var(--line2); border-radius:var(--r2);
  box-shadow:var(--shadow);
}
.door-mk{
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  font-family:var(--font-display,'Satoshi',sans-serif); font-size:14px; font-weight:900;
  letter-spacing:-.02em; color:var(--t3);
  background:var(--g2); border:1px solid var(--line2); border-radius:11px;
}
.door-body{min-width:0; flex:1 1 14rem}
.door-body b{display:block; font-size:14.5px; font-weight:700; letter-spacing:-.015em; color:var(--t1)}
.door-body span{display:block; margin-top:3px; font-size:12.5px; color:var(--t3); line-height:1.5}
.door-go{
  flex:none; display:inline-flex; align-items:center; min-height:38px; padding:0 16px;
  font-size:13px; font-weight:600; color:var(--g0); background:var(--teal);
  border-radius:99px; text-decoration:none; transition:filter .16s,transform .12s ease;
}
.door-go:hover{filter:brightness(1.08)}
.door-go:active{transform:scale(.97)}
/* The way out, beside the way in. Ghost weight on purpose: leaving is the
   rarer intent, and it should not compete with the door itself. Revealed by
   paintDoor() only when somebody is actually signed in. */
.door-out{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 14px;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--t3); cursor:pointer;
  background:transparent; border:1px solid var(--line2); border-radius:99px;
  transition:border-color .16s,color .16s;
}
.door-out:hover{border-color:var(--t2,var(--t3)); color:var(--t1)}
.door-out[disabled]{opacity:.6; cursor:default}
.door-out svg{width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
/* Once the tier is known the card takes that tier's colour — the same ramp the
   cascade and the runbooks use, so the three read as one system. */
.door.known .door-mk{color:var(--tc,var(--teal)); border-color:var(--tc,var(--line2)); background:var(--tc-soft,var(--g2))}
.door.known{border-color:var(--tc,var(--line2))}
.door.t1{--tc:var(--tier1); --tc-soft:var(--tier1-soft)}
.door.t2{--tc:var(--tier2); --tc-soft:var(--tier2-soft)}
.door.t3{--tc:var(--tier3); --tc-soft:var(--tier3-soft)}
.door.t4{--tc:var(--tier4); --tc-soft:var(--tier4-soft)}
.door.t5{--tc:var(--tier5); --tc-soft:var(--tier5-soft)}
@media (max-width:560px){
  .door{gap:12px}
  .door-go{width:100%; justify-content:center; min-height:44px}
}

/* ── PROGRESSIVE DISCLOSURE ──────────────────────────────────────────────────
   Two things on this page are reference, not reading: the 14-row access matrix
   and the console changelog. Both were pushing the workflow — the part people
   actually come for — two screens down. They now open on request. Everything is
   still on the page, still printable (script opens all of these before print),
   still findable by the browser's own find-in-page in most engines. */
.disclose{margin-top:22px; border:1px solid var(--line); border-radius:var(--r2); background:var(--g1)}
.disclose > summary{
  display:flex; align-items:center; gap:9px; min-height:44px; padding:11px 16px;
  font-size:13.5px; font-weight:600; color:var(--t2); cursor:pointer;
  list-style:none; -webkit-tap-highlight-color:transparent;
}
.disclose > summary::-webkit-details-marker{display:none}
.disclose > summary::before{
  content:''; flex:none; width:8px; height:8px; margin-right:2px;
  border-right:1.5px solid var(--t3); border-bottom:1.5px solid var(--t3);
  transform:rotate(-45deg); transition:transform .18s ease;
}
.disclose[open] > summary::before{transform:rotate(45deg)}
.disclose > summary:hover{color:var(--t1)}
.disclose > summary:focus-visible{outline:2px solid var(--teal); outline-offset:-2px; border-radius:var(--r2)}
.disclose[open] > summary{border-bottom:1px solid var(--line)}
.disclose-note{padding:12px 16px 0; font-size:12.5px; color:var(--t3)}
.disclose-note b{color:var(--t2); font-weight:600}
.disclose-list{margin:0; padding:14px 16px 16px 32px; display:grid; gap:8px}
.disclose-list li{font-size:13px; color:var(--t3); line-height:1.55}
.disclose-list b{color:var(--t2)}
/* The matrix and the notes bring their own frames — don't double them up. */
.disclose.wide > .matrix,.disclose.wide > .notes{margin:0; border:0; border-radius:0 0 var(--r2) var(--r2)}
.disclose.wide > .notes{padding:16px}

/* ── YOUR RUNBOOK ──────────────────────────────────────────────────────────── */
.rb.mine{border-color:var(--tc); box-shadow:0 0 0 1px var(--tc-soft), var(--shadow)}
.rb-mine{
  margin-left:auto; flex:none; align-self:center;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tc); background:var(--tc-soft); border:1px solid var(--tc);
  border-radius:99px; padding:3px 9px;
}
.node.mine .node-rail{background:var(--tc-soft)}


   This page is read on phones as often as on a desk — a therapist checking
   what a tier can see, mid-shift. Three things it needed there. */

/* 1 ── Notches and home indicators. The page sets viewport-fit=cover, so the
   safe-area insets are live and the sticky bar sat under the status bar while
   the footer sat under the home indicator. In landscape the rounded corners
   clipped the first and last characters of every table row. */
@supports (padding:max(0px)){
  .bar{padding-top:max(11px,env(safe-area-inset-top));
       padding-left:max(clamp(16px,4vw,44px),env(safe-area-inset-left));
       padding-right:max(clamp(16px,4vw,44px),env(safe-area-inset-right))}
  main{padding-left:max(clamp(16px,4vw,44px),env(safe-area-inset-left));
       padding-right:max(clamp(16px,4vw,44px),env(safe-area-inset-right));
       padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  @media (max-width:560px){
    .bar{padding-top:max(9px,env(safe-area-inset-top));
         padding-left:max(14px,env(safe-area-inset-left));
         padding-right:max(14px,env(safe-area-inset-right))}
  }
}

/* 2 ── The wide tables. .axes, .matrix and .register carry min-widths of 660,
   880 and 760px, so on a phone they always scroll sideways — with nothing on
   screen to say so. These are the CSS-only scroll shadows: the two `local`
   covers travel with the content and mask the shadow when that edge is at the
   end, so each shadow appears only when there is genuinely more that way. No
   JavaScript, and nothing to keep in sync with the real scroll position. */
.axes,.matrix,.register{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  background:
    linear-gradient(to right,var(--g1) 40%,rgba(0,0,0,0)) left center/34px 100% no-repeat local,
    linear-gradient(to left,var(--g1) 40%,rgba(0,0,0,0)) right center/34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.30),rgba(0,0,0,0)) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.30),rgba(0,0,0,0)) right center/14px 100% no-repeat scroll,
    var(--g1);
}
:root[data-theme="light"] .axes,
:root[data-theme="light"] .matrix,
:root[data-theme="light"] .register{
  background:
    linear-gradient(to right,var(--g1) 40%,rgba(0,0,0,0)) left center/34px 100% no-repeat local,
    linear-gradient(to left,var(--g1) 40%,rgba(0,0,0,0)) right center/34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(6,20,24,.16),rgba(0,0,0,0)) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(6,20,24,.16),rgba(0,0,0,0)) right center/14px 100% no-repeat scroll,
    var(--g1);
}
/* A keyboard user tabbing to a scroll region should see that it has focus. */
.axes:focus-visible,.matrix:focus-visible,.register:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* 3 ── Touch targets and press feedback. Every control on this page was
   between 34 and 40px; 44px is the floor at which a thumb hits what it aimed
   at. The scale-on-press exists because a tap with no visible response reads
   as a tap that missed. */
@media (max-width:860px){
  .icon-btn{width:44px;height:44px}
  .seg button{min-height:44px}
  .bar-back{min-height:44px; padding:10px 14px}
  .node-btn{min-height:44px}
  .leaves .link,.link{min-height:44px}
  .bar-back,.icon-btn,.seg button,.node-btn,.link{-webkit-tap-highlight-color:transparent}
  .icon-btn:active,.seg button:active,.bar-back:active,.node-btn:active{transform:scale(.96)}
  .icon-btn,.seg button,.bar-back,.node-btn{transition:transform .12s ease,color .16s,border-color .16s}
  /* Nav chrome is for tapping, not for selecting. */
  .bar,.seg,.node-rail,.step-mk{-webkit-user-select:none; user-select:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .node-btn::after{transition:none}
  /* Press feedback is motion too — asked not to move, so don't. */
  .icon-btn:active,.seg button:active,.bar-back:active,.node-btn:active{transform:none}
}

/* ── PRINT — the whole map on paper, one flow per line ── */
@media print{
  :root{--g0:#fff;--g1:#fff;--g2:#fff;--g3:#f4f4f4;--line:#d3d8da;--line2:#b5bcbe;--line3:#8d9698;
        --t1:#0a0f12;--t2:#2a3236;--t3:#4d565a;--t4:#6d7679;--teal:#046b64;--shadow:none;--grid-ink:transparent}
  body{background:#fff; color:#000; font-size:10.5pt}
  .blueprint,.bar,.icon-btn,.seg,.foot .foot-sp{display:none !important}
  /* On paper there is no session and nothing to click — the door card and the
     disclosure toggles are screen furniture. The script opens every <details>
     before printing, so the content inside them still comes out. */
  .door,.disclose > summary,.rb-mine{display:none !important}
  .disclose{border:0; margin-top:0}
  .disclose[open] > summary{border:0}
  .disclose.wide > .notes{padding:0}
  .rb.mine{box-shadow:none}
  main{padding:0; max-width:none}
  section{padding-top:20pt; break-inside:auto}
  .node,.rb,.note,.matrix,.register,.axes{box-shadow:none; break-inside:avoid}
  .node .node-detail{display:block}
  .node-btn::after{display:none}
  .cascade.focused .node:not(.open){opacity:1}
  .step[data-line]{display:grid !important}
  .matrix,.register,.axes{overflow:visible; max-height:none}
  /* The screen scroll-shadows would print as grey smudges down each margin. */
  .matrix,.register,.axes{background:#fff !important}
  .matrix table,.register table,.axes table{min-width:0; font-size:8.5pt}
  .mast h1{font-size:30pt}
  h2{font-size:15pt}
  a{text-decoration:none; color:#046b64}
}