/* SEO Systems brand: ocean blue #1D6A96 and #6FA0C2 */
:root{
  --brand-ink:#161616;--brand-hi:#1D6A96;--on-brand-hi:#FFFFFF;--mark-1:#1D6A96;--mark-2:#6FA0C2;
  --bg:#F3F5F7;--surface:#FFFFFF;--surface-2:#E9EDF1;--ink:#161616;--ink-2:#424A52;--ink-3:#6B7580;
  --line:#D8DEE4;--brand:#161616;--accent:#1D6A96;--accent-soft:#DCEAF3;--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:#0F6E66;--on-tpl:#FFFFFF;
  --good:#1E7F46;--good-soft:#DDF3E5;--bad:#B3261E;--bad-soft:#FBE7E5;--on-bad:#FFFFFF;
  --head:#161616;--on-head:#FFFFFF;--wire:#95A0AA;--dot:#C6CED6;
  --heat-0:#E9EDF1;--heat-1:#C3D9E8;--heat-2:#6FA0C2;--heat-3:#1D6A96;
  --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:#7FB0D3;--accent-soft:#13293A;--brand-hi:#6FA0C2;--on-brand-hi:#0E0E0E;--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:#1B5A55;--on-tpl:#F2F2EF;
  --good:#4ADE80;--good-soft:#12301F;--bad:#FF7A70;--bad-soft:#3A1D1B;--on-bad:#161616;
  --head:#262626;--on-head:#F2F2EF;--wire:#5E5E5A;--dot:#2A2A2A;
  --heat-0:#1C1C1C;--heat-1:#15324A;--heat-2:#2F6E99;--heat-3:#7FB0D3;--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:#7FB0D3;--accent-soft:#13293A;--brand-hi:#6FA0C2;--on-brand-hi:#0E0E0E;--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:#1B5A55;--on-tpl:#F2F2EF;
  --good:#4ADE80;--good-soft:#12301F;--bad:#FF7A70;--bad-soft:#3A1D1B;--on-bad:#161616;
  --head:#262626;--on-head:#F2F2EF;--wire:#5E5E5A;--dot:#2A2A2A;
  --heat-0:#1C1C1C;--heat-1:#15324A;--heat-2:#2F6E99;--heat-3:#7FB0D3;--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;flex:none}
.logo-mark svg{width:30px;height:30px}
.mark .m1{fill:var(--mark-1);stroke:var(--mark-1)}.mark .m2{fill:var(--mark-2);stroke:var(--mark-2)}.mark path{stroke-width:1.5;stroke-linejoin:round}
.wordtext{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.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-hi);color:var(--on-brand-hi);border-color:var(--brand-hi)}
.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-hi);border-color:var(--brand-hi);color:var(--on-brand-hi);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-hi)}
.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:calc(var(--chrome) + 20px)}
@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}
/* The red is dark in the light theme and light in the dark theme, so the text on it
   cannot be one colour. White on the dark theme's salmon red measures 2.5:1, which is
   why this is a token rather than a literal. */
.btn.danger,.chip.danger{background:var(--bad);border-color:var(--bad);color:var(--on-bad)}
.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:calc(var(--chrome) + 20px)}
@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-hi)}
.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}
/* the board sets touch-action:none so a finger pans the canvas. The panel is a
   form sitting inside it, so it has to hand touch back to the browser or a
   scroll gesture in the editor drags the canvas sideways instead. */
.panel,.panel *{touch-action:auto}
.panel{overscroll-behavior:contain}
@media (max-width:640px){body.canvas-mode{overflow:auto}body.canvas-mode main.wrap{height:auto}body.canvas-mode .board{height:70vh;flex:none}
  body.canvas-mode .board .panel{position:fixed;inset:0;width:100%;max-width:none;z-index:40;border-left:0}}
@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-hi);border-color:var(--brand-hi);color:var(--on-brand-hi);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-hi);color:var(--on-brand-hi)}
.nhead .ph{color:color-mix(in srgb,var(--on-head) 60%,transparent)}
.node.sel .nhead{background:var(--brand-hi);color:var(--on-brand-hi)}
.node.sel .nhead .nnum{background:var(--on-brand-hi);color:var(--brand-hi)}
.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-hi);color:var(--on-brand-hi)}
.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-hi)!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}
/* the note and the "used by" line share a row, and the note keeps its width: a long
   used-by text used to squeeze the textarea down to one character per line */
.dline.meta{flex-wrap:wrap;justify-content:space-between;gap:6px 8px}
.dline.meta>textarea,.dline.meta>.linkbtn{flex:1 1 180px;min-width:0}
.dline.meta .hint{flex:0 1 auto;min-width:0;max-width:100%;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-hi)}
.node.sel{border-color:var(--brand-hi);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-hi) 30%,transparent)}
.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-hi);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-hi);border-color:var(--brand-hi);color:var(--on-brand-hi)}
.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:56px;height:56px}
.logo-mark.big svg{width:56px;height:56px}
.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-hi)}
.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-hi)}
.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 */
/* an imported system is a whole system sitting on this canvas, not a step:
   it gets its own colour, a label ribbon, and stacked edges behind it */
:root{--imp:#5B4BC4;--imp-soft:#E8E5FA;--imp-line:#B9B0EE}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--imp:#A99CF5;--imp-soft:#241F3D;--imp-line:#4B4185}}
:root[data-theme="dark"]{--imp:#A99CF5;--imp-soft:#241F3D;--imp-line:#4B4185}
.node.imp{border:2px dashed var(--imp-line);background:var(--surface);overflow:visible}
/* the edges of the steps stacked inside */
.node.imp::before,.node.imp::after{content:"";position:absolute;left:8px;right:8px;bottom:-5px;height:12px;border:2px dashed var(--imp-line);border-top:0;border-radius:0 0 12px 12px;background:var(--surface);z-index:-1}
.node.imp::after{left:14px;right:14px;bottom:-10px}
.impribbon{display:flex;align-items:center;gap:6px;padding:5px 10px;background:var(--imp-soft);color:var(--imp);border-bottom:1px solid var(--imp-line);border-radius:9px 9px 0 0;font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;cursor:grab}
.impribbon svg{width:13px;height:13px;flex:none}
.impribbon em{margin-left:auto;font-style:normal;font-weight:700;letter-spacing:.04em;opacity:.8}
.node.imp .nhead{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line);border-radius:0}
.node.imp .nhead b{color:var(--imp)}
.node.imp .nhead .nnum{background:var(--imp);color:var(--surface)}
.node.imp .npurpose{color:var(--ink-2)}
/* the steps inside sit behind a rail, so they read as contents rather than fields */
.impcontains{border-left:3px solid var(--imp-line);margin-left:10px;padding-left:2px}
.node.imp .impopen{color:var(--imp);border-top:1px solid var(--imp-line);background:var(--imp-soft);border-radius:0 0 9px 9px}
.node.imp .impopen:hover{filter:brightness(.97)}
.node.imp.sel{border-style:solid;border-color:var(--imp);box-shadow:0 0 0 3px var(--imp-soft)}
.node.imp.sel::before,.node.imp.sel::after{border-style:solid;border-color:var(--imp)}
.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-hi);color:var(--on-brand-hi)}
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)}
.wire.imp{stroke-dasharray:6 4}
.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"}
.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}
.port.in.linked .dot{background:var(--brand-hi);border-color:var(--accent)}
.node.imp.sel .impribbon{background:var(--imp);color:var(--surface);border-bottom-color:var(--imp)}
.node.imp.sel .nhead{background:var(--imp-soft);color:var(--ink)}
.node.imp.sel .nhead .nnum{background:var(--imp);color:var(--surface)}
/* 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-hi);outline-offset:2px}
/* runs */
.btn.runbtn{background:var(--brand-ink);color:var(--brand-hi);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-hi)}
.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-hi);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(--good-soft);color:var(--good)}
.chip.runstatus.st-cancelled{background:var(--bad-soft);color:var(--bad)}
.chip.runstatus.st-completed{background:var(--brand-hi);color:var(--on-brand-hi)}
.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}
/* The steps run across the top rather than down the side. A twelve column table wants
   1511px and a sidebar left it 762px, so the 336px the rail was holding goes to the
   data. The strip is sticky for the same reason the rail was: on a long table you
   still need to see where you are and what is next. */
.runbody{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
/* The step strip is the second breadcrumb on this page, so it is built like the first:
   a full width bar stuck under the page crumbs, its own surface, one hairline below it.
   It used to be a rounded card floating on the page background, which read as content
   rather than as chrome and left the row inset from the screen edge on a phone. */
.runsteps-bar{position:sticky;top:var(--chrome);z-index:6;background:var(--surface);border-bottom:1px solid var(--line);
  /* out to the viewport edges, whatever padding the page wrapper has */
  margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%)}
/* One line, always. Eight steps at a short label each fit; anything longer scrolls
   rather than wrapping, because wrapped rows stop reading as a sequence. */
.runsteps{display:flex;gap:0;align-items:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-behavior:smooth;padding:0;
  /* the crumb row hides its scrollbar too: a visible one under six words looks broken */
  scrollbar-width:none;-ms-overflow-style:none}
.runsteps::-webkit-scrollbar{display:none}
/* the last step can reach the screen edge rather than stopping short of it */
.runsteps::after{content:'';flex:0 0 max(0px,calc(50vw - 50% - 2px))}
#run-dlg #run-name{font-weight:600}
/* Every step sits at one indent, imported or not: to the person working the run they
   are one list of things to do, and where a step was authored is not their problem. */
/* A step reads as one word on a baseline, the way a crumb does. The state is the
   colour of that baseline, not a shape beside it, which is what lets the whole tier
   sit at the crumb's own size instead of at a circle's. */
.rs-item{position:relative;display:flex;align-items:center;gap:4px;flex:0 0 auto;border:0;border-bottom:2px solid var(--line);background:none;border-radius:0;
  padding:0 2px;margin:0 9px;height:calc(var(--crumb-h) - 2px);cursor:pointer;color:var(--ink-3);font:inherit;font-size:.85rem;white-space:nowrap}
.rs-item:first-child{margin-left:0}
.rs-item:hover{color:var(--ink);border-bottom-color:var(--wire)}
.rs-item.sdone{color:var(--ink-2);border-bottom-color:var(--brand-hi)}
.rs-item.on{color:var(--ink);font-weight:600;border-bottom-color:var(--ink)}
/* Waiting on something upstream is a real state and it is not a colour of progress:
   amber, so it does not read as done and does not read as merely unvisited. */
.rs-item.blocked{border-bottom-color:var(--amber-soft)}
.rs-item.blocked .rs-name{color:var(--ink-3)}
.rs-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* The reserved slot. Always present, always this wide, whatever the step's state, so a
   tick appearing when someone finishes a step cannot move the steps beside it. */
.rs-mark{display:inline-grid;place-items:center;flex:0 0 auto;width:11px;height:11px;font-size:.66rem;font-weight:800;line-height:1;color:transparent}
.rs-mark.rs-m-done{color:var(--accent)}
.rs-mark.rs-m-in_progress{color:var(--accent);font-size:.9rem}
.rs-mark.rs-m-skipped{color:var(--ink-3);font-weight:600}
/* the number is part of the step name, so it takes the name's colour; tabular figures
   keep a two-digit step from shifting the name sideways */
.rs-num{color:inherit;font-variant-numeric:tabular-nums}
/* The name and a bold copy of itself sit in the same grid cell, so the cell is always
   as wide as the bold state. Selecting a step then changes its weight without changing
   its width, and the steps beside it stay where the eye left them. */
