/* Bodhi Platform docs — shared design system */
:root{
  color-scheme: light;
  --bg:#eef1f6; --surface:#ffffff; --surface-2:#f4f6fa; --surface-3:#eaeef4;
  --ink:#16202e; --muted:#586a7f; --faint:#8493a6; --line:#dde4ee;
  --accent:#2f6df0;
  --c1:#2f6df0; --c1-bg:rgba(47,109,240,.10); --c1-line:rgba(47,109,240,.32);
  --c2:#128a63; --c2-bg:rgba(18,138,99,.10); --c2-line:rgba(18,138,99,.32);
  --c3:#c9781f; --c3-bg:rgba(201,120,31,.12); --c3-line:rgba(201,120,31,.34);
  --store:#7b52d6; --store-bg:rgba(123,82,214,.10);
  --shadow:0 1px 2px rgba(18,32,52,.06), 0 8px 24px rgba(18,32,52,.06);
  --radius:14px;
  --display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0b1017; --surface:#131c29; --surface-2:#0f1826; --surface-3:#1a2637;
    --ink:#e9eef6; --muted:#9db0c6; --faint:#6f8299; --line:#25313f;
    --accent:#6b9bff;
    --c1:#6b9bff; --c1-bg:rgba(107,155,255,.14); --c1-line:rgba(107,155,255,.34);
    --c2:#3ecb95; --c2-bg:rgba(62,203,149,.14); --c2-line:rgba(62,203,149,.34);
    --c3:#f0ab5b; --c3-bg:rgba(240,171,91,.14); --c3-line:rgba(240,171,91,.36);
    --store:#b394f5; --store-bg:rgba(179,148,245,.14);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0b1017; --surface:#131c29; --surface-2:#0f1826; --surface-3:#1a2637;
  --ink:#e9eef6; --muted:#9db0c6; --faint:#6f8299; --line:#25313f;
  --accent:#6b9bff;
  --c1:#6b9bff; --c1-bg:rgba(107,155,255,.14); --c1-line:rgba(107,155,255,.34);
  --c2:#3ecb95; --c2-bg:rgba(62,203,149,.14); --c2-line:rgba(62,203,149,.34);
  --c3:#f0ab5b; --c3-bg:rgba(240,171,91,.14); --c3-line:rgba(240,171,91,.36);
  --store:#b394f5; --store-bg:rgba(179,148,245,.14);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{font-family:var(--body); background:var(--bg); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; font-size:15px;}
code,.mono{font-family:var(--mono); font-size:.86em;}
code{background:var(--surface-3); padding:.08em .38em; border-radius:5px; color:var(--ink);}
a{color:var(--accent); text-decoration:none;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* nav */
.topbar{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
.topbar-in{max-width:1200px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:16px;}
.brand{font-family:var(--display); font-weight:800; letter-spacing:-.01em; font-size:16px; margin-right:auto; display:flex; align-items:center; gap:10px; color:var(--ink);}
.brand .dot{width:10px;height:10px;border-radius:3px;background:var(--accent); box-shadow:0 0 0 3px var(--c1-bg);}
.nav{display:flex; gap:6px; flex-wrap:wrap;}
.nav a{color:var(--muted); font-size:13px; font-weight:600; padding:6px 10px; border-radius:8px;}
.nav a:hover{color:var(--ink); background:var(--surface-3);}
.nav a.active{color:var(--accent); background:var(--c1-bg);}
.toggle{border:1px solid var(--line); background:var(--surface); color:var(--muted); width:36px;height:32px;border-radius:9px; cursor:pointer; display:grid; place-items:center;}
.toggle:hover{color:var(--ink); border-color:var(--faint);}
.toggle svg{width:17px;height:17px;}

.wrap{max-width:1200px; margin:0 auto; padding-inline:20px;}
.divider{height:1px; background:var(--line); margin:0;}

/* hero */
.hero{padding-block:56px 28px;}
.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.16em; font-size:11px; color:var(--accent); font-weight:600;}
.hero h1{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:clamp(32px,6vw,54px); line-height:1.02; margin:14px 0 0; text-wrap:balance; max-width:18ch;}
.hero p.lead{color:var(--muted); font-size:clamp(15px,2.4vw,19px); max-width:62ch; margin:16px 0 0;}
.hero .meta{margin-top:22px; display:flex; gap:8px; flex-wrap:wrap;}
.tag{font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--line); background:var(--surface); padding:5px 10px; border-radius:999px;}
.tag b{color:var(--ink); font-weight:600;}

.loop{margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:1px dashed var(--c3-line); background:var(--c3-bg); color:var(--ink); border-radius:12px; padding:12px 16px;}
.loop .cyc{color:var(--c3); font-weight:700; font-size:18px;}
.loop b{font-weight:700;} .loop span{color:var(--muted); font-size:13.5px;}

.scopenote{margin-top:14px; display:flex; align-items:flex-start; gap:12px; border:1px solid var(--c1-line); background:var(--c1-bg); color:var(--ink); border-radius:12px; padding:12px 16px;}
.scopenote .sn-ic{flex:none; width:22px;height:22px; color:var(--c1); margin-top:1px;}
.scopenote .sn-ic svg{width:22px;height:22px;}
.scopenote b{font-weight:700;} .scopenote p{margin:2px 0 0; color:var(--muted); font-size:13px;}

/* panels */
.planes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px;}
@media (max-width:900px){ .planes{grid-template-columns:1fr;} }
.panel{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 18px 22px; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.panel.p1{--c:var(--c1); --c-bg:var(--c1-bg); --c-line:var(--c1-line);}
.panel.p2{--c:var(--c2); --c-bg:var(--c2-bg); --c-line:var(--c2-line);}
.panel.p3{--c:var(--c3); --c-bg:var(--c3-bg); --c-line:var(--c3-line);}
.panel-top{border-top:3px solid var(--c); border-radius:3px; width:44px; margin-bottom:16px;}
.phead{display:flex; align-items:center; gap:11px; margin-bottom:4px;}
.pnum{font-family:var(--display); font-weight:800; font-size:15px; color:var(--c); background:var(--c-bg); border:1px solid var(--c-line); width:30px;height:30px; border-radius:9px; display:grid; place-items:center; flex:none;}
.phead h2{font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:19px; margin:0;}
.psub{color:var(--muted); font-size:13px; margin:0 0 16px;}

.flow{display:flex; flex-direction:column; align-items:stretch; gap:0;}
.node{border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:11px 13px; display:flex; gap:11px; align-items:flex-start;}
.node .ic{flex:none; width:30px;height:30px; border-radius:8px; display:grid; place-items:center; background:var(--c-bg); color:var(--c);}
.node .ic svg{width:17px;height:17px;}
.node .nt{font-weight:700; font-size:13.5px; line-height:1.25;}
.node .nd{color:var(--muted); font-size:11.5px; margin-top:2px;}
.node .nd code{font-size:11px; background:var(--surface-3);}
.node.hi{border-color:var(--c-line); background:var(--c-bg); box-shadow:0 0 0 1px var(--c-line) inset;}
.node.hi .tagnew{display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--c); border:1px solid var(--c-line); border-radius:5px; padding:1px 5px; margin-top:5px;}
.node.store .ic{background:var(--store-bg); color:var(--store);}
.chip{font-family:var(--mono); font-size:10px; color:var(--store); background:var(--store-bg); padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:middle;}
.arrow{display:flex; flex-direction:column; align-items:center; padding:5px 0; color:var(--faint);}
.arrow .ln{width:2px; height:12px; background:var(--c-line);}
.arrow .hd{color:var(--c); font-size:13px; line-height:1; margin-top:-2px;}
.arrow .lbl{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:3px; text-align:center;}
.branch{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.branch.three{grid-template-columns:1fr 1fr 1fr;}
@media (max-width:480px){ .branch.three{grid-template-columns:1fr;} }
.branch .node{padding:9px 10px;}
.branch .node .ic{width:26px;height:26px;} .branch .node .ic svg{width:15px;height:15px;}
.ulist{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:7px;}
.ulist li{position:relative; padding-left:18px; color:var(--muted); font-size:12.5px;}
.ulist li::before{content:""; position:absolute; left:2px; top:8px; width:6px;height:6px; border-radius:2px; background:var(--c);}
.ulist li b{color:var(--ink); font-weight:600;}

/* generic sections */
.section{padding-block:40px;}
.section h2.sh{font-family:var(--display); font-weight:800; letter-spacing:-.01em; font-size:26px; margin:0 0 4px; display:flex; align-items:center; gap:10px;}
.section .sd{color:var(--muted); margin:0 0 22px; font-size:14px;}
.sicon{width:26px;height:26px; color:var(--accent); flex:none;}

/* tables */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; min-width:560px; background:var(--surface); font-size:13.5px;}
th,td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:top;}
thead th{font-family:var(--mono); text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted); background:var(--surface-2);}
tbody tr:last-child td{border-bottom:none;}
td .st{font-weight:700;}
.pill{display:inline-block; font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:999px; font-weight:500;}
.pill.yes{color:var(--c3); background:var(--c3-bg);}
.pill.no{color:var(--c2); background:var(--c2-bg);}
.pill.na{color:var(--muted); background:var(--surface-3);}

