:root,
:root[data-theme="light"]{
  --paper:#FFFFFF; --surface:#FFFFFF; --sunk:#F4F6F1; --raise:#FFFFFF;
  --ink:#000000; --ink-2:#333532; --ink-3:#6B6C6A;
  --rule:#DCE1D6; --rule-2:#B8C0B0;
  --accent:#5C8E17; --accent-2:#456B12; --accent-glow:#86C703; --wash:#F0F7E6; --on-accent:#FFFFFF;
  --none:#456B12; --unknown:#953211; --moved:#D04516;
  --none-w:#D4FC98; --unknown-w:#FFCAB9; --moved-w:#FFCAB9;
  --sel:#D4FC98;
  --warn:#D04516; --warn-bg:#FFCAB9;
  --sans:"Geist","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#000000; --surface:#141513; --sunk:#0D0F0D; --raise:#1A1C1A;
    --ink:#FEFFFB; --ink-2:#B3B5B1; --ink-3:#777876;
    --rule:#252624; --rule-2:#383A36;
    --accent:#AAFF00; --accent-2:#C3FF4C; --accent-glow:rgba(170,255,0,0.3); --wash:#182010; --on-accent:#000000;
    --none:#AAFF00; --unknown:#FF8157; --moved:#FF5117;
    --none-w:#273C09; --unknown-w:#3D2214; --moved-w:#3A150A;
    --sel:#273C09;
    --warn:#FF8157; --warn-bg:#2D1F08;
  }
}
:root[data-theme="dark"]{
  --paper:#000000; --surface:#141513; --sunk:#0D0F0D; --raise:#1A1C1A;
  --ink:#FEFFFB; --ink-2:#B3B5B1; --ink-3:#777876;
  --rule:#252624; --rule-2:#383A36;
  --accent:#AAFF00; --accent-2:#C3FF4C; --accent-glow:rgba(170,255,0,0.3); --wash:#182010; --on-accent:#000000;
  --none:#AAFF00; --unknown:#FF8157; --moved:#FF5117;
  --none-w:#273C09; --unknown-w:#3D2214; --moved-w:#3A150A;
  --sel:#273C09;
  --warn:#FF8157; --warn-bg:#2D1F08;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:15px/1.65 var(--sans); font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--sel); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
code,pre,kbd,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ── Top Navigation Bar ── */
.top{
  position:sticky; top:0; z-index:40; background:var(--surface);
  border-bottom:1px solid var(--rule); display:flex; align-items:center;
  gap:16px; padding:0 28px; height:60px;
  backdrop-filter:blur(8px);
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink)}
.avvio-logo{height:20px; width:auto; display:block; color:var(--ink)}
.brand-divider{color:var(--ink-3); font-weight:300; font-size:16px; opacity:0.6}
.brand-product{font-family:var(--sans); font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.02em}
.ver-badge{
  font-family:var(--mono); font-size:10.5px; padding:1px 6px; border-radius:9999px;
  background:var(--sunk); color:var(--ink-3); border:1px solid var(--rule); font-weight:600;
}
/* ── Top Navigation Tabs (Conduit Style) ── */
.top-nav-tabs{
  display:flex; align-items:center; gap:2px; height:100%; margin-left:24px;
}
.top-tab{
  display:flex; align-items:center; height:100%; padding:0 14px;
  font-size:13.5px; font-weight:550; color:var(--ink-2); text-decoration:none;
  border-bottom:2px solid transparent; transition:all .12s;
}
.top-tab:hover{color:var(--ink)}
.top-tab.active{
  color:var(--ink); border-bottom-color:var(--accent); font-weight:600;
}
.dash-link{
  font-size:13px; font-weight:550; color:var(--ink-2); text-decoration:none;
  padding:5px 12px; border-radius:8px; border:1px solid var(--rule); background:var(--surface);
  transition:all .12s; margin-right:4px; display:inline-flex; align-items:center; gap:4px;
}
.dash-link:hover{color:var(--ink); border-color:var(--rule-2); background:var(--sunk)}
.top .spacer{flex:1}