.rs-name{display:inline-grid;grid-template-columns:minmax(0,max-content);min-width:0;font-weight:inherit;font-size:inherit;line-height:1;white-space:nowrap;color:inherit}
.rs-name>.rs-label{grid-area:1/1;min-width:0}
.rs-name::after{content:attr(data-label);grid-area:1/1;font-weight:600;visibility:hidden;pointer-events:none}
.runstep{padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
.runstep p{margin:0}
/* the step header is a green band that caps the card: it takes the card's own top
   radius, cancels its padding so it runs edge to edge, and closes with a firm rule */
.runstep{padding:0;overflow:hidden}
.runstep > :not(.rs-top){margin-left:20px;margin-right:20px}
.runstep > :last-child{margin-bottom:20px}
/* Title on its own line, the summary under it, at every width. As a wrapping flex row
   the two sat side by side whenever the title was short enough to leave room, so the
   same step read as a stacked heading on a phone and as two columns on a desktop. */
.rs-top{display:grid;justify-items:start;align-items:start;gap:6px;
  margin:0;padding:16px 20px 18px;background:var(--surface-2);color:var(--ink);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  border-bottom:2px solid var(--brand-hi)}
.rs-top p{color:var(--ink-3)}
.rs-top h2{margin:0;font-size:1.35rem;text-wrap:balance;color:inherit}
/* What the step is for, in the band with its name: the two belong together, and read
   as the heading of the card rather than as the first thing inside it. */
.rs-purpose{margin:0;color:var(--ink-2);max-width:70ch}
/* the step number reads as part of the title, same colour, figures aligned */
.hnum{color:inherit;font-variant-numeric:tabular-nums}
/* ---- scope: picking the URLs a run covers ---- */
/* a label is an inline element, so without this a textarea sits beside its own label
   instead of under it */
.rsec .flabel{display:block;margin:0 0 6px}
.rsec textarea,.rsec input[type=text]{width:100%}
.sc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* Saved scopes as cards rather than a dropdown: there are rarely more than a handful,
   and a card can show how many URLs each covers and what it actually matches, which is
   the thing you need to tell two of them apart. */
/* Saved scopes as rows. A card had room for a name, a count and a truncated rule
   string, so two scopes over the same section were told apart by their names alone.
   A row gives the description its own line and lines the counts and dates up in
   columns, which is what makes a list of six readable rather than six things to read. */
.sc-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px;background:var(--surface)}
.sc-rhead,.sc-row-item{display:grid;grid-template-columns:26px minmax(0,1fr) 74px 120px;gap:14px;align-items:center;padding:11px 16px}
.sc-rhead{background:var(--surface-2);font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.sc-row-item{border-top:1px solid var(--line);cursor:pointer;color:var(--ink)}
.sc-row-item:hover{background:var(--surface-2)}
.sc-row-item.on{background:var(--accent-soft)}
.sc-rmain{display:flex;flex-direction:column;gap:3px;min-width:0}
.sc-rname{font-size:1rem;font-weight:700}
/* the line a person wrote, which says why this set rather than which URLs */
.sc-rnote{font-size:.85rem;color:var(--ink-2);line-height:1.4}
.sc-rrules{font-family:var(--mono);font-size:.74rem;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-rcount{text-align:right;font-size:.82rem;color:var(--ink-2)}
.sc-rcount b{font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.sc-rcount em{display:block;font-style:normal;font-size:.76rem;line-height:1.3}
.sc-rwhen{font-size:.8rem;color:var(--ink-2)}
.sc-rnew{border-top-style:dashed;border-top-color:var(--wire)}
.pd-foot{margin:2px 0 4px;padding:10px 12px;background:var(--surface-2);border-radius:8px;display:grid;gap:2px;font-family:var(--mono);font-size:.78rem;color:var(--ink-2)}
@media (max-width:640px){
  .sc-rhead{display:none}
  .sc-row-item{grid-template-columns:26px minmax(0,1fr);row-gap:4px}
  .sc-rcount,.sc-rwhen{grid-column:2;text-align:left}
}
.sc-tally{margin:0 0 10px}
.sc-notes{margin:6px 0 0;padding-left:18px;display:grid;gap:2px}
.sc-seeds,.sc-exclude{margin:10px 0 2px}
.sc-seeds textarea{font-family:var(--mono);font-size:.82rem}
/* the tree scrolls rather than pushing the rest of the step off the screen, and its
   rows are one line each so a hundred sections stay scannable */
.sc-tree{margin:10px 0;border:1px solid var(--line);border-radius:10px;background:var(--surface);max-height:320px;overflow:auto;padding:4px}
.sc-node{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:4px 8px 4px calc(8px + var(--d,0) * 18px);border-radius:6px}
.sc-node:hover{background:var(--surface-2)}
.sc-twist{display:grid;place-items:center;width:24px;height:24px;border:0;background:none;color:var(--ink-2);cursor:pointer;font-size:1.05rem;padding:0;line-height:1;border-radius:6px}
.sc-twist:hover{background:var(--surface-2);color:var(--ink)}
.sc-twist:focus-visible{outline:2px solid var(--brand-hi);outline-offset:-2px}
.sc-twist.none{visibility:hidden;cursor:default}
.sc-pick{display:flex;gap:8px;align-items:center;min-width:0;cursor:pointer}
.sc-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.sc-locale{font-weight:700}
/* a half-ticked branch: some of it is in, so it is neither on nor off */
.sc-pick input[data-some]{accent-color:var(--ink-3);opacity:.75}
.sc-n{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--ink-3)}
.sc-more{color:var(--ink-3);font-size:.82rem;grid-template-columns:1fr}
.sc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.sc-count{font-size:.9rem}
.scopedone{margin:0 0 4px}
.rwarn{padding:8px 12px;border-radius:9px;background:var(--amber-soft);color:var(--ink);font-size:.86rem}
/* ---- handoffs: who an open step is waiting on ---- */
.handoff{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.handoff .spacer{flex:1}
.handoff.mine{border-color:var(--accent);background:var(--accent-soft)}
.ho-text{display:grid;gap:4px;min-width:0}
.ho-note{font-size:.86rem;color:var(--ink-2);white-space:pre-wrap}
#confirm-dlg textarea{width:100%}
/* a step someone holds carries a dot beside its name: filled for you, hollow for others */
.rs-item.held::before,.rs-item.mine::before{content:'';position:absolute;top:2px;right:-5px;width:6px;height:6px;border-radius:50%;pointer-events:none}
.rs-item.mine::before{background:var(--accent)}
.rs-item.held::before{border:1.5px solid var(--ink-3);box-sizing:border-box}
/* A locked step shows its number, its name and what it is for, and nothing else you
   could act on. The sections below are blurred rather than hidden: the shape of the
   step stays visible, so you can see it has inputs and checks waiting, but none of it
   can be read, selected or tabbed into until the step that feeds it is finished. The
   marker sits on the heading because that is already the first child, and the padding
   rules below depend on these sections being direct children. */
.rs-top.locked ~ .rsec,.rs-top.locked ~ .rs-body .rsec{filter:blur(4px);opacity:.7;user-select:none;pointer-events:none}
@media (prefers-reduced-transparency:reduce){.rs-top.locked ~ .rsec,.rs-top.locked ~ .rs-body .rsec{filter:blur(6px)}}
.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}
/* the one button that finishes the step sits alone at the far right, so it is never
   mistaken for one of the secondary links beside it */
.rs-actions .btn.primary,.sc-actions .btn.primary,.cr-actions .btn.primary,
.fx-actions .btn.primary,.pl-actions .btn.primary{order:99;margin-left:auto}
/* and the rows themselves have to be able to push it there */
.cr-actions,.pl-actions{justify-content:flex-end}
/* with no way to close a step early, what is still outstanding has to be visible
   right next to the button that stays disabled because of it */
.rs-left{flex-basis:100%;order:-1;line-height:1.45}
.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){.runprog{grid-template-columns:minmax(0,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-hi)}
.gdot svg,.gicon svg{width:16px;height:16px}
.node.sel .gdot{color:var(--on-brand-hi)}
.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-hi);flex:none}
dialog.modal.wide{width:min(760px,calc(100% - 32px))}
/* a confirmation asks one question, so it is sized to the question */
dialog.modal.confirm{width:min(420px,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(var(--chrome) + 16px);max-height:calc(100dvh - var(--chrome) - 36px);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;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}
/* One playbook page. Everything sits on the page background: no cards, no
   nested boxes. A rule and space separate one step from the next. */
.guidepage{gap:22px}
.guidepage .ghero h1{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.guidepage .ghero{gap:6px}
.guidepage .hero-actions{margin-top:10px}
.glayout{gap:16px 40px;grid-template-columns:minmax(190px,220px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.glayout > .gtoolbar{grid-column:2;grid-row:1;max-width:72ch}
.glayout > .gdoc-side{grid-column:1;grid-row:1/3}
.glayout > .gsteps{grid-column:2;grid-row:2}
.glayout .gdoc-side{position:sticky;top:calc(var(--chrome) + 16px);display:grid;gap:12px;max-height:calc(100dvh - var(--chrome) - 36px);overflow:auto;align-content:start}
/* the two sidebar panels sit on a soft grey so they read as chrome, not content */
.glayout .gtoc,.glayout .gdoc-notes{position:static;max-height:none;overflow:visible;padding:14px 14px 16px;border:0;border-radius:12px;background:var(--surface-2);gap:0}
.gtoc .gcov{font-family:var(--mono);color:var(--ink-3);margin-left:4px}
.gtoc li a{padding:4px 0;padding-left:calc(var(--depth,0) * 10px);border-radius:0;font-size:.84rem}
.gtoc li a:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.glayout .sidenotes li a{padding:6px 0 6px 10px;border-radius:0;border-left:2px solid var(--ink-3)}
.glayout .sidenotes li a:hover{background:none}
.glayout .sidenotes li a:hover .snbody{text-decoration:underline;text-underline-offset:3px}
.glayout .snall{border-top:0;padding-top:0;margin-top:10px}
.glayout .gtoc li a:hover,.glayout .sidenotes li a:hover{background:none}
.glayout .gdoc-notes .eyebrow,.glayout .gtoc .eyebrow{margin-bottom:.5em}

.gsteps{gap:0}
.gstep{background:none;border:0;border-radius:0;box-shadow:none;max-width:72ch;padding:30px 0 34px;gap:12px;border-top:1px solid var(--line);scroll-margin-top:calc(var(--chrome) + 12px)}
.gstep.gabout{border-top:0;padding-top:0}
.gimport + .gstep{border-top:0;padding-top:14px}
.gstep header{gap:10px;align-items:baseline}
.gstep .nnum{background:none;color:var(--ink-3);font-family:var(--mono);font-size:.8rem;width:auto;height:auto;min-width:16px;padding:0;border-radius:0}
.gstep-title{font-size:1.15rem}
.gstep .gseclink,.gsecro{margin-left:auto;font-size:.75rem;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.gstep .gseclink:hover{color:var(--ink);text-decoration:underline}
.gsecro{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase}
.gstep.locked{opacity:.6}
.gpurpose{margin:-4px 0 0;color:var(--ink-2)}
.gimport{padding:26px 0 0;border-top:1px solid var(--line);display:block;max-width:72ch}
.gimport .gsecro{display:inline;margin:0 8px 0 0}
.gimport b{font-size:.95rem;margin-right:10px}
.gimport .small{color:var(--ink-3);text-decoration:none}
.gimport .small:hover{color:var(--ink);text-decoration:underline}

/* the editable area is marked by a rule, not a box */
.gstep .gdoc.editing{min-height:0;border:0;border-radius:6px;background:none;box-shadow:none;outline:none}
.gstep .gdoc.editing:focus{background:var(--surface);box-shadow:0 0 0 12px var(--surface)}
.gsecres{border-top:0;padding:0;margin:-4px 0 0;display:grid;gap:3px;justify-items:stretch}
.gsecres .gres-h{margin:1.4em 0 .2em!important;font-size:.8rem}
.gsecres .gresrow{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;gap:6px;margin:0;padding:0;border:0;border-radius:0;align-items:center}
.gsecres .gresrow input{padding:1px 7px;font-size:.9rem;line-height:1.5;border:1px solid var(--line);border-radius:6px;background:var(--bg);width:100%}
.gsecres .gresrow input:focus{background:var(--surface)}
.gsecres .gresrow .xbtn{position:static}
.gsecres .gres-rows:empty{display:none}
.gsecres:empty{display:none;margin:0}
/* editing: title on the left, save state and Save on the right, one row */
.gtoolbar-read{gap:8px}
.tbnote{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.gtoolbar .savestate{margin:0;font-size:.76rem;white-space:nowrap}
.glayout > .gtoolbar{flex-wrap:nowrap;overflow:visible}
.glayout > .gtoolbar .tbsep{margin:0 1px}

/* notes, flattened: they are part of the page, not a widget on it */
.gsecqa .qa{margin-top:18px;gap:10px}
.qah{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.gsecqa .qahead{display:flex;align-items:center;gap:12px}
.gsecqa .qahead .qacounts{margin-left:0;color:var(--ink-3)}
.gsecqa .qahead .qacompose{margin-left:auto}
.gsecqa .qahead{border-top:0;padding-top:0;justify-content:flex-start;flex-wrap:nowrap}
.gsecqa .qathread{background:none;border:0;border-left:2px solid var(--line);border-radius:0;padding:2px 0 2px 14px}
.gsecqa .qathread.waiting{border-left-color:var(--accent)}
.gsecqa .qalist{gap:16px}
.qacompose{margin:0}
.qacompose > summary{display:inline-flex;width:auto;cursor:pointer;list-style:none}
.qacompose > summary::-webkit-details-marker{display:none}
.qacompose[open] > summary{margin-bottom:8px}
.gsecqa .qaask.card{box-shadow:none}
@media (max-width:900px){.glayout{grid-template-columns:1fr;grid-template-rows:none;gap:18px}.glayout > .gtoolbar,.glayout > .gdoc-side,.glayout > .gsteps{grid-column:1;grid-row:auto;max-width:none}.gtoc{position:static;max-height:none}.glayout .gdoc-side{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 .imptag{margin:0}
/* 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 - var(--crumb-h))}
  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-hi) 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-hi);color:var(--on-brand-hi)}
.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-hi)}
.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-hi)}.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(var(--chrome) + 16px);display:grid;gap:12px;max-height:calc(100dvh - var(--chrome) - 36px);overflow:auto}
.gdoc-toc,.gdoc-res,.gdoc-notes{padding:12px 14px}
.gdoc-toc .eyebrow,.gdoc-res .eyebrow,.gdoc-notes .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)}
/* the notes panel: same card, same eyebrow, same hover as the contents above it */
.sidenotes{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.snwhere{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.sidenotes li a{display:grid;gap:3px;padding:6px 8px;border-radius:7px;text-decoration:none;border-left:2px solid transparent}
.sidenotes li a:hover{background:var(--surface-2)}
.sidenotes li.waiting a{border-left-color:var(--accent)}
.snbody{font-size:.84rem;line-height:1.35;color:var(--ink-2)}
.sidenotes li a:hover .snbody{color:var(--ink)}
/* one line, and the author is the part that gives way when it is long */
.snmeta{display:flex;align-items:baseline;gap:4px;min-width:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.03em;color:var(--ink-3)}
.snwho{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sndot,.snwhen{flex:0 0 auto}
.snflag{flex:0 0 auto;margin-left:auto;color:var(--accent);font-weight:700}
.snall{display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:.78rem;color:var(--ink-3);text-decoration:none}
.snall:hover{color:var(--ink)}
.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}
/* while editing, the state and Save sit together at the right, immediately above
   the toolbar, so the thing you look at and the thing you click are in one place */
.gdoc-actions.editing{justify-content:flex-end;gap:12px;margin-bottom:10px}
.gdoc.reading,.gstep .gdoc.editing{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(var(--chrome) + 4px);z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow)}
/* One button shape everywhere: a 30px square holding a 16px icon, so a toolbar
   reads as an even row rather than a ragged line of text labels. */
.tb{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:8px;
  background:none;color:var(--ink-2);cursor:pointer;line-height:0;list-style:none;
  transition:background .12s ease,color .12s ease}
.tb .tbi{width:16px;height:16px;display:block}
.tb:hover{background:var(--surface-2);color:var(--ink)}
.tb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tb.on{background:var(--accent-soft);color:var(--accent)}
.tb[aria-expanded="true"]{background:var(--surface-2);color:var(--ink)}
/* the two that keep a word, because an icon alone would not say what they insert */
.tb.tbwide{width:auto;gap:6px;padding:0 10px;grid-auto-flow:column;font:inherit;font-size:.82rem;color:var(--ink-2)}
.tbgroup{display:inline-flex;align-items:center;gap:2px}
.tbspacer{flex:1 1 auto;min-width:0}
.tbblock{width:auto;min-width:104px;padding:5px 7px;font:inherit;font-size:.82rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink)}
.tbmenu>summary.tb::after{display:none}
.tbmenu .menu{min-width:230px}
.seclib{min-width:212px;max-height:none}
.seclib button{padding:6px 10px;font-size:.88rem;line-height:1.35}
.tbsep{flex:none;width:1px;height:18px;background:var(--line);margin:0 3px}
.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}
.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-hi)}
@media (max-width:900px){.gdoc-layout{grid-template-columns:1fr}.gdoc-side{position:static;max-height:none}.gdoc.editing{padding:16px}.gtoolbar{top:calc(var(--chrome) + 2px)}.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 */
/* a playbook card: name, how much is written, and what is written so far */
.gidxgrid{align-items:start}
.gidx{position:relative;display:grid;gap:6px;align-content:start;padding:16px 18px}
.gidx:hover{border-color:var(--ink-3)}
.gidx h3{margin:0;font-size:1.02rem;line-height:1.3;text-wrap:balance}
.gidx-link{text-decoration:none;color:inherit}
.gidx-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.gidx:hover .gidx-link{text-decoration:underline;text-underline-offset:3px}
.gidx-meta{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.gidx-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0}
.gidx-list li{display:flex;align-items:baseline;gap:10px;min-width:0;padding:5px 0;border-top:1px solid var(--line)}
.gidx-list a{position:relative;z-index:1;flex:1 1 auto;min-width:0;font-size:.9rem;color:var(--ink-2);text-decoration:none;overflow-wrap:anywhere}
.gidx-list a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.gidx-list small{flex:none;font-family:var(--mono);font-size:.68rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.gidx-more{font-family:var(--mono);font-size:.68rem;color:var(--ink-3)}

/* ---------- 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}
/* if/then stacks on two rows: four columns squeezed both inputs in the narrow panel */
.rulerow{display:grid;grid-template-columns:auto 1fr auto;gap:5px 6px;align-items:center;margin-top:8px}
.rulerow .rk{grid-column:1;text-align:right;font-size:.78rem;font-weight:700;color:var(--st-decide)}
.rulerow input{grid-column:2;min-width:0}
.rulerow .xbtn{grid-column:3;grid-row:1 / span 2}
.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-hi)}
.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}
/* A data source reads as a card of facts. The fields are only visibly fields
   when you hover or focus one, so the section is a reference list rather than a
   wall of form controls. */
.srcgrid{align-items:stretch}
.srccard{display:flex;flex-direction:column;gap:2px;padding:14px 14px 12px}
.srccard.focus{outline:2px solid var(--brand-hi);outline-offset:2px}
.srchead{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.srchead h3{margin:0;font-size:1.05rem;flex:1;min-width:0}

/* a long source name wraps rather than truncating, so it is still a heading */
.srcname{flex:1;min-width:0;font-family:var(--display);font-size:1.05rem;font-weight:700;line-height:1.25;
  padding:4px 6px;margin:-4px -6px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--ink);resize:none;overflow:hidden}

.sfrow{display:block;margin-bottom:8px}
.sfrow .flabel{display:block;margin:0 0 1px 6px}
.sfield{display:block;width:100%;font:inherit;font-size:.88rem;line-height:1.45;color:var(--ink);
  padding:4px 6px;border:1px solid transparent;border-radius:7px;background:transparent;resize:none;overflow:hidden}
.sfield.mono{font-family:var(--mono);font-size:.8rem}
.srcname::placeholder,.sfield::placeholder{color:var(--ink-3);opacity:1}
.srcname:hover:not(:disabled),.sfield:hover:not(:disabled){background:var(--surface-2)}
.srcname:focus,.sfield:focus{outline:none;background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.srcname:disabled,.sfield:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}
/* an empty link is a row nobody needs to look at until they want it */
.srccard .sflink:not(:focus-within):has(.sfield:placeholder-shown){margin-bottom:0;opacity:.55}
.srccard .sflink:not(:focus-within):has(.sfield:placeholder-shown) .flabel{display:none}
.srccard .sflink:not(:focus-within) .sfield:placeholder-shown{font-size:.8rem}

.srcfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:auto 0 0;padding-top:10px;
  border-top:1px solid var(--line);font-size:.76rem;color:var(--ink-3)}
.srcwarn{font-weight:700;color:var(--amber);background:var(--amber-soft);padding:1px 8px;border-radius:999px}
.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}
.startpick .cb-item{grid-template-columns:auto 1fr;align-items:start;gap:10px}
.startpick .cb-item input{margin-top:3px}
.startpick .cb-name{font-weight:600;line-height:1.35}
.startpick .cb-item .cb-name small{white-space:normal;overflow:visible;text-overflow:clip;margin-top:2px;line-height:1.4}
.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-hi)}
.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:#F3F5F7}
.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-hi);color:var(--on-brand-hi);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{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{min-width:0}
.actorchk span,.actorchk .alab{white-space:nowrap}
.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;width:auto;flex:0 0 auto}
.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}
/* three chips across a phone split into a ragged two rows, so stack them */
@media (max-width:640px){.actorpick{display:grid;grid-template-columns:1fr;gap:6px}.actorchk{justify-content:flex-start}
  .pactors .dline{flex-wrap:wrap}.pactors .dline select{flex:1 1 100%;width:100%}}
.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}
.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 blue glow with faint drifting sparkles ---------- */
:root{--glow:color-mix(in srgb,var(--brand-hi) 14%,transparent);--glow-2:color-mix(in srgb,var(--brand-hi) 9%,transparent);--spark:color-mix(in srgb,var(--brand-hi) 55%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:color-mix(in srgb,var(--brand-hi) 20%,transparent);--glow-2:color-mix(in srgb,var(--brand-hi) 13%,transparent);--spark:color-mix(in srgb,var(--brand-hi) 70%,transparent)}}
:root[data-theme="dark"]{--glow:color-mix(in srgb,var(--brand-hi) 20%,transparent);--glow-2:color-mix(in srgb,var(--brand-hi) 13%,transparent);--spark:color-mix(in srgb,var(--brand-hi) 70%,transparent)}
.atmos-glow,.atmos-spark{position:absolute;inset:-12%;pointer-events:none}
/* The blur sits on the child, never on the element that moves. A filter on a moving
   element is recomputed every frame, because the browser cannot reuse a texture it is
   still filtering; on a child it is baked into the parent's raster once and the
   compositor only slides the result. Measured: 50ms a frame becomes 16.7ms. */
.atmos-glow{will-change:transform;animation:atmos-drift 54s ease-in-out infinite alternate}
.atmos-glow>i{position:absolute;inset:0;
  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);
}
.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;will-change:transform;
  animation:atmos-float 120s ease-in-out infinite alternate,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{transform:translate3d(-60px,48px,0)}to{transform:translate3d(60px,-48px,0)}}
