/* docs.zapdata.dev: layout of the docs app (app.js) on top of the ZapData design system (ds.css).
   Only design system tokens and zd-* classes; the classes here are the app layout.
   Three columns from 1200px (sidebar, content, test panel); the panel goes under the content below
   that, and the sidebar becomes a drawer below 900px. */
html{scroll-padding-top:var(--space-6)}
body{background:var(--surface);overflow-x:hidden}
img{max-width:100%}
.lucide{flex:none}
.skip{position:absolute;left:var(--space-4);top:-100px;z-index:var(--z-tooltip);padding:var(--space-2) var(--space-4);border-radius:var(--radius-button);background:var(--ink);color:var(--on-ink)}
.skip:focus{top:var(--space-2)}
.muted{color:var(--text-2);font:var(--type-body)}
.mono{font-family:var(--font-mono)}
code{font-family:var(--font-mono)}
.theme-ic--sun{display:none}
:is([data-theme="dark"],.dark) .theme-ic--sun{display:inline-block}
:is([data-theme="dark"],.dark) .theme-ic--moon{display:none}

/* Shell */
.app{display:grid;grid-template-columns:288px minmax(0,1fr) minmax(360px,420px);min-height:100vh}
.topbar{display:none}
.topbar [hidden]{display:none}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--text-2)}
.brand img{display:block;height:20px;width:auto}

/* Sidebar */
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg-app);border-right:1px solid var(--border-subtle);z-index:var(--z-sidebar)}
.sidebar__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-4) var(--space-3) var(--space-2) var(--space-4)}
#menu-close{display:none}
.sidebar__search{padding:var(--space-2) var(--space-3)}
.sidebar__search .zd-input{height:var(--control-height-sm);background:var(--surface)}
.sidebar__search .zd-input:not(:focus-within){border-color:var(--border-subtle)}
.sidebar__search input{font:var(--type-body)}
.nav{flex:1;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-3) var(--space-6);overscroll-behavior:contain}
.nav__status{padding:var(--space-4);color:var(--text-3)}
.nav a{text-decoration:none;color:inherit}
.nav__item{display:flex;align-items:center;gap:var(--space-2);min-height:36px;padding:var(--space-1) var(--space-3);border-radius:var(--radius-control);font:var(--type-control);color:var(--text-2)}
.nav__item:hover,.nav__ep:hover{background:var(--surface-2-hover);color:var(--text-1)}
.nav a[aria-current="page"]{background:var(--brand-subtle);color:var(--brand-strong)}
.nav__item--top{margin-bottom:var(--space-2)}
.nav__item--leaf{font:var(--type-body);padding-left:var(--space-4);margin-left:var(--space-2);border-left:1px solid var(--border-subtle);border-radius:0 var(--radius-control) var(--radius-control) 0}
.nav__sec{margin-top:var(--space-4)}
.nav__head{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:32px;padding:0 var(--space-3);border:0;border-radius:var(--radius-sm);background:none;font:var(--type-meta-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);cursor:pointer}
.nav__head span:first-child{flex:1;text-align:left}
.nav__head:hover{color:var(--text-1)}
.nav__head .lucide,.nav__grphead .lucide{transition:transform var(--dur-fast) var(--ease-standard);color:var(--text-3)}
.nav__head[aria-expanded="false"] .lucide{transform:rotate(-90deg)}
.nav__grphead[aria-expanded="true"] .lucide{transform:rotate(90deg)}
.nav__count{font:var(--type-meta);color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:0}
.nav__list{display:flex;flex-direction:column;gap:1px;padding-top:var(--space-1)}
.nav__list[hidden]{display:none}
.nav__grphead{display:flex;align-items:center;gap:var(--space-2);width:100%;min-height:34px;padding:0 var(--space-3) 0 var(--space-2);border:0;border-radius:var(--radius-control);background:none;font:var(--type-control);color:var(--text-1);cursor:pointer;text-align:left}
.nav__grphead:hover{background:var(--surface-2-hover)}
.nav__grpname{flex:1;min-width:0}
.nav__list--grp{margin:0 0 var(--space-1) var(--space-4);padding-left:var(--space-2);border-left:1px solid var(--border-subtle)}
.nav__ep{display:flex;align-items:center;gap:var(--space-2);min-height:32px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font:var(--type-body);color:var(--text-2)}
.nav__epname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__mono{font:400 13px/20px var(--font-mono)}
.nav__label{padding:var(--space-2) var(--space-3);font:var(--type-meta-strong);color:var(--text-3)}
.method{justify-content:center;min-width:56px;font-family:var(--font-mono);letter-spacing:.02em}
.method--sm{min-width:0;height:18px;padding:0 6px;font-size:10px;line-height:16px}
.sidebar__foot{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border-subtle);font:var(--type-meta)}
.sidebar__foot a{color:var(--text-2);text-decoration:none}
.sidebar__foot a:hover{color:var(--brand-strong);text-decoration:underline}