button.ctl{
  font-family:var(--sans); font-size:13px; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--rule); border-radius:8px; padding:5px 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font-weight:500; transition:all .12s;
}
button.ctl:hover{border-color:var(--rule-2); color:var(--ink); background:var(--sunk)}
kbd{
  font-family:var(--mono); font-size:11px; border:1px solid var(--rule-2);
  border-radius:4px; padding:1px 5px; color:var(--ink-3); background:var(--sunk);
}
#search-open{min-width:190px; justify-content:space-between}
.mob-toggle{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px; font-size:18px}

/* ── Segmented Theme Switch (Capsule / Pill Style) ── */
.theme-switch{
  display:inline-flex; align-items:center; gap:2px;
  background:var(--sunk); border:1px solid var(--rule);
  border-radius:9999px; padding:2px; height:30px; box-sizing:border-box;
}
.theme-btn{
  width:24px; height:24px; border-radius:50%; border:0; background:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-3); cursor:pointer; transition:all .15s ease;
  padding:0; margin:0; line-height:0;
}
.theme-btn svg{width:14px; height:14px; stroke-width:1.8}
.theme-btn:hover{color:var(--ink)}
.theme-btn.active{
  background:var(--surface); color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn.active{
    background:#1A1C1A; color:#FEFFFB;
    box-shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] .theme-btn.active{
  background:#1A1C1A; color:#FEFFFB;
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ── Layout Shell ── */
.shell{
  display:grid; grid-template-columns:260px minmax(0,1fr) 230px;
  max-width:1440px; margin:0 auto;
}
nav.side{
  position:sticky; top:60px; align-self:start; height:calc(100vh - 60px);
  overflow-y:auto; border-right:1px solid var(--rule); padding:28px 18px 60px;
  background:var(--paper);
}
.sec{
  font-family:var(--sans); font-size:12px; letter-spacing:.02em; font-weight:700;
  color:var(--ink); margin:24px 0 8px; padding-left:10px;
}
.sec:first-child{margin-top:0}
nav.side .nav-group{
  display:flex; flex-direction:column; border-left:1px solid var(--rule); margin-left:10px; padding-left:0;
}
nav.side a{
  display:block; text-decoration:none; color:var(--ink-2); font-size:13.5px;
  padding:6px 14px; border-left:2px solid transparent; margin-left:-1px; line-height:1.45;
  transition:all .12s; border-radius:0 6px 6px 0;
}
nav.side a:hover{color:var(--ink); border-left-color:var(--rule-2)}
nav.side a.here{
  color:var(--accent); border-left-color:var(--accent); font-weight:600;
  background:var(--wash);
}
nav.side .toc{
  display:flex; flex-direction:column; border-left:1px dashed var(--rule);
  margin-left:14px; padding-left:0;
}
nav.side .toc a{
  font-size:12.5px; color:var(--ink-3); padding:4px 14px; font-family:var(--mono);
  border-left:0; margin-left:0;
}
nav.side .toc a:hover{color:var(--accent)}
main{padding:40px 48px 120px; min-width:0; max-width:880px}

/* ── Right Table of Contents (Conduit Style) ── */
aside.right-toc{
  position:sticky; top:60px; align-self:start; height:calc(100vh - 60px);
  overflow-y:auto; padding:36px 18px 40px; font-size:13px;
}
.right-toc-title{
  font-family:var(--sans); font-size:12px; font-weight:700;
  color:var(--ink); margin-bottom:12px; letter-spacing:-.01em;
}
.right-toc a{
  display:block; text-decoration:none; color:var(--ink-3); padding:4px 0;
  line-height:1.4; transition:color .12s; font-size:13px;
}
.right-toc a:hover{color:var(--accent)}

@media (max-width:1200px){
  .shell{grid-template-columns:260px minmax(0,1fr)}
  aside.right-toc{display:none}
}
@media (max-width:880px){
  .shell{grid-template-columns:1fr}
  .mob-toggle{display:block}
  .top-nav-tabs{display:flex; overflow-x:auto; gap:0; margin-left:8px}
  .top-tab{padding:0 8px; font-size:12.5px; white-space:nowrap}
  .dash-link{display:none}
  #search-open{min-width:0}
  nav.side{
    display:none; position:fixed; inset:60px 0 0 0; z-index:35; background:var(--surface);
    height:calc(100vh - 60px); padding:20px;
  }
  nav.side.open{display:block}
  main{padding:28px 20px 80px}
}

/* ── Typography & Elements ── */
.breadcrumbs{
  display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3);
  font-family:var(--sans); margin-bottom:16px; font-weight:500;
}
.breadcrumbs a{color:var(--ink-3); text-decoration:none}
.breadcrumbs a:hover{color:var(--accent)}
h1{
  font-family:var(--sans); font-size:34px; line-height:1.2; letter-spacing:-.035em;
  margin:0 0 16px; font-weight:800; text-wrap:balance; color:var(--ink);
}
h2{
  font-family:var(--sans); font-size:22px; letter-spacing:-.025em; font-weight:750;
  margin:48px 0 16px; padding-top:16px; border-top:1px solid var(--rule);
  scroll-margin-top:76px; text-wrap:balance; color:var(--ink);
}
h3{font-family:var(--sans); font-size:16.5px; font-weight:700; margin:30px 0 10px; scroll-margin-top:76px; color:var(--ink)}
h4{font-family:var(--sans); font-size:14.5px; font-weight:650; margin:22px 0 6px; color:var(--ink)}
.anchor{
  color:var(--rule-2); text-decoration:none; margin-left:8px; opacity:0;
  font-weight:400; transition:opacity .12s;
}
h2:hover .anchor,h3:hover .anchor,.anchor:focus-visible{opacity:1}
p,li{color:var(--ink-2); max-width:76ch}
p{margin:0 0 16px}
li{margin:6px 0}
strong{color:var(--ink); font-weight:650}
a{color:var(--accent); text-underline-offset:2px}
hr{border:0; border-top:1px solid var(--rule); margin:36px 0}
blockquote{
  margin:20px 0; padding:14px 18px; border-left:3px solid var(--accent);
  background:var(--wash); color:var(--ink-2); max-width:76ch; border-radius:0 8px 8px 0;
}
blockquote p{margin:0}

/* ── Callouts ── */
.callout{
  margin:22px 0; padding:14px 18px; border-left:3px solid var(--accent);
  background:var(--wash); border-radius:0 8px 8px 0; max-width:76ch; font-size:14.5px;
}
.callout.warn{border-left-color:var(--warn); background:var(--warn-bg)}
.callout.tip{border-left-color:var(--none); background:var(--none-w)}
.callout.important{border-left-color:var(--accent-2); background:var(--wash)}
.callout-tag{
  font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:inherit; display:block; margin-bottom:4px;
}
.callout p:last-child{margin-bottom:0}
.td-sub{display:block; font-size:12px; color:var(--ink-3); margin-top:3px; font-family:var(--sans)}

ul.checks{list-style:none; padding-left:0}
ul.checks>li{
  border-top:1px solid var(--rule); padding:10px 0 10px 28px; position:relative; max-width:76ch;
}
ul.checks>li::before{
  content:"✓"; position:absolute; left:2px; top:10px; font-family:var(--mono);
  color:var(--none); font-weight:700; font-size:13px;
}
/* ── Inline Code ── */
code{
  background:var(--sunk); border:1px solid var(--rule); border-radius:4px;
  padding:2px 5px; font-size:.88em; color:var(--ink); font-family:var(--mono);
}

/* ── Code Blocks & Tabs (Conduit / Mintlify Style) ── */
figure.code,figure.sample{
  margin:20px 0; border:1px solid var(--rule); border-radius:8px;
  background:var(--sunk); position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03); width:100%; box-sizing:border-box;
}
.code-head,figure.sample figcaption{
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  height:38px; width:100%; max-width:100%; margin:0; box-sizing:border-box;
  border-bottom:1px solid var(--rule); background:var(--surface);
}
.code-lang,figure.sample .op{
  font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--ink-2);
  letter-spacing:.04em; text-transform:uppercase;
}
.sample-actions{
  display:flex; align-items:center; gap:10px; height:100%;
}
.tabs{display:flex; align-items:center; gap:2px; height:100%}
button.tab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.02em;
  background:none; border:0; border-bottom:2px solid transparent; color:var(--ink-3);
  padding:0 10px; height:100%; cursor:pointer; font-weight:500; transition:all .12s;
  display:inline-flex; align-items:center;
}
button.tab:hover{color:var(--ink)}
button.tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent); font-weight:600}
figure.sample .pane{display:none}
figure.sample .pane.on{display:block}
pre{
  margin:0; padding:14px 18px; overflow-x:auto; font-size:13px; line-height:1.65;
  color:var(--ink); background:var(--sunk); border:0; width:100%; box-sizing:border-box;
}
pre code{
  background:none; border:0; padding:0; font-size:inherit; white-space:pre;
  font-family:var(--mono); color:inherit;
}
button.copy{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  font-weight:600; color:var(--ink-3); background:var(--sunk); border:1px solid var(--rule);
  border-radius:4px; padding:3px 8px; cursor:pointer; transition:all .12s; line-height:1.3;
  display:inline-flex; align-items:center;
}
button.copy:hover{color:var(--ink); border-color:var(--rule-2); background:var(--surface)}
.member{
  border-top:1px solid var(--rule); padding:16px 0; display:grid;
  grid-template-columns:minmax(0,1fr); gap:6px;
}
.member figure.code{margin:0; border:1px solid var(--rule); background:var(--sunk); border-radius:6px}
.member-doc{color:var(--ink-3); font-size:14px; max-width:76ch}