@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}}

/* the top bar keeps the page width, so the nav lines up with the breadcrumb */
/* 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-hi);border-color:var(--brand-hi);color:var(--on-brand-hi)}
.copybtn:focus-visible{outline:2px solid var(--brand-hi);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}

/* ---------- notes ---------- */
:root{--q-note:#1A5F80;--q-note-soft:#DCEBF3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--q-note:#7CC2E6;--q-note-soft:#13303D}}
:root[data-theme="dark"]{--q-note:#7CC2E6;--q-note-soft:#13303D}

.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}
.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 */
/* The composer is one field, not a widget: the toolbar sits inside the same
   border on the same surface, separated by a hairline rather than a grey strip. */
.richbox{border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden;
  transition:border-color .12s ease,box-shadow .12s ease}
.richbox:hover:not(:focus-within){border-color:color-mix(in srgb,var(--ink-3) 45%,var(--line))}
.richbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.richbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:5px 6px;border-bottom:1px solid var(--line)}
.richbar .tb{width:28px;height:28px}
.richbar .tb .tbi{width:15px;height:15px}
.richin{min-height:84px;max-height:340px;overflow:auto;padding:11px 13px;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:11px;left:13px;right:13px;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;scroll-margin-top:calc(var(--chrome) + 12px)}
.qathread.waiting{border-left:3px solid var(--q-note)}
.qameta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-3)}
.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}

.pqa .hint{margin-top:6px}

/* counts */
.qatag{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:.7rem;font-weight:700;padding:2px 7px;border:0;border-radius:999px;color:var(--ink-3);background:var(--surface-2);white-space:nowrap;cursor:pointer}
.qatag:hover{filter:brightness(.96)}
.qatag:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.qatag svg{width:12px;height:12px}
.qatag.open{color:var(--q-note);background:var(--q-note-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-note-soft);color:var(--q-note)}
.navdot{display:inline-block;min-width:16px;padding:0 4px;border-radius:999px;background:var(--q-note);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%}}

/* ===== clients, brand, people and the deliverable workspace ===== */
.sechead{font-family:var(--display);font-size:1.15rem;margin:32px 0 12px}
/* the team's systems page: one horizontally scrolling row per category */
.catrow{--catgap:16px;margin:34px 0 0;scroll-margin-top:calc(var(--chrome) + 18px)}
.catrow-head{display:flex;align-items:baseline;gap:12px;margin:0 0 12px}
.catrow-head h2{font-family:var(--display);font-size:1.75rem;line-height:1.1;margin:0;letter-spacing:-.01em}
.catscroll{display:flex;gap:var(--catgap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 14px;margin:0 -2px;scrollbar-width:thin}
/* three cards sit fully in view, with the next showing a third of itself */
.catscroll > .catcard{flex:0 0 calc((100% - 3 * var(--catgap)) / 3.34);scroll-snap-align:start}
.catcard{display:flex;flex-direction:column;gap:10px;padding:18px}
.catcard h3{margin:0;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em}
.catcard p{margin:0}
.catdesc{font-size:.9rem;line-height:1.45;color:var(--ink-2)}
.catchips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.catjump{cursor:pointer;border:1px solid var(--line);background:var(--surface);font:inherit;font-size:.84rem;padding:6px 12px}
.catjump:hover{background:var(--surface-2);border-color:var(--ink-3)}
.catjump small{color:var(--ink-3);font-size:.76rem}
.cardviz{margin-top:auto;padding-top:16px}
.cardviz svg{display:block;width:100%;height:auto;color:var(--ink-3);font-family:var(--body)}
.catin{width:auto;min-width:130px;font-size:.82rem;padding:4px 8px}
.catchip{background:var(--surface-2)}
@media (max-width:900px){.catscroll > .catcard{flex-basis:calc((100% - 2 * var(--catgap)) / 2.3)}}
@media (max-width:620px){.catscroll > .catcard{flex-basis:80vw}.catrow-head h2{font-size:1.4rem}}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rowhead .sechead{margin-bottom:12px}
.rowacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.rowacts.addpart{margin-top:24px}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.ghost.danger{color:var(--bad);border-color:var(--bad-soft)}
.iconbtn{background:none;border:0;color:var(--ink-3);cursor:pointer;font-size:1rem;line-height:1;padding:4px 6px;border-radius:6px}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.crumb{font-size:.85rem;color:var(--ink-3);margin:18px 0 6px}
.crumb a{color:var(--ink-2)}
.dim{opacity:.62}
.mt{margin-top:22px}
.warn{color:var(--amber);display:block}

.cmark{width:44px;height:44px;border-radius:9px;object-fit:contain;background:var(--surface-2);display:block;margin-bottom:12px}
.cmark.mono{display:grid;place-items:center;font-family:var(--mono);font-size:.95rem;font-weight:500;color:#fff;background:var(--client-primary,var(--brand))}
.cmark.big{width:56px;height:56px;margin-bottom:16px}
.ccard h3{margin:0 0 8px}
.clienthero,.delhero{border-left:4px solid var(--client-primary,var(--accent));padding-left:20px}


.drows{display:grid;gap:0}
.drows .drow{display:flex;align-items:center;gap:12px;padding:11px 2px;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;background:none;text-decoration:none;color:var(--ink)}
.drows .drow:first-child{border-top:0}
.drows .drow:hover .dname{text-decoration:underline;text-underline-offset:3px}
.drow .dname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.st-draft{background:var(--surface-2)}
.chip.st-review{background:var(--amber-soft);color:var(--amber)}
.chip.st-final,.chip.st-delivered{background:var(--good-soft);color:var(--good)}

.colorrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.colorrow:last-of-type{border-bottom:0}
.colorrow input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line);border-radius:8px;background:none;cursor:pointer;flex:0 0 auto}
.colorrow>div{flex:1 1 auto;min-width:0}
.colorrow small{display:block;color:var(--ink-3)}
.logobox{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.logoprev{display:grid;place-items:center;min-height:82px;border:1px solid var(--line);border-radius:10px;padding:10px}
.logoprev.light{background:#fff}
.logoprev.dark{background:#161616}
.logoprev img{max-width:100%;max-height:60px;width:auto}
.logoacts{display:flex;gap:8px;flex-wrap:wrap}

.delbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.delbar .rbar{flex:1 1 140px;min-width:120px}
.titlein.titlein{font-family:var(--display);font-size:inherit;font-weight:inherit;border:0;background:none;padding:0;width:100%}
.titlein:focus{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}

.asset{margin-bottom:14px;border-left:3px solid var(--line)}
.asset.st-draft{border-left-color:var(--amber)}
.asset.st-done{border-left-color:var(--good)}
.assethead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.assettoggle{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.assettoggle .caret{color:var(--ink-3);flex:0 0 auto}
.assettitle{font-family:var(--display);font-size:1.02rem;border:0;background:none;padding:2px 0;width:100%;color:var(--ink);cursor:text}
.assettitle:focus{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.assetmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.assetmeta select{padding:4px 8px;font-size:.82rem}
.kindchip{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}
.assetbody{margin-top:14px}
.assetby{margin:10px 0 0}

.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tbl-edit{border-collapse:collapse;width:100%;font-size:.88rem}
.tbl-edit th,.tbl-edit td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0}
.tbl-edit th:last-child,.tbl-edit td:last-child{border-right:0}
.tbl-edit tr:last-child td{border-bottom:0}
.tbl-edit input{border:0;background:none;width:100%;min-width:120px;padding:8px 10px;font:inherit;color:inherit}
.tbl-edit th input{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tbl-edit input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.tbl-edit .tbl-x{width:34px;text-align:center;background:var(--surface-2)}

.findlist{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px;counter-reset:fx}
.finding{border:1px solid var(--line);border-left:4px solid var(--ink-3);border-radius:10px;padding:12px 14px;display:grid;gap:8px}
.finding.sev-critical{border-left-color:var(--bad)}
.finding.sev-high{border-left-color:var(--amber)}
.finding.sev-medium{border-left-color:var(--accent)}
.findtop{display:flex;gap:8px;align-items:center}
.findtitle{flex:1 1 auto;min-width:0;font-weight:500}
.finding input,.finding textarea,.finding select{width:100%;font:inherit}
.finding select{flex:0 0 auto;width:auto;padding:6px 8px;font-size:.82rem}

.assetimg img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:10px;display:block}
.assetimg figcaption{font-size:.84rem;color:var(--ink-3);margin-top:6px}
.filechip a{font-family:var(--mono);font-size:.88rem}

@media (max-width:640px){
  .logobox{grid-template-columns:1fr}
  .assetmeta{width:100%}
  .delbar .rbar{flex-basis:100%}
}
@media print{.assethead .assetmeta,.rowacts,.itemacts,.crumb{display:none}}
/* selects inside these rows size to their content, not the row */
.delbar select,.assetmeta select,.rowacts select{width:auto;min-width:118px;flex:0 0 auto}
.delbar>select{max-width:180px}
.rowacts.addpart select{max-width:220px}
.assethead{justify-content:space-between}
.assetmeta{flex-wrap:nowrap}
@media (max-width:760px){.assetmeta{flex-wrap:wrap}}

/* ===== the definition library ===== */
.searchin{width:100%;max-width:420px;margin:0 0 6px}
.idchip{font-family:var(--mono);font-size:.72rem;background:var(--surface-2);padding:3px 8px;border-radius:6px;color:var(--ink-3)}
.chip.good{background:var(--good-soft);color:var(--good)}
.tabn{font-family:var(--mono);font-size:.7rem;color:var(--ink-3)}
.lfield{margin-bottom:14px}
.lfield textarea{min-height:44px}
.reps{display:grid;gap:10px}
.reprow{display:grid;grid-template-columns:1fr 1.4fr auto;gap:8px;align-items:start}
.reprow input,.reprow textarea{width:100%;font:inherit}
.osecedit{margin-bottom:12px}
.osecedit .secname{flex:1 1 200px;min-width:0;font-family:var(--display);font-size:1.02rem;border:0;background:none;padding:2px 0;color:var(--ink)}
.osecedit .secname:focus{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.arow{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;flex-wrap:wrap}
.arow:hover{background:var(--surface-2)}
.arow .dname{flex:1 1 180px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.reqlab{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--ink-2);white-space:nowrap}
.fmtpick,.audpick{display:flex;flex-wrap:wrap;gap:8px}
.fmtpick .cb-item,.audpick .cb-item{flex:0 0 auto}
.wfmakes{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px}
.wfmakes select{max-width:280px}
.dlchip{text-decoration:none;background:var(--accent-soft);color:var(--accent)}
.pcompletes .cb-list{display:grid;gap:6px;margin-top:6px}
.nchip.done{background:var(--good-soft);color:var(--good)}
@media (max-width:640px){.reprow{grid-template-columns:1fr}.reprow .iconbtn{justify-self:end}}
.clientchip{text-decoration:none;background:var(--surface-2);color:var(--ink)}

/* ===== form fields on the wide pages (library, clients, workspace) ===== */
/* .flabel is inline by default for the canvas panel; on a page it needs its own line */
.lfield>.flabel,.ltab .card>.flabel,.osecedit .flabel,#ctab-brand .flabel,.asset .flabel{display:block;margin:0 0 6px}
.ltab .card>.flabel:not(:first-child),#ctab-brand .flabel:not(:first-child){margin-top:14px}
.lfield input,.lfield textarea,.lfield select,
.ltab .card>input,.ltab .card>textarea,.ltab .card>select,
.osecedit textarea,
.reprow input,.reprow textarea,
#ctab-brand .card>input,#ctab-brand .card>textarea,
.asset>.assetbody>input,.asset>.assetbody>textarea{
  width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--ink);font:inherit
}
.lfield textarea,.ltab .card>textarea,.osecedit textarea,.reprow textarea{min-height:62px;resize:vertical;line-height:1.5}
.lfield input:focus,.lfield textarea:focus,.ltab .card>input:focus,.ltab .card>textarea:focus,
.osecedit textarea:focus,.reprow input:focus,.reprow textarea:focus,
#ctab-brand .card>input:focus,#ctab-brand .card>textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.lfield select,.ltab .card>select{max-width:420px}
.hero .chips select{width:auto;max-width:280px}
.ltab .card h3{margin:0 0 14px}
.ltab .card h3.mt{margin-top:22px}

/* a pick list that reads as a row of choices, not a modal scroller */
.picklist{display:flex;flex-wrap:wrap;gap:8px;border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:6px}
.picklist.col{flex-direction:column;flex-wrap:nowrap;gap:2px}
.pickitem{display:inline-flex;align-items:flex-start;gap:9px;padding:7px 11px;border-radius:8px;cursor:pointer;background:var(--surface-2);font-size:.92rem;line-height:1.35}
.picklist.col .pickitem,.pickitem.block{display:flex;width:100%;background:none}
.picklist.col .pickitem:hover,.pickitem.block:hover{background:var(--surface-2)}
.pickitem input{margin:2px 0 0;accent-color:var(--brand-ink);flex:0 0 auto}
.pickitem.on{background:var(--accent-soft);color:var(--accent)}
.picklist.col .pickitem.on{background:var(--accent-soft)}
.pickitem small{display:block;font-size:.76rem;color:var(--ink-3);font-weight:400}
.pickitem.on small{color:var(--accent)}
/* two cards should fill the row, not sit in a three-column track */
.ltab .grid.g2,#ctab-brand .grid.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* the hint inside a field label is prose, not a mono label */
.flabel small{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.78rem}
/* the panel gives every input width:100%, which would swallow a checkbox row */
.pickitem input[type=checkbox]{width:16px;height:16px;flex:0 0 auto;padding:0}
.pickitem>span{flex:1 1 auto;min-width:0}
.picklist.col{max-height:none;padding:4px}
.ltab .grid.g2{align-items:start}
.itemacts{display:flex;gap:6px;flex-wrap:wrap}
.osecedit .itemacts{align-items:center;flex-wrap:nowrap}
.osecedit .itemacts select{max-width:130px}
.ffield{display:grid;gap:4px}
.ffield>.flabel{display:block}

/* ===== breadcrumb bar: a second tier stuck under the nav ===== */
:root{--crumb-h:48px}
/* Everything sticky sits under the header and the breadcrumb bar. One token so
   a change to either does not leave half the app hidden behind the other. */
:root{--nav-h:60px}
/* Declared on body as well: a custom property resolves where it is declared, so on
   :root alone it would never see body.nocrumbs or the run page's --nav-h change the parts. */
:root,body{--chrome:calc(env(safe-area-inset-top,0px) + var(--nav-h) + var(--crumb-h))}
body.nocrumbs{--crumb-h:0px}
/* Inside a run the nav is pushed up by the step strip; runNavSync sets --nav-h and the
   nav's transform as the page scrolls, so the crumbs and strip follow it smoothly. */
.crumbbar{position:sticky;top:var(--nav-h);z-index:19;background:var(--surface);border-bottom:1px solid var(--line)}
.crumbrow{display:flex;align-items:center;gap:10px;height:var(--crumb-h);font-size:.98rem;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.crumbrow::-webkit-scrollbar{display:none}
.crumbrow a{color:var(--ink-3);text-decoration:none;padding:3px 6px;margin:0 -6px;border-radius:6px}
.crumbrow a:hover{color:var(--ink);background:var(--surface-2)}
.crumbrow [aria-current="page"]{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.csep{color:var(--ink-3);opacity:.55}
body.nocrumbs .crumbbar{display:none}
/* the canvas sizes itself to what is left under both bars */
body.canvas-mode main.wrap{height:calc(100dvh - 61px - var(--crumb-h))}

@media print{.crumbbar{display:none}}

/* the nav badge only takes room when something is waiting */
.navdot{margin-left:6px}

/* workflow and engine read differently at a glance */
.kindtag{gap:5px}
.kindtag svg{width:13px;height:13px;flex:0 0 auto}
.kindtag.k-workflow{background:var(--a-person-soft);color:var(--a-person)}
.kindtag.k-engine{background:var(--a-auto-soft);color:var(--a-auto)}

/* a card's footer: what it is on the left, when it changed on the right */
.cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:12px}
.linkcard{display:flex;flex-direction:column}
.cardfoot .edited{color:var(--ink-3);font-size:.78rem;text-align:right}
.assetlist{list-style:none;padding:0}
/* assets are a set, not a sequence, so no numbers */
.assetlist li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-3);padding:0;align-self:center}
/* an itemised list, one row per entry, like a step's Tools */
.itemgrid{display:grid;gap:6px}
.itemrow{display:flex;align-items:center;gap:6px}
.itemrow input{flex:1 1 auto;min-width:0;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
.itemrow input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.lfield .rowhead{margin-bottom:6px}
.mcpwhat .ol{margin:8px 0 0;padding-left:18px}
.mcpwhat .ol li{margin:5px 0}
.section h3.sechead{margin:28px 0 12px}
.chainlist li b{display:block}

/* ===== MCP setup, canvas toolbar, breathing room under the crumb bar ===== */
/* the nav badge should take no room at all until something is waiting */
.navdot[hidden]{display:none}

/* a page's first heading needs air under the breadcrumb bar */
/* .wrap sets the padding shorthand, which outranks the element rule above and
   zeroes both ends. Say it again with the class so the page gets its margins. */
main.wrap{padding-top:44px;padding-bottom:72px}
body.canvas-mode main.wrap{padding-top:12px}

/* three numbered steps, each carrying everything you paste */
.setup{list-style:none;counter-reset:setup;margin:0;padding:0;display:grid;gap:22px}
.setup>li{counter-increment:setup;display:grid;grid-template-columns:38px 1fr;gap:6px 16px;align-items:start}
.setup>li::before{content:counter(setup);font-family:var(--mono);font-size:.95rem;font-weight:700;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.setup>li>*{grid-column:2}
.setup>li::before{grid-column:1;grid-row:1}
.setup h3{font-family:var(--display);font-size:1.05rem;margin:4px 0 6px}
.setup .ol{margin:0 0 10px;padding-left:18px}
.setup .ol li{margin:4px 0}
.setup .keyform{margin-top:4px}
@media (max-width:620px){.setup>li{grid-template-columns:28px 1fr;gap:10px}.setup>li::before{width:26px;height:26px;font-size:.8rem}}

.newkey .keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.newkey .klabel{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);flex:0 0 150px}
.newkey code{flex:1 1 240px;min-width:0;overflow-x:auto;white-space:nowrap;padding:7px 10px;background:var(--surface-2);border-radius:8px;font-size:.82rem}

/* endpoint groups collapse */
details.epgroup summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}
details.epgroup summary::-webkit-details-marker{display:none}
details.epgroup summary::after{content:"+";margin-left:auto;font-family:var(--mono);color:var(--ink-3)}
details.epgroup[open] summary::after{content:"\2212"}
details.epgroup summary h3{margin:0;font-size:1rem}
details.epgroup[open] summary{margin-bottom:10px}
.menuhead{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 2px;padding:0 4px}
.menuhead:first-child{margin-top:0}

/* Center canvas sits with the zoom controls */
.ovl-zoom #auto-layout{white-space:nowrap}
@media (max-width:640px){.ovl-zoom #auto-layout{display:none}}
.secnote{margin:-4px 0 14px}
/* the team view: a switch in the account menu, and a system as a brief */
.viewtoggle{display:flex;align-items:center;gap:10px;text-align:left;width:100%}
.vsw{flex:none;width:30px;height:17px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);position:relative;transition:background .12s}
.vsw::after{content:"";position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;background:var(--ink-3);transition:transform .12s,background .12s}
.viewtoggle.on .vsw{background:var(--accent-soft);border-color:var(--accent)}
.viewtoggle.on .vsw::after{transform:translateX(13px);background:var(--accent)}
.brief{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:0 0 18px}
.briefcard{padding:16px 18px;display:grid;gap:4px;align-content:start}
.briefcard .eyebrow{margin:0}
.bigline{margin:0;font-family:var(--display);font-size:1.15rem;line-height:1.25;text-wrap:balance}
.briefcard p.small{margin:0}
.brieftools{margin:-6px 0 20px}
.brieflist{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:78ch}
.briefstep{display:flex;align-items:baseline;gap:14px;padding:14px 2px;border-top:1px solid var(--line)}
.briefstep:first-child{border-top:0}
.bnum{flex:none;min-width:20px;font-family:var(--mono);font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bbody{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.bbody p{margin:0}
.bmeta{font-family:var(--mono);font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3)}
.bread{flex:none;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.bread:hover{color:var(--ink);text-decoration:underline}
.opcard .cardfoot{margin-top:auto}

/* ===== people and principles ===== */
.sechead .stageq{display:block;font-family:var(--body);font-size:.85rem;font-weight:400;color:var(--ink-3);margin-top:2px}
.person{margin-bottom:14px}
.person .secname{flex:1 1 200px;min-width:0;font-family:var(--display);font-size:1.02rem;border:0;background:none;padding:2px 0;color:var(--ink)}
.person .secname:focus{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.person .lfield{margin-bottom:10px}
.person input,.person textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink);font:inherit}
.person .secname{border:0;background:none;padding:2px 0;width:auto}
.person input:focus,.person textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.person .itemacts select{max-width:220px}
.audnote{border-top:1px solid var(--line);padding-top:10px;margin-top:4px;display:grid;gap:4px}
.audnote .chip{justify-self:start;text-decoration:none;background:var(--accent-soft);color:var(--accent)}
.audnote p{margin:0}
.princlist{list-style:none;counter-reset:pr;margin:0;padding:0;display:grid;gap:12px}
.princ{counter-increment:pr;display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start}
.princ::before{content:counter(pr);font-family:var(--mono);font-size:.85rem;font-weight:700;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3)}
.princ>*{grid-column:2}
.princ::before{grid-column:1;grid-row:1}
.princ h3{font-family:var(--display);font-size:1.05rem;margin:4px 0 6px}
.princ p{margin:0 0 8px;color:var(--ink-2)}
.princ .ptest{margin:0;font-size:.9rem;color:var(--ink-3)}
.princ .ptest b{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-right:6px}
@media (max-width:620px){.princ{grid-template-columns:28px 1fr;gap:10px}.princ::before{width:26px;height:26px;font-size:.75rem}}
.person .itemacts{flex-wrap:nowrap;align-items:center}

/* ===== reader traits: five needs, each with its own icon and colour ===== */
:root{
  --t-ask:#1E7F46;--t-ask-soft:#DDF3E5;
  --t-numbers:#9A6A00;--t-numbers-soft:#FBF1DC;
  --t-spec:#1A5F80;--t-spec-soft:#DCEBF3;
  --t-method:#6A3FB5;--t-method-soft:#ECE4F8;
  --t-picture:#A8306B;--t-picture-soft:#FADDEB;
}
:root[data-theme="dark"]{
  --t-ask:#4ADE80;--t-ask-soft:#12301F;
  --t-numbers:#E0A93E;--t-numbers-soft:#3A2E17;
  --t-spec:#7CC2E6;--t-spec-soft:#13303D;
  --t-method:#BFA2F2;--t-method-soft:#2A2140;
  --t-picture:#F09BC4;--t-picture-soft:#3B1B2C;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --t-ask:#4ADE80;--t-ask-soft:#12301F;
  --t-numbers:#E0A93E;--t-numbers-soft:#3A2E17;
  --t-spec:#7CC2E6;--t-spec-soft:#13303D;
  --t-method:#BFA2F2;--t-method-soft:#2A2140;
  --t-picture:#F09BC4;--t-picture-soft:#3B1B2C;
}}
.traittag{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink-2)}
.traittag svg{width:13px;height:13px;flex:0 0 auto}
.t-ask.traittag{background:var(--t-ask-soft);color:var(--t-ask)}
.t-numbers.traittag{background:var(--t-numbers-soft);color:var(--t-numbers)}
.t-spec.traittag{background:var(--t-spec-soft);color:var(--t-spec)}
.t-method.traittag{background:var(--t-method-soft);color:var(--t-method)}
.t-picture.traittag{background:var(--t-picture-soft);color:var(--t-picture)}

.traitpick{display:grid;gap:8px;margin:2px 0 14px}
@media (min-width:900px){.traitpick{grid-template-columns:1fr 1fr}}
.traitopt{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:11px 13px;border:1px solid var(--line);border-radius:10px;cursor:pointer;background:var(--bg)}
.traitopt:hover{border-color:var(--ink-3)}
.traitopt input{margin:3px 0 0;width:16px;height:16px;padding:0;flex:0 0 auto;accent-color:var(--brand-ink)}
.traitopt .tbody{min-width:0;display:grid;gap:2px}
.traitopt b{display:flex;align-items:center;gap:7px;font-size:.92rem}
.traitopt .ticon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--surface-2);color:var(--ink-3);flex:0 0 auto}
.traitopt .ticon svg{width:13px;height:13px}
.traitopt small{color:var(--ink-3);font-size:.8rem;line-height:1.45}
.traitopt.on{border-color:transparent;outline:2px solid currentColor}
.traitopt.on.t-ask{background:var(--t-ask-soft);color:var(--t-ask)}
.traitopt.on.t-numbers{background:var(--t-numbers-soft);color:var(--t-numbers)}
.traitopt.on.t-spec{background:var(--t-spec-soft);color:var(--t-spec)}
.traitopt.on.t-method{background:var(--t-method-soft);color:var(--t-method)}
.traitopt.on.t-picture{background:var(--t-picture-soft);color:var(--t-picture)}
.traitopt.on b,.traitopt.on small{color:inherit}
.traitopt.on .ticon{background:currentColor}
.traitopt.on .ticon svg{color:var(--surface)}