/* flow strip */
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:800px){ .strip{grid-template-columns:1fr;} }
.step{border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:18px; box-shadow:var(--shadow);}
.step .sn{font-family:var(--display); font-weight:800; font-size:14px; width:28px;height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; margin-bottom:10px;}
.step.s1 .sn{background:var(--c1);} .step.s2 .sn{background:var(--c2);} .step.s3 .sn{background:var(--c3);}
.step h3{font-family:var(--display); font-weight:700; font-size:16px; margin:0 0 8px;}
.step ul{margin:0; padding-left:18px; color:var(--muted); font-size:12.5px; display:flex; flex-direction:column; gap:5px;}

/* keys / docs cards */
.keys{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:700px){ .keys{grid-template-columns:1fr;} }
.keycard{border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:18px; box-shadow:var(--shadow);}
.keycard .kk{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--accent); margin-bottom:6px;}
.keycard p{margin:0; color:var(--muted); font-size:13px;}
.docs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
@media (max-width:700px){ .docs{grid-template-columns:1fr;} }
.doccard{border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:16px; display:block;}
a.doccard:hover{border-color:var(--faint);}
.doccard .dt{font-family:var(--mono); font-size:12.5px; color:var(--ink); font-weight:600;}
.doccard .dd{color:var(--muted); font-size:12.5px; margin-top:5px;}

