/* onboarding-architecture: page styles (spacing scale 4/8/12/16/24/32) */
main .small{font-size:12px;line-height:1.55;}
/* inline glossary terms: taller hit box on touch without shifting the line box */
@media(max-width:640px){main .gloss-link,.sidepath a{padding-block:9px !important;margin-block:-9px !important;}}
.toc{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px;}
.toc a{display:inline-flex;align-items:center;min-height:32px;font-size:12.5px;border:1px solid var(--line);border-radius:16px;padding:4px 14px;text-decoration:none;color:var(--body-ink);background:var(--card-bg);}
.toc a:hover,.toc a:focus-visible{border-color:var(--accent2);color:var(--teal);}
h2.sec{margin:32px 0 8px;font-size:20px;line-height:1.3;scroll-margin-top:16px;}
.secnote{font-size:13.5px;color:var(--muted);margin:0 0 16px;max-width:820px;line-height:1.6;}
.zen.sx-f8ec4b5{padding:24px !important;}
@media(max-width:640px){.zen.sx-f8ec4b5{padding:12px !important;}}

/* ---- 1 · channel flows: fixed 4-step grid so every lane's steps align column-for-column ---- */
.lane{border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 16px;background:var(--card-bg);}
.lane:last-child{margin-bottom:0;}
.lane h3{margin:0 0 4px;font-size:15px;}
.lane .who{font-size:12.5px;color:var(--muted);margin:0 0 12px;line-height:1.5;}
.flow{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:stretch;margin:0;}
.flow + .flow{margin-top:12px;}
.fstep{border:1px solid var(--line);border-radius:10px;background:var(--panel2);padding:12px;font-size:12.5px;line-height:1.5;min-width:0;}
.fstep b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px;}
.fstep code{overflow-wrap:anywhere;font-size:12px;}
[data-theme="zen-cosmic"] .fstep .tier{color:#04201c;}
.fstep .tier{display:block;width:max-content;font-size:11px;font-weight:bold;line-height:1.6;border-radius:9px;padding:0 8px;color:#fff;background:var(--teal);margin:6px 0 0;white-space:nowrap;}
.farr{align-self:center;justify-self:center;color:var(--muted);font-size:16px;line-height:1;}
.lane > .small{margin-top:12px !important;}

/* ---- 2 · trust ladder + two-gate rule ---- */
.ladder{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 24px;}
@media(min-width:640px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:960px){.ladder{grid-template-columns:repeat(4,minmax(0,1fr));}}
.rung{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:var(--panel2);font-size:12.5px;line-height:1.5;}
.rung > b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px;}
.rung .unlock{display:block;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line);font-size:12px;}
.rung > b + *{margin-bottom:8px;}
.rung .unlock b{color:var(--ink);margin-right:4px;}
.gates{display:grid;grid-template-columns:minmax(0,.8fr) 24px minmax(0,1.15fr) 40px minmax(0,1.15fr) 24px minmax(0,.9fr);align-items:stretch;margin:0 0 12px;}
.gates > .farr,.gates > .gateop{align-self:center;justify-self:center;}
.gate{border:2px solid var(--accent2);border-radius:12px;padding:12px 16px;font-size:12.5px;background:rgba(14,165,164,.06);line-height:1.5;min-width:0;}
.gate code{overflow-wrap:anywhere;}
.gate.legal{border-color:#8a63d2;background:rgba(138,99,210,.07);}
.gate b{display:block;margin-bottom:4px;}
.gateop{font-weight:bold;font-size:12px;letter-spacing:.08em;color:var(--muted);}
.fstep.gend{align-self:center;}

/* ---- 3 · collision state machine ---- */
.sm{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:0 12px;margin:0 0 16px;}
.state{border:2px solid var(--accent2);border-radius:22px;padding:8px 20px;font-weight:bold;font-size:13px;letter-spacing:.04em;background:var(--panel2);color:var(--ink);text-align:center;white-space:nowrap;}
.state.terminal{border-style:double;border-width:4px;}
.smarr{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;color:var(--muted);min-width:0;}
.smarr small{font-size:12px;line-height:1.4;}
.smarr .ev{font-size:11.5px;color:var(--teal);}
.smarr .ar{position:relative;display:block;width:100%;height:2px;background:var(--muted);opacity:.45;}
.smarr .ar::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:8px solid var(--muted);border-right:0;}
.smres{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);font-size:12.5px;line-height:1.5;}
.smres > b{color:var(--ink);margin-right:4px;}
.smres .res{border:1px solid var(--line);border-radius:10px;padding:4px 10px;background:var(--card-bg);}
.smres .res b{font-family:ui-monospace,Menlo,monospace;color:var(--teal);margin-right:4px;}
.sidepath{border:1px dashed rgba(180,83,9,.55);background:rgba(180,83,9,.06);border-radius:12px;padding:12px 16px;font-size:12.5px;line-height:1.55;margin:0 0 12px;}
.sidepath:last-child{margin-bottom:0;}