/* ── Tables ── */
.scroll{overflow-x:auto; max-width:100%; margin:20px 0; border:1px solid var(--rule); border-radius:8px}
table{border-collapse:collapse; width:100%; font-size:13.5px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
th{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; background:var(--sunk); white-space:nowrap;
}
td{color:var(--ink-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sunk)}
.m{
  font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  padding:2px 6px; border-radius:4px; background:var(--sunk); color:var(--ink-2);
  border:1px solid var(--rule);
}
.m-get{color:var(--none)} .m-post{color:var(--accent)} .m-delete,.m-patch,.m-put{color:var(--moved)}
.seq{font-family:var(--mono); font-size:12px; color:var(--ink-3); white-space:nowrap}
.dim{color:var(--ink-3)}

/* ── Diagrams ── */
.diagram-wrap{margin:24px 0; border:1px solid var(--rule); border-radius:10px; background:var(--surface); padding:18px}
.flowchart{overflow-x:auto; width:100%}
.flowchart svg{display:block; width:100%; min-width:700px; height:auto; color:var(--ink-2)}
.diagram-wrap figcaption{font-size:13px; color:var(--ink-3); margin-top:12px; max-width:76ch}

/* ── State markers ── */
.mk{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono);
  font-size:11px; letter-spacing:.02em; white-space:nowrap; padding:2px 7px;
  border-radius:4px; border:1px solid transparent;
}
.mk-money-none{color:var(--none); background:var(--none-w); border-color:var(--none)}
.mk-money-unknown{color:var(--unknown); background:var(--unknown-w); border-color:var(--unknown)}
.mk-retry-safe{color:var(--none); background:var(--none-w); border-color:var(--none)}
.mk-retry-change{color:var(--unknown); background:var(--unknown-w); border-color:var(--unknown)}
.mk-retry-never{color:var(--moved); background:var(--moved-w); border-color:var(--moved)}
.legend{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px;
  border:1px solid var(--rule); border-radius:8px; padding:18px; margin:22px 0; background:var(--sunk);
}
.legend-g{display:flex; flex-direction:column; gap:8px}
.legend-i{display:flex; gap:8px; align-items:baseline; font-size:13px; color:var(--ink-3)}
.legend-h{
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink);
}

