/* Syzygy brand: #161616 and #00EE4D */
:root{
  --brand-ink:#161616;--brand-green:#00EE4D;--on-green:#161616;
  --bg:#F3F4F2;--surface:#FFFFFF;--surface-2:#EAECE9;--ink:#161616;--ink-2:#45473F;--ink-3:#767870;
  --line:#DADDD7;--brand:#161616;--accent:#00843A;--accent-soft:#D6FBE2;--amber:#9A6A00;--amber-soft:#FBF1DC;
  --st-find:#1A5F80;--st-find-soft:#DCEBF3;--st-decide:#8A5A00;--st-decide-soft:#FBF1DC;--st-forecast:#6A3FB5;--st-forecast-soft:#ECE4F8;--tpl:#1A5F80;--on-tpl:#FFFFFF;
  --good:#00843A;--good-soft:#D6FBE2;--bad:#B3261E;--bad-soft:#FBE7E5;
  --head:#161616;--on-head:#FFFFFF;--wire:#9A9C95;--dot:#C9CCC5;
  --heat-0:#ECEEEA;--heat-1:#B5F5CB;--heat-2:#4FE384;--heat-3:#00B83B;
  --radius:12px;--shadow:0 1px 2px rgba(22,22,22,.06),0 4px 16px rgba(22,22,22,.05);
  --display:'Space Grotesk',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E0E0E;--surface:#161616;--surface-2:#202020;--ink:#F2F2EF;--ink-2:#BDBDB8;--ink-3:#8B8B86;
  --line:#2C2C2C;--brand:#F2F2EF;--accent:#00EE4D;--accent-soft:#0F2E1A;--amber:#E0A93E;--amber-soft:#3A2E17;
  --st-find:#7CC2E6;--st-find-soft:#13303D;--st-decide:#E0A93E;--st-decide-soft:#3A2E17;--st-forecast:#BFA2F2;--st-forecast-soft:#2A2140;--tpl:#1E5670;--on-tpl:#F2F2EF;
  --good:#00EE4D;--good-soft:#0F2E1A;--bad:#FF7A70;--bad-soft:#3A1D1B;
  --head:#262626;--on-head:#F2F2EF;--wire:#5E5E5A;--dot:#2A2A2A;
  --heat-0:#1C1C1C;--heat-1:#12402A;--heat-2:#0A8A38;--heat-3:#00EE4D;--shadow:none;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0E0E0E;--surface:#161616;--surface-2:#202020;--ink:#F2F2EF;--ink-2:#BDBDB8;--ink-3:#8B8B86;
  --line:#2C2C2C;--brand:#F2F2EF;--accent:#00EE4D;--accent-soft:#0F2E1A;--amber:#E0A93E;--amber-soft:#3A2E17;
  --st-find:#7CC2E6;--st-find-soft:#13303D;--st-decide:#E0A93E;--st-decide-soft:#3A2E17;--st-forecast:#BFA2F2;--st-forecast-soft:#2A2140;--tpl:#1E5670;--on-tpl:#F2F2EF;
  --good:#00EE4D;--good-soft:#0F2E1A;--bad:#FF7A70;--bad-soft:#3A1D1B;
  --head:#262626;--on-head:#F2F2EF;--wire:#5E5E5A;--dot:#2A2A2A;
  --heat-0:#1C1C1C;--heat-1:#12402A;--heat-2:#0A8A38;--heat-3:#00EE4D;--shadow:none;color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--body);overflow-x:hidden}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5vw,3.2rem)}h2{font-size:clamp(1.4rem,3vw,1.8rem)}h3{font-size:1.15rem}
p{margin:0 0 1em}
ul{margin:0;padding-left:1.1em}li{margin:.25em 0}
button,input,select{font:inherit;color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
main{min-height:70vh;padding-top:28px;padding-bottom:64px;outline:none}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6em;display:block}
.muted{color:var(--ink-2)}.small{font-size:.875rem}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:var(--brand-green);color:var(--on-green);flex:none}
.logo-mark svg{width:30px;height:30px}
.wordmark{height:14px;width:auto;display:block;color:var(--ink)}
.brand-sub{font-family:var(--display);font-weight:500;font-size:.98rem;color:var(--ink-2);padding-left:10px;border-left:1px solid var(--line);line-height:1.1}
@media (max-width:420px){.brand-sub{display:none}}
.nav{display:flex;align-items:center;gap:4px}
.nav a{text-decoration:none;padding:8px 12px;border-radius:8px;font-size:.93rem;color:var(--ink-2)}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.active{color:var(--ink);background:var(--surface-2);font-weight:600}
.theme-btn,.menu-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer}
.menu-btn{display:none}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:60px;flex-direction:column;align-items:stretch;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 16px 16px}
  .nav.open{display:flex}
  .theme-btn{align-self:flex-start;margin-top:6px}
}

/* primitives */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:400px){.g2,.g3{grid-template-columns:1fr}}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);border:1px solid transparent;text-decoration:none;max-width:100%}
.chip.accent{background:var(--accent-soft);color:var(--accent)}
.chip.amber{background:var(--amber-soft);color:var(--amber)}
.chip.btn{cursor:pointer;border-color:var(--line);background:var(--surface)}
.chip.btn[aria-pressed="true"]{background:var(--brand-green);color:var(--on-green);border-color:var(--brand-green)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;text-decoration:none;font-weight:500}
.btn.primary{background:var(--brand-green);border-color:var(--brand-green);color:var(--on-green);font-weight:600}
.btn:hover{filter:brightness(1.05)}
.linkcard{display:block;text-decoration:none;transition:transform .12s,border-color .12s}
.linkcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.dots{display:inline-flex;gap:3px;vertical-align:middle}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
.section{margin-top:48px}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.section-head h2{margin:0}
input[type=search],select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 24px}
.toolbar input{flex:1 1 260px}
.toolbar select{flex:0 1 240px}