.personsave{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.savenote{font-size:.85rem;color:var(--amber)}
.savenote.ok{color:var(--good)}
.person .traitpick input{width:16px;height:16px}

/* ===== questions live under the guide ===== */
.gdoc-qa{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.gdoc-qa .qahead h2{font-size:1.25rem}
.qalede{margin:0 0 14px;max-width:62ch}
.qathread.folded{opacity:.82}
.qafolded{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--good);background:var(--good-soft);padding:2px 7px;border-radius:999px}
.qafold{color:var(--accent)}
.authbtn .navdot{margin-left:7px}

/* ---------- the system map on the home page ---------- */
/* The layout is fixed from the first layer. Unrevealed parts are hidden, never
   removed, so stepping through never moves anything that is already on screen. */
.sysmap{--sm-gut:46px;--sm-imp:116px;--sm-pad:14px;display:grid;gap:14px}
.sysmap [data-l]{opacity:0;visibility:hidden;transition:opacity .28s ease,box-shadow .2s ease}
.sysmap [data-l].on{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.sysmap [data-l]{transition:none}}

/* the reader: which layer you are on, and what it is */
.sm-bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.sm-read{flex:1 1 420px;min-width:0}
.sm-count{font-family:var(--mono);font-size:.76rem;color:var(--ink-3)}
.sm-count b{color:var(--ink-2)}
.sm-read h3{margin:2px 0 4px;font-size:1.15rem}
.sm-read p{margin:0;font-size:.92rem;color:var(--ink-2);max-width:74ch}
.sm-ctl{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sm-btn{min-width:42px;font-size:1rem;line-height:1}

.sm-dots{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0}
.sm-dot{width:100%;min-width:22px;height:5px;padding:0;border:0;border-radius:3px;background:var(--dot);cursor:pointer;display:block}
.sm-dots li{flex:1 1 22px;display:flex}
.sm-dot:hover{background:var(--wire)}
.sm-dot.on{background:var(--accent)}
.sm-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sm-stage{display:grid;grid-template-columns:var(--sm-imp) 1fr;column-gap:30px;padding:18px 16px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg)}
.sm-stage:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* the definition zone: a permanent left gutter for an imported system */
.sm-def{display:contents}
.sm-import{position:relative;grid-column:1;align-self:start;margin-top:44px;height:92px;display:grid;place-items:center;
  border:1px dashed var(--ink-3);border-radius:10px;background:var(--surface);font-size:.82rem;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.3}
.sm-import .sm-join{position:absolute;left:100%;top:50%;width:30px;border-top-color:var(--wire)}

.sm-panel{grid-column:2;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:12px var(--sm-pad)}
.sm-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:26px;margin-bottom:8px}
.sm-tags{display:flex;align-items:center;gap:8px}
.sm-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.sm-kind{font-size:.72rem;font-weight:700;padding:3px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}
.sm-or{font-size:.72rem;color:var(--ink-3)}

.sm-steps{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--sm-gut)}
.sm-step{position:relative;min-width:0;display:grid;gap:7px;align-content:start;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.sm-name{font-size:.94rem;color:var(--ink)}
.sm-chips{display:flex;gap:7px}
.sm-chip{flex:1 1 0;min-width:0;text-align:center;font-size:.7rem;padding:3px 6px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2)}
.sm-chip.sm-note{border-color:transparent;background:var(--st-find-soft);color:var(--st-find)}
.sm-actor{font-size:.7rem;font-weight:700;text-align:center;padding:3px 6px;border-radius:999px}
.sm-a-person{background:var(--st-find-soft);color:var(--st-find)}
.sm-a-ai{background:var(--st-forecast-soft);color:var(--st-forecast)}
.sm-a-automation{background:var(--st-decide-soft);color:var(--st-decide)}

/* the band between the two panels, on the same column rhythm as the steps */
.sm-band{grid-column:2;display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--sm-gut);height:42px;padding:0 var(--sm-pad)}
.sm-vcol{position:relative}
.sm-vcol em{position:absolute;top:50%;transform:translateY(-50%);font-style:normal;font-size:.7rem;color:var(--ink-3);white-space:nowrap}
.sm-vcol-a>.sm-join{left:0}
.sm-vcol-a em{left:12px}
.sm-vcol-b>.sm-join,.sm-vcol-c>.sm-join{left:50%}
.sm-vcol-b em{left:calc(50% + 12px)}

.sm-assets{display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--sm-gut)}
.sm-aside{min-width:0;margin:0;align-self:center;font-size:.8rem;color:var(--ink-3);line-height:1.45}
.sm-asset{min-width:0;display:grid;gap:4px;align-content:start;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.sm-sub{font-size:.76rem;color:var(--ink-3)}


/* the instance row */
.sm-inst{grid-column:2;display:grid;grid-template-columns:1fr 1fr 2fr;column-gap:var(--sm-gut);margin-top:20px}
.sm-box{min-width:0;display:grid;gap:3px;align-content:start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);position:relative}

.sm-main{font-size:.86rem;color:var(--ink-2)}
.sm-note-line{font-size:.74rem;font-style:italic;color:var(--ink-3)}
.sm-mini{position:absolute;right:12px;top:50%;transform:translateY(-40%);display:flex;gap:7px}
.sm-mini span{font-size:.7rem;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--ink-2)}

.sm-fmt{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:14px}
.sm-sent{font-size:.76rem;color:var(--ink-3);margin-right:2px}
.sm-pill{font-size:.74rem;font-weight:700;padding:5px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent)}

.sm-mcp{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:16px;padding:11px 14px;border-radius:10px;background:var(--head);color:var(--on-head)}
.sm-mcp b{color:var(--brand-hi);font-size:.86rem}
.sm-mcp span{font-size:.82rem;color:var(--ink-3)}

/* connectors: a rule with an arrowhead, solid or dashed */
.sm-join{display:block;position:relative;color:var(--ink-2)}
.sm-join.sm-h{position:absolute;left:100%;top:50%;width:var(--sm-gut);height:0;border-top:1.5px solid currentColor}
.sm-join.sm-h::after{content:"";position:absolute;right:-1px;top:50%;transform:translateY(-50%);border-left:7px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.sm-join.sm-h em{display:none}
.sm-join.sm-v{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid currentColor}
.sm-join.sm-v::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);border-top:7px solid currentColor;border-left:5px solid transparent;border-right:5px solid transparent}
.sm-join.sm-dash{color:var(--wire);border-style:dashed;border-width:0;border-top-width:0}
.sm-join.sm-h.sm-dash{border-top:1.5px dashed currentColor}
.sm-join.sm-v.sm-dash{border-left:1.5px dashed currentColor}

/* the layer being introduced */
.sysmap .hot{box-shadow:0 0 0 2px var(--accent)}
.sysmap .sm-join.hot,.sysmap .sm-vcol em.hot{color:var(--accent);box-shadow:none}
.sysmap .sm-aside.hot,.sysmap .sm-or.hot{box-shadow:none;color:var(--accent)}

/* on a phone the map reads as a stack; the connectors stop carrying meaning */
@media (max-width:820px){
  .sysmap{--sm-gut:0px}
  .sm-stage{padding:14px 12px 16px}
  .sm-stage{grid-template-columns:1fr;column-gap:0}
  .sm-import{grid-column:1;margin:0 0 12px;height:auto;padding:10px}
  .sm-import .sm-join{display:none}
  .sm-panel,.sm-band,.sm-inst,.sm-fmt,.sm-mcp{grid-column:1}
  .sm-steps,.sm-assets,.sm-inst{grid-template-columns:1fr;row-gap:8px}
  .sm-assets>*+*{margin-left:0}
  .sm-band{height:26px}
  .sm-band .sm-join,.sm-vcol-b em{display:none}
  .sm-vcol-a em{left:0}
  .sm-join.sm-h{display:none}
  .sm-mini{position:static;transform:none;margin-top:6px}
  .sm-fmt{justify-content:flex-start}
  .sm-bar{flex-direction:column}
  .sm-read{flex:1 1 auto}
  .sm-ctl{width:100%}
}