/* ── Errors ── */
.errs{margin:20px 0; display:flex; flex-direction:column; gap:12px}
.err{border:1px solid var(--rule); border-radius:8px; padding:16px; background:var(--surface)}
.err:target{border-color:var(--accent); background:var(--wash)}
.err-h{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:10px}
.err-k{background:none; border:0; padding:0; font-size:14px; font-weight:700; color:var(--ink)}
.err-s{font-family:var(--mono); font-size:11px; color:var(--ink-3); border:1px solid var(--rule); border-radius:4px; padding:2px 6px}
.err-a{color:var(--rule-2); text-decoration:none; opacity:0; margin-left:auto}
.err:hover .err-a,.err-a:focus-visible{opacity:1}
.err dl{display:grid; grid-template-columns:130px minmax(0,1fr); gap:6px 18px; margin:0}
.err dl>div{display:contents}
.err dt{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); padding-top:2px; font-weight:600;
}
.err dd{margin:0; color:var(--ink-2); font-size:13.8px}

/* ── Landing Page (Conduit Style) ── */
.hero{padding:10px 0 16px}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px; font-weight:700;
}
.hero h1{font-size:38px; max-width:28ch; line-height:1.15; letter-spacing:-.04em}
.lede{font-size:17px; color:var(--ink-2); max-width:70ch; line-height:1.6; margin-bottom:0}
.cards-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px;
  margin:24px 0 36px;
}
.card{
  display:flex; flex-direction:column; gap:8px; padding:20px;
  border:1px solid var(--rule); border-radius:10px; text-decoration:none;
  background:var(--surface); transition:all .15s ease-in-out;
}
.card:hover{
  border-color:var(--accent); box-shadow:0 6px 20px rgba(0,0,0,.05);
  transform:translateY(-2px);
}
.card-t{font-family:var(--sans); font-size:15px; font-weight:700; color:var(--ink); letter-spacing:-.01em}
.card-s{font-size:13.2px; color:var(--ink-3); line-height:1.45}