/* hero */
.hero{padding:36px 0 8px}
.hero h1{max-width:18ch}
.hero .lede{font-size:1.15rem;color:var(--ink-2);max-width:62ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}
.stat b{display:block;font-family:var(--display);font-size:1.8rem;line-height:1}
.stat span{font-size:.85rem;color:var(--ink-2)}
.layers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.layers>div{padding:18px;border-right:1px solid var(--line)}
.layers>div:last-child{border-right:0}
.layers .n{font-family:var(--mono);font-size:.75rem;color:var(--accent)}
@media (max-width:760px){.layers{grid-template-columns:1fr 1fr}.layers>div:nth-child(2){border-right:0}.layers>div:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.stage-lane{margin-bottom:28px}
.stage-lane h3{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.stage-lane h3 small{font-family:var(--body);font-weight:400;color:var(--ink-3);font-size:.9rem}
.dcard h3{margin-bottom:.35em}
.dcard p{color:var(--ink-2);font-size:.92rem;margin-bottom:.8em}

/* detail */
.dhead{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
@media (max-width:900px){.dhead{grid-template-columns:1fr}}
.facts{display:grid;gap:12px}
.fact .k{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.fact .v{font-size:.95rem}
.thesis{background:var(--brand);color:#fff;border-radius:var(--radius);padding:22px 24px;margin:20px 0}
:root[data-theme="dark"] .thesis{background:var(--surface-2);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thesis{background:var(--surface-2);color:var(--ink)}}
.thesis .eyebrow{color:var(--brand-green)}
.thesis p{font-size:1.15rem;font-family:var(--display);margin:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:28px 0 24px;overflow-x:auto;scrollbar-width:none}
.tabs button{background:none;border:0;padding:10px 14px;cursor:pointer;color:var(--ink-2);border-bottom:2px solid transparent;white-space:nowrap;font-weight:500}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.logic{counter-reset:s;display:grid;gap:12px}
.logic .step{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.logic .step::before{counter-increment:s;content:counter(s);font-family:var(--mono);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:500}
.logic .step b{display:block}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.vs>div{padding:14px 16px;border-bottom:1px solid var(--line);font-size:.95rem}
.vs>div:nth-child(odd){background:var(--good-soft)}
.vs>div:nth-child(even){background:var(--bad-soft)}
.vs>.h{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.vs>.h.g{color:var(--good)}.vs>.h.b{color:var(--bad)}
@media (max-width:620px){.vs{grid-template-columns:1fr}.vs>.h.b{display:none}.vs>div:nth-child(even):not(.h)::before{content:"Weak: ";font-weight:600;color:var(--bad)}.vs>div:nth-child(odd):not(.h)::before{content:"Great: ";font-weight:600;color:var(--good)}}
.outline{display:grid;gap:10px}
.osec{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:16px 18px;transition:opacity .15s}
.osec .num{font-family:var(--mono);color:var(--accent);font-size:.95rem;padding-top:2px}
.osec.dim{opacity:.35}
.osec h4{margin:0 0 .2em;font-size:1.05rem}
.osec .purpose{color:var(--ink-2);font-size:.93rem;margin-bottom:.6em}
.osec ul{font-size:.9rem;margin-bottom:.7em;columns:2;column-gap:28px}
@media (max-width:620px){.osec ul{columns:1}.osec{grid-template-columns:1fr}}
.depth-summary{border-left:3px solid var(--accent)}
.depth-detail{border-left:3px solid var(--brand)}
.depth-appendix{border-left:3px solid var(--line)}
.rolecard h4{margin:0}
.rolecard .need{margin:.5em 0 .8em}
.showhide{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:.88rem}
.showhide .lbl{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.showhide .s .lbl{color:var(--good)}.showhide .x .lbl{color:var(--bad)}
@media (max-width:420px){.showhide{grid-template-columns:1fr}}
.obj{border-left:3px solid var(--amber);padding:4px 0 4px 16px;margin-bottom:18px}
.obj b{display:block;margin-bottom:4px}
.callout{background:var(--accent-soft);border-radius:var(--radius);padding:16px 18px}
.callout.amber{background:var(--amber-soft)}

/* matrix */
.matrix-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);max-height:78vh}
table.matrix{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:0}
.matrix thead th{position:sticky;top:0;background:var(--surface);z-index:2;height:150px;vertical-align:bottom;padding:0 0 10px}
.matrix thead th a{writing-mode:vertical-rl;transform:rotate(180deg);text-decoration:none;font-weight:500;display:inline-block;padding:0 12px}
.matrix tbody th{position:sticky;left:0;background:var(--surface);z-index:1;text-align:left;font-weight:500;padding:8px 14px;min-width:230px;border-right:1px solid var(--line)}
.matrix tbody th a{text-decoration:none}
.matrix thead th:first-child{left:0;z-index:3;text-align:left;vertical-align:bottom;padding:12px 14px}
.matrix td a{display:block;width:44px;height:36px}
.matrix td.h0 a{background:var(--heat-0)}.matrix td.h1 a{background:var(--heat-1)}.matrix td.h2 a{background:var(--heat-2)}.matrix td.h3 a{background:var(--heat-3)}
.matrix td a:hover{outline:2px solid var(--ink);outline-offset:-2px}
.matrix tr.stage-row th{background:var(--surface-2);font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.legend{display:flex;gap:14px;align-items:center;font-size:.82rem;color:var(--ink-2);flex-wrap:wrap}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:5px;vertical-align:-2px}

/* builder */
.builder{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
@media (max-width:900px){.builder{grid-template-columns:1fr}}
.builder aside{position:sticky;top:80px}
@media (max-width:900px){.builder aside{position:static}}
.check{display:flex;gap:10px;align-items:flex-start;padding:7px 0;cursor:pointer;font-size:.93rem}
.check input{margin-top:5px;accent-color:var(--accent)}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow)}
@media (max-width:620px){.doc{padding:20px}}
.doc h2{margin-top:0}
.doc .part{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.forwhom{font-family:var(--mono);font-size:.75rem;color:var(--ink-3)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:.9rem;opacity:0;transition:opacity .2s;pointer-events:none;z-index:50}
.toast.show{opacity:1}

.foot{border-top:1px solid var(--line);padding:24px 0;font-size:.85rem;color:var(--ink-3)}
@media print{.top,.foot,.builder aside,.noprint{display:none!important}.builder{display:block}.doc{border:0;box-shadow:none;padding:0}body{background:#fff}}

/* ---------- workflow steps additions ---------- */
:root{--k-frame:#6A5ACD;--k-gather:#2F7FC1;--k-analyze:#0E8C8B;--k-decide:#A9720C;--k-specify:#B5487A;--k-package:#5B6B2E;--k-verify:#0E7C55;--k-deliver:#2B2C63}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--k-frame:#A99CF5;--k-gather:#6FB2EE;--k-analyze:#2FC1BE;--k-decide:#E0A93E;--k-specify:#EC8DB8;--k-package:#B6CB6E;--k-verify:#46C595;--k-deliver:#A9ABF0}}
:root[data-theme="dark"]{--k-frame:#A99CF5;--k-gather:#6FB2EE;--k-analyze:#2FC1BE;--k-decide:#E0A93E;--k-specify:#EC8DB8;--k-package:#B6CB6E;--k-verify:#46C595;--k-deliver:#A9ABF0}
.k-frame{--k:var(--k-frame)}.k-gather{--k:var(--k-gather)}.k-analyze{--k:var(--k-analyze)}.k-decide{--k:var(--k-decide)}
.k-specify{--k:var(--k-specify)}.k-package{--k:var(--k-package)}.k-verify{--k:var(--k-verify)}.k-deliver{--k:var(--k-deliver)}
.chip[class*="k-"]{background:color-mix(in srgb,var(--k) 14%,transparent);color:var(--k)}
.t-automate{--t:var(--good)}.t-assist{--t:var(--amber)}.t-reserve{--t:var(--bad)}
.chip[class*="t-"]{background:color-mix(in srgb,var(--t) 14%,transparent);color:var(--t);font-weight:500}
.chip.out{background:var(--surface);border-color:var(--line);color:var(--ink)}
.chip.gatechip{background:var(--ink);color:var(--bg)}
.chip.mono{font-family:var(--mono)}
.nav a.xlink{color:var(--accent)}
code,.code{font-family:var(--mono);font-size:.85em}
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:16px;align-items:center}
.flow .arrow{font-size:1.6rem;color:var(--accent)}
@media (max-width:820px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);justify-self:start}}
.anatomy{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.anatomy>div{padding:16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;gap:4px;align-content:start}
.anatomy>div:nth-child(4n){border-right:0}.anatomy>div:nth-last-child(-n+4){border-bottom:0}
.anatomy .n{font-family:var(--mono);font-size:.72rem;color:var(--accent)}
@media (max-width:760px){.anatomy{grid-template-columns:1fr 1fr}.anatomy>div{border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important}.anatomy>div:nth-child(2n){border-right:0!important}}
.tiercard{border-top:4px solid var(--t)}.kindcard{border-top:4px solid var(--k)}
.tiercard b,.kindcard b{color:var(--ink-2);font-size:.85rem;font-weight:500}
.kindlanes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.kindlane{border-left:3px solid var(--k);padding:4px 0 4px 14px;display:grid;gap:6px;align-content:start}
.kindlane .eyebrow{color:var(--k);margin:0}
.kindlane a{text-decoration:none;font-size:.93rem}.kindlane a:hover{color:var(--accent)}
.slist{display:grid;gap:10px}
.srow{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 18px}
.srow h3{margin:0 0 .2em;font-size:1.02rem}.srow p{margin:0}
.srow .chips{justify-content:flex-end;max-width:360px}
@media (max-width:760px){.srow{grid-template-columns:1fr}.srow .chips{justify-content:flex-start}}
.tierbar{display:flex;height:6px;border-radius:99px;overflow:hidden;background:var(--surface-2);margin:6px 0 4px;gap:2px}
.tierbar i{background:var(--t)}
.ol{margin:0;padding-left:1.3em}.ol li{margin:.4em 0}
.inputs{list-style:none;padding:0;display:grid;gap:10px}
.card.good{border-top:3px solid var(--good)}.card.bad{border-top:3px solid var(--bad)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:16px}
.modes p{margin:0;font-size:.93rem}
.judg{border-left:4px solid var(--t)}.judg .eyebrow{color:var(--t)}
.gate{margin-top:16px;border:1px dashed var(--ink-3);border-radius:10px;padding:10px 14px;font-size:.93rem}
.gate b{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;background:var(--ink);color:var(--bg);padding:2px 7px;border-radius:5px;margin-right:6px}
.linklist{display:grid;gap:8px}
.linklist a{display:grid;gap:2px;text-decoration:none;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.linklist a:hover{border-color:var(--accent)}
.linklist.tight a{padding:6px 10px;display:block;font-size:.9rem}
.prereq{margin-top:4px}.prereq ul{columns:2;column-gap:28px}
@media (max-width:620px){.prereq ul{columns:1}}
.path{display:grid;gap:8px;position:relative}
.pstep{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--k);border-radius:var(--radius)}
.pstep>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:40px 1fr;gap:12px;padding:14px 16px}
.pstep>summary::-webkit-details-marker{display:none}
.pstep[open]>summary{border-bottom:1px solid var(--line)}
.pn{font-family:var(--mono);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--k) 16%,transparent);color:var(--k);font-weight:500}
.pt{display:grid;gap:4px;min-width:0}.pt .chips{margin-top:4px}
.pbody{padding:16px 18px 6px}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);cursor:pointer;text-decoration:underline}
.runhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progress{flex:1 1 200px;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.progress i{display:block;height:100%;background:var(--good)}
.runlist{display:grid;gap:8px;margin-top:10px}
.runitem{padding:10px 16px}
.runitem .rundetail{padding-left:28px;font-size:.9rem}
.runitem.is-done{opacity:.6}.runitem.is-done .rundetail{display:none}
.runitem.is-done b{text-decoration:line-through}
.code{white-space:pre-wrap;background:var(--surface-2);border-radius:var(--radius);padding:18px;margin-top:18px;max-height:60vh;overflow:auto;border:1px solid var(--line)}
.matrix td a{display:grid;place-items:center;text-decoration:none;font-family:var(--mono);font-size:.72rem;color:#fff}
.matrix td.h1 a{color:var(--ink)}
.matrix tbody th .chip{font-size:.66rem;padding:1px 6px}
table.api{width:100%;border-collapse:collapse;font-size:.9rem}
table.api td{padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
table.api tr:last-child td{border-bottom:0}
@media print{.tabs,.runhead,.linkbtn{display:none!important}.pstep{break-inside:avoid}}
.g2f{grid-template-columns:1fr 1fr}
.modes{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.modes{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g2f,.modes{grid-template-columns:1fr}}
.matrix thead th:not(:first-child),.matrix td{width:46px;min-width:46px;max-width:46px}.matrix thead th a{white-space:nowrap;font-size:.8rem}

/* ---------- editor ---------- */
.warn{color:var(--bad)}
.chip.warnchip{background:var(--bad-soft);color:var(--bad)}
.toast.bad{background:var(--bad);color:#fff}
.btn.danger,.chip.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn[disabled],.chip[disabled]{opacity:.4;cursor:default}
#auth{display:inline-flex}
.authmenu{position:relative}
.authmenu>summary{list-style:none;cursor:pointer}
.authmenu>summary::-webkit-details-marker{display:none}
.authbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;font-size:.9rem}
.authmenu .menu{position:absolute;right:0;top:calc(100% + 6px);display:grid;gap:8px;min-width:220px;z-index:30;padding:14px}
@media (max-width:820px){.authmenu .menu{position:static;margin-top:8px}}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}.dot.on{background:var(--good)}
.editor{display:grid;gap:16px;margin-top:20px}
.esec h3{margin-bottom:12px}
.egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px 16px}
.egrid.two{grid-template-columns:1fr 1fr}
@media (max-width:620px){.egrid.two{grid-template-columns:1fr}}
.field{display:grid;gap:5px;margin-bottom:12px;min-width:0}
.flabel{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
.hint{font-size:.8rem;color:var(--ink-3)}
.editor input:not([type=checkbox]),.editor textarea,.editor select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;font-size:.93rem}
.editor textarea{resize:vertical;line-height:1.5}
.editor input:focus,.editor textarea:focus,.editor select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.editor input:disabled{opacity:.7}
input.mono{font-family:var(--mono)!important;font-size:.85rem!important}
.erow{display:grid;grid-template-columns:1.3fr 1fr auto auto;gap:8px;align-items:center;margin-bottom:8px}
.erow.two{grid-template-columns:1.3fr 1fr auto}
@media (max-width:700px){.erow,.erow.two{grid-template-columns:1fr 1fr}.erow input[data-f=name]{grid-column:1/-1}}
.check.inline{padding:0;font-size:.85rem;white-space:nowrap}
.savebar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding:12px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius)}
.savebar #form-msg{margin-right:auto}
.editgrid{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}
@media (max-width:900px){.editgrid{grid-template-columns:1fr}}
.covpanel{position:sticky;top:80px}
@media (max-width:900px){.covpanel{position:static}}
.covlist{list-style:none;padding:0;font-size:.88rem;display:grid;gap:4px;margin-bottom:10px}
.covlist li::before{display:inline-block;width:1.2em;font-weight:700}
.covlist li.yes::before{content:"\2713";color:var(--good)}
.covlist li.no{color:var(--bad)}.covlist li.no::before{content:"\25CB"}
.seqrow{border-left:4px solid var(--k,var(--line));margin-bottom:10px;padding:14px 16px}
.seqhead{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:start;margin-bottom:10px}
.seqhead a{text-decoration:none}
.seqbtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:620px){.seqhead{grid-template-columns:40px 1fr}.seqbtns{grid-column:1/-1;justify-content:flex-start}}
.pick{font-size:.8rem;gap:5px}
.pick input{accent-color:var(--accent);margin:0}
.addbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px}
.addbar select{flex:1 1 260px;width:auto}
.osec.uncovered{border-color:var(--bad)}
.hist{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden}
.histrow{display:grid;grid-template-columns:170px 200px 1fr auto;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);align-items:center;color:var(--ink)}
.histrow:last-child{border-bottom:0}
@media (max-width:700px){.histrow{grid-template-columns:1fr}}
.editbtn{margin-left:auto}
.addbar select{min-width:0}.savebar .btn{padding:9px 12px}
.editor>*,.editgrid>*,.egrid>*{min-width:0}.editor select{max-width:100%;text-overflow:ellipsis}.editor{grid-template-columns:minmax(0,1fr)}.editgrid{grid-template-columns:minmax(0,1fr) 280px}@media (max-width:900px){.editgrid{grid-template-columns:minmax(0,1fr)}}
.field{align-content:start}.egrid{align-items:start}

