/* ==========================================================================
   WIZZO CMS docs - three column RTL layout:
   [ sidebar (right) ] [ article ] [ on-this-page (left) ]
   ========================================================================== */
:root{--sb-w:280px;--toc-w:220px;--doc-max:800px}
body.docs{background:var(--bg)}
.docs-shell{display:grid;grid-template-columns:var(--sb-w) minmax(0,1fr) var(--toc-w);gap:0;max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
@media (max-width:1180px){.docs-shell{grid-template-columns:var(--sb-w) minmax(0,1fr)}.toc{display:none}}
@media (max-width:860px){.docs-shell{grid-template-columns:minmax(0,1fr)}}

/* header additions */
.docs-header .search-btn{display:inline-flex;align-items:center;gap:.6rem;min-width:220px;height:40px;padding:0 .75rem;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-2);color:var(--fg-3);font:500 var(--fs-1) var(--font);cursor:pointer;margin-inline-start:auto}
.docs-header .search-btn:hover{border-color:var(--fg-3);color:var(--fg-2)}
.docs-header .search-btn .kbd{margin-inline-start:auto}
.docs-header .search-btn svg{width:18px;height:18px;flex:none}
.docs-header .nav{margin-inline-start:0}
@media (max-width:860px){
  .docs-header .search-btn{min-width:0;width:40px;padding:0;justify-content:center;border-color:transparent;background:transparent}
  .docs-header .search-btn span,.docs-header .search-btn .kbd{display:none}
}

