/* Docs layout: sticky sidebar nav + scrollspy content. Tokens from base.css. */
/* The marketing nav must NOT float over the docs sidebar — static here. */
header.nav{position:static}
.docwrap{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:236px 1fr;gap:52px;align-items:start}
@media(max-width:900px){.docwrap{grid-template-columns:1fr;gap:0}}

/* intro band */
.doc-hero{padding:22px 0 10px}
.doc-hero .kick{display:block;margin-bottom:8px}
.doc-hero h1{font-family:var(--display);font-weight:740;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.08;letter-spacing:-.02em}
.doc-hero h1 .it{color:var(--clay)}
.doc-hero .lead{font-size:.95rem;color:var(--ink-soft);margin-top:8px;line-height:1.55;max-width:74ch}
.doc-hero .lead a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}

/* sidebar */
.doc-side{position:sticky;top:16px;align-self:start;font-family:var(--display)}
@media(max-width:900px){.doc-side{position:static;margin:0 0 20px;border:1px solid var(--edge);border-radius:var(--r);padding:14px 16px;background:var(--card)}}
.doc-side .grp{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--clay-deep);margin:13px 0 5px;padding-left:11px}
.doc-side .grp:first-child{margin-top:0}
.doc-side a{display:block;font-size:13.5px;color:var(--ink-soft);text-decoration:none;padding:4px 11px;border-radius:8px;line-height:1.32;border-left:2px solid transparent;transition:all .13s}
.doc-side a:hover{color:var(--ink);background:rgba(var(--ink-rgb),.04)}
.doc-side a.on{color:var(--clay-deep);background:var(--wash-clay);border-left-color:var(--clay);font-weight:600}
.doc-side-toggle{display:none}
@media(max-width:900px){
  .doc-side-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;
    font-family:var(--display);font-weight:640;font-size:1rem;color:var(--ink);cursor:pointer;padding:2px}
  .doc-side-list{display:none;margin-top:10px}
  .doc-side.open .doc-side-list{display:block}
  .doc-side .grp{margin-top:14px}
}

/* content */
.doc-main{min-width:0;padding-bottom:60px}
.doc-sec{padding:34px 0;border-top:1px solid var(--edge);scroll-margin-top:20px}
.doc-sec:first-of-type{border-top:none;padding-top:8px}
.doc-sec h2{font-family:var(--display);font-weight:720;font-size:1.62rem;letter-spacing:-.018em;margin-bottom:4px}
.doc-sec .sub{font-size:14.5px;color:var(--ink-faint);margin-bottom:16px}
.doc-sec h3{font-family:var(--display);font-weight:640;font-size:1.08rem;margin:22px 0 4px}
.doc-sec p,.doc-sec li{font-size:15px;color:var(--ink-soft);line-height:1.62}
.doc-sec p{margin:9px 0}
.doc-sec ul{margin:8px 0 8px 2px;list-style:none;display:flex;flex-direction:column;gap:8px}
.doc-sec ul li{position:relative;padding-left:22px}
.doc-sec ul li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--clay-soft)}
.doc-sec ol{margin:8px 0 8px 20px;display:flex;flex-direction:column;gap:8px}
.doc-sec ol li::marker{color:var(--clay-deep);font-weight:600}
.doc-sec strong{color:var(--ink)}
.doc-sec a{color:var(--clay-deep);text-decoration:underline;text-decoration-color:var(--clay-soft);text-underline-offset:2px}
.doc-sec code{font-family:var(--mono);font-size:13px;color:var(--clay-deep);background:var(--wash-clay);padding:1px 6px;border-radius:5px}
.doc-sec pre{background:var(--kiln);color:#e9ddcf;border-radius:12px;padding:16px 18px;font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto;margin:14px 0;white-space:pre-wrap}
.doc-sec pre code{background:none;color:#e9ddcf;padding:0;font-size:13px}
.doc-sec pre .c{color:#b7a68e}
.ui{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--paper);border:1px solid var(--edge);border-radius:6px;padding:1px 7px;white-space:nowrap}
.cardgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:560px){.cardgrid{grid-template-columns:1fr}}
.minicard{background:var(--card);border:1px solid var(--edge);border-radius:12px;padding:15px 17px}
.minicard .mt{font-family:var(--display);font-weight:660;font-size:14.5px;color:var(--ink);margin-bottom:3px}
.minicard p{font-size:13.5px;margin:0;line-height:1.5}
.callout{background:var(--wash-clay);border:1px solid var(--clay-soft);border-radius:12px;padding:15px 18px;margin:16px 0;font-size:14.5px;line-height:1.6}
.callout strong{color:var(--ink)}
.callout.warn{background:#f4ead2;border-color:#e0c98c}
.steps2{counter-reset:s;margin:12px 0;display:flex;flex-direction:column;gap:11px}
.steps2 .st{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline}
.steps2 .st::before{counter-increment:s;content:counter(s);font-family:var(--display);font-weight:760;color:#fff;
  background:var(--clay);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px}
.steps2 .st p{margin:0}
/* a step that holds more than one paragraph (text, a code block, more text) */
.steps2 .st>div{min-width:0}
.steps2 .st>div>p+p,.steps2 .st>div>.snip+p{margin-top:10px}
.steps2 .st>div>.snip{margin:12px 0}
/* real screenshots inside docs — UI components framed on a wash card */
.screen.ui-frame{display:flex;justify-content:flex-start}
.screen.ui-frame img{width:auto;max-width:100%;border:none;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
/* real screenshots inside docs */
.screen{margin:18px 0}
.screen img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--edge);box-shadow:0 10px 34px rgba(0,0,0,.08)}
.screen figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-top:9px}
/* reference table */
table.ref{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.ref th,.ref td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--edge);vertical-align:top}
.ref thead th{font-family:var(--display);font-weight:700;border-bottom:2px solid var(--ink)}
.ref td:first-child{white-space:nowrap}
.ref td{color:var(--ink-soft);line-height:1.5}
@media(max-width:700px){.ref-wrap{overflow-x:auto}.ref{min-width:560px}}
/* mobile: grid children must be allowed to shrink or the whole page scrolls sideways */
.docwrap>*{min-width:0}
@media(max-width:700px){
  .ui{white-space:normal}
  .doc-sec p code,.doc-sec li code{overflow-wrap:anywhere}
}
footer{margin-top:40px}

/* formerly inline (style="" attributes moved here so the page can run under a strict Content-Security-Policy) */
.docwrap.docwrap-block{display:block}
.screen.w420{max-width:420px}
.screen.w560{max-width:560px}