/* ---------- workflows canvas ---------- */
.small-hero{padding-top:12px}
.wfcard h3{margin-bottom:.3em}
.empty{text-align:center;padding:40px 20px;margin-top:10px}
body.canvas-mode main.wrap{max-width:none;padding:12px 20px 0;min-height:0}
body.canvas-mode .foot{display:none}
.wfbar{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.wfmeta{flex:1 1 420px;min-width:0}
.wfmeta .small{margin:0 0 2px}
.wftitle{font-size:1.6rem;margin:0 0 4px}
.titlein{font-family:var(--display);font-size:1.6rem;font-weight:700;border:1px solid transparent;background:transparent;color:var(--ink);padding:2px 6px;margin-left:-7px;border-radius:8px;width:100%}
.purposein{font:inherit;color:var(--ink-2);border:1px solid transparent;background:transparent;padding:2px 6px;margin-left:-7px;border-radius:8px;width:100%;resize:none;overflow:hidden}
.titlein:hover,.purposein:hover{border-color:var(--line)}
.titlein:focus,.purposein:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.wfside{display:grid;gap:4px;flex:0 1 300px;min-width:220px}
.wfside select{padding:8px 10px}
.ctoolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0}
.ctoolbar .btn{padding:7px 12px;font-size:.9rem}
.ctoolbar .spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:7px 14px;cursor:pointer;font-weight:500;color:var(--ink-2)}
.seg button[aria-selected="true"]{background:var(--brand-ink);color:var(--brand-green)}
.zoom{display:inline-flex;gap:4px}
.savestate{font-size:.82rem;color:var(--good)}
.savestate.busy{color:var(--ink-3)}
.savestate.bad{color:var(--bad)}
.board{position:relative;height:calc(100vh - 210px);min-height:420px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:grab;touch-action:none;
  background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px}