/* ---- 4 · schema tables: scroll inside their own frame, with edge-shadow affordance ---- */
.tbl{margin:0 0 24px;}
.tbl:last-child{margin-bottom:0;}
.tbl h4{margin:0 0 4px;font-size:14px;}
.tbl h4 code{font-size:13px;}
.tbl .purpose{font-size:12.5px;color:var(--muted);margin:0 0 8px;line-height:1.5;}
[data-theme="zen-cosmic"] .tscroll{--tbg:#151826;}
[data-theme="zen-cosmic"] .tscroll .badge{background-clip:padding-box;}
/* --tbg: solid frame colour (theme --card-bg is a gradient in zen-cosmic, unusable as a gradient stop) */
.tscroll{--tbg:#fff;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px;
  background:
    linear-gradient(to right,var(--tbg) 30%,transparent) left center / 40px 100% no-repeat local,
    linear-gradient(to left,var(--tbg) 30%,transparent) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(15,40,50,.18),transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(15,40,50,.18),transparent) right center / 12px 100% no-repeat scroll,
    var(--tbg);}
.tscroll:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;}
.schema{width:100%;border-collapse:collapse;font-size:12px;}
.schema thead th{text-align:left;padding:8px 12px;border-bottom:2px solid var(--accent2);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);white-space:nowrap;background:var(--panel2);}
.schema td{padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;font-family:ui-monospace,Menlo,monospace;font-size:12px;vertical-align:top;}
.schema td.wr{white-space:normal;font-family:inherit;min-width:220px;}
.schema tr:last-child td{border-bottom:0;}
.schema .hl td{background:rgba(14,165,164,.08);}
.pill-ev{display:inline-block;border:1px solid var(--line);border-radius:11px;padding:2px 10px;margin:2px 4px 2px 0;font-size:12px;font-family:ui-monospace,Menlo,monospace;background:var(--card-bg);white-space:nowrap;}
.tbl > .small{margin-top:8px !important;}

/* ---- 6 · storylines ---- */
.story{border:1px solid var(--line);border-left:4px solid var(--accent2);border-radius:12px;padding:16px;margin:0 0 12px;font-size:13.5px;line-height:1.65;background:var(--card-bg);}
.story b.t{display:block;font-size:14.5px;margin-bottom:4px;}

/* ---- tablets / phones: diagrams reflow to a vertical stack, arrows point down ---- */
@media(max-width:860px){
  .flow,.gates{grid-template-columns:minmax(0,1fr);}
  .farr,.gates > .gateop{padding:4px 0;}
  .farr{transform:rotate(90deg);}
  .fstep.gend{align-self:stretch;}
  .flow + .flow{margin-top:24px;}
}
@media(max-width:720px){
  .sm{grid-template-columns:minmax(0,1fr);justify-items:center;gap:8px;}
  .smarr{max-width:280px;}
  .smarr .ar{width:2px;height:20px;}
  .smarr .ar::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:8px solid var(--muted);border-bottom:0;}
}
@media(max-width:640px){
  .lane{padding:12px;}
  h2.sec{font-size:18px;}
}

/* converted from inline style attributes (CSP: style-src 'self') */
.sx-9e3c4cc{margin-top:6px !important}
.sx-c23110a{max-width:800px !important}
.sx-f8ec4b5{padding:16px 18px !important}
.sx-0f9ed71{margin:6px 0 0 !important}
.sx-b112164{margin:4px 0 0 !important}
.sx-74a71cc{border-color:rgba(14,165,164,.5) !important;background:rgba(14,165,164,.06) !important}
.sx-5371db1{margin-top:10px !important}
.sx-4b54252{margin:14px 0 0 !important}