/* ── Pager Footer ── */
.pager{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:56px;
  border-top:1px solid var(--rule); padding-top:24px;
}
.pager a{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  border:1px solid var(--rule); border-radius:8px; padding:16px 18px; background:var(--surface);
  transition:all .12s;
}
.pager a:hover{border-color:var(--accent); background:var(--wash)}
.pager .dir{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.pager .t{font-size:15px; color:var(--ink); font-weight:650}
.pager .next{text-align:right; grid-column:2}

/* ── Search Modal ── */
.sheet[hidden]{display:none}
.sheet{
  position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45);
  padding:12vh 16px 16px; display:flex; justify-content:center; align-items:flex-start;
  backdrop-filter:blur(3px);
}
.sheet-box{
  width:min(660px,100%); max-height:74vh; background:var(--surface);
  border:1px solid var(--rule-2); border-radius:10px; display:flex; flex-direction:column;
  box-shadow:0 20px 40px rgba(0,0,0,.15); overflow:hidden;
}
#q{
  border:0; border-bottom:1px solid var(--rule); background:none; color:var(--ink);
  font:15px var(--sans); padding:16px 18px; outline:none; width:100%;
}
#hits{overflow-y:auto; padding:6px 0}
#hits a{display:block; text-decoration:none; padding:10px 18px; border-left:2px solid transparent}
#hits a[aria-selected="true"]{background:var(--wash); border-left-color:var(--accent)}
#hits .h-t{font-size:13.5px; font-weight:600; color:var(--ink); display:block}
#hits .h-p{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
#hits .h-x{font-size:12.5px; color:var(--ink-3); display:block; margin-top:2px}
#hits mark{background:var(--sel); color:var(--ink); border-radius:2px; padding:0 2px}
.sheet-foot{
  border-top:1px solid var(--rule); padding:10px 18px; font-family:var(--mono);
  font-size:11px; color:var(--ink-3); background:var(--sunk);
}