.board.panning{cursor:grabbing}
.surface{position:absolute;left:0;top:0;transform-origin:0 0;width:1px;height:1px}
.wires{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.wire{fill:none;stroke:var(--wire);stroke-width:2}
.wire.hot{stroke:var(--accent);stroke-width:2.5}
.wire.temp{stroke:var(--accent);stroke-dasharray:6 5}
.wire-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:stroke;cursor:pointer}
.node{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);cursor:default;user-select:none;font-size:.85rem}
.node.sel{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.node.dragging{opacity:.9;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.node.droptarget{border-color:var(--accent);background:var(--accent-soft)}
.nhead{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:grab;font-family:var(--display);font-size:.98rem;line-height:1.25}
body:not(.can-edit) .nhead{cursor:pointer}
.nnum{flex:none;display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:12px;background:var(--accent-soft);color:var(--accent);font-family:var(--mono);font-size:.75rem;font-weight:500;padding:0 6px;margin-right:6px}
.nhead .nnum{margin:0}
.npurpose{padding:8px 12px 0;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nsec{padding:8px 0 4px}
.nlbl{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:0 12px 2px}
.nlbl.io{font-family:inherit;font-size:.9rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink);padding:0 12px 4px}
.nnone{padding:0 12px;color:var(--ink-3);font-size:.8rem}
.port{position:relative;display:flex;align-items:flex-start;gap:6px;padding:3px 12px;line-height:1.3}
.port span{min-width:0;flex:1}
.port b{font-weight:400;font-size:.82rem}
.port em{font-style:normal;color:var(--ink-3);font-size:.75rem}
.port small{display:block;color:var(--ink-3);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.port.out{justify-content:flex-end;text-align:right}
.dot{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface);margin-top:2px}
.port.in .dot{margin-left:-19px}
.port.out .dot{margin-right:-19px}
.port.in.linked .dot{background:var(--accent);border-color:var(--accent)}
.can-edit .port.out .dot{cursor:crosshair;border-color:var(--accent)}
.can-edit .port.out .dot:hover{background:var(--accent);transform:scale(1.25)}
.nowner{border-top:1px solid var(--line);padding:6px 12px;color:var(--ink-2);font-size:.78rem}
.boardempty{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);text-align:center;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;cursor:default}
.boardhint{position:absolute;left:12px;bottom:10px;pointer-events:none;background:color-mix(in srgb,var(--bg) 80%,transparent);padding:2px 8px;border-radius:6px}
.panel{position:absolute;z-index:5;top:0;right:0;bottom:0;width:390px;max-width:100%;background:var(--surface);border-left:1px solid var(--line);overflow:auto;padding:14px 16px 24px;transform:translateX(100%);transition:transform .18s;cursor:default;box-shadow:-8px 0 24px rgba(0,0,0,.06)}
.panel.open{transform:none}
.phead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.phead .chip{margin-left:auto}
.panel .field{margin-bottom:12px}
.panel input,.panel textarea,.panel select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.9rem}
.panel textarea{resize:none;overflow:hidden;line-height:1.45}
.panel input:focus,.panel textarea:focus,.panel select:focus{outline:2px solid var(--accent);outline-offset:-1px}
.panel input:disabled,.panel textarea:disabled,.panel select:disabled{opacity:.85;background:transparent}
.pgroup{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:12px;background:var(--surface-2)}
.pgh{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.drow{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);margin-bottom:8px}
.drow2{display:grid;grid-template-columns:1.4fr 1fr;gap:6px}
.danger-link{color:var(--bad);justify-self:start;font-size:.8rem}
.pfoot{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.outline-wrap{max-width:900px;margin:0 auto 60px}
.ostep{border-top:1px solid var(--line);padding:18px 0}
.ostep h3{display:flex;align-items:center}
.iotable{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0}
@media (max-width:640px){.iotable{grid-template-columns:1fr}.panel{width:100%}.board{height:calc(100vh - 260px)}.boardhint{display:none}}
@media print{body.canvas-mode .ctoolbar,.wfside select{display:none!important}.titlein,.purposein{border:0}}
body.canvas-mode{overflow:hidden}
body.canvas-mode main.wrap{display:flex;flex-direction:column;height:calc(100dvh - 61px);padding-bottom:16px}
body.canvas-mode .board{flex:1;height:auto;min-height:320px}
body.canvas-mode .outline-wrap{flex:1;overflow:auto;width:100%;max-width:none}
body.canvas-mode .outline-wrap .doc{max-width:900px;margin:0 auto 40px}
.panel:not(.open){box-shadow:none;visibility:hidden}
@media (max-width:640px){body.canvas-mode{overflow:auto}body.canvas-mode main.wrap{height:auto}body.canvas-mode .board{height:70vh;flex:none}}
@media print{body.canvas-mode{overflow:visible}body.canvas-mode main.wrap{height:auto;display:block}body.canvas-mode .outline-wrap{overflow:visible}.top{display:none}}
/* export menu */
.xmenu{position:relative;display:inline-block}
.xmenu>summary{list-style:none}
.xmenu>summary::-webkit-details-marker{display:none}
.xmenu>summary::after{content:"";width:0;height:0;border:4px solid transparent;border-top-color:currentColor;margin:4px 0 0 2px}
.xmenu .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:270px;padding:6px;display:grid;gap:2px}
.hero-actions .xmenu .menu{left:0}
.xmenu .menu button{display:grid;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;font-weight:500;color:var(--ink)}
.xmenu .menu button:hover{background:var(--surface-2)}
.xmenu .menu small{font-weight:400;color:var(--ink-3);font-size:.78rem}
/* card details and add-next */
.ph{color:var(--ink-3);font-weight:400;font-style:italic}
.npurpose.ph{font-size:.8rem}
.nmeta{border-top:1px solid var(--line);padding:8px 12px;display:grid;gap:10px;font-size:.8rem;color:var(--ink-2)}
.nmeta .nk{display:block;font-family:inherit;font-size:.9rem;font-weight:800;letter-spacing:0;text-transform:none;color:var(--ink);padding-bottom:4px}
.nmeta ul{margin:0;padding-left:1.1em}
.nmeta li{margin:0}
.nnotes{margin:0;padding-left:16px}
.nnotes li{margin:1px 0;overflow-wrap:anywhere}
.noterow input{flex:1}
.nowner{display:none}
.addnext{position:absolute;right:-15px;bottom:-15px;width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);background:var(--surface);color:var(--accent);font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center;opacity:.35;transition:opacity .12s,transform .12s;box-shadow:var(--shadow)}
.node:hover .addnext,.node.sel .addnext{opacity:1}
.addnext:hover{background:var(--brand-green);border-color:var(--brand-green);color:var(--on-green);transform:scale(1.1)}
.pfoot{flex-wrap:wrap}
/* API page */
code{background:var(--surface-2);padding:1px 5px;border-radius:5px}
.code code,.code{background:var(--surface-2)}
.card .code{margin-top:6px;max-height:none;font-size:.8rem}
.keyform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.keyform input{flex:1 1 260px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
.newkey{margin-bottom:14px;background:var(--amber-soft)}
.keyrow{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.keyrow code{font-size:.85rem;word-break:break-all;flex:1 1 300px;background:var(--surface);padding:8px 10px}
table.keys,table.endpoints{width:100%;border-collapse:collapse;font-size:.9rem}
.keys th{text-align:left;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding:6px 8px;border-bottom:1px solid var(--line)}
.keys td,.endpoints td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.keys tr.revoked td{color:var(--ink-3)}
.kact{text-align:right;white-space:nowrap}
.endpoints td:first-child{width:80px}
.endpoints td:nth-child(2){white-space:nowrap}
.verb{font-family:var(--mono);font-size:.72rem;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--surface-2)}
.v-get{color:var(--good)}.v-post{color:var(--accent)}.v-patch,.v-put{color:var(--amber)}.v-delete{color:var(--bad)}
@media (max-width:640px){.endpoints td:nth-child(2){white-space:normal;word-break:break-all}.keys th:nth-child(3),.keys td:nth-child(3){display:none}}
.tscroll{overflow-x:auto;max-width:100%}
/* touch */
.board,.board *{-webkit-touch-callout:none}
.touchhint{display:none}
@media (pointer:coarse){.touchhint{display:block}.mousehint{display:none}.zoom .chip{min-width:40px;min-height:36px;justify-content:center;font-size:1rem}.addnext{opacity:1;width:34px;height:34px}.port.out .dot{width:16px;height:16px}}
@media (max-width:640px) and (pointer:coarse){.boardhint.touchhint{display:block;font-size:.72rem;right:12px}}
/* card header, chips, plain lines */
.nhead{background:var(--head);color:var(--on-head);border-bottom:0;border-radius:11px 11px 0 0}
.nhead .nnum{background:var(--brand-green);color:var(--on-green)}
.nhead .ph{color:color-mix(in srgb,var(--on-head) 60%,transparent)}
.node.sel .nhead{background:var(--brand-green);color:var(--on-green)}
.node.sel .nhead .nnum{background:var(--on-green);color:var(--brand-green)}
.npurpose{padding-top:10px}
.nlbl.right{text-align:right}
.nchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.nchip{display:inline-flex;align-items:baseline;gap:5px;font-size:.74rem;line-height:1.3;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nchip.ls{background:var(--accent-soft)}
.nchip.ls b{font-weight:600}
.nchip em{font-style:normal;color:var(--ink-3);font-size:.7rem}
.nline{display:block;color:var(--ink-2)}
.toolrow{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.toolrow input{flex:1}
/* compact step panel */
.panel{padding:0;display:flex;flex-direction:column;width:360px}
.panel .phead{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px 8px 12px;background:var(--head);color:var(--on-head)}
.panel .phead .nnum{background:var(--brand-green);color:var(--on-green)}
.panel .pname{flex:1;min-width:0;background:transparent!important;border:1px solid transparent!important;color:var(--on-head)!important;font-family:var(--display);font-weight:600;font-size:1.02rem!important;padding:4px 6px!important}
.panel .pname:focus{outline:none!important;border-color:var(--brand-green)!important}
.panel .pname::placeholder{color:color-mix(in srgb,var(--on-head) 55%,transparent)}
.xbtn{flex:none;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--ink-3);font-size:1.15rem;line-height:1;cursor:pointer}
.xbtn:hover{background:var(--surface-2);color:var(--bad)}
.xbtn.big{color:color-mix(in srgb,var(--on-head) 75%,transparent);font-size:1.4rem}
.xbtn.big:hover{background:color-mix(in srgb,var(--on-head) 15%,transparent);color:var(--on-head)}
.pbody{flex:1;overflow:auto;padding:10px 12px 12px;display:grid;gap:10px;align-content:start}
.panel input,.panel textarea,.panel select{padding:5px 8px;font-size:.84rem;border-radius:6px}
.panel textarea{min-height:0}
.ppurpose{font-size:.88rem!important}
.psec{display:grid;gap:5px}
.psec .flabel{font-size:.62rem}
.pgh{display:flex;justify-content:space-between;align-items:center;margin:0}
.chip.btn.sm{font-size:.72rem;padding:1px 8px}
.panel .drow{display:grid;gap:4px;padding:5px;margin:0;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.panel .drow.linked{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.panel .drow.linked select{font-weight:500}
.dline{display:flex;gap:4px;align-items:center;min-width:0}
.dline>input,.dline>select,.dline>textarea{flex:1;min-width:0}
.dline>input.fmt{flex:0 0 88px}
.dline.meta{justify-content:space-between;gap:8px}
.dline.meta .hint{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addnote{font-size:.74rem;white-space:nowrap;flex:none}
.psec .hint{margin:0;font-size:.76rem}
.toolgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.toolgrid .toolrow{margin:0;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:2px}
.toolgrid .toolrow input{border:0!important;background:transparent!important;padding:3px 5px!important}
.panel .pfoot{position:sticky;bottom:0;display:flex;gap:6px;justify-content:flex-end;margin:0;padding:8px 12px;border-top:1px solid var(--line);background:var(--surface)}
.btn.sm{padding:5px 10px;font-size:.82rem}
@media (max-width:640px){.panel{width:100%}}

/* brand accents */
.nav a.active{box-shadow:inset 0 -2px 0 var(--brand-green)}
.node.sel{border-color:var(--brand-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-green) 30%,transparent)}
.port.in.linked .dot{background:var(--brand-green);border-color:var(--accent)}
.nchip.ls{background:var(--accent-soft);color:var(--ink)}
.toast{background:var(--brand-ink);color:#fff}
.hero h1,.wftitle,.titlein{letter-spacing:-.02em}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}
.nlbl.right ~ .nnone{text-align:right}
/* code snippets with copy */
.codebox{position:relative;min-width:0}
.codebox .code{padding-top:34px}
.copybtn{position:absolute;top:6px;right:6px;z-index:1;font-family:inherit;font-size:.72rem;font-weight:600;line-height:1;padding:5px 9px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.copybtn:hover{background:var(--brand-green);border-color:var(--brand-green);color:var(--on-green)}
.card .codebox .code{margin-top:6px}
/* grouped endpoints */
.epbase{margin:0 0 12px}
.epgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;margin-bottom:14px}
.epgroup h3{margin:0;font-size:1.05rem}
.epgroup > p{margin:2px 0 8px}
.eplist{list-style:none;margin:0;padding:0}
.eplist li{padding:9px 0;border-top:1px solid var(--line);min-width:0}
.epline{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.epline .verb{flex:none;min-width:62px;text-align:center}
.epline code{min-width:0;overflow-x:auto;white-space:nowrap;font-size:.84rem;scrollbar-width:none}
.eplist p{margin:3px 0 0;font-size:.85rem;color:var(--ink-2)}
@media (max-width:640px){.epline .verb{min-width:54px;font-size:.66rem}.epline code{font-size:.78rem}.card .code{font-size:.72rem;white-space:pre;overflow-x:auto}}
/* sign-in gate and roles */
body.gated .nav a,body.gated .menu-btn{display:none}
body:not(.is-admin) .admin-only{display:none!important}
.gatebox{max-width:460px;margin:12vh auto 0;padding:32px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.gatebox h1{font-size:1.6rem;margin:6px 0 0;text-wrap:balance}
.gatebox p{margin:0}
.logo-mark.big{width:48px;height:48px;border-radius:11px}
.logo-mark.big svg{width:48px;height:48px}
.gate-actions{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:10px}
.gate-actions .btn{width:100%;justify-content:center;padding:11px 14px}
.people td{vertical-align:middle}
.chip.role-admin{background:var(--brand-ink);color:var(--brand-green)}
.chip.role-editor{background:var(--accent-soft);color:var(--accent)}
@media (max-width:640px){.gatebox{margin-top:6vh;padding:24px 18px}.people th:nth-child(3),.people td:nth-child(3){display:none}}
/* combine dialog */
dialog.modal{border:1px solid var(--line);border-radius:14px;padding:0;background:var(--surface);color:var(--ink);width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 48px);box-shadow:0 24px 60px rgba(0,0,0,.25)}
dialog.modal::backdrop{background:rgba(22,22,22,.45)}
.modal-body{display:flex;flex-direction:column;gap:12px;padding:22px}
.modal-body h2{margin:0;font-size:1.25rem;text-wrap:balance}
.modal-body p{margin:0}
.cb-list{display:flex;flex-direction:column;gap:4px;max-height:min(320px,40dvh);overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px}
.cb-item{display:grid;grid-template-columns:auto 22px 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer}
.cb-item:hover{background:var(--surface-2)}
.cb-item.on{background:var(--accent-soft)}
.cb-item input{margin:0;accent-color:var(--brand-ink)}
.cb-order{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:.72rem;font-weight:800}
.cb-item.on .cb-order{background:var(--brand-ink);color:var(--brand-green)}
.cb-name{font-weight:600;min-width:0;overflow-wrap:anywhere}
.cb-opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.cb-opt input{margin-top:4px;accent-color:var(--brand-ink)}
.cb-sum{min-height:1.4em;color:var(--ink-2)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media (max-width:640px){.modal-body{padding:18px 16px}.modal-actions .btn{flex:1;justify-content:center}}
.modal-body input:not([type=checkbox]){width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
.modal-body .flabel{margin-bottom:-6px}
/* imported workflows */
.node.imp{border:1.5px dashed var(--ink-3);background:var(--surface)}
.node.imp .nhead{background:var(--surface-2);color:var(--ink);border-bottom:1px solid var(--line)}
.node.imp .nhead .nnum{background:var(--brand-ink);color:var(--brand-green)}
.node.imp.sel{border-style:solid}
.imptag{margin-left:auto;flex:none;font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--brand-green);color:var(--on-green)}
h3 .imptag{margin-left:8px;vertical-align:middle}
.impoutline{list-style:none;margin:0 0 2px;padding:0 12px;font-size:.78rem;color:var(--ink-2);display:grid;gap:2px}
.impoutline li{display:flex;gap:6px;align-items:baseline;min-width:0;overflow-wrap:anywhere}
.impoutline .on{flex:none;min-width:16px;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.7rem}
.impoutline em{font-style:normal;font-size:.66rem;color:var(--accent)}
.panel .impoutline{padding:0}
.port small{display:block}
.impopen{display:block;border-top:1px solid var(--line);padding:8px 12px;font-size:.8rem;font-weight:600;color:var(--ink);text-decoration:none}
.impopen:hover{background:var(--surface-2)}
.impopen::after{content:" \2192"}
.wire.imp{stroke-dasharray:6 4}
.usedin{margin:0 0 10px;padding:8px 12px;border-radius:9px;background:var(--accent-soft);color:var(--ink);font-size:.86rem}
.usedin a{color:inherit;font-weight:600}
.impnote{font-size:.82rem;line-height:1.45;padding:8px 10px;border-radius:8px;background:var(--accent-soft);color:var(--ink)}
.pname.static{display:block;flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dname{display:block;min-width:0;font-size:.85rem}
.dname em{font-style:normal;color:var(--ink-3);font-size:.75rem}
.dname small{display:block;color:var(--ink-3);font-size:.72rem}
.chip.impchip{background:var(--accent-soft);color:var(--accent)}
#import-dlg .cb-item{grid-template-columns:auto 1fr auto}
.cb-item .cb-name small{display:block;font-weight:400;font-size:.76rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cb-item.off{opacity:.55;cursor:not-allowed}
.node.imp.sel .nhead{background:var(--brand-green);color:var(--on-green)}
.node.imp.sel .nhead .nnum{background:var(--on-green);color:var(--brand-green)}
.node.imp.sel .imptag{background:var(--on-green);color:var(--brand-green)}
/* import picker: solid selection dot */
#import-dlg input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-width:18px;max-width:18px;aspect-ratio:1;padding:0;box-sizing:border-box;justify-self:start;align-self:center;margin:0;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface);cursor:pointer;flex:none}
#import-dlg input[type=radio]:checked{background:var(--ink);border-color:var(--ink)}
#import-dlg input[type=radio]:disabled{opacity:.5;cursor:not-allowed}
#import-dlg input[type=radio]:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}
/* runs */
.btn.runbtn{background:var(--brand-ink);color:var(--brand-green);border-color:var(--brand-ink);font-weight:600}
[data-theme="dark"] .btn.runbtn{background:var(--surface-2);border-color:var(--line)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.runbtn{background:var(--surface-2);border-color:var(--line)}}
.chip.runchip{text-decoration:none;background:var(--accent-soft);color:var(--accent);font-weight:600}
.chip.warnchip{background:var(--amber-soft);color:var(--amber)}
.seg a{display:inline-block;padding:7px 14px;text-decoration:none;color:var(--ink-2);font-weight:500}
.seg a[aria-selected="true"]{background:var(--brand-ink);color:var(--brand-green)}
.runtabs{margin:0 0 16px}
.rbar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line);min-width:120px}
.rbar i{display:block;height:100%;background:var(--brand-green);border-radius:99px;transition:width .3s}
.runcard{display:flex;flex-direction:column;gap:8px}
.runcard h3,.runcard p{margin:0}
.runhead{display:grid;gap:8px;margin-bottom:14px}
.runhead p{margin:0}
.runtitle{display:flex;align-items:center;gap:10px;min-width:0}
.runtitle .titlein,.runtitle .wftitle{flex:1;min-width:0;margin:0}
.chip.runstatus.st-active{background:var(--brand-green);color:var(--on-green)}
.chip.runstatus.st-cancelled{background:var(--bad-soft);color:var(--bad)}
.runprog{display:grid;grid-template-columns:minmax(120px,320px) auto;gap:12px;align-items:center}
.runactions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.runactions .spacer{flex:1}
.runflags{margin-bottom:14px;padding:12px 16px}
.runflags summary{cursor:pointer;display:flex;gap:8px;align-items:center}
.runflags ul{margin:10px 0 0;padding-left:18px;display:grid;gap:4px}
.runflags li.fl-warn::marker{color:var(--amber)}
.runflags .linkbtn{text-align:left;white-space:normal}
.runbody{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:16px;align-items:start}
.runsteps{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);max-height:calc(100dvh - 90px);overflow:auto;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.rs-group{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 8px 4px}
.rs-item{display:grid;grid-template-columns:20px 20px minmax(0,1fr);gap:8px;align-items:center;text-align:left;border:0;background:none;border-radius:8px;padding:8px;padding-left:calc(8px + var(--depth,0) * 10px);cursor:pointer;color:var(--ink);font:inherit}
.rs-item:hover{background:var(--surface-2)}
.rs-item.on{background:var(--accent-soft)}
.rs-item.next .rs-num{background:var(--brand-green);color:var(--on-green)}
.rs-num{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:.68rem;font-weight:700;background:var(--surface-2);font-variant-numeric:tabular-nums}
.rs-name{min-width:0;font-weight:600;font-size:.9rem;overflow-wrap:anywhere}
.rs-name small{display:block;font-weight:400;color:var(--ink-3);font-size:.74rem}
.rs-ico{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid var(--ink-3);font-size:.7rem;font-weight:800;line-height:1}
.rs-ico.rs-in_progress{border-color:var(--accent);background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.rs-ico.rs-done{border-color:var(--brand-green);background:var(--brand-green);color:var(--on-green)}
.rs-ico.rs-skipped{border-color:var(--ink-3);background:var(--surface-2);color:var(--ink-2)}
.runstep{padding:20px;display:grid;gap:12px;min-width:0}
.runstep p{margin:0}
.rs-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.rs-top p{flex-basis:100%}
.rs-top h2{margin:0;font-size:1.35rem;display:flex;gap:10px;align-items:center;text-wrap:balance}
.chip.rstat.st-done{background:var(--brand-green);color:var(--on-green)}
.chip.rstat.st-in_progress{background:var(--accent-soft);color:var(--accent)}
.chip.rstat.st-skipped{background:var(--amber-soft);color:var(--amber)}
.rwarn{padding:8px 12px;border-radius:9px;background:var(--amber-soft);color:var(--ink);font-size:.86rem}
.rsec h3{margin:6px 0 6px;font-size:.95rem;font-weight:800;display:flex;gap:8px;align-items:baseline}
.rsec h3 small{font-weight:600;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rcheck{display:grid;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--surface)}
.rcheck.ok{background:var(--accent-soft);border-color:transparent}
.rcheck label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;min-width:0}
.rcheck label span{min-width:0;overflow-wrap:anywhere}
.rcheck label em{font-style:normal;color:var(--ink-3);font-size:.8rem}
.rcheck label small{display:block;color:var(--ink-3);font-size:.76rem}
.rcheck input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--brand-ink)}
.rcheck .rnote{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.84rem}
.rsec.ref{border-top:1px solid var(--line);padding-top:4px}
.rsec.ref ul{margin:4px 0 0;padding-left:18px}
#rs-note,#rs-reason{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit;resize:vertical}
.rs-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.rreason{display:grid;gap:8px;padding:12px;border-radius:10px;background:var(--surface-2)}
.rreason ul{margin:0;padding-left:18px}
.rs-meta{margin-top:4px}
@media (max-width:900px){.runbody{grid-template-columns:1fr}.runsteps{position:static;max-height:none}.runprog{grid-template-columns:1fr}}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.4)}
/* guides */
.gdot{margin-left:auto;flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:5px;color:var(--brand-green)}
.gdot svg,.gicon svg{width:16px;height:16px}
.node.sel .gdot{color:var(--on-green)}
.node .nhead b{min-width:0}
.gicon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--brand-ink);color:var(--brand-green);flex:none}
dialog.modal.wide{width:min(760px,calc(100% - 32px))}
.gtitle{display:flex;gap:12px;align-items:flex-start}
.gtitle h2{margin:0 0 4px}
#guide-dlg textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;line-height:1.5;resize:vertical;min-height:84px}
#guide-dlg .flabel{margin-bottom:-6px}
.gresrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:6px;margin-bottom:6px}
.modal-actions .spacer{flex:1}
.guidepage{display:grid;gap:18px}
.guidepage > p{margin:0}
.ghero{display:grid;gap:10px}
.ghero h1{margin:0}
.ghero .lede{margin:0}
.gwf{padding:18px 20px;max-width:78ch}
.glayout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:24px;align-items:start}
.gtoc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);max-height:calc(100dvh - 96px);overflow:auto;display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.gtoc p{margin:0}
.gtoc ol{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:1px}
.gtoc li a{display:flex;gap:8px;align-items:baseline;padding:5px 6px;padding-left:calc(6px + var(--depth,0) * 10px);border-radius:7px;color:var(--ink-2);text-decoration:none;font-size:.86rem;overflow-wrap:anywhere}
.gtoc li a:hover{background:var(--surface-2)}
.gtoc li .on{flex:none;min-width:18px;font-variant-numeric:tabular-nums;color:var(--ink-3);font-size:.74rem}
.gtoc li.has a{color:var(--ink);font-weight:600}
.gtoc li.has .on{color:var(--accent)}
.gsteps{display:grid;gap:14px;min-width:0}
.gimport{padding:10px 2px 0;display:grid;gap:4px;border-top:1px solid var(--line)}
.gimport p{margin:0}
.gstep{padding:18px 20px;display:grid;gap:10px;scroll-margin-top:84px;max-width:78ch}
.gstep header{display:flex;align-items:center;gap:10px}
.gstep h3{margin:0;flex:1;min-width:0;font-size:1.15rem;text-wrap:balance}
.gpurpose{margin:0;color:var(--ink-2)}
.gsec h4{margin:0 0 4px;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.gsec p{margin:0 0 8px;line-height:1.6}
.gsec ul{margin:0 0 8px;padding-left:20px;line-height:1.55}
.gsec.g-pitfalls{padding:10px 12px;border-radius:9px;background:var(--amber-soft)}
.gsec.g-pitfalls h4{color:var(--amber)}
.gres{padding-left:18px}
.rguide{border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.rguide summary{cursor:pointer;display:flex;gap:10px;align-items:center;padding:8px 10px;font-weight:700;list-style:none}
.rguide summary::-webkit-details-marker{display:none}
.rguide summary::after{content:"+";margin-left:auto;font-weight:700;color:var(--ink-3)}
.rguide[open] summary::after{content:"\2212"}
.rguide .gicon{width:24px;height:24px}
.rguide-body{padding:4px 14px 12px;display:grid;gap:8px}
.pguide .hint{margin:4px 0 0}
@media (max-width:900px){.glayout{grid-template-columns:1fr}.gtoc{position:static;max-height:none}}
@media print{.gtoc,.hero-actions,.gstep .btn{display:none!important}.glayout{display:block}.gstep{break-inside:avoid;border:0;box-shadow:none}}
.rgsum{display:grid;min-width:0}.rgsum small{font-weight:400;color:var(--ink-3);font-size:.76rem}
.gimport{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.gimport .imptag{margin:0}.gimport > div,.gimport > a{flex-basis:100%}
/* canvas: full-bleed board with floating controls */
body.canvas-mode main.wrap{padding:0;height:calc(100dvh - 61px);max-width:none}
body.canvas-mode .board{border:0;border-radius:0;height:100%;flex:1}
.ovl-top,.ovl-bottom{position:absolute;left:12px;right:12px;display:flex;gap:10px;pointer-events:none;z-index:5;transition:right .18s}
.ovl-top{top:12px;justify-content:space-between;align-items:flex-start}
.ovl-bottom{bottom:12px;justify-content:space-between;align-items:flex-end}
.board.panel-open .ovl-top,.board.panel-open .ovl-bottom{right:402px}
.ovl{pointer-events:auto;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08);cursor:default}
.ovl-title{padding:10px 14px 10px;max-width:min(460px,100%);min-width:240px;display:grid;gap:2px}
.ovl-title .ovl-crumb{color:var(--ink-3);text-decoration:none;width:max-content}
.ovl-title .ovl-crumb:hover{color:var(--ink)}
.ovl-title .titlein,.ovl-title .wftitle{font-size:1.25rem;margin:0}
.ovl-title .purposein{font-size:.88rem;max-height:96px;overflow:auto}
.ovl-title .wfpurpose{margin:0;font-size:.88rem}
.ovl-title .usedin{margin:6px 0 0;font-size:.78rem;padding:6px 8px}
.ovl-title .savestate{font-size:.72rem;padding-left:0}
.ovl-actions,.ovl-build,.ovl-zoom{display:flex;align-items:center;gap:6px;padding:6px;flex-wrap:wrap;justify-content:flex-end}
.ovl .btn{padding:7px 12px;font-size:.88rem;border-radius:9px}
.ovl-zoom .btn{min-width:38px;justify-content:center;padding:7px 10px}
.ovl-zoom .zpct{min-width:62px;font-variant-numeric:tabular-nums}
.ovl-actions .xmenu .menu{left:auto;right:0}
.moremenu>summary::after{display:none}
.moremenu .menu{min-width:240px}
.moremenu .menu button.danger{background:none;border:0;color:var(--bad)}
.moremenu .menu button.danger:hover{background:var(--bad-soft)}
.ovl-hint{flex:1;min-width:0;text-align:center;font-size:.76rem;color:var(--ink-3);padding-bottom:10px;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ovl-hint .touchhint{display:none}
@media (pointer:coarse){.ovl-hint .touchhint{display:inline}.ovl-hint .mousehint{display:none}}
body.canvas-mode .boardhint{display:none}
@media (max-width:1100px){.ovl-hint{display:none}}
@media (max-width:640px){
  body.canvas-mode{overflow:hidden}
  body.canvas-mode main.wrap{height:calc(100dvh - 61px)}
  body.canvas-mode .board{height:100%;flex:1}
  .ovl-top{flex-direction:column;align-items:stretch;left:8px;right:8px;top:8px;gap:6px}
  .ovl-bottom{left:8px;right:8px;bottom:8px}
  .ovl-title{max-width:none;min-width:0;padding:8px 12px}
  .ovl-title .purposein,.ovl-title .wfpurpose{display:none}
  .ovl-actions{justify-content:flex-start;align-self:flex-start}
  .ovl-build .btn,.ovl-actions .btn{padding:6px 10px;font-size:.82rem}
  .board.panel-open .ovl-top,.board.panel-open .ovl-bottom{right:8px;visibility:hidden}
}
.ovl .sm{display:none}
@media (max-width:640px){
  .ovl .sm{display:inline}.ovl .lg{display:none}
  .ovl-build,.ovl-zoom{flex-wrap:nowrap;padding:4px;gap:4px}
  .ovl-zoom .btn{min-width:34px;padding:6px 8px}
  .ovl-zoom .zpct{min-width:52px}
}
/* guide documents */
.gdoc{line-height:1.65;font-size:1rem;color:var(--ink);overflow-wrap:anywhere}
.gdoc > :first-child{margin-top:0}
.gdoc h2{font-size:1.35rem;margin:1.6em 0 .5em;padding-top:.2em;border-top:1px solid var(--line);scroll-margin-top:84px;text-wrap:balance}
.gdoc > h2:first-child{border-top:0;padding-top:0}
.gdoc h3{font-size:1.08rem;margin:1.3em 0 .4em;scroll-margin-top:84px}
.gdoc h4{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:1.2em 0 .3em;scroll-margin-top:84px}
.gdoc p{margin:0 0 .8em}
.gdoc ul,.gdoc ol{margin:0 0 .9em;padding-left:1.4em}
.gdoc li{margin:.2em 0}
.gdoc li > p{margin:0}
.gdoc blockquote{margin:0 0 1em;padding:.2em 0 .2em 1em;border-left:3px solid var(--line);color:var(--ink-2)}
.gdoc code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.05em .35em;font-size:.88em}
.gdoc pre{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:12px 14px;overflow:auto;margin:0 0 1em}
.gdoc pre code{background:none;border:0;padding:0}
.gdoc hr{border:0;border-top:1px dashed var(--line);margin:1.4em 0}
.gdoc a{color:var(--accent)}
.gdoc mark{background:color-mix(in srgb,var(--brand-green) 35%,transparent);color:inherit}
.gdoc aside{margin:0 0 1em;padding:10px 14px 10px 40px;border-radius:10px;position:relative;background:var(--surface-2);border:1px solid var(--line)}
.gdoc aside > :last-child{margin-bottom:0}
.gdoc aside::before{position:absolute;left:12px;top:10px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:800;content:"i";background:var(--ink-3);color:var(--surface)}
.gdoc aside[data-kind="tip"]{background:var(--accent-soft);border-color:transparent}
.gdoc aside[data-kind="tip"]::before{content:"\2713";background:var(--brand-green);color:var(--on-green)}
.gdoc aside[data-kind="warning"]{background:var(--amber-soft);border-color:transparent}
.gdoc aside[data-kind="warning"]::before{content:"!";background:var(--amber);color:#fff}
.gdoc aside[data-kind="example"]{background:var(--surface);border-style:dashed}
.gdoc aside[data-kind="example"]::before{content:"e";background:var(--brand-ink);color:var(--brand-green)}
.gres-h{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);border:0!important;margin-top:1.4em!important}
.cdot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--ink-3)}
.cdot.c-tip{background:var(--brand-green)}.cdot.c-warning{background:var(--amber)}.cdot.c-example{background:var(--brand-ink)}
/* guide page and editor */
.gdocpage{display:grid;gap:14px}
.gdocpage > p{margin:0}
.gdoc-layout{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:28px;align-items:start}
.gdoc-side{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px);display:grid;gap:12px;max-height:calc(100dvh - 96px);overflow:auto}
.gdoc-toc,.gdoc-res{padding:12px 14px}
.gdoc-toc .eyebrow,.gdoc-res .eyebrow{margin:0 0 6px}
.gdoc-toc ol,.gtoc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.gdoc-toc li a{display:block;padding:4px 8px;border-radius:7px;text-decoration:none;color:var(--ink-2);font-size:.86rem;border-left:2px solid transparent}
.gdoc-toc li a:hover{background:var(--surface-2);color:var(--ink)}
.gdoc-toc li.t2 a{font-weight:600;color:var(--ink)}
.gdoc-toc li.t3 a{padding-left:20px}
.gdoc-toc li.t4 a{padding-left:32px;font-size:.8rem}
.gdoc-res .gres{padding-left:18px;margin:0;font-size:.88rem}
.gdoc-res .gresrow{grid-template-columns:1fr;gap:4px;padding:6px;border:1px solid var(--line);border-radius:9px;position:relative}
.gdoc-res .gresrow .xbtn{position:absolute;right:4px;top:4px}
.gdoc-res .gresrow input{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font:inherit;font-size:.84rem;width:100%}
.gdoc-res .gresrow input[data-gresf="title"]{width:calc(100% - 28px)}
.gdoc-main{min-width:0;max-width:80ch;display:grid;gap:14px}
.gdoc-head{display:grid;gap:8px}
.gdoc-head .lede{margin:0}
.gdoc-title{display:flex;gap:12px;align-items:center}
.gdoc-title h1{margin:0;font-size:clamp(1.6rem,3vw,2.2rem);text-wrap:balance}
.gdoc-title .nnum{width:34px;height:34px;font-size:1rem;flex:none}
.gdoc-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gdoc.reading{padding:4px 0}
.gdoc.editing{min-height:60vh;padding:24px 28px;border:1px solid var(--line);border-radius:12px;background:var(--surface);outline:none;cursor:text}
.gdoc.editing:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.gdoc.editing p[data-ph]::before{content:attr(data-ph);color:var(--ink-3);pointer-events:none}
.gdoc.editing p[data-ph]{position:relative}
.gdoc.editing p[data-ph] br{display:none}
.gdoc.editing p[data-ph]::after{content:"\200b"}
.gtoolbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.gtoolbar select{width:auto;padding:6px 8px;font:inherit;font-size:.86rem;border-radius:8px}
.tb{border:0;background:none;color:var(--ink);font:inherit;font-size:.86rem;padding:6px 9px;border-radius:7px;cursor:pointer;min-width:32px;line-height:1.2;list-style:none}
.tb:hover{background:var(--surface-2)}
.tbmenu>summary.tb::after{display:none}
.tbmenu .menu{min-width:230px}
.tbsep{width:1px;height:22px;background:var(--line);margin:0 4px}
.tbspacer{flex:1}
.tblink{flex-basis:100%;display:flex;gap:6px;padding:4px 2px 0}
.tblink input{flex:1;min-width:0;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit}
.gtips{margin:-6px 0 0}
.gtips code{font-size:.8rem}
.gempty{padding:22px;display:grid;gap:8px;justify-items:start}
.gempty p{margin:0}
.gdoc-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.gnav{display:grid;padding:10px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;background:var(--surface)}
.gnav small{font-weight:400;color:var(--ink-3)}
.gnav:last-child{text-align:right}
.gnav:hover{border-color:var(--accent)}
/* playbook */
.gtoc li.tgroup{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:10px 6px 2px}
.gtoc li.t1 a{font-weight:600;color:var(--ink)}
.gtoc li.t2.sub a,.gtoc li.sub a{padding-left:34px;font-size:.8rem;color:var(--ink-3);font-weight:400}
.gtoc li.t1:not(.has) a{color:var(--ink-3);font-weight:500}
.gstep-title{margin:0;flex:1;min-width:0;font-size:1.2rem;text-wrap:balance}
.gstep-title a{color:inherit;text-decoration:none}
.gstep-title a:hover{text-decoration:underline}
.gstep .gdoc h2{font-size:1.08rem}
.gstep .gdoc h3{font-size:.98rem}
.gabout{border-color:var(--brand-green)}
@media (max-width:900px){.gdoc-layout{grid-template-columns:1fr}.gdoc-side{position:static;max-height:none}.gdoc.editing{padding:16px}.gtoolbar{top:calc(env(safe-area-inset-top,0px) + 62px)}.is-editing .gdoc-side{order:2}}
.tblink[hidden]{display:none}
/* admin menu link */
.nav .authmenu a.menulink{justify-content:flex-start;text-align:left;padding:10px 16px;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:1rem;font-weight:500;background:var(--surface)}
.nav .authmenu a.menulink:hover{background:var(--surface-2)}
/* guides index */
.gidx{display:grid;gap:10px;align-content:start}
.gidx-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;color:inherit}
.gidx-head h3{margin:0}
.gidx-head:hover h3{text-decoration:underline}
.gidx-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gidx-list li{display:grid;gap:2px;min-width:0}
.gidx-list a{display:flex;align-items:center;gap:6px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.gidx-list a:hover{text-decoration:underline}
.gidx-list small{color:var(--ink-3,var(--ink-2));padding-left:22px}
.gidx-list .gicon{flex:none;display:inline-flex;color:var(--brand-green)}
.gidx-list .gicon svg{width:16px;height:16px}

/* ---------- framework ---------- */
.stagetag{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap}
.st-find.stagetag{color:var(--st-find);background:var(--st-find-soft)}
.st-decide.stagetag{color:var(--st-decide);background:var(--st-decide-soft)}
.st-forecast.stagetag{color:var(--st-forecast);background:var(--st-forecast-soft)}
.nstage{padding:10px 12px 2px}
.node .nsection{display:block;color:var(--tpl);font-weight:600}
:root[data-theme="dark"] .node .nsection{color:var(--st-find)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .node .nsection{color:var(--st-find)}}
.port small.dsrc{color:var(--accent)}
.nrules{margin:0;padding-left:16px;font-size:.8rem;display:grid;gap:3px}
.nrules b{font-weight:700;color:var(--st-decide)}
.nline.ph{color:var(--ink-3);font-style:italic}
.pstage select,.pstage input{width:100%}
.pgh.sub{margin-top:10px}
.flabel.sub{display:block;margin-top:10px}
.rulerow{display:grid;grid-template-columns:auto 1fr auto 1fr auto;gap:6px;align-items:center;margin-top:6px}
.rulerow .rk{font-size:.78rem;font-weight:700;color:var(--st-decide)}
.rulerow input{min-width:0}
@media (max-width:520px){.rulerow{grid-template-columns:auto 1fr auto}.rulerow .rk:nth-of-type(2){grid-column:1}}
.dsrchint{margin:2px 0 4px}
.fwmenu .menu{right:0;left:auto;min-width:320px;max-width:min(420px,88vw);padding:12px}
.fwbtn{gap:8px}
.fwscore{font-family:var(--mono);font-size:.78rem;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--amber-soft);color:var(--amber)}
.fwscore.ok{background:var(--good-soft);color:var(--good)}
.fwhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 8px}
.fwlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.fwlist li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}
.fwlist b{display:block;font-size:.88rem}
.fwlist small{display:block;color:var(--ink-3);font-size:.78rem;line-height:1.4;margin-top:2px}
.fwlist .linkbtn{margin-top:4px;font-size:.8rem}
.fwico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:.72rem;font-weight:800}
.fwlist .ok .fwico{background:var(--good-soft);color:var(--good)}
.fwlist .no .fwico{background:var(--amber-soft);color:var(--amber)}
.fwchip{background:var(--amber-soft);color:var(--amber);font-weight:600}
.fwchip.ok{background:var(--good-soft);color:var(--good)}
.fwdiagram{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto;gap:12px 14px;align-items:stretch}
.fwlane-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center}
.fwlane-label.tpl{grid-row:1;grid-column:1;align-self:start;height:110px}
.fwlane-label.proc{grid-row:1;grid-column:1;align-self:end;height:160px}
.fwcols{grid-row:1;grid-column:2;display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch}
.fwcol{display:grid;grid-template-rows:auto 26px 1fr;min-width:0}
.fwcard{border-radius:var(--radius);padding:14px;display:grid;gap:6px;align-content:start;min-width:0}
.fwcard.tpl{background:var(--tpl);color:var(--on-tpl);min-height:96px}
.fwcard.proc{background:var(--accent-soft);color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--brand-green)}
.fwcard .fwk,.fwsources .fwk{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.fwcard .big{font-family:var(--display);font-size:1.25rem;font-weight:700}
.fwcard p{margin:0;font-size:.9rem;line-height:1.45}
.fwin{width:100%;background:transparent;border:1px dashed transparent;border-radius:8px;padding:4px 6px;color:inherit;font:inherit}
.fwin:hover,.fwin:focus{border-color:currentColor;outline:none}
.fwin.big{font-family:var(--display);font-size:1.25rem;font-weight:700}
.fwin.q{resize:vertical;font-size:.9rem;line-height:1.45}
.fwcard.tpl .fwin{color:var(--on-tpl)}
.fwarrow{position:relative}
.fwarrow.up::before{content:"";position:absolute;left:50%;top:4px;bottom:4px;border-left:2px solid var(--wire)}
.fwarrow.up::after{content:"";position:absolute;left:calc(50% - 5px);top:2px;border:5px solid transparent;border-bottom:7px solid var(--wire);border-top:0}
.fwarrow.right{align-self:end;height:60%}
.fwarrow.right::before{content:"";position:absolute;left:4px;right:6px;top:50%;border-top:2px solid var(--wire)}
.fwarrow.right::after{content:"";position:absolute;right:0;top:calc(50% - 5px);border:5px solid transparent;border-left:7px solid var(--wire);border-right:0}
.fwsources{grid-row:2;grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px;border-radius:var(--radius);background:var(--amber-soft);border:1px solid var(--line)}
.fwsources .fwk{color:var(--amber);opacity:1;font-weight:700}
.fwsources .chip{background:var(--surface);color:var(--ink)}
.fwtitle{font:inherit;width:auto;max-width:100%}
h1 .fwtitle{display:inline-block;min-width:6ch}
.srcgrid{align-items:start}
.srccard{display:grid;gap:4px}
.srccard.focus{outline:2px solid var(--brand-green);outline-offset:2px}
.srccard input,.srccard textarea{width:100%}
.srccard .flabel{margin-top:6px}
.srchead{display:flex;gap:8px;align-items:center}
.srchead h3{margin:0}
.srcname{font-family:var(--display);font-size:1.1rem;font-weight:700;flex:1;min-width:0}
.warn{color:var(--amber)}
.fwtable table{width:100%;border-collapse:collapse}
.fwtable th,.fwtable td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.fwtable tr:last-child td{border-bottom:0}
.startpick{margin:14px 0 4px}
.rs-top .stagetag{margin-bottom:4px}
.gdoc-head .stagetag{justify-self:start}
@media (max-width:820px){
  .fwdiagram{grid-template-columns:1fr}
  .fwlane-label{display:none}
  .fwcols{grid-column:1;grid-template-columns:1fr}
  .fwarrow.right{height:22px;align-self:center}
  .fwarrow.right::before{left:50%;right:auto;top:2px;bottom:8px;border-top:0;border-left:2px solid var(--wire)}
  .fwarrow.right::after{left:calc(50% - 5px);right:auto;top:auto;bottom:0;border:5px solid transparent;border-top:7px solid var(--wire);border-bottom:0}
  .fwsources{grid-column:1}
  .fwmenu .menu{position:fixed;left:16px;right:16px;top:auto;max-width:none;min-width:0}
}
.fwin.q{resize:none}
.fwcard.proc .fwin:not(.q),.fwcard.proc>b{font-family:var(--display);font-weight:700;font-size:1.1rem}
.fwlist .linkbtn{padding:0;justify-self:start}
.fwmenu .menu{max-height:min(70vh,560px);overflow:auto}
.fwlist .linkbtn{margin:4px 0 0}
@media (max-width:640px){
  .fwtable thead{display:none}
  .fwtable tr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line)}
  .fwtable tr:last-child{border-bottom:0}
  .fwtable td{border:0;padding:0}
  .fwtable td:last-child{grid-column:1 / -1}
}
.xmenu .menu .fwlist button.linkbtn{display:inline;padding:0;margin-top:4px;border-radius:0;color:var(--accent);font-weight:600;text-decoration:underline}
.xmenu .menu .fwlist button.linkbtn:hover{background:none}
/* ---------- this project ---------- */
.top-inner{justify-content:flex-start}
.top-inner .nav{margin-left:auto}
.projlink{text-decoration:none;font-size:.93rem;color:var(--ink-2);padding:8px 12px;border-radius:8px;white-space:nowrap}
.projlink:hover{background:var(--surface-2);color:var(--ink)}
.projlink.active{color:var(--ink);background:var(--surface-2);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand-green)}
.nav a.navproj{display:none}
body.gated .projlink{display:none}
@media (max-width:820px){
  .projlink{display:none}
  .nav a.navproj{display:block}
  .menu-btn{margin-left:auto}
}
.projpage .whygrid .card h3,.projpage .grid .card h3{margin:0 0 6px}
.projpage .card p{margin:0}
.projfig{margin:0;padding:12px;background:#F3F4F2}
.figscroll{overflow-x:auto}
.figscroll img{display:block;width:100%;min-width:720px;height:auto}
.projtable{padding:0}
.projtable table{width:100%;border-collapse:collapse}
.projtable th,.projtable td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.92rem}
.projtable th{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.projtable tr:last-child td{border-bottom:0}
.projtable .nowrap{white-space:nowrap}
.projimg{margin:0;padding:10px;display:grid;gap:8px}
.projimg img{width:100%;height:auto;border-radius:8px;display:block}
.projimg figcaption{font-size:.85rem;color:var(--ink-2)}
.mapgrid{margin:16px 0}
.mapgrid .card{display:grid;gap:8px;align-content:start}
.mapgrid .stagetag{justify-self:start}
.howlist{list-style:none;counter-reset:how;margin:0;padding:0;display:grid;gap:10px}
.howlist li{counter-increment:how;display:grid;grid-template-columns:36px 1fr;gap:4px 12px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.howlist li::before{content:counter(how);grid-row:span 2;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-green);color:var(--on-green);font-weight:700;font-family:var(--mono)}
.howlist b{font-size:1rem}
.howlist span{color:var(--ink-2);font-size:.92rem}
@media (max-width:640px){
  .projtable thead{display:none}
  .projtable tr{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .projtable tr:last-child{border-bottom:0}
  .projtable td{border:0;padding:0}
}
.pcols2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcols3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.pcols3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pcols2,.pcols3{grid-template-columns:1fr}}
.projimg{align-content:start}
.gatedomains{margin:0;padding-left:20px;display:grid;gap:2px;font-size:.95rem}
.gatedomains li::marker{color:var(--accent)}
/* ---------- who does the work ---------- */
:root{--a-person:#1A5F80;--a-person-soft:#DCEBF3;--a-ai:#6A3FB5;--a-ai-soft:#ECE4F8;--a-auto:#8A5A00;--a-auto-soft:#FBF1DC}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--a-person:#7CC2E6;--a-person-soft:#13303D;--a-ai:#BFA2F2;--a-ai-soft:#2A2140;--a-auto:#E0A93E;--a-auto-soft:#3A2E17}}
:root[data-theme="dark"]{--a-person:#7CC2E6;--a-person-soft:#13303D;--a-ai:#BFA2F2;--a-ai-soft:#2A2140;--a-auto:#E0A93E;--a-auto-soft:#3A2E17}
.nstage{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.actors{display:inline-flex;flex-wrap:wrap;gap:4px}
.actor{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;padding:2px 7px 2px 5px;border-radius:999px;white-space:nowrap}
.actor svg,.actorchk svg,.rauto svg{width:13px;height:13px;flex:none}
.a-person.actor{color:var(--a-person);background:var(--a-person-soft)}
.a-ai.actor{color:var(--a-ai);background:var(--a-ai-soft)}
.a-automation.actor{color:var(--a-auto);background:var(--a-auto-soft)}
.buildtag{display:inline-block;font-size:.68rem;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);margin-left:4px}
.buildtag.b-live{background:var(--good-soft);color:var(--good)}
.buildtag.b-building{background:var(--amber-soft);color:var(--amber)}
.actorpick{display:flex;flex-wrap:wrap;gap:6px}
.actorchk{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.88rem;user-select:none}
.actorchk input{margin:0}
.actorchk:has(input:checked).a-person{background:var(--a-person-soft);border-color:var(--a-person);color:var(--a-person)}
.actorchk:has(input:checked).a-ai{background:var(--a-ai-soft);border-color:var(--a-ai);color:var(--a-ai)}
.actorchk:has(input:checked).a-automation{background:var(--a-auto-soft);border-color:var(--a-auto);color:var(--a-auto)}
.pactors .dline{margin-top:8px}
.pactors .dline select{flex:0 0 auto;width:auto}
.wfkind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.wfkind select{width:auto;font-size:.82rem;padding:4px 8px}
.wfmix{font-size:.78rem;color:var(--ink-3)}
.wfmix .linkbtn{font-size:.78rem}
.kindtag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--a-person-soft);color:var(--a-person)}
.kindtag.k-hybrid{background:var(--a-ai-soft);color:var(--a-ai)}
.kindtag.k-system{background:var(--a-auto-soft);color:var(--a-auto)}
.kindtabs{margin:0 0 16px}
.kindtabs small{opacity:.6;margin-left:2px}
.rs-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.rauto{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:10px;background:var(--a-auto-soft);color:var(--ink);margin:8px 0}
.rauto svg{width:18px;height:18px;color:var(--a-auto);margin-top:2px}
.rauto b{display:block}
.rauto span{font-size:.88rem;color:var(--ink-2)}
.kindtabs{max-width:100%;overflow-x:auto}
.plainlist{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px;font-size:.9rem}
.plainlist li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* ---------- canvas atmosphere: a slow green glow with faint drifting sparkles ---------- */
:root{--glow:color-mix(in srgb,var(--brand-green) 14%,transparent);--glow-2:color-mix(in srgb,var(--brand-green) 9%,transparent);--spark:color-mix(in srgb,var(--brand-green) 55%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:color-mix(in srgb,var(--brand-green) 20%,transparent);--glow-2:color-mix(in srgb,var(--brand-green) 13%,transparent);--spark:color-mix(in srgb,var(--brand-green) 70%,transparent)}}
:root[data-theme="dark"]{--glow:color-mix(in srgb,var(--brand-green) 20%,transparent);--glow-2:color-mix(in srgb,var(--brand-green) 13%,transparent);--spark:color-mix(in srgb,var(--brand-green) 70%,transparent)}
.atmos-glow,.atmos-spark{position:absolute;inset:-12%;pointer-events:none}
.atmos-glow{
  background:
    radial-gradient(32% 30% at 20% 26%,var(--glow),transparent 72%),
    radial-gradient(30% 28% at 78% 68%,var(--glow-2),transparent 72%),
    radial-gradient(24% 24% at 56% 14%,var(--glow-2),transparent 70%);
  filter:blur(24px);
  animation:atmos-drift 54s ease-in-out infinite alternate;
}
.atmos-spark{
  background-image:
    radial-gradient(2.4px 2.4px at 18% 22%,var(--spark),transparent 62%),
    radial-gradient(2px 2px at 62% 14%,var(--spark),transparent 62%),
    radial-gradient(2.6px 2.6px at 84% 52%,var(--spark),transparent 62%),
    radial-gradient(1.9px 1.9px at 34% 68%,var(--spark),transparent 62%),
    radial-gradient(2.2px 2.2px at 72% 84%,var(--spark),transparent 62%),
    radial-gradient(1.8px 1.8px at 8% 78%,var(--spark),transparent 62%);
  background-size:420px 340px,520px 420px,380px 460px,560px 380px,440px 520px,500px 400px;
  opacity:.6;
  animation:atmos-float 120s linear infinite,atmos-twinkle 11s ease-in-out infinite;
}
@keyframes atmos-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}
  100%{transform:translate3d(-2%,2.5%,0) scale(1.03)}
}
@keyframes atmos-float{from{background-position:0 0,0 0,0 0,0 0,0 0,0 0}to{background-position:520px -420px,-660px 520px,480px 560px,-720px -480px,560px -640px,620px 500px}}
@keyframes atmos-twinkle{0%,100%{opacity:.42}50%{opacity:.85}}
.board .atmos-glow,.board .atmos-spark{z-index:0}
.board .surface,.board .boardempty{position:relative;z-index:1}
.board .surface{position:absolute}
/* login screen sits on the same canvas */
body.gated main.wrap{position:relative}
body.gated .gatebox{position:relative;z-index:1}
.gatecanvas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px}
@media (prefers-reduced-motion:reduce){.atmos-glow,.atmos-spark{animation:none}}