/* sidebar */
.sidebar{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;padding:1.5rem 0 3rem;padding-inline-end:1.25rem;border-inline-end:1px solid var(--line);scrollbar-width:thin;font-size:var(--fs-1)}
.sidebar .group{margin-bottom:1.1rem}
.sidebar .group>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-weight:800;color:var(--fg);padding:.35rem .4rem;border-radius:var(--r-1);font-size:var(--fs-1)}
.sidebar .group>summary::-webkit-details-marker{display:none}
.sidebar .group>summary::after{content:"";width:7px;height:7px;border-inline-end:2px solid var(--fg-3);border-bottom:2px solid var(--fg-3);transform:rotate(-45deg);margin-inline-start:auto;transition:transform .15s var(--ease)}
.sidebar .group[open]>summary::after{transform:rotate(45deg)}
.sidebar .group>summary:hover{background:var(--bg-3)}
.sidebar ul{list-style:none;padding:0;margin:.15rem 0 0}
.sidebar li a{display:block;padding:.32rem .6rem;margin-inline-start:.5rem;border-inline-start:2px solid var(--line);color:var(--fg-2);border-radius:0 var(--r-1) var(--r-1) 0;line-height:1.45}
.sidebar li a:hover{color:var(--fg);text-decoration:none;background:var(--bg-3)}
.sidebar li a[aria-current="page"]{color:var(--brand);border-inline-start-color:var(--brand-2);font-weight:700;background:var(--brand-soft)}
.sidebar .sb-foot{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--fg-3);font-size:var(--fs-0);display:grid;gap:.3rem}
@media (max-width:860px){
  .sidebar{position:fixed;top:var(--header-h);bottom:0;right:0;left:auto;width:min(86vw,340px);background:var(--bg-2);border-inline-end:0;border-inline-start:1px solid var(--line);padding:1rem var(--gutter) 2rem;transform:translateX(100%);transition:transform .22s var(--ease);z-index:60;box-shadow:var(--shadow-2);height:auto;visibility:hidden}
  .sidebar.open{transform:none;visibility:visible}
  .scrim{position:fixed;inset:0;background:rgba(10,12,30,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.show{opacity:1;pointer-events:auto}
}

/* article */
.doc{min-width:0;padding:2rem clamp(1rem,3vw,3rem) 4rem;max-width:calc(var(--doc-max) + 6rem);justify-self:center;width:100%}
.doc .crumbs{display:flex;flex-wrap:wrap;gap:.35rem;color:var(--fg-3);font-size:var(--fs-0);margin-bottom:1rem}
.doc .crumbs a{color:var(--fg-3)}
.doc .crumbs span::before{content:"/";margin-inline:.35rem;color:var(--line-2)}
.doc .crumbs span:first-child::before{content:none}
.doc header h1{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:.6rem}
.doc header .lede{margin-bottom:1.5rem}
.doc .meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;color:var(--fg-3);font-size:var(--fs-0);padding-bottom:1.25rem;border-bottom:1px solid var(--line);margin-bottom:2rem}
.doc .meta a{color:var(--fg-3)}

/* prose */
.prose{font-size:1.02rem;line-height:1.75}
.prose>*+*{margin-top:1.1rem}
.prose h2{font-size:1.55rem;margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h3{font-size:1.2rem;margin-top:2.2rem;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h4{margin-top:1.6rem;scroll-margin-top:calc(var(--header-h) + 20px)}
.prose h2 .anchor,.prose h3 .anchor,.prose h4 .anchor{opacity:0;margin-inline-start:.35rem;color:var(--fg-3);font-weight:400;text-decoration:none}
.prose h2:hover .anchor,.prose h3:hover .anchor,.prose h4:hover .anchor{opacity:1}
.prose p{max-width:72ch}
.prose ul,.prose ol{padding-inline-start:1.4em;display:grid;gap:.35rem}
.prose li>ul,.prose li>ol{margin-top:.35rem}
.prose li::marker{color:var(--fg-3)}
.prose blockquote{margin:0;padding:.75rem 1rem;border-inline-start:3px solid var(--line-2);background:var(--bg-2);color:var(--fg-2);border-radius:0 var(--r-1) var(--r-1) 0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.prose img{border:1px solid var(--line);border-radius:var(--r-2)}
.prose strong{font-weight:700;color:var(--fg)}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose .pre-wrap{margin-top:1.1rem}
.prose pre[class*="language-"]{font-size:.84rem}
.prose code:not([class]){font-size:.84em}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-2);max-width:100%}
.prose table{border-collapse:collapse;width:100%;font-size:.92rem;line-height:1.5;min-width:520px}
.prose th,.prose td{padding:.55rem .75rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:start}
.prose th{background:var(--bg-3);font-weight:700;color:var(--fg);white-space:nowrap;position:sticky;top:0}
.prose tr:last-child td{border-bottom:0}
.prose td code{white-space:nowrap}
.prose td:has(> code:only-child){direction:ltr;text-align:left}

/* callouts: > [!NOTE] / [!TIP] / [!WARNING] / [!DANGER] / [!INFO] */
.callout{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.6rem .75rem;padding:.9rem 1rem;border:1px solid var(--line);border-inline-start-width:4px;border-radius:var(--r-2);background:var(--bg-2);font-size:.95rem}
.callout>svg{width:22px;height:22px;margin-top:.1rem}
.callout .callout-title{font-weight:800;margin-bottom:.2rem;font-size:var(--fs-1)}
.callout .callout-body>*+*{margin-top:.5rem}
.callout.note{border-inline-start-color:var(--brand-2)}.callout.note>svg{color:var(--brand-2)}
.callout.tip{border-inline-start-color:var(--ok)}.callout.tip>svg{color:var(--ok)}
.callout.warning{border-inline-start-color:var(--warn)}.callout.warning>svg{color:var(--warn)}
.callout.danger{border-inline-start-color:var(--danger)}.callout.danger>svg{color:var(--danger)}
.callout.info{border-inline-start-color:var(--info)}.callout.info>svg{color:var(--info)}

/* api signature blocks */
.sig{font-family:var(--mono);direction:ltr;text-align:left;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-1);padding:.5rem .75rem;font-size:.86rem;overflow-x:auto}
.prose dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.4rem 1rem;font-size:.95rem}
.prose dt{font-family:var(--mono);font-size:.85rem;direction:ltr;text-align:left;color:var(--brand)}
.prose dd{margin:0}
@media (max-width:600px){.prose dl{grid-template-columns:1fr}}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.pager a{display:grid;gap:.25rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-2);color:var(--fg);text-decoration:none;min-width:0}
.pager a:hover{border-color:var(--brand-2)}
.pager a small{color:var(--fg-3);font-size:var(--fs-0)}
.pager a strong{font-weight:700;overflow-wrap:anywhere}
.pager a.next{text-align:end}
@media (max-width:600px){.pager{grid-template-columns:1fr}}