footer{border-top:1px solid var(--line); margin-top:20px; padding-block:26px 40px; color:var(--faint); font-size:12.5px;}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}

/* ===== prose (doc pages) ===== */
.doc{max-width:820px; margin:0 auto; padding-block:44px 20px;}
.doc .eyebrow{margin-bottom:12px;}
.doc h1{font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:clamp(28px,5vw,42px); line-height:1.05; margin:0; text-wrap:balance;}
.doc .lead{color:var(--muted); font-size:clamp(15px,2.2vw,18px); font-style:italic; margin:14px 0 0; max-width:64ch;}
.doc h2{font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:23px; margin:42px 0 4px; scroll-margin-top:80px; padding-top:6px;}
.doc h2 .num{color:var(--accent); font-family:var(--mono); font-size:15px; font-weight:600; margin-right:8px;}
.doc h3{font-family:var(--display); font-weight:700; font-size:17px; margin:26px 0 4px;}
.doc p{margin:12px 0; color:var(--ink);}
.doc p, .doc li{max-width:70ch;}
.doc ul, .doc ol{margin:12px 0; padding-left:22px; color:var(--ink);}
.doc li{margin:6px 0;}
.doc li::marker{color:var(--faint);}
.doc strong, .doc b{font-weight:700;}
.doc em{color:var(--muted);}
.doc hr{border:none; border-top:1px solid var(--line); margin:34px 0;}
pre.ascii{font-family:var(--mono); font-size:12px; line-height:1.5; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:16px; overflow-x:auto; color:var(--ink); white-space:pre; box-shadow:var(--shadow);}
.doc table{margin:16px 0;}
.doc .tablewrap{margin:16px 0;}
.callout{border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--surface-2); border-radius:10px; padding:14px 16px; margin:18px 0; font-size:13.5px; color:var(--muted);}
.callout.note{border-left-color:var(--c1);}
.callout.ok{border-left-color:var(--c2);}
.callout.warn{border-left-color:var(--c3);}
.callout b{color:var(--ink);}
.callout .h{display:block; font-weight:700; color:var(--ink); margin-bottom:4px; font-family:var(--display);}
.summary{border:1px solid var(--c2-line); background:var(--c2-bg); border-radius:14px; padding:20px; margin:30px 0 10px; font-size:15px;}
.summary .h{font-family:var(--display); font-weight:800; color:var(--c2); text-transform:uppercase; letter-spacing:.08em; font-size:12px; margin-bottom:8px;}