/* full width top bar */
.top .top-inner{max-width:none;padding-left:20px;padding-right:20px}
@media (max-width:640px){.top .top-inner{padding-left:14px;padding-right:14px}}
/* canvas title sits straight on the canvas, no card */
.ovl-title.bare{pointer-events:auto;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;display:grid;gap:2px;max-width:min(460px,100%);min-width:0}
.ovl-title.bare .titlein,.ovl-title.bare .wftitle{font-size:1.45rem}
.ovl-title.bare .titlein:hover,.ovl-title.bare .purposein:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.ovl-title.bare .wfkind select{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ovl-title.bare .wfmix{text-shadow:0 1px 0 var(--bg)}
.ovl-title .purposein,.ovl-title .wfpurpose{margin-left:0}
.baseurl{margin:14px 0 4px;max-width:560px}
.baseurl .eyebrow{margin-bottom:.35em}
.baseurl .codebox{margin:0}
.baseurl .code{font-size:.95rem;padding-right:78px}

/* ---------- code snippets ---------- */
:root{--c-bg:#11151A;--c-line:#252C33;--c-ink:#E4E8E2;--c-cmd:#4FE384;--c-str:#F2C97D;--c-url:#7CC2E6;--c-flag:#BFA2F2;--c-var:#7CE0C8;--c-ph:#9AA3AC;--c-key:#8FE3B4;--c-head:#171C22}
.codebox{position:relative;min-width:0;background:var(--c-bg);border:1px solid var(--c-line);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(22,22,22,.10),0 8px 22px rgba(22,22,22,.08)}
.codehead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;background:var(--c-head);border-bottom:1px solid var(--c-line)}
.codelang{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ph)}
.codebox .code{margin:0;padding:16px 18px;background:none;border:0;border-radius:0;max-height:none;color:var(--c-ink);font-family:var(--mono);font-size:.82rem;line-height:1.7;white-space:pre;overflow-x:auto;tab-size:2;scrollbar-width:thin}
.codebox .code code{background:none;font:inherit;color:inherit}
.copybtn{position:static;font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:6px 10px;border-radius:7px;border:1px solid var(--c-line);background:rgba(255,255,255,.05);color:var(--c-ph);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.copybtn:hover{background:var(--brand-green);border-color:var(--brand-green);color:var(--on-green)}
.copybtn:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}
.c-cmd{color:var(--c-cmd);font-weight:600}
.c-str{color:var(--c-str)}
.c-key{color:var(--c-key)}
.c-url{color:var(--c-url)}
.c-flag{color:var(--c-flag)}
.c-var{color:var(--c-var)}
.c-ph{color:var(--c-ph);font-style:italic}
.card .codebox{margin-top:10px}
.card .codebox .code{margin-top:0;font-size:.8rem}
.baseurl .codebox .code{font-size:.92rem;padding:14px 18px}
@media (max-width:640px){.codebox .code{font-size:.74rem;padding:14px}}
.grid.g2f .card{align-content:start}