/* on this page */
.toc{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:2rem 0 2rem 0;padding-inline-start:1.25rem;border-inline-start:1px solid var(--line);font-size:var(--fs-0);scrollbar-width:thin}
.toc h5{margin:0 0 .6rem;font-size:var(--fs-0);font-weight:800;color:var(--fg);letter-spacing:.02em}
.toc ul{list-style:none;padding:0;margin:0;display:grid;gap:.1rem}
.toc li.l3 a{padding-inline-start:1rem;font-size:.78rem}
.toc a{display:block;padding:.25rem .5rem;color:var(--fg-3);border-inline-start:2px solid transparent;border-radius:0;line-height:1.4}
.toc a:hover{color:var(--fg);text-decoration:none}
.toc a.active{color:var(--brand);border-inline-start-color:var(--brand-2)}

/* docs home */
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.doc-card{display:grid;gap:.35rem;padding:1rem 1.1rem;border:1px solid var(--line);border-radius:var(--r-2);background:var(--bg-2);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s var(--ease)}
.doc-card:hover{border-color:var(--brand-2);transform:translateY(-2px);text-decoration:none}
.doc-card strong{font-weight:800}
.doc-card span{color:var(--fg-3);font-size:var(--fs-0)}
.doc-card .n{color:var(--fg-3);font-size:var(--fs-0);font-family:var(--mono)}

/* search modal */
.search-modal{position:fixed;inset:0;z-index:80;display:none;align-items:flex-start;justify-content:center;padding:min(12vh,96px) 16px 16px;background:rgba(8,10,28,.55);backdrop-filter:blur(4px)}
.search-modal.open{display:flex}
.search-box{width:min(680px,100%);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-3);box-shadow:var(--shadow-2);overflow:hidden}
.search-box .inp{display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem;border-bottom:1px solid var(--line)}
.search-box .inp svg{width:20px;height:20px;color:var(--fg-3);flex:none}
.search-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:500 1.05rem var(--font);padding:.5rem 0;outline:0}
.search-box .inp .kbd{flex:none}
.search-results{max-height:min(56vh,520px);overflow-y:auto;padding:.4rem}
.search-results .empty{padding:1.5rem;text-align:center;color:var(--fg-3);font-size:var(--fs-1)}
.sr{display:grid;gap:.15rem;padding:.6rem .8rem;border-radius:var(--r-2);color:var(--fg);text-decoration:none}
.sr:hover,.sr.active{background:var(--brand-soft);text-decoration:none}
.sr .sec{font-size:.72rem;color:var(--fg-3);font-weight:700}
.sr .t{font-weight:700}
.sr .s{font-size:var(--fs-0);color:var(--fg-2);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr mark{background:transparent;color:var(--brand);font-weight:800}
.search-foot{display:flex;gap:1rem;padding:.5rem .9rem;border-top:1px solid var(--line);color:var(--fg-3);font-size:.72rem}

/* feedback / edit link */
.doc-foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;color:var(--fg-3);font-size:var(--fs-0)}
.doc-foot a{color:var(--fg-3);text-decoration:underline}

/* print */
@media print{.site-header,.sidebar,.toc,.pager,.search-modal,.copy-btn,.doc-foot{display:none!important}.docs-shell{display:block}.doc{padding:0;max-width:none}}