/* Search results */
.res{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-control)}
.res:hover,.res:focus-visible{background:var(--surface-2-hover)}
.res__kind{font:var(--type-meta);color:var(--text-3)}
.res__title{font:var(--type-control);color:var(--text-1)}
.res__sub{display:block;font:400 12px/18px var(--font-mono);color:var(--text-2);overflow-wrap:anywhere}
.res__snip{font:var(--type-meta);color:var(--text-2);overflow-wrap:anywhere}
.res__sub .method{margin-right:var(--space-1);vertical-align:1px}
.res mark{background:var(--brand-highlight);color:inherit;border-radius:2px}
:is([data-theme="dark"],.dark) .res__sub .method{margin-right:var(--space-1);vertical-align:1px}
.res mark{background:var(--brand-subtle);color:var(--brand-strong)}

/* Content */
.main{min-width:0;padding:var(--space-10) var(--space-12) var(--space-16);outline:none}
.doc{max-width:820px;margin:0 auto}
.doc h1{font:var(--type-page-title);letter-spacing:var(--ls-page);text-wrap:balance}
.doc__title{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.doc__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6)}
.doc__head .zd-btn{flex:none}
.doc section{margin-top:var(--space-10)}
.doc section > h2{font:var(--type-section-title);letter-spacing:var(--ls-section);margin-bottom:var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border-subtle)}
.eyebrow{margin-bottom:var(--space-1);font:var(--type-meta-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-strong)}
.lead{margin:var(--space-3) 0 var(--space-8);font:var(--type-message);color:var(--text-2);text-wrap:pretty}
.ep{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-2) 0 var(--space-3);min-width:0}
.ep .method{height:28px;padding:0 10px;font-size:13px}
.ep__path{min-width:0;font:400 18px/26px var(--font-mono);color:var(--text-1);overflow-wrap:anywhere}
.ep + h1{margin-bottom:var(--space-4)}
.auth{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-5);padding:var(--space-3) var(--space-4);border-radius:var(--radius-control);background:var(--surface-2);font:var(--type-body);color:var(--text-2)}
.auth .lucide{margin-top:2px;color:var(--text-3)}

/* Markdown */
.md{font:var(--type-message);color:var(--text-1)}
.md h2{font:var(--type-section-title);letter-spacing:var(--ls-section);margin:var(--space-10) 0 var(--space-3)}
.md h3{font:var(--type-component-title);margin:var(--space-8) 0 var(--space-2)}
.md > :first-child{margin-top:0}
.md p,.md ul,.md ol,.md table,.md pre{margin:0 0 var(--space-4)}
.md ul,.md ol{padding-left:var(--space-6)}
.md li{margin:var(--space-1) 0}
.md li > pre{margin-top:var(--space-2)}
.md hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-10) 0}
.md a,.doc a:not(.zd-btn):not(.zd-card){color:var(--text-link);text-underline-offset:2px}
.md a:hover{color:var(--text-link-hover)}
.md :not(pre) > code,.doc p code,.field code,.auth code,.try__hint code,.zd-banner code{padding:1px 6px;border-radius:var(--radius-xs);background:var(--surface-2);font:400 13px/20px var(--font-mono);overflow-wrap:anywhere}
.auth code{background:var(--surface)}
.md a > code{color:var(--text-link)}
.md table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font:var(--type-body)}
.md th,.md td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-subtle);text-align:left;vertical-align:top}
.md th{font:var(--type-meta-strong);color:var(--text-3);background:var(--surface-2)}
.md-status{padding:var(--space-10) 0;color:var(--text-2)}
/* Code: always dark, as in the rest of zapdata.dev */
.md pre,.code-block{margin:0 0 var(--space-4);padding:var(--space-4) var(--space-5);overflow-x:auto;border-radius:var(--radius-popover);background:var(--surface-inverse);color:var(--text-inverse);font:400 13px/20px var(--font-mono);tab-size:2}
.md pre code,.code-block code{padding:0;background:none;color:inherit;font:inherit;overflow-wrap:normal}
:is([data-theme="dark"],.dark) .md pre,:is([data-theme="dark"],.dark) .code-block{background:var(--bg-app);box-shadow:0 0 0 1px var(--border-subtle)}