/* ---------- what each person, AI or automation does ---------- */
.actornotes{display:grid;gap:8px;margin-top:10px}
.anote{display:grid;gap:4px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2)}
.anhead{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.01em}
.anhead svg{width:14px;height:14px;flex:none}
.anote.a-person .anhead{color:var(--a-person)}
.anote.a-ai .anhead{color:var(--a-ai)}
.anote.a-automation .anhead{color:var(--a-auto)}
.anote.a-person{border-color:var(--a-person-soft)}
.anote.a-ai{border-color:var(--a-ai-soft)}
.anote.a-automation{border-color:var(--a-auto-soft)}
.anote textarea{width:100%;resize:vertical;min-height:40px}
.nanotes,.ranotes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nanotes li,.ranotes li{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:start;font-size:.8rem;line-height:1.5}
.nanotes svg,.ranotes svg{width:13px;height:13px;margin-top:2px;flex:none}
.nanotes li.a-person svg,.ranotes li.a-person svg{color:var(--a-person)}
.nanotes li.a-ai svg,.ranotes li.a-ai svg{color:var(--a-ai)}
.nanotes li.a-automation svg,.ranotes li.a-automation svg{color:var(--a-auto)}
.nanotes b,.ranotes b{font-weight:700}
.ranotes{margin:12px 0;gap:8px;font-size:.92rem}