/* ---------- the timeline on the home page ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:tl}
.timeline li{position:relative;counter-increment:tl;display:grid;gap:3px;padding:0 0 22px 46px}
.timeline li::before{content:"";position:absolute;left:13px;top:8px;bottom:-8px;width:2px;background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.tl-dot{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;font-family:var(--mono);font-size:.76rem;font-weight:700;color:var(--ink-2)}
.tl-dot::before{content:counter(tl)}
.timeline li:first-child .tl-dot{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.timeline li>b{font-size:1rem;line-height:1.35;padding-top:3px}
.tl-body{font-size:.92rem;color:var(--ink-2);max-width:78ch}
@media (max-width:640px){.timeline li{padding-left:38px}.timeline li::before{left:11px}.tl-dot{width:24px;height:24px}}

@media (max-width:820px){.tb.tbwide span{display:none}.tb.tbwide{width:30px;padding:0}.tbblock{min-width:96px}}

/* ---------- connections: sources bound to a client, and the logins that reach them ---------- */
.conn-good{background:var(--good-soft);color:var(--good)}
.conn-warn{background:var(--amber-soft);color:var(--amber)}
.conn-bad{background:var(--bad-soft);color:var(--bad)}
.conns{display:grid;gap:12px}
.conncard{display:grid;gap:10px;border-left:3px solid var(--line)}
.conncard.s-live{border-left-color:var(--good)}
.conncard.s-setup_needed,.conncard.s-manual{border-left-color:var(--amber)}
.conncard.s-broken,.conncard.s-missing{border-left-color:var(--bad)}
.connhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.connname{display:grid;gap:2px;min-width:0}
.connname small{color:var(--ink-3);font-size:.8rem}
.connstatus{width:auto;font-size:.82rem;padding:4px 8px;flex:0 0 auto}
.conngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.connval{margin:0;padding:8px 0;font-weight:600;font-size:.9rem}
.connwho{margin:0;font-size:.82rem;color:var(--ink-3);overflow-wrap:anywhere}
.acccard{display:grid;gap:10px;align-content:start}
.memchips{gap:6px}
.memchips .chip{padding-right:4px}
.memchips .xbtn{width:16px;height:16px;line-height:1;font-size:.8rem}
.memadd{display:flex;gap:8px}
.memadd input{flex:1 1 auto;min-width:0}
.memadd .btn{flex:0 0 auto}
.srcshape{margin-top:4px;border-top:1px solid var(--line);padding-top:8px}
.srcshape summary{cursor:pointer;font-size:.8rem;color:var(--ink-3)}
.srcshape>*+*{margin-top:8px}
.srcfields{width:100%;border-collapse:collapse;font-size:.8rem}
.srcfields td{padding:3px 8px 3px 0;vertical-align:top;border-bottom:1px solid var(--line)}
.srcfields tr:last-child td{border-bottom:0}
.srcsample{overflow-x:auto}
.srcsample table{border-collapse:collapse;font-size:.76rem;font-family:var(--mono)}
.srcsample th,.srcsample td{padding:4px 10px 4px 0;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.srcsample th{color:var(--ink-3);font-weight:600}
/* No ground of its own: the cards carry the whole message, and a tinted panel behind
   them made a run with one thing to sort out look like a warning about everything. */
.runaccess{margin:12px 0 4px}
/* One card per source, a little taller than it is wide, laid out three across at the
   dialog's width and folding to two and one as it narrows. The card's ground carries
   the status, so the shape of the answer is readable before any of it is read. */
/* auto-fill, not auto-fit: a run that reads one source should get one card the size
   of every other card, not one card stretched the full width of the dialog */
.acclist{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.acc-card{display:flex;flex-direction:column;gap:6px;min-height:178px;padding:13px 14px;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);font-size:.84rem}
/* The label takes the ink colour and the dot takes the status colour. Tinting ten
   pixel uppercase text with the accent put it at 4.3:1 on its own tinted ground,
   which is under the floor for text that size; the card already carries the colour. */
.acc-state{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.acc-state i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.acc-name{font-weight:600;font-size:.95rem;line-height:1.25;color:var(--ink)}
/* the property is the answer to "reading what, exactly", so it sits at the foot of
   the card where the eye lands last and stays put whatever the name's length */
.acc-through{margin-top:auto;font-family:var(--mono);font-size:.72rem;color:var(--ink-2);overflow-wrap:break-word;min-width:0}
.acc-warn{font-size:.72rem;font-weight:600;color:var(--bad)}

.acc-card.acc-good{background:var(--accent-soft);border-color:var(--accent)}
.acc-card.acc-good .acc-state i{background:var(--accent)}
.acc-card.acc-bad{background:var(--bad-soft);border-color:var(--bad)}
.acc-card.acc-bad .acc-state i{background:var(--bad)}
/* reachable, but not by you: the source is fine and the problem is your login, so the
   card keeps its own colour and takes a dashed edge rather than turning red */
.acc-card.acc-noaccess{border-style:dashed;border-color:var(--bad)}
@media (max-width:480px){.acclist{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
@media (max-width:620px){.conngrid{grid-template-columns:1fr}}

/* ---------- pulling rows straight out of BigQuery on a run step ---------- */
.pullrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.pullnote{min-width:0;overflow-wrap:anywhere}
.pullout{flex:1 1 100%;margin-top:8px;padding:10px;border-radius:8px;background:var(--surface-2)}
.pullout>*+*{margin-top:8px}
.pullout p{margin:0}
.pulltable{overflow-x:auto}
.pulltable table{border-collapse:collapse;font-size:.76rem;font-family:var(--mono)}
.pulltable th,.pulltable td{padding:4px 12px 4px 0;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.pulltable th{color:var(--ink-3);font-weight:600}
.pullacts{display:flex;gap:8px;flex-wrap:wrap}

/* runs as a table, on the home page and the runs page */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.runtable{width:100%;border-collapse:collapse;font-size:.9rem}
.runtable th,.runtable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.runtable th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
/* every header is a button that orders the table by its column */
.runtable th.sortcol{padding:0}
.sortbtn{display:flex;align-items:center;gap:6px;width:100%;padding:12px 14px;background:none;border:0;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer;text-align:left}
.sortbtn:hover{color:var(--ink)}
.sortbtn:focus-visible{outline:2px solid var(--brand-hi);outline-offset:-2px}
/* the mark keeps its space whether or not this column is the sorted one, so the
   header row never reflows as the sort moves between columns */
.sortmark{width:8px;height:8px;flex:0 0 8px;opacity:0;
  background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%)}
.runtable th.sorted .sortbtn{color:var(--ink)}
.runtable th.sorted .sortmark{opacity:.75}
.runtable th.sorted.desc .sortmark{clip-path:polygon(0 0,100% 0,50% 100%)}
.runtable tbody tr:last-child td{border-bottom:0}
.runtable tbody tr.rowlink{cursor:pointer}
.runtable tbody tr.rowlink:hover{background:var(--surface-2)}
.runtable td:first-child{font-weight:600;white-space:normal;min-width:180px}
.runtable a{color:inherit;text-decoration:none}
.runtable a:hover{text-decoration:underline}
.numcell{font-variant-numeric:tabular-nums}
.tablemore{margin-top:14px}

/* the system page: diagram beside the intro, steps drawn as a timeline */
.brieflist.timeline{position:relative;list-style:none;margin:0;padding:0}
.brieflist.timeline .briefstep{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 0;border-top:0}
.brieflist.timeline .briefstep::before{content:'';position:absolute;left:17px;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line)}
.brieflist.timeline .briefstep.first::before{top:50%}
.brieflist.timeline .briefstep.last::before{bottom:50%}
.brieflist.timeline .briefstep.first.last::before{display:none}
.brieflist.timeline .bnum{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--surface);border:2px solid var(--line);font-family:var(--mono);font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.brieflist.timeline .bbody{padding-top:7px}
.brieflist.timeline .bbody b{font-size:1.02rem}
.brieflist.timeline .bread{align-self:center}

/* the runs filter bar: every run in one list, narrowed rather than tabbed */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0 10px}
.filterbar input[type=search]{flex:1 1 220px;min-width:180px}
.filterbar select{flex:0 0 auto;width:auto;min-width:130px;max-width:220px;font-size:.86rem;padding:8px 10px}
.filterbar .btn{flex:0 0 auto}
/* Clear holds its slot even when there is nothing to clear, so picking a filter
   never shifts the controls out from under the pointer */
.filterbar .btn.placeheld{visibility:hidden;pointer-events:none}
.filtercount{margin:0 0 10px}
@media (max-width:620px){.filterbar select{flex:1 1 140px;min-width:0;max-width:none}}

/* the system page is one screenful: what this is, and the two things you can do with it.
   It fills whatever the header and breadcrumb leave and never scrolls. */
body.brief-mode{overflow:hidden}

/* The system page sits on the same canvas as the board: a fixed dot grid with clouds
   drifting over it. A second copy of the grid, in brand green, is masked by the SAME
   cloud shapes moving the SAME distance, so a dot lights up exactly when a cloud
   passes over it. The grid itself never moves; only the clouds and their mask do. */
:root{
  --dot-lit:color-mix(in srgb,var(--brand-hi) 62%,transparent);
  --cloud-a:radial-gradient(38% 34% at 22% 30%,var(--glow),transparent 68%);
  --cloud-b:radial-gradient(34% 30% at 74% 64%,var(--glow-2),transparent 68%);
  --cloud-c:radial-gradient(28% 26% at 52% 10%,var(--glow),transparent 66%);
  --cloud-d:radial-gradient(30% 24% at 88% 20%,var(--glow-2),transparent 68%);
  --mask-a:radial-gradient(38% 34% at 22% 30%,#000 10%,transparent 68%);
  --mask-b:radial-gradient(34% 30% at 74% 64%,#000 10%,transparent 68%);
  --mask-c:radial-gradient(28% 26% at 52% 10%,#000 10%,transparent 66%);
  --mask-d:radial-gradient(30% 24% at 88% 20%,#000 10%,transparent 68%);
  --cloud-size:1500px 1100px,1180px 980px,980px 1250px,1320px 900px;
}
:root:not([data-theme="light"]){--dot-lit:color-mix(in srgb,var(--brand-hi) 75%,transparent)}
:root[data-theme="dark"]{--dot-lit:color-mix(in srgb,var(--brand-hi) 75%,transparent)}
.syscanvas{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background-color:var(--bg)}
/* One moving layer, one animated property. Everything the clouds touch lives inside
   .sc-sky, so the sky is rasterised once, blur and mask included, and the compositor
   only translates the result. Nothing inside it animates, which is what keeps the
   raster reusable: an animation on a child (an opacity pulse, say) splits that child
   back out and the saving goes with it.
   The dot grid moved in here too. The lit dots have to land exactly on the dim ones,
   and the only way to guarantee that while anything moves is to move them together. */
.sc-sky{position:absolute;inset:-220px;will-change:transform;
  animation:sc-sail 46s ease-in-out infinite alternate}
.sc-sky>div{position:absolute;inset:0}
@keyframes sc-sail{from{transform:translate3d(-130px,90px,0)}to{transform:translate3d(130px,-90px,0)}}
.sc-grid{background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px}
.sc-clouds{background-image:var(--cloud-a),var(--cloud-b),var(--cloud-c),var(--cloud-d);
  background-size:var(--cloud-size);background-repeat:repeat;filter:blur(38px)}
/* the same lattice again, brighter, showing only where a cloud covers it */
.sc-lit{background-image:radial-gradient(var(--dot-lit) 1.4px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:var(--mask-a),var(--mask-b),var(--mask-c),var(--mask-d);
  mask-image:var(--mask-a),var(--mask-b),var(--mask-c),var(--mask-d);
  -webkit-mask-size:var(--cloud-size);mask-size:var(--cloud-size);
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
/* the sparks keep their own slower drift, so the sky is not one rigid sheet */
.sc-spark{position:absolute;inset:-220px;pointer-events:none;will-change:transform;opacity:.6;
  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;
  animation:sc-float 150s ease-in-out infinite alternate,atmos-twinkle 11s ease-in-out infinite}
@keyframes sc-float{from{transform:translate3d(90px,-72px,0)}to{transform:translate3d(-90px,72px,0)}}
/* a soft clearing in the middle so the title and description always sit on calm ground,
   while the clouds stay strong out at the edges */
.syscanvas::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 40% at 50% 42%,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 48%,transparent 76%)}
@media (prefers-reduced-motion:reduce){.sc-sky,.sc-spark{animation:none}}

body.brief-mode main.wrap{display:flex;align-items:center;justify-content:center;height:calc(100dvh - 61px - var(--crumb-h));padding-top:0;
  /* Padding the bottom by exactly what the header and breadcrumb take off the top centres the
     content in the real viewport; the extra lifts it a little above that. */
  padding-bottom:calc(61px + var(--crumb-h) + clamp(24px,6vh,72px))}
.briefhero{position:relative;z-index:1;margin:0;padding:0;width:100%;max-width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
/* the system name stays on one line on desktop, shrinking rather than wrapping */
.briefhero h1{margin:0;max-width:100%;white-space:nowrap;font-size:clamp(1.9rem,4.2vw,3.25rem);line-height:1.06}
.briefhero .lede{max-width:52ch;margin-top:14px}
@media (max-width:640px){.briefhero h1{white-space:normal;font-size:clamp(1.6rem,7.4vw,2.2rem)}}
.briefhero .hero-actions{justify-content:center;margin-top:24px}
@media (max-width:640px){
  body.brief-mode main.wrap{height:calc(100dvh - 61px - var(--crumb-h));padding-left:24px;padding-right:24px;padding-bottom:calc(61px + var(--crumb-h) + clamp(16px,4vh,48px))}
  .briefhero .hero-actions{width:100%;flex-direction:column}
  .briefhero .hero-actions .btn{width:100%;justify-content:center}
}

/* The run's identity: what it is called, what the system it came from is for, and the
   three facts you would otherwise have to go and look up. It is one block, ruled off
   from the controls and the steps below, because everything in it is context rather
   than anything you act on. */
.runtitle{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-bottom:28px;margin-bottom:16px;border-bottom:1px solid var(--line)}
/* the column would otherwise stretch the heading to fill it */
.runtitle .titlein,.runtitle .wftitle{flex:none;width:100%}
.runpurpose{margin:0;color:var(--ink-2);max-width:70ch}
/* Status, client, system: state, who it is for, what it came from, in that order,
   because that is the order the questions arrive in. */
.runeyebrows{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.runeyebrows .chip{max-width:100%}
.wfchip{text-decoration:none;background:var(--surface-2);color:var(--ink)}
.runeyebrows .clientchip:hover,.runeyebrows .wfchip:hover,.runeyebrows .dlchip:hover{border-color:var(--line)}

/* The crawl step: a table of what every page in scope actually said. */
.cr-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.cr-scroll{overflow-x:auto;margin:10px 0 4px;border:1px solid var(--line);border-radius:8px}
.cr-table{width:100%;font-size:.86rem}
.cr-table th,.cr-table td{padding:7px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cr-table thead th{position:sticky;top:0;background:var(--surface-2);font-weight:700;white-space:nowrap;z-index:1}
.cr-table tbody tr:last-child td{border-bottom:0}
.cr-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-row{cursor:pointer}
.cr-row:hover td{background:var(--surface-2)}
.cr-row.open td{background:var(--surface-2)}
/* the page and the title are the two that can run long, so they are the two that wrap */
.cr-url{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word;min-width:150px;max-width:280px}
.cr-title{word-break:break-word;min-width:160px;max-width:340px}
.cr-none{color:var(--ink-3);font-style:italic}
.cr-err{color:var(--ink-2);font-weight:700}
.cr-row.bad .cr-url{color:var(--ink-2)}
.cr-hop{font-style:normal;font-size:.78rem;color:var(--ink-3);white-space:nowrap}
.cr-detail td{background:var(--surface-2);padding:10px 12px}
.cr-dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px 20px;margin:0}
.cr-dl > div{min-width:0}
.cr-dl dt{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);margin:0 0 2px}
.cr-dl dd{margin:0;word-break:break-word;font-size:.86rem}
@media (max-width:640px){
  .cr-table{font-size:.8rem}
  .cr-table th,.cr-table td{padding:6px 8px}
}

/* The Crawler panel: which crawl columns a run of this system shows. */
.phead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.phead h3{margin:0}
.cw-toggle{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;padding:10px;border:1px solid var(--line);border-radius:8px;cursor:pointer}
.cw-toggle input{margin-top:2px;width:auto;accent-color:var(--brand-ink)}
.cw-toggle small{display:block;color:var(--ink-2);margin-top:3px;line-height:1.45}
.cw-picked{margin:14px 0 6px}
.cw-order{list-style:none;margin:6px 0 8px;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:cw}
.cw-order li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:5px 6px 5px 26px;border-radius:6px;background:var(--surface-2);position:relative;min-width:0}
.cw-order li::before{counter-increment:cw;content:counter(cw) ".";position:absolute;left:7px;top:6px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:.8rem}
.cw-nm{min-width:0;overflow-wrap:anywhere;font-size:.88rem}
.cw-mv{display:flex;align-items:center;gap:1px}
.cw-mv .linkbtn{padding:1px 5px;line-height:1}
.cw-mv .linkbtn:disabled{opacity:.3;cursor:default}
/* a calculated column is derived from what the crawl stored, not a second thing fetched */
.cw-calc{font-style:normal;justify-self:end;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:6px;white-space:nowrap}
.cw-pick{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
#cw-find{margin-bottom:10px}
.cw-grp{border-bottom:1px solid var(--line)}
.cw-grp:last-child{border-bottom:0}
.cw-grp > summary{cursor:pointer;padding:8px 2px;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:8px}
.cw-n{margin-left:auto;font-weight:400;font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.cw-grp .phint{margin:0 0 6px 2px}
.cw-f{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:6px;cursor:pointer;font-size:.88rem}
.cw-f:hover{background:var(--surface-2)}
.cw-f input{width:auto;flex:none;accent-color:var(--brand-ink)}
.cw-f > span{display:flex;align-items:center;min-width:0;overflow-wrap:anywhere}
.cw-grp[hidden],.cw-f[hidden]{display:none}
/* a wide column may run long; the table already scrolls inside its own box */
.cr-wide{min-width:150px;max-width:320px;overflow-wrap:anywhere}

/* The Crawler grid: every system against every column. */
.cg-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;margin:16px 0 12px}
.cg-tabs{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cg-tabs .chip{cursor:pointer;border:1px solid var(--line);background:var(--surface)}
.cg-tabs .chip.on{background:var(--brand-hi);color:var(--on-brand-hi);border-color:var(--brand-hi);font-weight:700}
.cg-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#cg-find{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:.9rem;min-width:190px}
.cg-only{display:flex;align-items:center;gap:7px;font-size:.88rem;white-space:nowrap}
.cg-only input{accent-color:var(--brand-ink)}

.cg-scroll{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cg-table{border-collapse:separate;border-spacing:0;font-size:.85rem}
.cg-table th,.cg-table td{border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.cg-table thead th{background:var(--surface-2)}
.cg-band{padding:5px 10px;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);white-space:nowrap;height:30px}
.cg-col{padding:0;vertical-align:bottom;width:116px;min-width:116px}
.cg-h{display:block;width:100%;padding:8px 8px 9px;border:0;background:none;color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;text-align:left;cursor:pointer;line-height:1.25}
.cg-h:hover{background:var(--brand-hi);color:var(--on-brand-hi)}
.cg-h:focus-visible{outline:2px solid var(--brand-hi);outline-offset:-2px}
.cg-h .cw-calc{display:inline-block;margin:2px 0 0;font-size:.6rem}

/* the two frozen columns: the system, and whether it crawls at all */
.cg-sticky{position:sticky;left:0;z-index:3;background:var(--surface);width:230px;min-width:230px}
.cg-sticky2{position:sticky;left:230px;z-index:3;background:var(--surface);width:62px;min-width:62px;text-align:center}
.cg-table thead .cg-sticky,.cg-table thead .cg-sticky2{z-index:4;background:var(--surface-2)}
.cg-corner{padding:8px 10px;text-align:left;font-size:.78rem;vertical-align:bottom}
.cg-name{padding:7px 10px;text-align:left;font-weight:600}
.cg-name a{color:inherit;text-decoration:none}
.cg-name a:hover{text-decoration:underline}
.cg-name small{display:block;font-weight:400;color:var(--ink-3);font-size:.75rem;margin-top:1px}
.cg-crawls,.cg-cell{text-align:center;padding:6px 4px}
.cg-cell input,.cg-crawls input{width:auto;cursor:pointer;accent-color:var(--brand-ink)}
.cg-table tbody tr:hover td,.cg-table tbody tr:hover th{background:var(--surface-2)}
/* a system that does not crawl still shows its columns, but they change nothing yet */
.cg-off .cg-cell{opacity:.38}
.cg-off .cg-name a{color:var(--ink-2)}
.cg-foot{margin-top:10px}
@media (max-width:700px){
  .cg-sticky{width:150px;min-width:150px}
  .cg-sticky2{left:150px}
}

/* What a column is, on hover. Fixed to the viewport so a table's own scroll
   container cannot clip it. */
.cfpop{position:fixed;z-index:60;width:290px;max-width:calc(100vw - 16px);padding:11px 13px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.16);pointer-events:none;font-size:.85rem;line-height:1.5}
.cfpop[hidden]{display:none}
.cfpop-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cfpop-top b{font-size:.95rem}
.cfpop-top .cw-calc{margin-left:0}
.cfpop-grp{margin:1px 0 0;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.cfpop-what{margin:8px 0 0;color:var(--ink-2)}
.cfpop-lbl{margin:10px 0 4px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
.cfpop-ex{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.cfpop-ex li{background:var(--surface-2);border-radius:5px;padding:4px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;overflow-wrap:anywhere}
/* the names that carry an explanation say so, quietly */
[data-cfdoc]{cursor:help}
.cg-h[data-cfdoc]{cursor:pointer}

/* The Crawler grid scrolls the window sideways, so the top bars are fixed rather than
   sticky: a sticky bar has no horizontal anchor and would slide away to the left the
   moment the grid is scrolled right. Fixed takes them out of the flow, so the content
   is padded down by exactly what they used to occupy. */
/* The page keeps its normal width and never scrolls sideways. The grid is given the
   full width to work in and scrolls inside its own box; the heading column stays
   readable. */
body.gridpage #app{max-width:none;padding-left:0;padding-right:0}
.cg-head{max-width:1180px;margin:0 auto;padding:0 20px}
.cg-wide{padding:0 20px 20px}
.cg-sticky2{box-shadow:6px 0 10px -8px rgba(0,0,0,.35)}

/* The floating header. A sticky thead inside a horizontal scroller sticks to that
   scroller, not to the window, so once the real header scrolls past the chrome this
   copy takes over: fixed to the viewport, matched to the container's width and
   position, and scrolled sideways in step with it. */
.cg-floathead{position:fixed;z-index:8;overflow:hidden;pointer-events:none;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cg-floathead[hidden]{display:none}
.cg-floathead table{pointer-events:auto}
.cg-floathead .cg-h{cursor:pointer}

/* ---------- connections: Google, one card per API ---------- */
.gocard{display:flex;flex-direction:column;gap:12px}
.gostate{font-size:.78rem;padding:3px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-3);white-space:nowrap}
.gostate.on{background:var(--good-soft);color:var(--good)}
.gofacts{display:grid;gap:8px;margin:0}
.gofacts>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:baseline}
.gofacts dt{font-size:.78rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.gofacts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.goacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.goprops{border-top:1px solid var(--line);padding-top:12px}
.golist{list-style:none;padding:0;display:grid;gap:6px;max-height:260px;overflow:auto}
.golist li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line)}
.golist li:last-child{border-bottom:0}
.gopname{min-width:0;overflow-wrap:anywhere}
.goflash{border-radius:var(--radius);padding:12px 16px;margin:0 0 16px;border:1px solid var(--line)}
.goflash.good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.goflash.bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}

.gosub{margin:36px 0 4px}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin:12px 0}
.gotable{width:100%;border-collapse:collapse;min-width:600px}
.gotable th,.gotable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.gotable tbody tr:last-child th,.gotable tbody tr:last-child td{border-bottom:0}
.gotable thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:500;background:var(--surface-2)}
.gotable tbody th{font-weight:500;white-space:nowrap}
.gcdom{display:block;font-weight:400}
.gotable select{min-width:200px}
.goprops summary{cursor:pointer;color:var(--ink-3);padding:4px 0}

/* ---------- the Google step: movement reads as movement ---------- */
.gp-mv.up{color:var(--good)}
.gp-mv.down{color:var(--bad)}
.gp-q{width:100%;border-collapse:collapse;margin-top:12px;font-size:.88rem}
.gp-q th,.gp-q td{text-align:left;padding:5px 10px;border-bottom:1px solid var(--line)}
.gp-q th{font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);font-weight:500}
.gp-q th.num,.gp-q td.num{text-align:right;font-variant-numeric:tabular-nums}
.gp-q tr:last-child td{border-bottom:0}
.cg-cats{display:flex;gap:6px;margin-right:12px;padding-right:12px;border-right:1px solid var(--line)}
/* where an exported source physically lives, so "Google Search Console" the BigQuery
   export cannot be mistaken for Search Console read live from the API */

/* The page column stays put while the rest scrolls sideways, and a copy of the header
   follows the page down, so neither the row you are on nor the column you are reading
   goes missing at the far end of a wide table. */
.cr-table{border-collapse:separate;border-spacing:0}
.cr-table th,.cr-table td{border-bottom:1px solid var(--line)}
.cr-sticky{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:6px 0 10px -8px rgba(0,0,0,.35)}
.cr-table thead .cr-sticky{z-index:4;background:var(--surface-2)}
.cr-row:hover .cr-sticky{background:var(--surface-2)}
.cr-floathead{position:fixed;z-index:8;overflow:hidden;pointer-events:none;border-bottom:1px solid var(--line);background:var(--surface-2);border-radius:8px 8px 0 0}
.cr-floathead[hidden]{display:none}
.cr-floathead table{pointer-events:auto}

/* ---------- the image inventory: one row per file, grouped by URL pattern ---------- */
.im-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 2px}
.im-tabs .chip{cursor:pointer;border:1px solid var(--line);background:var(--surface)}
.im-tabs .chip.on{background:var(--brand-hi);color:var(--on-brand-hi);border-color:var(--brand-hi);font-weight:700}
/* You cannot write alt text for something you cannot see, so the real image is loaded
   from the client's own server. Fixed box, lazy, and a visible gap when it will not
   load, which is itself worth knowing about a file the page still references. */
.im-thumb,.im-thumb-h{width:76px;min-width:76px}
.im-line .im-pic,.im-line .im-nothumb,.im-line .im-svg{width:48px;height:48px}
.im-pic,.im-thumb img{display:block;width:60px;height:60px;object-fit:contain;background:var(--surface-2);border-radius:6px}
.im-nothumb{display:grid;place-items:center;width:60px;height:60px;border-radius:6px;background:var(--surface-2);color:var(--ink-3);font-size:.62rem;letter-spacing:.04em}
/* the kind sits on the file cell, so a row says what it is before it says where it is */
.im-kind{background:var(--surface-2);color:var(--ink-2);font-size:.7rem;margin-right:6px;vertical-align:baseline}
.im-src{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);overflow-wrap:anywhere}
/* hover to enlarge. Fixed to the viewport, because every one of these sits inside a
   scroller that would clip anything grown in place. */
.im-zoom{display:inline-block;line-height:0;cursor:zoom-in;position:relative}
.im-zoom::after{content:"";position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:3px;background:var(--ink);opacity:0;transition:opacity .12s ease;
  -webkit-mask:center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7 1a6 6 0 1 0 3.5 10.9l3.3 3.3 1.4-1.4-3.3-3.3A6 6 0 0 0 7 1zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-.5 1.5v2h-2v1h2v2h1v-2h2v-1h-2v-2z'/%3E%3C/svg%3E");
  mask:center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M7 1a6 6 0 1 0 3.5 10.9l3.3 3.3 1.4-1.4-3.3-3.3A6 6 0 0 0 7 1zm0 2a4 4 0 1 1 0 8 4 4 0 0 1 0-8zm-.5 1.5v2h-2v1h2v2h1v-2h2v-1h-2v-2z'/%3E%3C/svg%3E")}
.im-zoom:hover::after{opacity:.85}
.im-zoomed{position:fixed;z-index:120;display:none;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:var(--shadow);pointer-events:none}
/* so the frame never opens as an empty sliver while the picture is still loading */
.im-zoomed.on{display:grid;place-items:center;min-width:180px;min-height:140px}
.im-zoomed img{display:block;max-width:min(420px,42vw);max-height:min(420px,70vh);width:auto;height:auto;border-radius:6px;background:var(--surface-2)}
.im-zoomsvg{display:grid;place-items:center;width:240px;height:240px;background:var(--surface-2);border-radius:6px;color:var(--ink)}
.im-zoomsvg svg{width:180px;height:180px;display:block}
@media (pointer:coarse){.im-zoom{cursor:default}.im-zoom::after{display:none}}
/* the drawing itself, since an inline svg has no URL to point an img at. It inherits
   the text colour, which is what currentColor icons expect. */
.im-svg{display:grid;place-items:center;width:60px;height:60px;border-radius:6px;background:var(--surface-2);color:var(--ink)}
.im-svg svg{width:38px;height:38px;display:block}
.im-svgbig{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:8px;background:var(--surface-2);color:var(--ink)}
.im-svgbig svg{width:56px;height:56px;display:block}
/* the one decision this step exists to record */
/* Two shapes for two situations. A row we could not call shows its three choices,
   because it is a question. A row we could shows the answer in words, because it is
   a statement. Drawing both the same way is what made nine answers look like nine
   blank cells. */
.im-roles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end}
.im-role{font-size:.78rem;cursor:pointer;border:1px solid var(--wire);background:var(--surface);color:var(--ink)}
.im-role:hover{border-color:var(--ink);background:var(--surface-2)}
.im-role.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.im-said{font-size:.92rem;font-weight:600;color:var(--ink);white-space:nowrap}
.im-change{font-size:.78rem;color:var(--ink-2)}

/* What the app worked out, before anything it wants from you. */
.im-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0 0}
.im-tile{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.im-tile b{font-family:var(--display);font-size:1.6rem;line-height:1.1}
.im-tile span{font-size:.95rem;font-weight:600}
.im-tile small{color:var(--ink-2);font-size:.8rem;line-height:1.4}
@media (max-width:700px){.im-tiles{grid-template-columns:minmax(0,1fr)}}

/* What is left for a person, and nothing else. Absent when there is nothing. */
.im-asked{margin:12px 0 0;padding:11px 14px;border-radius:9px;background:var(--amber-soft)}
.im-asked.done{background:var(--accent-soft)}
.im-asked p{margin:0;font-size:.92rem}

.im-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden;margin-top:12px}
.im-item+.im-item{border-top:1px solid var(--line)}
.im-item.ask{background:var(--amber-soft)}
.im-line{display:flex;align-items:center;gap:14px;padding:11px 14px;cursor:pointer}
.im-line:hover{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
.im-line .im-file{flex-grow:1;min-width:0}
.im-line .im-thumb{flex:0 0 auto;width:auto;min-width:0}
/* The answers line up in a column, because the whole point of this list is to run an
   eye down what we decided and stop at the one that looks wrong. */
.im-line .im-rolecell{flex:0 0 auto;min-width:320px;display:flex;justify-content:flex-end}
.im-cant{flex:0 0 auto;background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber);font-size:.76rem;font-weight:600;white-space:nowrap}
.im-item.ask .im-cant{background:var(--surface)}
.im-detail{padding:2px 14px 14px;border-top:1px dashed var(--line)}
.im-what{margin-top:12px}
.im-what summary{cursor:pointer;font-size:.86rem;color:var(--ink-2)}
.im-what .hint{margin-top:8px}
@media (max-width:760px){
  .im-line{flex-wrap:wrap;gap:9px}
  .im-line .im-file{flex:1 1 100%;order:2}
  .im-line .im-rolecell{flex:1 1 100%;order:4;min-width:0;justify-content:flex-start}
  .im-roles{justify-content:flex-start}
}
/* the flag step: a verdict per image, and the work it adds up to */
.al-reach{color:var(--ink-2);font-size:.88rem;margin:8px 0 0}
.al-fixes{margin:14px 0 4px}
.al-fixlist{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:6px}
.al-fixlist li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;border-left:2px solid var(--line);padding-left:10px}
.al-fixlist span{color:var(--ink-3);font-size:.8rem}
.al-verdict{white-space:nowrap}
.al-v{font-size:.72rem}
.v-broken .al-v{background:var(--bad-soft);color:var(--bad)}
.v-weak .al-v{background:var(--amber-soft);color:var(--amber)}
.v-clean .al-v{background:var(--good-soft);color:var(--good)}
.al-over{display:block;color:var(--ink-3);font-size:.7rem;font-style:italic;margin-top:2px}
.al-fix{min-width:150px;font-size:.82rem}
.al-why{margin:0 0 6px;color:var(--ink-2)}
.al-override{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px}
.al-override small{color:var(--ink-3);font-size:.75rem}
.al-row{cursor:pointer}
.al-row.open{background:var(--surface-2)}
/* the read-through: image beside its own words, sized to be scanned not studied */
.al-read{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:10px}
.al-card{display:flex;gap:10px;align-items:flex-start;margin:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;text-align:left}
.al-card:hover{border-color:var(--ink-3)}
.al-cardimg{flex:0 0 auto}
/* the whole point of this grid is reading the words against the picture, so the
   picture is worth more than a table thumbnail */
.al-cardimg .im-pic,.al-cardimg .im-svg,.al-cardimg .im-nothumb{width:88px;height:88px}
.al-cardimg .im-svg svg{width:56px;height:56px}
.al-card figcaption{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.al-cardalt{font-size:.82rem;line-height:1.35;overflow-wrap:anywhere}
.al-card small{color:var(--ink-3);font-size:.72rem}
.al-card.v-broken{border-color:var(--bad)}
.al-card.v-weak{border-color:var(--amber)}
@media (max-width:620px){.al-read{grid-template-columns:1fr}}
/* the decide step: one rule per group, and every string it writes shown first */
.fx-group{border:1px solid var(--line);border-radius:10px;margin-top:12px;overflow:hidden}
.fx-group.done{border-color:var(--good)}
.fx-head{display:flex;gap:10px;align-items:center;padding:10px 12px;cursor:pointer;background:var(--surface)}
.fx-head>div:first-of-type{flex:1 1 auto;min-width:0}
.fx-head:focus-visible{outline:2px solid var(--brand-hi);outline-offset:-2px}
/* the row opens. Without this it reads as a static summary and the only controls on
   the screen stay hidden inside it. */
.fx-caret{flex:0 0 auto;color:var(--ink-3);font-size:.8rem;width:12px}
.fx-head:hover{background:var(--surface-2)}
.fx-title{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fx-head small{color:var(--ink-3);font-size:.78rem}
.fx-state{flex:0 0 auto}
.v-ok{background:var(--good-soft);color:var(--good)}
.v-no{background:var(--bad-soft);color:var(--bad)}
.fx-body{padding:12px;border-top:1px solid var(--line);display:grid;gap:10px}
.fx-kinds{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fx-field{display:grid;gap:4px}
.fx-field .inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:.85rem}
.fx-field .inp:focus-visible{outline:2px solid var(--brand-hi);outline-offset:1px}
.fx-tokens{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.fx-token{font-family:var(--mono);font-size:.72rem;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink-2)}
.fx-token:hover{border-color:var(--ink-3)}
.fx-why,.fx-note{margin:0;color:var(--ink-2);font-size:.85rem}
.fx-struct{margin:0;color:var(--ink-2);font-size:.88rem;border-left:2px solid var(--accent);padding-left:10px;max-width:70ch}
.fx-warn{margin:0;color:var(--amber);font-size:.82rem}
.fx-prev{border-top:1px dashed var(--line);padding-top:10px}
.fx-list{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:8px}
.fx-list li{display:flex;gap:10px;align-items:flex-start}
.fx-list li.bad{border-left:2px solid var(--bad);padding-left:8px;margin-left:-10px}
.fx-img{flex:0 0 auto}
.fx-out{min-width:0;display:grid;gap:2px}
.fx-name{font-family:var(--mono);font-size:.76rem;color:var(--ink-3);font-weight:400;overflow-wrap:anywhere}
.fx-alt{font-size:.88rem;overflow-wrap:anywhere}
.fx-alt small{color:var(--ink-3);font-family:var(--mono);font-size:.72rem}
.fx-out>small{color:var(--ink-3);font-size:.75rem}
.fx-prob{color:var(--bad)}
.fx-note{color:var(--amber)}
.fx-list li.soft{border-left:2px solid var(--amber);padding-left:8px;margin-left:-10px}
.v-weak{background:var(--amber-soft);color:var(--amber)}
/* one image, one string, and the string is editable */
.fx-edit{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);font-size:.86rem}
.fx-edit:focus-visible{outline:2px solid var(--brand-hi);outline-offset:1px}
.fx-list li.bad .fx-edit{border-color:var(--bad)}
.fx-edited{font-style:normal;color:var(--good);font-size:.68rem;letter-spacing:.03em}
.fx-undo{align-self:start;background:none;border:0;padding:0;color:var(--ink-3);font-size:.72rem;text-decoration:underline;cursor:pointer}
.fx-undo:hover{color:var(--ink-2)}
.fx-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-top:1px solid var(--line);padding-top:10px}
.fx-actions small{color:var(--ink-3);font-size:.78rem}
/* the last two steps: the case, and the change list */
.pl-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:12px 0}
.pl-fig{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:3px;background:var(--surface)}
.pl-fig.strong{border-color:var(--good)}
.pl-fig b{font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.pl-fig span{font-size:.85rem;color:var(--ink-2)}
.pl-fig small{color:var(--ink-3);font-size:.76rem}
.pl-reason{margin:4px 0 0;color:var(--ink-2);font-size:.9rem;max-width:68ch}
.pl-model{border-top:1px solid var(--line);margin-top:16px;padding-top:12px}
.pl-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:6px 0 8px}
.pl-inputs label{display:grid;gap:4px;font-size:.84rem;color:var(--ink-2)}
.pl-inputs .inp{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font-size:.88rem}
.pl-checks{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.pl-checks li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-3)}
.pl-checks li.ok{color:var(--ink)}
.pl-checks li span:last-child{display:grid;gap:2px}
.pl-checks small{color:var(--ink-3);font-size:.78rem}
.pl-tick{flex:0 0 auto;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;background:var(--surface-2);color:var(--ink-3)}
.pl-checks li.ok .pl-tick{background:var(--good-soft);color:var(--good)}
.pl-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.pl-out{border-left:2px solid var(--bad);padding-left:10px;margin:14px 0}
.pl-tbl{margin-top:18px}
.pl-tbl .im-alt small{display:block;color:var(--ink-3);font-size:.72rem;margin-top:2px}
/* what actually fired, instead of a question the app can answer itself */
.rdec-tally{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.rdec-tally li{display:flex;gap:10px;align-items:baseline;border-left:2px solid var(--line);padding-left:10px}
.rdec-tally b{font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.rdec-tally span{color:var(--ink-2);font-size:.9rem}
.rdec-rules{margin-top:12px}
.rdec-rules summary{cursor:pointer;color:var(--ink-3);font-size:.84rem}
.rdec-rules .nrules{margin-top:8px}
.im-file{min-width:210px}
.im-name{font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere}
.im-file small{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;color:var(--ink-2);font-size:.78rem;margin-top:3px}
.im-more{margin:10px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.im-alt{min-width:200px;max-width:340px;overflow-wrap:anywhere}
.im-none{color:var(--bad)}
.im-dec,.im-many{color:var(--ink-3);font-style:normal}
.im-issue{background:var(--amber-soft);color:var(--amber);font-size:.72rem;margin-right:4px}
.im-det{padding:4px 0}
.im-alts{list-style:none;padding:0;display:grid;gap:8px;margin:6px 0 0}
.im-alts li{border-left:2px solid var(--line);padding-left:10px}
.im-altval{display:block;overflow-wrap:anywhere}
.im-alts small{color:var(--ink-3);font-size:.76rem}

/* The hand off pair: the document and the workbook it links to. */
.pl-files{margin-top:18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.pl-flist{list-style:none;margin:8px 0 10px;padding:0;display:grid;gap:10px}
.pl-flist li{display:grid;gap:2px}
.pl-flist a{font-weight:600;color:var(--accent);word-break:break-word}
.pl-flist small{color:var(--ink-3)}


/* Who last touched the step: under the card, centred, and quieter than anything in it. */
.rs-meta{margin:14px 0 4px;text-align:center;font-size:.8rem;color:var(--ink-3);opacity:.85}
.rs-meta:empty{display:none}

/* ===== the playbook drawer ===== */
.pb-back{position:fixed;inset:0;z-index:40;background:rgba(22,22,22,.38);backdrop-filter:blur(2px)}
.pb-drawer{position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(560px,100vw);display:grid;grid-template-rows:auto 1fr;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:-8px 0 28px rgba(0,0,0,.16);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pb-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0}
.pb-head > div{display:grid;gap:1px;min-width:0}
.pb-head b{font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-head .btn{margin-left:auto;flex:0 0 auto}
.pb-x{flex:0 0 auto;border:0;background:none;color:var(--ink-3);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px;border-radius:8px}
.pb-x:hover{color:var(--ink);background:var(--surface-2)}
.pb-body{overflow:auto;padding:4px 16px 28px;overscroll-behavior:contain}
.pb-sec{padding:18px 0;border-bottom:1px solid var(--line)}
.pb-sec:last-child{border-bottom:0}
.pb-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1rem}
.pb-n{display:grid;place-items:center;width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-size:.72rem;font-weight:600}
.pb-here{margin-left:auto;font-size:.7rem;font-weight:600;color:var(--on-tpl);background:var(--tpl);padding:2px 7px;border-radius:999px}
.pb-sec.on{scroll-margin-top:8px}
.pb-sec.on .pb-n{background:var(--brand-hi);color:var(--on-brand-hi)}
.pb-purpose{margin:0 0 8px;color:var(--ink-2)}
.pb-body .gdoc{max-width:none;font-size:.92rem}
body.pb-on{overflow:hidden}
/* Always leave a strip of backdrop. A drawer filling the whole width on a phone has
   nothing to tap out of, which leaves the close button as the only way back and reads
   as a page you have navigated to rather than a panel over the run. */
@media (max-width:560px){
  .pb-drawer{width:calc(100vw - 44px)}
  .pb-head{flex-wrap:wrap}
  .pb-head .btn{margin-left:0;order:3;width:100%}
}
@media (prefers-reduced-motion:no-preference){
  .pb-drawer{animation:pb-in .18s ease-out}
  @keyframes pb-in{from{transform:translateX(16px);opacity:.6}to{transform:none;opacity:1}}
}
.pb-from{margin:0 0 4px;font-size:.75rem;color:var(--ink-3)}

/* A walk that stopped part way is an offer, not an error: the pages it read are
   still there and picking it up is cheaper than starting over. */
.cr-resume{margin:10px 0 0}
.cr-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Clients on the run dialog: one click to pick, not two.
   Every chip carries the same font weight in both states. Bolding the selected one
   would widen it and shuffle the rest of the row, which is the same reflow the step
   strip had. Background and colour carry the selection instead. */
.clchips{display:flex;flex-wrap:wrap;gap:7px}
.clchip{display:inline-flex;position:relative;cursor:pointer;max-width:100%}
.clchip.hide{display:none}
.clchip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.clchip span{display:inline-block;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:.88rem;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.clchip:hover span{border-color:var(--ink-3)}
.clchip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.clchip input:checked+span{background:var(--brand-hi);color:var(--on-brand-hi);border-color:var(--brand-hi)}
.modal-body input.clfilter{padding:8px 11px}

/* What the crawl found, before anyone decides whether to read three hundred rows.
   One card per column the system asked for; the shape inside follows the column. */
.cs-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));margin:12px 0}
.cs-card{display:flex;flex-direction:column;gap:5px;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-width:0}
.cs-label{font-size:.76rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2)}
.cs-big{font-size:1.5rem;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.cs-big.cs-none{font-size:.92rem;font-weight:500;color:var(--ink-3)}
.cs-sub{font-size:.8rem;color:var(--ink-2)}
.cs-note{font-size:.76rem;color:var(--ink-3);line-height:1.35}
.cs-note q{quotes:'\201C' '\201D'}
.cs-vals{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.cs-vals li{display:grid;grid-template-columns:minmax(0,1fr) 54px auto;align-items:center;gap:8px;font-size:.82rem}
.cs-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-v.cs-none{color:var(--ink-3);font-style:italic}
/* the bar is the proportion of pages, so a lopsided column is obvious without reading */
.cs-bar{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.cs-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.cs-n{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}
.cs-rows>summary{cursor:pointer;font-size:.88rem;padding:8px 0;color:var(--accent)}
.cs-rows>summary:hover{text-decoration:underline}
@media (max-width:480px){.cs-grid{grid-template-columns:1fr}}

/* the scope the run kept: the same row, with a tick where the radio was */
.sc-row-item.sc-rdone{cursor:default}
.sc-row-item.sc-rdone:hover{background:var(--accent-soft)}
.sc-rmark{width:16px;height:16px;border-radius:50%;background:var(--accent);position:relative;justify-self:center}
.sc-rmark::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--on-brand-hi);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* step types, typed fields and tasks */
.typetag{display:inline-flex;align-items:center;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
.typetag.miss{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.ntasks{margin:2px 0 0;padding-left:18px;font-size:.8rem;line-height:1.45}
.ntasks em{font-style:normal;font-size:.72rem;color:var(--ink-2)}
.tmiss{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--amber-soft);color:var(--amber);font-size:.68rem;font-weight:800}
.ptype select,.taskrow select{width:100%}
.tfields{display:grid;gap:6px;margin-top:8px}
.tfield{display:grid;grid-template-columns:minmax(80px,32%) 1fr;align-items:center;gap:8px;font-size:.82rem}
.tfield span{color:var(--ink-2)}
.tfield em{color:var(--amber);font-style:normal;margin-left:2px}
.tfield input{width:100%;min-width:0}
.typeedit{display:grid;gap:6px;margin-top:8px;padding:10px;border:1px dashed var(--line);border-radius:10px}
.typeedit textarea{font-family:var(--mono);font-size:.8rem}
.taskrow .dline{align-items:center}
.taskrow .tnum{flex:none;width:20px;font-family:var(--mono);font-size:.75rem;color:var(--ink-2);text-align:right}
.taskrow select{flex:0 1 38%;min-width:0}
.taskrow .tfields{padding-left:28px}
@media (max-width:640px){.tfield{grid-template-columns:1fr;gap:2px}.taskrow .tfields{padding-left:0}}

/* ---------- cannibalization audit run screens ---------- */
.cn-wrap{display:grid;gap:14px}
.cn-block{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cn-block>summary{cursor:pointer}
.cn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;align-items:end}
.cn-f{display:grid;gap:4px;font-size:.86rem}
.cn-f>span{font-weight:600}
.cn-f small{font-weight:400;color:var(--ink-3);display:block}
.cn-f.cn-inline{display:inline-flex;align-items:center;gap:8px}
.cn-f.cn-inline>span{white-space:nowrap}
.cn-in{width:100%;min-width:0;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font:inherit;font-size:.88rem}
.cn-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.cn-in:disabled{opacity:.7;cursor:not-allowed}
textarea.cn-in{resize:vertical}
.cn-mono,.cn-mono .cn-in{font-family:var(--mono);font-size:.82rem}
.cn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cn-nowrap{white-space:nowrap}
.cn-table td{vertical-align:middle}
.cn-table .cn-in{padding:5px 7px}
.cn-focusrow td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.cn-url{word-break:break-all;font-family:var(--mono);font-size:.78rem}
.cn-url small{display:block;font-family:var(--body);color:var(--ink-3);word-break:normal}
.cn-tall{max-height:460px;overflow:auto}
.cn-probs{margin:0;padding-left:1.1em;color:var(--bad);font-size:.86rem}
.cn-good{color:var(--good)}
.cn-bad{color:var(--bad)}
.cn-wait{color:var(--amber)}
.cn-agree{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer}
.cn-agree.ok{border-color:var(--good);background:var(--good-soft)}
.cn-agree input{margin-top:4px;width:18px;height:18px;flex:none}
.cn-agree span{display:grid;gap:2px}
.cn-agree small{color:var(--ink-2);font-size:.8rem}
.cn-dev{grid-template-columns:1fr 2fr 1fr auto}
@media (max-width:720px){.cn-dev{grid-template-columns:1fr}}
.cn-cls{font-size:.68rem;padding:1px 7px}
.cn-cls.cn-focus{background:var(--accent-soft);color:var(--accent)}
.cn-cls.cn-cross-scope{background:var(--st-find-soft);color:var(--st-find)}
.cn-cls.cn-cross-domain{background:var(--st-forecast-soft);color:var(--st-forecast)}
.cn-cls.cn-excluded{background:var(--surface-2);color:var(--ink-3)}
.cn-urls{margin:0;padding-left:1.2em;display:grid;gap:2px}
.cn-urls li{margin:0}
.cn-ranked tr.cn-in-review td:first-child{box-shadow:inset 3px 0 0 var(--good)}
.cn-ranked tr:not(.cn-in-review){opacity:.72}
.cn-note{min-width:200px}
.cn-cases{display:grid;gap:8px}
.cn-case{border:1px solid var(--line);border-radius:10px;background:var(--surface);overflow:hidden}
.cn-case>header{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 14px;cursor:pointer}
.cn-case>header:hover{background:var(--surface-2)}
.cn-case.open>header{border-bottom:1px solid var(--line)}
.cn-case.v-harmful{border-left:4px solid var(--bad)}
.cn-case.v-not_issue{border-left:4px solid var(--good)}
.cn-case.v-monitor{border-left:4px solid var(--amber)}
.cn-rank{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);min-width:2ch}
.cn-q{font-family:var(--display);font-weight:600}
.cn-split{font-size:.78rem;padding:2px 8px;border-radius:999px;background:var(--surface-2)}
.cn-split.cn-close{background:var(--bad-soft);color:var(--bad)}
.cn-split.cn-clear{background:var(--good-soft);color:var(--good)}
.cn-case header .chip{margin-left:auto}
.cn-case-body{display:grid;gap:12px;padding:14px}
.cn-checks4{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.cn-c4{display:grid;gap:6px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.cn-c4 p{margin:0}
.cn-bar{display:inline-block;width:80px;height:8px;border-radius:4px;background:var(--surface-2);vertical-align:middle;overflow:hidden}
.cn-bar i{display:block;height:100%;background:var(--accent)}
.cn-weeks{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:.74rem;font-family:var(--mono);max-height:160px;overflow:auto}
.cn-weeks li{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-weeks span{color:var(--ink-3);margin-right:6px}
.cn-verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}
.cn-vbtn{display:grid;gap:3px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;color:var(--ink)}
.cn-vbtn small{color:var(--ink-3);font-size:.76rem;line-height:1.35}
.cn-vbtn:disabled{cursor:not-allowed;opacity:.7}
.cn-vbtn.on.v-harmful{border-color:var(--bad);background:var(--bad-soft)}
.cn-vbtn.on.v-not_issue{border-color:var(--good);background:var(--good-soft)}
.cn-vbtn.on.v-monitor{border-color:var(--amber);background:var(--amber-soft)}
.cn-pq{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cn-pq.ok{border-color:var(--good)}
.cn-pq>header{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.cn-pq>header .cn-inline{margin-left:auto}
.cn-pq p{margin:0}
.cn-prio{font-family:var(--mono);font-weight:600;font-size:.8rem;padding:2px 8px;border-radius:6px;background:var(--surface-2)}
.cn-prio.p-P1{background:var(--bad);color:var(--on-bad)}
.cn-prio.p-P2{background:var(--amber-soft);color:var(--amber)}
.cn-prio.p-P3{background:var(--st-find-soft);color:var(--st-find)}
.cn-plantable tr.ok td:last-child{font-weight:600}
.cn-plantable td{min-width:90px}
.cn-plantable td:first-child{min-width:0;text-align:center}
.cn-plantable td:nth-child(2){min-width:220px}
.cn-so{display:flex;gap:6px;align-items:center;margin-top:4px}
.cn-rest{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:.88rem}
.cn-qa small{display:block}
.cn-narrow{max-width:240px}
.cn-weeks li{line-height:1.45}
.cn-plantable td:nth-child(4){min-width:180px}
.cn-plantable td:nth-child(5){min-width:150px}
.cn-plantable td:nth-child(6){min-width:170px}
.cn-table select.cn-in{min-width:120px}
.cn-brands{gap:10px}
.cn-brand{display:grid;gap:6px;padding-top:8px;border-top:1px solid var(--line)}
.cn-brand:first-of-type{border-top:0;padding-top:0}
.cn-bscopes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cn-bscopes li{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center;margin:0}
.bd-wrap{display:grid;gap:14px}
.bd-card{display:grid;gap:10px}
.bd-card .flabel small{text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.78rem;color:var(--ink-3);display:block;margin-top:2px}
.bd-scope{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.bd-scope .bd-sname{max-width:260px}
.bd-scope .bd-snote{flex:1;min-width:180px}
.bd-rules td{padding:4px 6px}
.bd-terms textarea{width:100%}

/* ---- insights: what real runs say about each system ---- */
.ins-list{display:grid;gap:14px;margin-top:18px}
.ins-card{display:grid;gap:14px;padding:18px 20px;color:inherit;text-decoration:none}
.ins-card:hover{border-color:var(--wire)}
.ins-cardhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.ins-cardhead h2{margin:0;font-size:1.15rem}
.ins-signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ins-signals p{margin:0}
.ins-signals > div{display:grid;gap:4px;align-content:start}
.ins-big{margin:18px 0}
.ins-big > .card{padding:16px 18px}
.ins-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;margin:0}
.ins-fix{color:var(--ink-2);margin-top:6px !important}
.ins-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:14px}
.ins-stat{padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}
.ins-stat p{margin:0}
.ins-val{font-size:1.15rem;font-weight:600;margin-top:4px !important}
.ins-h{font-size:1.05rem;margin:26px 0 8px}
.ins-table td{white-space:normal}
@media (max-width:800px){.ins-signals{grid-template-columns:minmax(0,1fr)}}

/* ---- run review: every step of a run on one page ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rv{display:grid;gap:14px}
.rv-head{display:grid;gap:8px}
.rv-head h1{margin:0}
.rv-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.rv-step{display:grid;gap:10px;padding:16px 20px;break-inside:avoid}
.rv-step p{margin:0}
.rv-step.rv-flag{border-left:3px solid var(--amber)}
.rv-stephead{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rv-stephead h2{margin:0;font-size:1.1rem;flex:1 1 260px}
.rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 20px}
.rv-grid h3,.rv-note h3{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600;margin:0 0 6px}
.rv-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.88rem}
.rv-list li{display:flex;gap:8px;align-items:baseline}
.rv-list li.no{color:var(--ink-3)}
.rv-mark{flex:0 0 auto;width:1em;text-align:center}
.rv-list li.ok .rv-mark{color:var(--good)}
@media print{.rv-tools,.crumbs,#crumbs,.nav{display:none!important}.rv-step{box-shadow:none}}

/* ---- approval gates ---- */
.apchk{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:.86rem;color:var(--ink-2)}
.handoff.approval{border-color:var(--amber);background:var(--amber-soft)}
.apdone{color:var(--good)}

/* ---- scope sampling ---- */
.sc-sample{display:grid;gap:6px;margin-top:6px}
.sc-samplepick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sc-samplecustom{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.sc-samplecustom input{width:72px;padding:4px 8px}
.sc-sampled{margin-top:8px;color:var(--ink-2)}
.sc-pages{font-weight:400;opacity:.75;font-variant-numeric:tabular-nums}

/* Deliverables builder, embedded from /builder/ */
.builderpage{display:flex;flex-direction:column}
.builderframe{display:block;width:100%;height:calc(100vh - 130px);min-height:480px;border:0;background:transparent}
body.fitpage main{min-height:0;padding-bottom:0}

/* what's new, once per person */
dialog.modal.whatsnew{width:min(520px,calc(100% - 32px))}
.whatsnew .eyebrow{margin-bottom:-6px}
.wn-item{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:14px 0 2px;border-top:1px solid var(--line)}
.wn-item h3{margin:0;font-size:1.05rem}

/* ---------- Insights dashboard ---------- */
/* Series colours from the dataviz reference palette, validated as a pair for CVD in light and dark.
   Amber is the reserved warning colour and only ever means "stalled", always with the word. */
:root{--vz-s1:#2a78d6;--vz-s2:#eb6834;--vz-warn:#fab219;--vz-grid:#E9EDF1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--vz-s1:#3987e5;--vz-s2:#d95926;--vz-grid:#242424}}
:root[data-theme="dark"]{--vz-s1:#3987e5;--vz-s2:#d95926;--vz-grid:#242424}
.vz-hero h1 .vz-of{color:var(--ink-3);font-weight:500}
.vz-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 18px}
.vz-filters .seg button{padding:7px 12px;font-size:.88rem}
.vz-filters .seg button[aria-selected="true"]{background:var(--brand-ink);color:var(--brand-hi)}
.vz-system{width:auto;min-width:200px;padding:8px 12px;font-size:.9rem}
.vz-status{display:flex;gap:12px;flex-wrap:wrap}
.vz-chk{display:inline-flex;gap:6px;align-items:center;font-size:.9rem;color:var(--ink-2);cursor:pointer}
.vz-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:14px}
.vz-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow)}
.vz-kl{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.vz-kv{font-family:var(--display);font-size:1.7rem;font-weight:600;line-height:1.2;color:var(--ink)}
.vz-kn{font-size:.8rem;color:var(--ink-3)}
.vz-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);margin-bottom:14px;min-width:0}
.vz-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vz-head h3{margin:0;font-size:1rem}
.vz-sort{width:auto;padding:5px 8px;font-size:.8rem;border-radius:8px}
.vz-sub{margin:4px 0 12px;font-size:.82rem;color:var(--ink-3)}
.vz-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px}
.vz-grid2 .vz-card{margin-bottom:0}
.vz-grid2+h2,.vz-grid2+.ins-h{margin-top:28px}
.vz-empty{color:var(--ink-3);font-size:.9rem;margin:6px 0}
.vz-legend{display:flex;gap:16px;font-size:.8rem;color:var(--ink-2);margin:-4px 0 10px}
.vz-legend span{display:inline-flex;align-items:center;gap:6px}
.vz-key{width:10px;height:10px;border-radius:2px;display:inline-block}
.vz-key.s1{background:var(--vz-s1)}.vz-key.s2{background:var(--vz-s2)}
.vz-bars{display:flex;flex-direction:column;gap:2px}
.vz-row{display:grid;grid-template-columns:minmax(120px,38%) 1fr auto;gap:10px;align-items:center;padding:5px 6px;border-radius:8px;outline:none}
.vz-row:hover,.vz-row:focus-visible{background:var(--surface-2)}
.vz-row.pick{cursor:pointer}
.vz-lab{font-size:.85rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.vz-lab small{display:block;font-size:.72rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
.vz-track{display:flex;gap:2px;height:14px;align-items:stretch;min-width:0}
.vz-seg{display:block;height:100%;min-width:2px}
.vz-seg:last-child{border-radius:0 4px 4px 0}
.vz-seg.s1{background:var(--vz-s1)}.vz-seg.s2{background:var(--vz-s2)}.vz-seg.warn{background:var(--vz-warn)}
.vz-seg.s1.soft{background:color-mix(in srgb,var(--vz-s1) 35%,transparent)}
.vz-row:hover .vz-seg{filter:brightness(1.08)}
.vz-val{font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;text-align:right}
.vz-flag{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:600;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--vz-warn) 22%,transparent);color:var(--ink);white-space:nowrap}
.vz-flag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vz-warn)}
.vz-svg{width:100%;height:auto;display:block;overflow:visible}
.vz-svg .vz-grid{stroke:var(--vz-grid);stroke-width:1}
.vz-svg .vz-axis{stroke:var(--line);stroke-width:1}
.vz-svg .vz-tick{fill:var(--ink-3);font:12px var(--body)}
.vz-svg .vz-fill.s1{fill:var(--vz-s1)}
.vz-svg .vz-hit{fill:transparent}
.vz-svg .vz-col{outline:none;cursor:default}
.vz-svg .vz-col:hover .vz-hit,.vz-svg .vz-col:focus .vz-hit{fill:var(--surface-2)}
.vz-table th button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
.vz-table th button:hover{color:var(--ink)}
.vz-tip{position:fixed;z-index:50;pointer-events:none;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 8px 24px rgba(0,0,0,.14);font-size:.8rem;max-width:280px}
.vz-tl{color:var(--ink-2);line-height:1.5}
.vz-tl b{color:var(--ink);font-variant-numeric:tabular-nums}
.vz-tl.first b{font-size:.95rem}
@media (max-width:640px){.vz-grid2{grid-template-columns:1fr}.vz-row{grid-template-columns:minmax(90px,40%) 1fr auto}}
.vz-table+p{margin-top:8px}
.tablewrap+p.small{margin-top:8px}
button.dlchip{border:0;font:inherit;cursor:pointer}

/* ===== run scaffold (Oct 2026): the frame every step is built inside =====
   Header: the run's name, a chip only when it is not simply active, the deliverable it
   builds, and at most three actions. The strip is a row of arrows whose colour is the
   state. Each step ends in one row: Back on the left, the green button on the right. */
:root{--step-now:#F59E3B;--on-step-now:#161616}
.runhead{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;margin-bottom:14px}
.runhead .runtitle{flex:1 1 520px;min-width:0;display:grid;gap:6px;align-items:start;padding-bottom:0;margin-bottom:0;border-bottom:0}
.runhead .runactions{margin-left:auto;flex-wrap:wrap}
.runactions .btn svg,.rs-actions .btn svg{width:16px;height:16px;flex:none}
.btn.dangerline{background:var(--surface);border-color:var(--bad);color:var(--bad)}
.btn.playbookbtn{background:var(--tpl);border-color:var(--tpl);color:var(--on-tpl)}

/* the strip: each arrow's point sits in the notch of the next */
.runsteps{align-items:center}
.rs-item{height:30px;margin:0 0 0 -11px;padding:0 24px;border:0;border-radius:0;background:var(--surface-2);color:var(--ink-2);font-weight:500;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.rs-item:first-child{margin-left:0;padding-left:14px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}
.rs-item:hover{color:var(--ink);filter:brightness(.96)}
.rs-item.sdone{background:var(--brand-hi);color:var(--on-brand-hi)}
.rs-item.on{background:var(--step-now);color:var(--on-step-now);font-weight:600}
.rs-item.blocked{background:var(--surface-2)}
.rs-item.blocked .rs-name{color:inherit}
/* the arrow shape clips an outline, so focus darkens and underlines instead */
.rs-item:focus-visible{outline:none;filter:brightness(.88);text-decoration:underline;text-underline-offset:3px}
.rs-mark{display:none}

/* the step's last row */
.rs-actions .rs-back{order:-1}
.rs-actions .rs-left{flex:1 1 200px;order:0;text-align:right}
.rs-actions .rs-reopen{order:98;border:0;background:none;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
#runstep{scroll-margin-top:calc(var(--chrome) + var(--crumb-h) + 12px)}

/* the strip: orange is the step to work on, the selected step is underlined, so a
   step you are only looking at is never mistaken for the one to do next */
.rs-item.on{background:var(--surface-2);color:var(--ink);font-weight:600;box-shadow:inset 0 -3px 0 var(--ink)}
.rs-item.sdone,.rs-item.sdone.on{background:var(--brand-hi);color:var(--on-brand-hi)}
.rs-item.next,.rs-item.next.on{background:var(--step-now);color:var(--on-step-now)}

/* the step's state beside its title */
.rs-titlerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rs-state{font-weight:600;white-space:nowrap}
.rs-state.s-done{background:var(--brand-hi);color:var(--on-brand-hi)}
.rs-state.s-current{background:var(--step-now);color:var(--on-step-now)}
.rs-state.s-blocked{background:var(--amber-soft);color:var(--amber)}
.rs-state.s-skipped{background:var(--surface);color:var(--ink-3);border-color:var(--line)}
.rs-state.s-todo{background:var(--surface);color:var(--ink-2);border-color:var(--line)}

/* ===== AI skills: a library of what the app asks a model to do, and where ===== */
.aiview{display:grid;gap:18px}
.ai-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ai-pill{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink-2)}
.ai-pill.ok{color:var(--ink)}.ai-pill.bad{border-color:var(--bad);color:var(--bad)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.ai-pill.ok .ai-dot{background:var(--good)}.ai-pill.bad .ai-dot{background:var(--bad)}
.ai-strip-link{margin-left:auto;font-size:.88rem;color:var(--accent)}
.ai-cards{align-items:stretch}
.ai-card{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink)}
.ai-card:hover{border-color:var(--wire)}
.ai-card h3{margin:0;font-size:1.1rem}
.ai-cardtop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ai-model{font-family:var(--mono);font-size:.72rem;color:var(--ink-3)}
.ai-desc{margin:0;color:var(--ink-2);font-size:.9rem;line-height:1.5}
.ai-where{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.ai-whererow{display:grid;gap:1px;font-size:.86rem;line-height:1.4}
.ai-whererow span{color:var(--ink-2)}
.ai-cardfoot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ai-unset{border:1px dashed var(--line);border-radius:10px;padding:12px 14px;background:var(--surface)}
.ai-unset summary{cursor:pointer}
.ai-unsetlist{display:grid;gap:8px;margin-top:10px}
.ai-detail .ai-title{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:700;width:100%;border:0;background:none;color:var(--ink);padding:0;margin:4px 0 8px}
.ai-detail .ai-title:focus{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.ai-stats{display:flex;flex-wrap:wrap;gap:6px}
.ai-cols{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.ai-main{flex:999 1 560px;min-width:0;display:grid;gap:18px}
.ai-side{flex:1 1 280px;min-width:0;display:grid;gap:18px}
.ai-block{display:grid;gap:12px}
.ai-h{font-family:var(--display);font-size:1.1rem;margin:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.ai-h small{font-family:var(--body);font-size:.85rem;font-weight:400;color:var(--ink-3)}
.ai-sec{display:grid;gap:10px}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.ai-field{display:grid;gap:5px;min-width:0}
.ai-field input,.ai-field select,.ai-field textarea,.ai-add select{width:100%;min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:.92rem}
.ai-field textarea{resize:vertical;line-height:1.5}
.ai-field textarea.mono,.ai-out{font-family:var(--mono);font-size:.8rem}
.ai-use{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.ai-usehead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:.92rem}
.ai-add{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.ai-money{display:flex;align-items:center;gap:6px}
.ai-money input{max-width:120px}
.ai-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.92rem}
.ai-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.ai-statline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-testrow{display:flex;align-items:center;gap:10px}
.ai-out{margin:0;padding:12px;border-radius:9px;background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.ai-calllist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.84rem}
.ai-calllist li{display:grid;grid-template-columns:auto 1fr auto;white-space:nowrap;gap:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ai-calls{width:100%;border-collapse:collapse;font-size:.85rem}
.ai-calls th,.ai-calls td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.ai-calls th{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:var(--surface-2)}
.ai-calls .num{text-align:right;font-variant-numeric:tabular-nums}

/* ===== the step frame: name above, the work in a card, the buttons below =====
   The header and the buttons sit on the page, so the card holds nothing but the step's
   own work. What is left to do sits between Back and the green button, where the gate is. */
.runstep{padding:0;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0;display:grid;gap:14px;margin-top:6px}
.runstep > :not(.rs-top){margin-left:0;margin-right:0}
.runstep > :last-child{margin-bottom:0}
.runstep .rs-top{padding:4px 2px 0;background:none;border:0;border-radius:0;gap:4px}
.runstep .rs-top h2{font-size:1.5rem}
.rs-body{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;padding:20px}
.rs-body:not(:has(*)){display:none}
.runstep > .rs-actions{border-top:0;padding:0 2px}
.rs-actions .rs-left{text-align:center}
@media (max-width:640px){.rs-actions .rs-left{flex-basis:100%;order:-2;text-align:left}}

/* the picture role switch: three choices, one sliding thumb */
.im-seg{position:relative;display:inline-grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);min-width:330px}
.im-seg::before{content:'';position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 2px rgba(22,22,22,.12);transform:translateX(calc(var(--i, 0) * 100%));transition:transform .2s ease,opacity .15s ease}
.im-seg.none::before{opacity:0}
.im-seg.ask{border-color:var(--amber);background:var(--amber-soft)}
.im-seg button{position:relative;z-index:1;min-height:36px;padding:0 12px;border:0;background:none;border-radius:8px;font:inherit;font-size:.84rem;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.im-seg button:hover{color:var(--ink)}
.im-seg button[aria-checked="true"]{color:var(--ink);font-weight:600}
.im-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.im-seg::before{transition:none}}
@media (max-width:640px){.im-seg{min-width:0;width:100%}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .im-seg::before{background:#303030;border-color:#3a3a3a}}
:root[data-theme="dark"] .im-seg::before{background:#303030;border-color:#3a3a3a}
/* a closed picture row is the thumbnail, the file name and the role switch; the rest opens with it */
.im-line{align-items:center}
.im-facts{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:.86rem;color:var(--ink-2)}
/* the chosen role stands apart: an ink thumb with light text, inverted in dark mode */
.im-seg::before,:root .im-seg::before{background:var(--ink);border-color:var(--ink);box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .im-seg::before{background:var(--ink);border-color:var(--ink)}}
:root[data-theme="dark"] .im-seg::before{background:var(--ink);border-color:var(--ink)}
.im-seg button[aria-checked="true"]{color:var(--bg);transition:color .2s ease}
/* the picture's folder above its file name */
.im-line .im-file{display:grid;gap:1px;min-width:0}
.im-dir{font-family:var(--mono);font-size:.74rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
.im-line .im-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* canvas header: name text starts flush with the description text */
.ovl-title.bare .titlein.titlein{margin-left:0;padding-left:7px}
.ovl-title.bare .wftitle{padding-left:7px}
.ovl-title.bare .wfpurpose{padding-left:7px}

/* ---------- product credit ---------- */
.credit{padding:8px 20px 36px;text-align:center;font-size:.8rem;color:var(--ink-3)}
.credit a,.gate-credit a{color:var(--ink-2);font-weight:600;text-decoration:none}
.credit a:hover,.gate-credit a:hover{color:var(--accent);text-decoration:underline}
body.canvas-mode .credit,body.fitpage .credit,body.gridpage .credit,body.gated .credit{display:none}
.gate-credit{width:100%;margin-top:14px!important;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-3);text-align:center}
.kact .chip+.chip{margin-left:6px}