:root{ --paper:#F1F0EB; --panel:#FBFAF7; --ink:#182226; --ink-soft:#4A585F;
    --rule:#D6D2C8; --amber:#B26A14;
    --shadow:0 1px 2px rgba(24,34,38,.06),0 4px 16px rgba(24,34,38,.05); }
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
    --paper:#0F171B; --panel:#161F25; --ink:#E9E7E1; --ink-soft:#A7B3B8;
    --rule:#2C3A42; --amber:#E0A650; }}
  :root[data-theme="dark"]{
    --paper:#0F171B; --panel:#161F25; --ink:#E9E7E1; --ink-soft:#A7B3B8;
    --rule:#2C3A42; --amber:#E0A650; }
  *{box-sizing:border-box}
  body{background:var(--paper); color:var(--ink); margin:0;
    padding:clamp(22px,4vw,60px) clamp(14px,4vw,36px) 96px;
    font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .wrap{max-width:1080px; margin:0 auto; display:flex; flex-direction:column; gap:40px}
  .eyebrow{font:600 12px/1 ui-monospace,Menlo,monospace; letter-spacing:.14em;
    text-transform:uppercase; color:var(--amber); margin:0 0 14px}
  h1{font:400 clamp(30px,4.6vw,48px)/1.08 Georgia,ui-serif,serif; margin:0 0 14px; max-width:20ch}
  .thesis{font-size:17px; color:var(--ink-soft); max-width:62ch; margin:0}
  h2{font:400 clamp(21px,2.8vw,26px)/1.2 Georgia,ui-serif,serif; margin:0 0 6px}
  .lede{margin:0 0 16px; color:var(--ink-soft); max-width:66ch; font-size:15px}
  figure{margin:0; background:var(--panel); border:1px solid var(--rule); border-radius:3px;
    padding:16px; box-shadow:var(--shadow); overflow-x:auto}
  figcaption{margin-top:14px; padding-top:14px; border-top:1px solid var(--rule);
    font-size:14.5px; color:var(--ink-soft)}
  .keys{display:flex; flex-wrap:wrap; gap:10px 20px; font:500 14px/1.3 ui-monospace,Menlo,monospace;
    color:var(--ink-soft); margin:0 0 14px}
  .k{display:inline-flex; align-items:center; gap:6px}
  .k i{width:17px; height:17px; border-radius:2px; border:1.5px solid; display:inline-block}
  details{background:var(--panel); border:1px solid var(--rule); border-radius:3px;
    box-shadow:var(--shadow); margin-bottom:10px}
  summary{cursor:pointer; padding:17px 20px; font:600 16.5px/1.4 system-ui,sans-serif;
    display:flex; align-items:baseline; gap:10px; list-style:none}
  summary::-webkit-details-marker{display:none}
  summary::before{content:"▸"; color:var(--amber); font-size:13px; flex:none}
  details[open] summary::before{content:"▾"}
  summary small{font:400 12.5px/1.4 system-ui,sans-serif; color:var(--ink-soft)}
  .steps{margin:0; padding:2px 16px 14px 38px; display:flex; flex-direction:column; gap:8px}
  .steps li{font-size:14.5px; line-height:1.5; color:var(--ink-soft)}
  .steps b{color:var(--ink); font-weight:600}
  .t{display:inline-block; padding:3px 9px; border-radius:2px; margin-right:7px;
    font:700 11.5px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.05em; border:1px solid}
  .t-ship{background:#DCEBE1; border-color:#2C6B45; color:#1F4A30}
  .t-wire{background:#D9E9ED; border-color:#1F6B7E; color:#14454F}
  .t-build{background:#F5E3C8; border-color:#B26A14; color:#7A4A0E}
  .t-block{background:#F6E2E0; border-color:#9E3B34; color:#7E2F29}
  .t-decide{background:#E6DFF0; border-color:#5B4B7E; color:#3E3358}
  .t-ai{background:none; border-color:#5B4B7E; color:#5B4B7E}
  .t-ocr{background:none; border-color:#1F6B7E; color:#1F6B7E}
  .t-stt{background:none; border-color:#8A5A18; color:#8A5A18}
  .t-rule{background:none; border-color:#8A959A; color:#8A959A}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .t-ship{background:#152B1F;color:#7FC79C;border-color:#4E9A6C}
    :root:not([data-theme="light"]) .t-wire{background:#143038;color:#8FCBDC;border-color:#4795AC}
    :root:not([data-theme="light"]) .t-build{background:#3A2A0E;color:#E5BC72;border-color:#B4832F}
    :root:not([data-theme="light"]) .t-block{background:#341A18;color:#EE9B93;border-color:#C0605A}
    :root:not([data-theme="light"]) .t-decide{background:#2A2338;color:#C9B8E4;border-color:#8B77B0}
    :root:not([data-theme="light"]) .t-ai{color:#C9B8E4;border-color:#8B77B0}
    :root:not([data-theme="light"]) .t-ocr{color:#8FCBDC;border-color:#4795AC}
    :root:not([data-theme="light"]) .t-stt{color:#E5BC72;border-color:#B4832F}}
  :root[data-theme="dark"] .t-ship{background:#152B1F;color:#7FC79C;border-color:#4E9A6C}
  :root[data-theme="dark"] .t-wire{background:#143038;color:#8FCBDC;border-color:#4795AC}
  :root[data-theme="dark"] .t-build{background:#3A2A0E;color:#E5BC72;border-color:#B4832F}
  :root[data-theme="dark"] .t-block{background:#341A18;color:#EE9B93;border-color:#C0605A}
  :root[data-theme="dark"] .t-decide{background:#2A2338;color:#C9B8E4;border-color:#8B77B0}
  :root[data-theme="dark"] .t-ai{color:#C9B8E4;border-color:#8B77B0}
  :root[data-theme="dark"] .t-ocr{color:#8FCBDC;border-color:#4795AC}
  :root[data-theme="dark"] .t-stt{color:#E5BC72;border-color:#B4832F}
  .abs{overflow-x:auto; border:1px solid var(--rule); border-radius:3px; box-shadow:var(--shadow); background:var(--panel)}
  .abs table{border-collapse:collapse; width:100%; min-width:900px; font-size:13px}
  .abs th{background:#EBE9E2; text-align:left; padding:10px; font:700 11.5px/1.3 system-ui,sans-serif;
    border-bottom:2px solid var(--rule)}
  .abs td{padding:9px 10px; border-bottom:1px solid var(--rule); vertical-align:top; line-height:1.5}
  .abs td:first-child{font-weight:600}
  .abs small{display:block; color:var(--ink-soft); font-weight:400; margin-top:2px}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .abs th{background:#1B262C}}
  :root[data-theme="dark"] .abs th{background:#1B262C}
  .btn{display:inline-flex; align-items:center; gap:10px; margin-top:14px; padding:14px 24px;
    border-radius:3px; border:1.5px solid var(--amber); color:var(--amber); background:none;
    font:700 15px/1 ui-monospace,Menlo,monospace; letter-spacing:.05em; text-decoration:none; cursor:pointer}
  .btn:hover{background:rgba(178,106,20,.09)}
  .mock{border:1px solid var(--rule); border-radius:6px; overflow:hidden; box-shadow:var(--shadow); background:var(--panel)}
  .mock-bar{display:flex; align-items:center; gap:6px; padding:9px 14px; background:#EBE9E2; border-bottom:1px solid var(--rule)}
  .mock-bar i{width:10px;height:10px;border-radius:50%;background:#C9C4B8;display:inline-block}
  .mock-bar span{margin-left:10px; font:600 11.5px/1 ui-monospace,Menlo,monospace; color:#8A959A}
  .mock-head{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 18px; border-bottom:1px solid var(--rule)}
  .mock-head h3{margin:0; font:700 16px/1.3 system-ui,sans-serif}
  .pill{padding:3px 9px; border-radius:20px; font:700 11px/1.4 system-ui,sans-serif; border:1px solid}
  .pill.ok{background:#DCEBE1;border-color:#2C6B45;color:#1F4A30}
  .pill.warn{background:#F5E3C8;border-color:#B26A14;color:#7A4A0E}
  .pill.dup{background:#E6DFF0;border-color:#5B4B7E;color:#3E3358}
  .mock-body{display:grid; grid-template-columns:230px 1fr 1fr; min-height:340px}
  .mock-list{border-right:1px solid var(--rule); overflow:hidden}
  .mli{display:flex; justify-content:space-between; align-items:center; gap:6px; padding:9px 12px;
    border-bottom:1px solid var(--rule); font:500 12px/1.3 system-ui,sans-serif; color:var(--ink-soft)}
  .mli.sel{background:rgba(178,106,20,.10); border-left:3px solid var(--amber); font-weight:700; color:var(--ink)}
  .mock-scan{border-right:1px solid var(--rule); padding:16px; display:flex; flex-direction:column; gap:8px}
  .mock-scan h4, .mock-fields h4{margin:0 0 6px; font:700 10.5px/1 ui-monospace,Menlo,monospace;
    letter-spacing:.1em; color:#8A959A}
  .scanpage{flex:1; border:1px solid var(--rule); border-radius:3px; background:#FDFCF9; position:relative; min-height:220px}
  .scanpage svg{width:100%; height:100%; position:absolute; inset:0}
  .mock-fields{padding:16px; display:flex; flex-direction:column; gap:9px}
  .fld{display:flex; flex-direction:column; gap:3px}
  .fld label{font:600 10.5px/1 ui-monospace,Menlo,monospace; letter-spacing:.08em; color:#8A959A}
  .fld .v{border:1px solid var(--rule); border-radius:3px; padding:7px 10px; font-size:13px; background:rgba(255,255,255,.5)}
  .fld.bad .v{border-color:#B26A14; background:#F5E3C8; color:#4A2D06; font-weight:600}
  .fld .conf{font:600 10px/1 ui-monospace,Menlo,monospace; color:#8A959A; align-self:flex-end}
  .fld.bad .conf{color:#B26A14}
  .mock-actions{display:flex; flex-wrap:wrap; gap:10px; padding:14px 18px; border-top:1px solid var(--rule); align-items:center}
  .mb{padding:9px 16px; border-radius:3px; font:700 12.5px/1 system-ui,sans-serif; border:1.5px solid; cursor:default}
  .mb.primary{background:#2C6B45; border-color:#2C6B45; color:#fff}
  .mb.ghost{background:none; border-color:var(--rule); color:var(--ink-soft)}
  .mb.back{background:none; border-color:#9E3B34; color:#9E3B34}
  .mock-foot{padding:10px 18px 16px; font:500 11.5px/1.5 system-ui,sans-serif; color:var(--ink-soft)}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mock-bar{background:#1B262C}
    :root:not([data-theme="light"]) .scanpage{background:#F4F1E8}
    :root:not([data-theme="light"]) .fld .v{background:rgba(255,255,255,.04)}}
  :root[data-theme="dark"] .mock-bar{background:#1B262C}
  :root[data-theme="dark"] .scanpage{background:#F4F1E8}
  :root[data-theme="dark"] .fld .v{background:rgba(255,255,255,.04)}
  @media (max-width:900px){.mock-body{grid-template-columns:1fr} .mock-list{display:none}}


/* ===== chart theming — colours live HERE, not in the .mmd files ===== */
:root{
  --ch-hum-bg:#E9E7E0; --ch-hum-b:#4A585F; --ch-hum-t:#182226;
  --ch-bad-bg:#F6E2E0; --ch-bad-b:#9E3B34; --ch-bad-t:#7E2F29;
  --ch-gate-bg:#C9E5D2; --ch-gate-b:#2C6B45; --ch-gate-t:#153722;
  --ch-trig-bg:#F0C987; --ch-trig-b:#8A5410; --ch-trig-t:#4A2D06;
  --ch-auto-bg:#BFDDE5; --ch-auto-b:#186478; --ch-auto-t:#0E3D4A;
  --ch-rev-bg:#D8CBEA; --ch-rev-b:#5B4B7E; --ch-rev-t:#322850;
  --ch-edge:#5A6B73; --ch-cluster:#9A948A;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ch-hum-bg:#242F36; --ch-hum-b:#7E8F98; --ch-hum-t:#E9E7E1;
  --ch-bad-bg:#3A1E1B; --ch-bad-b:#C0605A; --ch-bad-t:#F0A29B;
  --ch-gate-bg:#16311F; --ch-gate-b:#4E9A6C; --ch-gate-t:#9BD8B1;
  --ch-trig-bg:#453110; --ch-trig-b:#D9A155; --ch-trig-t:#F2CB8A;
  --ch-auto-bg:#14333D; --ch-auto-b:#4795AC; --ch-auto-t:#A5D6E4;
  --ch-rev-bg:#2E2540; --ch-rev-b:#8B77B0; --ch-rev-t:#D4C6EC;
  --ch-edge:#8FA0A8; --ch-cluster:#7E8A90;
}}
:root[data-theme="dark"]{
  --ch-hum-bg:#242F36; --ch-hum-b:#7E8F98; --ch-hum-t:#E9E7E1;
  --ch-bad-bg:#3A1E1B; --ch-bad-b:#C0605A; --ch-bad-t:#F0A29B;
  --ch-gate-bg:#16311F; --ch-gate-b:#4E9A6C; --ch-gate-t:#9BD8B1;
  --ch-trig-bg:#453110; --ch-trig-b:#D9A155; --ch-trig-t:#F2CB8A;
  --ch-auto-bg:#14333D; --ch-auto-b:#4795AC; --ch-auto-t:#A5D6E4;
  --ch-rev-bg:#2E2540; --ch-rev-b:#8B77B0; --ch-rev-t:#D4C6EC;
  --ch-edge:#8FA0A8; --ch-cluster:#7E8A90;
}

/* nodes: rects and decision diamonds */
.mermaid .hum  rect, .mermaid .hum  polygon{fill:var(--ch-hum-bg)!important;  stroke:var(--ch-hum-b)!important;  stroke-width:1.6px!important}
.mermaid .bad  rect, .mermaid .bad  polygon{fill:var(--ch-bad-bg)!important;  stroke:var(--ch-bad-b)!important;  stroke-width:1.6px!important}
.mermaid .gate rect, .mermaid .gate polygon{fill:var(--ch-gate-bg)!important; stroke:var(--ch-gate-b)!important; stroke-width:2.2px!important}
.mermaid .trig rect, .mermaid .trig polygon{fill:var(--ch-trig-bg)!important; stroke:var(--ch-trig-b)!important; stroke-width:2px!important}
.mermaid .auto rect, .mermaid .auto polygon{fill:var(--ch-auto-bg)!important; stroke:var(--ch-auto-b)!important; stroke-width:1.6px!important}
.mermaid .rev  rect, .mermaid .rev  polygon{fill:var(--ch-rev-bg)!important;  stroke:var(--ch-rev-b)!important;  stroke-width:1.6px!important}
.mermaid .hum  .nodeLabel, .mermaid .hum  .nodeLabel p{color:var(--ch-hum-t)!important}
.mermaid .bad  .nodeLabel, .mermaid .bad  .nodeLabel p{color:var(--ch-bad-t)!important}
.mermaid .gate .nodeLabel, .mermaid .gate .nodeLabel p{color:var(--ch-gate-t)!important}
.mermaid .trig .nodeLabel, .mermaid .trig .nodeLabel p{color:var(--ch-trig-t)!important; font-weight:700}
.mermaid .auto .nodeLabel, .mermaid .auto .nodeLabel p{color:var(--ch-auto-t)!important}
.mermaid .rev  .nodeLabel, .mermaid .rev  .nodeLabel p{color:var(--ch-rev-t)!important}
/* the note/phase classes */
.mermaid .note rect{fill:none!important; stroke:var(--rule)!important}
.mermaid .note .nodeLabel{color:var(--ink-faint)!important}

/* edges, arrowheads, edge labels */
.mermaid .flowchart-link, .mermaid .edgePath path{stroke:var(--ch-edge)!important; stroke-width:1.8px!important}
.mermaid marker path{fill:var(--ch-edge)!important; stroke:var(--ch-edge)!important}
.mermaid .edgeLabel, .mermaid .edgeLabel p, .mermaid .edgeLabel span{background:var(--panel)!important; color:var(--ink)!important}
.mermaid .edgeLabel rect{fill:var(--panel)!important}

/* clusters (phase frames) */
.mermaid .cluster rect{fill:transparent!important; stroke:var(--ch-cluster)!important; stroke-dasharray:4 4}
.mermaid .cluster-label .nodeLabel, .mermaid .cluster-label span{color:var(--ch-cluster)!important; font-weight:700}

/* the node tooltip — was pale-on-pale and illegible */
.mermaidTooltip{background:var(--panel)!important; color:var(--ink)!important;
  border:1.5px solid var(--ch-trig-b)!important; border-radius:3px!important;
  font:600 13.5px/1.4 system-ui,sans-serif!important; padding:8px 12px!important;
  max-width:280px!important; box-shadow:0 4px 16px rgba(0,0,0,.25)!important}

/* clickable chart nodes announce themselves */
.mermaid a .nodeLabel::after{content:" 🔍"; font-size:.85em; opacity:.85}
.mermaid a:hover rect, .mermaid a:hover polygon{filter:brightness(1.12)}
/* prominent preview row */
.preview-row{display:flex; flex-wrap:wrap; gap:12px; margin:16px 0 4px}
.preview-row a{display:flex; align-items:center; gap:12px; text-decoration:none;
  border:2px solid var(--ch-trig-b); border-radius:4px; background:var(--panel); color:var(--ink);
  padding:16px 22px; font:600 15.5px/1.3 system-ui,sans-serif; min-width:260px}
.preview-row a:hover{background:var(--ch-trig-bg)}
.preview-row .big{font-size:26px}
.preview-row small{display:block; font:500 12.5px/1.4 system-ui,sans-serif; color:var(--ink-soft)}

/* ===== v2: fixed top nav (pages opt in with <body data-nav>) ===== */
.snav{position:fixed; top:0; left:0; right:0; z-index:40; background:var(--panel);
  border-bottom:1px solid var(--rule); box-shadow:var(--shadow)}
.snav-row{max-width:1080px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:2px 20px; padding:12px clamp(14px,4vw,36px);
  font:600 13px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.04em}
.snav-link{color:var(--ink-soft); text-decoration:none; padding:2px 1px}
.snav-link:hover{color:var(--amber)}
.snav-current{color:var(--amber); border-bottom:2px solid var(--amber)}
.snav-group{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px; color:var(--ink-soft)}
.snav-glabel{opacity:.75}
body.snav-on{padding-top:72px}
@media (max-width:700px){body.snav-on{padding-top:100px}}

/* ===== v2: right-side drawer ===== */
.dw-scrim{position:fixed; inset:0; z-index:50; background:rgba(10,16,20,.55);
  opacity:0; pointer-events:none; transition:opacity .18s ease}
.dw-scrim.open{opacity:1; pointer-events:auto}
.dw{position:fixed; top:50%; left:50%; z-index:60;
  width:min(1140px,94vw); max-height:90vh;
  background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 16px 56px rgba(0,0,0,.35); display:flex; flex-direction:column;
  visibility:hidden; opacity:0; transform:translate(-50%,-48%) scale(.98);
  transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s}
.dw.open{visibility:visible; opacity:1; transform:translate(-50%,-50%) scale(1);
  transition:opacity .16s ease, transform .16s ease}
@media (max-width:700px){.dw{width:100vw; max-height:100vh; top:0; left:0; transform:none; border-radius:0}
  .dw.open{transform:none}}
@media (prefers-reduced-motion:reduce){.dw,.dw.open,.dw-scrim{transition:none}}
.dw-head{flex:none; display:flex; align-items:flex-start; gap:12px;
  padding:18px 20px 14px; border-bottom:1px solid var(--rule)}
.dw-headcol{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.dw-title{margin:0; font:400 21px/1.25 Georgia,ui-serif,serif; overflow-wrap:break-word; max-width:100%}
.dw-close{flex:none; width:34px; height:34px; border:1px solid var(--rule); border-radius:3px;
  background:none; color:var(--ink-soft); font:400 22px/1 system-ui,sans-serif; cursor:pointer}
.dw-close:hover{color:var(--amber); border-color:var(--amber)}
.dw-body{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 20px 44px}
.dw-sec{margin:0 0 24px}
.dw-sec:last-child{margin-bottom:0}
.dw-h{margin:0 0 9px; font:700 10.5px/1 ui-monospace,Menlo,monospace;
  letter-spacing:.12em; color:var(--ink-soft)}
.dw-kind{display:inline-block; padding:3px 9px; border-radius:2px; border:1.5px solid var(--rule);
  font:700 10.5px/1.5 ui-monospace,Menlo,monospace; letter-spacing:.08em; color:var(--ink-soft)}
.dw-kind-human{background:var(--ch-hum-bg); border-color:var(--ch-hum-b); color:var(--ch-hum-t)}
.dw-kind-auto{background:var(--ch-auto-bg); border-color:var(--ch-auto-b); color:var(--ch-auto-t)}
.dw-kind-trigger{background:var(--ch-trig-bg); border-color:var(--ch-trig-b); color:var(--ch-trig-t)}
.dw-kind-gate{background:var(--ch-gate-bg); border-color:var(--ch-gate-b); color:var(--ch-gate-t)}
.dw-kind-review{background:var(--ch-rev-bg); border-color:var(--ch-rev-b); color:var(--ch-rev-t)}
.dw-kind-pain{background:var(--ch-bad-bg); border-color:var(--ch-bad-b); color:var(--ch-bad-t)}
.dw-kind-system{background:var(--ch-hum-bg); border-color:var(--ch-hum-b); color:var(--ch-hum-t)}
.dw-people{display:flex; flex-wrap:wrap; gap:0}
.dw-chip{display:inline-block; padding:4px 12px; border-radius:20px; border:1px solid var(--rule);
  background:var(--paper); font:600 12.5px/1.4 system-ui,sans-serif; color:var(--ink);
  margin:0 7px 7px 0}
.dw-does{margin:0 0 10px; font-size:14.5px; line-height:1.6; color:var(--ink)}
.dw-does:last-child{margin-bottom:0}
.dw .steps{padding:0 0 0 22px}
.dw-fig{margin:0 0 14px; border:1px solid var(--rule); border-radius:3px; overflow:hidden;
  background:var(--paper)}
.dw-img{display:block; width:100%; max-width:100%; height:auto}
.dw-cap{padding:8px 11px; font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  border-top:1px solid var(--rule)}
.dw-screen{border:1px solid var(--rule); border-radius:3px; padding:12px; margin:0 0 14px;
  overflow-x:auto; background:var(--paper)}
.dw-quote{margin:0 0 14px; padding:10px 14px; border-left:3px solid var(--amber);
  background:var(--paper); font:italic 400 14.5px/1.55 Georgia,ui-serif,serif; color:var(--ink)}
.dw-cite{display:block; margin-top:7px; font:600 11.5px/1 ui-monospace,Menlo,monospace;
  font-style:normal; color:var(--ink-soft)}
.dw-decide{display:flex; align-items:flex-start; gap:9px; margin:0 0 11px;
  font-size:14px; line-height:1.55; color:var(--ink)}
.dw-decide .t{flex:none}
.dw-gap{margin:0 0 10px; font:italic 400 14.5px/1.55 Georgia,ui-serif,serif; color:var(--amber)}

.dw-mockflag{border:1.5px dashed var(--ch-trig-b); border-radius:3px; background:var(--ch-trig-bg);
  color:var(--ch-trig-t); font:600 12.5px/1.5 system-ui,sans-serif; padding:9px 12px; margin:0 0 10px}