/* Fields (parameters, bodies, schemas) */
.fields{list-style:none;margin:0;padding:0}
.fields .fields{margin-top:var(--space-1);padding-left:var(--space-4);border-left:1px solid var(--border-subtle)}
.field{padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle)}
.fields .fields .field:last-child{border-bottom:0}
.field__line{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2)}
.field__name{font:500 14px/20px var(--font-mono);color:var(--text-1);overflow-wrap:anywhere}
.field__type{font:400 13px/20px var(--font-mono);color:var(--text-3);overflow-wrap:anywhere}
.field__type a{color:var(--text-link)}
.field__req{font:var(--type-meta-strong);color:var(--danger-fg)}
.field__desc{margin-top:var(--space-1);font:var(--type-body);color:var(--text-2)}
.field__facts{margin-top:var(--space-1);font:var(--type-meta);color:var(--text-3)}
.field__facts code{font-size:12px}
.field__sub{margin-top:var(--space-2)}
.field__sub > summary{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);font:var(--type-meta-strong);color:var(--text-2);cursor:pointer;list-style:none}
.field__sub > summary::-webkit-details-marker{display:none}
.field__sub > summary::before{content:"+";margin-right:var(--space-1)}
.field__sub[open] > summary::before{content:"−"}
.field__sub > summary:hover{color:var(--text-1);border-color:var(--border-field)}
.alt{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-control)}
.alt__name{font:var(--type-control)}
.alt__name a{font-family:var(--font-mono)}

/* Responses */
.resp{border:1px solid var(--border-subtle);border-radius:var(--radius-control);margin-bottom:var(--space-2);background:var(--surface)}
.resp > summary{display:flex;align-items:center;gap:var(--space-3);min-height:44px;padding:var(--space-2) var(--space-4);cursor:pointer;list-style:none}
.resp > summary::-webkit-details-marker{display:none}
.resp > summary .lucide{margin-left:auto;color:var(--text-3);transition:transform var(--dur-fast) var(--ease-standard)}
.resp[open] > summary .lucide{transform:rotate(180deg)}
.resp .zd-badge{font-family:var(--font-mono)}
.resp__desc{min-width:0;font:var(--type-body);color:var(--text-2)}
.resp__body{padding:0 var(--space-4) var(--space-4)}
.resp__body .code-block{margin:var(--space-3) 0 0}

/* Overview */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-10)}
.stat{padding:var(--space-4) var(--space-5);box-shadow:none;border:1px solid var(--border-subtle);gap:0}
.stat .zd-metric__value{font:var(--type-metric-sm)}
.stat:first-child .zd-metric__value{color:var(--brand-strong)}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-6)}
.card{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-6)}
.card:first-child{grid-column:1 / -1}
.card h2{font:var(--type-component-title)}
.card p{color:var(--text-2);font:var(--type-body)}
.card__actions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}