/* ---------- system cards ---------- */
.wfsteps{list-style:none;counter-reset:wfs;margin:10px 0 0;padding:0;display:grid;gap:4px}
.wfsteps li{counter-increment:wfs;display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;font-size:.88rem;color:var(--ink-2);min-width:0}
.wfsteps li::before{content:counter(wfs);font-family:var(--mono);font-size:.7rem;font-weight:700;color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:1px 5px;line-height:1.5}
.wfsteps li span{overflow-wrap:anywhere}
.wfmore{margin:6px 0 0;font-size:.8rem;color:var(--ink-3)}
.wfcard .chips{margin-top:12px}

/* ---------- questions, suggestions and comments ---------- */
:root{--q-question:#1A5F80;--q-question-soft:#DCEBF3;--q-suggestion:#8A5A00;--q-suggestion-soft:#FBF1DC;--q-comment:#5D5F57;--q-comment-soft:#E7E9E4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--q-question:#7CC2E6;--q-question-soft:#13303D;--q-suggestion:#E0A93E;--q-suggestion-soft:#3A2E17;--q-comment:#B9BCB4;--q-comment-soft:#26282A}}
:root[data-theme="dark"]{--q-question:#7CC2E6;--q-question-soft:#13303D;--q-suggestion:#E0A93E;--q-suggestion-soft:#3A2E17;--q-comment:#B9BCB4;--q-comment-soft:#26282A}

.qa{margin-top:40px;display:grid;gap:14px}
.qahead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.qahead h2{margin:0;font-size:1.15rem}
.qacounts{font-size:.85rem;color:var(--ink-3)}
.qaask{display:grid;gap:10px;padding:14px}
.qakinds{display:flex;flex-wrap:wrap;gap:6px}
.qakindpick{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;cursor:pointer;font-size:.86rem;user-select:none}
.qakindpick input{margin:0}
.qakindpick:has(input:checked).qk-question{background:var(--q-question-soft);border-color:var(--q-question);color:var(--q-question)}
.qakindpick:has(input:checked).qk-suggestion{background:var(--q-suggestion-soft);border-color:var(--q-suggestion);color:var(--q-suggestion)}
.qakindpick:has(input:checked).qk-comment{background:var(--q-comment-soft);border-color:var(--q-comment);color:var(--q-comment)}
.qaactions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.cbline{display:inline-flex;align-items:center;gap:7px;font-size:.88rem;cursor:pointer;user-select:none}
.anonhint{margin:0}

/* the small rich text editor */
.richbox{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.richbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.richbar{display:flex;flex-wrap:wrap;gap:2px;padding:5px 6px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.richbar .tb{font-size:.78rem;padding:3px 7px}
.richin{min-height:76px;max-height:340px;overflow:auto;padding:10px 12px;font-size:.94rem;line-height:1.6;outline:none}
.richin>*:first-child{margin-top:0}
.richin>*:last-child{margin-bottom:0}
.richin p{margin:0 0 8px}
.richin ul,.richin ol{margin:0 0 8px;padding-left:20px}
.richin blockquote{margin:0 0 8px;padding-left:10px;border-left:3px solid var(--line);color:var(--ink-2)}
.richin code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:1px 4px;border-radius:4px}
.richin{position:relative}
.richin:not(.filled)::before{content:attr(data-ph);position:absolute;top:10px;left:12px;right:12px;color:var(--ink-3);pointer-events:none}

/* threads */
.qalist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.qathread{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px;min-width:0}
.qathread.waiting{border-left:3px solid var(--q-question)}
.qameta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-3)}
.qakind{font-size:.7rem;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px}
.qk-question.qakind{color:var(--q-question);background:var(--q-question-soft)}
.qk-suggestion.qakind{color:var(--q-suggestion);background:var(--q-suggestion-soft)}
.qk-comment.qakind{color:var(--q-comment);background:var(--q-comment-soft)}
.qaauthor{font-weight:600;color:var(--ink-2)}
.qaauthor.anon{font-style:italic;font-weight:500}
.qaflag{color:var(--amber);font-weight:600}
.qawhere{margin-left:auto;font-weight:600;text-decoration:none;color:var(--accent)}
.qawhere:hover{text-decoration:underline}
.qabody{font-size:.95rem}
.qabody p:last-child,.qaanswer .gdoc p:last-child{margin-bottom:0}
.qaanswer{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 10px 10px 0;padding:10px 14px;display:grid;gap:6px}
.qaans{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.qaanswerform{display:grid;gap:8px;border-top:1px dashed var(--line);padding-top:10px}
.qaempty{color:var(--ink-3);font-size:.92rem}

/* the compact block inside the canvas panel */
.qa.compact{margin-top:0;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.qa.compact .qahead{border-top:0;padding-top:0}
.qa.compact .qahead h2{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.qa.compact .qaask{padding:10px;border-radius:10px}
.qa.compact .richin{min-height:56px;font-size:.88rem}
.qa.compact .qathread{padding:10px 12px;font-size:.88rem}
.qa.compact .qabody{font-size:.88rem}
.qa.compact .qakindpick{font-size:.8rem;padding:4px 9px}

/* counts */
.qatag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;padding:2px 7px;border-radius:999px;color:var(--q-comment);background:var(--q-comment-soft);white-space:nowrap}
.qatag svg{width:12px;height:12px}
.qatag.open{color:var(--q-question);background:var(--q-question-soft)}
.qan{display:inline-block;min-width:16px;padding:0 4px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-size:.7rem;font-weight:700;text-align:center}
.qan.open{background:var(--q-question-soft);color:var(--q-question)}
.navdot{display:inline-block;min-width:16px;padding:0 4px;border-radius:999px;background:var(--q-question);color:var(--surface);font-size:.68rem;font-weight:700;line-height:16px;text-align:center}
.qapage{margin-top:18px}
.qapage .qalist{gap:12px}
@media (max-width:640px){.qawhere{margin-left:0;width:100%}}