/* Guide pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin-top:var(--space-12)}
.pager__a{display:flex;flex-direction:column;gap:2px;padding:var(--space-4) var(--space-5);text-decoration:none;color:var(--text-1);font:var(--type-component-title)}
.pager__a span{font:var(--type-meta);color:var(--text-3)}
.pager__a:hover{box-shadow:inset 0 0 0 1px var(--brand-border)}
.pager__a--next{text-align:right;grid-column:2}

/* Right panel */
.panel{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg-app);border-left:1px solid var(--border-subtle);overscroll-behavior:contain}
.panel--empty{display:flex;align-items:center}
.panel__tabs{position:sticky;top:0;z-index:1;padding:var(--space-4) var(--space-5) var(--space-3);background:var(--bg-app)}
.panel__tabs .zd-segmented{background:var(--surface-2-hover)}
.panel__in{padding:var(--space-2) var(--space-5) var(--space-8)}
.panel--empty .panel__in,.panel:not(.panel--try) .panel__in{padding-top:var(--space-6)}
.panel__title{margin-bottom:var(--space-3);font:var(--type-meta-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.toc{display:flex;flex-direction:column;padding:var(--space-8) var(--space-5)}
.toc__title{margin:0 0 var(--space-2) var(--space-3);font:var(--type-meta-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.toc__a{display:block;padding:6px var(--space-3);border-radius:var(--radius-sm);font:var(--type-body);color:var(--text-2);text-decoration:none}
.toc__a--sub{padding-left:var(--space-6)}
.toc__a:hover{background:var(--surface-2-hover);color:var(--text-1)}
.try__url{display:flex;align-items:center;gap:var(--space-2);min-width:0;margin-bottom:var(--space-4);padding:var(--space-2) var(--space-3);border-radius:var(--radius-control);background:var(--surface);border:1px solid var(--border-subtle)}
.try__url code{min-width:0;font:400 12px/18px var(--font-mono);color:var(--text-1);word-break:break-all}
.try__field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-3)}
.try__field .zd-label{font:var(--type-meta-strong)}
.try__field .zd-label code{font:500 12px/16px var(--font-mono)}
.try__field input{font:400 13px/20px var(--font-mono)}
.try__h{margin:var(--space-5) 0 var(--space-2);font:var(--type-meta-strong);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.try__hint{font:var(--type-meta);color:var(--text-3);text-wrap:pretty}
.try__hint code{font-size:11px}
.try__bodyhead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.try__select{height:28px;padding:0 var(--space-2);border:1px solid var(--border-field);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-1);font:var(--type-meta-strong)}
.try__body{padding:var(--space-2) var(--space-3)}
.try__body textarea{min-height:160px;font:400 12px/18px var(--font-mono);white-space:pre;overflow:auto}
.try__send{margin-top:var(--space-5)}
.try__out{margin-top:var(--space-5)}
.try__none{padding:var(--space-6) var(--space-4);text-align:center;font:var(--type-body);color:var(--text-3)}
.try__msg{margin:0}
.try__msg p{font:var(--type-body)}
.try__msg .zd-banner__title{font:var(--type-body-strong)}
.try__status{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2)}
.try__status .zd-badge{font-family:var(--font-mono)}
.try__headers{margin-bottom:var(--space-2)}
.try__headers summary{padding:var(--space-1) 0;font:var(--type-meta-strong);color:var(--text-2);cursor:pointer}
.try__headers .code-block{margin:var(--space-1) 0 0;font-size:12px;line-height:18px}
.try__body-out{max-height:420px}
.try__out audio{width:100%;margin-bottom:var(--space-2)}
.try__langs{margin-bottom:var(--space-3)}
.codebox{position:relative}
.codebox .code-block{padding-top:var(--space-10);font-size:12px;line-height:18px}
.codebox__copy{position:absolute;top:var(--space-2);right:var(--space-2)}
.is-copied{color:var(--success-fg)!important}
.zd-empty .zd-empty__desc{max-width:280px}

/* Content + panel stacked (no third column) */
@media (max-width:1199px){
  .app{grid-template-columns:272px minmax(0,1fr)}
  .panel{grid-column:2;position:static;height:auto;overflow:visible;border-left:0;border-top:1px solid var(--border-subtle)}
  .panel--empty,.panel--toc{display:none}
  .panel__tabs{position:static;max-width:820px;margin:0 auto;padding-top:var(--space-6)}
  .panel__in{max-width:820px;margin:0 auto}
  .main{padding:var(--space-8) var(--space-8) var(--space-12)}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Phone and small tablet: sidebar as a drawer, top bar */
@media (max-width:899px){
  .app{display:block}
  .topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-1);height:56px;padding:0 var(--space-2);background:var(--bg-app);border-bottom:1px solid var(--border-subtle)}
  .topbar .brand{margin-right:auto;padding-left:var(--space-1)}
  html{scroll-padding-top:72px}
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(320px,88vw);height:100dvh;z-index:var(--z-modal);transform:translateX(-102%);transition:transform var(--dur-base) var(--ease-standard);box-shadow:none;visibility:hidden}
  .nav-open .sidebar{transform:none;visibility:visible;box-shadow:var(--shadow-modal)}
  .nav-open{overflow:hidden}
  #menu-close{display:inline-flex}
  .scrim{position:fixed;inset:0;z-index:var(--z-overlay);background:rgba(23,25,28,.45)}
  .scrim[hidden]{display:none}
  .main{padding:var(--space-6) var(--page-padding-mobile) var(--space-10)}
  .panel__tabs,.panel__in{padding-left:var(--page-padding-mobile);padding-right:var(--page-padding-mobile)}
  .doc h1{font:var(--type-section-title);font-size:24px;line-height:32px}
  .doc__head{flex-direction:column;gap:var(--space-3)}
  .ep__path{font-size:15px;line-height:22px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager__a--next{grid-column:1}
  .md pre,.code-block{border-radius:var(--radius-control);padding:var(--space-3) var(--space-4)}
  .try__field input,.sidebar__search input{font-size:16px} /* iOS zooms into smaller inputs */
}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}