/* API docs view (ui/apidocs.js): table of contents, reading column, examples beside the text on wide screens. */
#v-apidocs.on{grid-template-columns:232px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:var(--bg)}
.ad-toc{border-right:1px solid var(--line);background:var(--bg-2);overflow-y:auto;padding:var(--sp-5) var(--sp-3) var(--sp-7)}
.ad-toch{display:flex;align-items:baseline;gap:var(--sp-2);padding:0 var(--sp-2) var(--sp-4)}
.ad-toch b{font-size:var(--fs-5);font-weight:600}.ad-toch span{color:var(--fg-3);font-size:var(--fs-2)}
.ad-tg{display:flex;flex-direction:column;gap:1px;margin-bottom:var(--sp-4)}
.ad-tg .lbl-mono{font-size:10px;color:var(--fg-3);padding:0 var(--sp-2) var(--sp-1)}
.ad-toc a{display:block;padding:5px var(--sp-2);border-radius:var(--r8);color:var(--fg-2);font-size:var(--fs-3);line-height:18px;text-decoration:none;position:relative}
.ad-toc a:hover{background:var(--bg-3);color:var(--fg)}
.ad-toc a.on{background:var(--sel);color:var(--accent-deep);font-weight:500}
.ad-toc a.on::before{content:"";position:absolute;left:-6px;top:6px;bottom:6px;width:2px;border-radius:var(--r4);background:var(--accent)}

.ad-main{position:relative;overflow-y:auto;container-type:inline-size;scroll-padding-top:var(--sp-4)}
.ad-wrap{max-width:1360px;margin:0 auto;padding:0 var(--sp-7) 96px}
.ad-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5) var(--sp-8);padding:var(--sp-7) 0;border-top:1px solid var(--line)}
.ad-sec:first-child{border-top:0}
.ad-text{min-width:0;max-width:720px}
.ad-code{min-width:0;max-width:860px;display:flex;flex-direction:column;gap:var(--sp-4)}
.ad-sec.full .ad-text{max-width:980px}
@container (min-width:1120px){
  .ad-sec{grid-template-columns:minmax(0,11fr) minmax(0,12fr);align-items:start}
  .ad-sec.full{grid-template-columns:minmax(0,1fr)}
  .ad-code{position:sticky;top:var(--sp-4)}
}
.ad-text h1{margin:0 0 var(--sp-3);font-size:28px;line-height:34px;font-weight:650;letter-spacing:-.01em}
.ad-text h2{margin:0 0 var(--sp-3);font-size:var(--fs-6);line-height:26px;font-weight:600}
.ad-lead{font-size:var(--fs-5);line-height:25px;color:var(--fg-2);margin:0 0 var(--sp-5)}
.ad-prose{font-size:var(--fs-4);line-height:23px;padding:0;margin:0}
.ad-prose p{margin:0 0 var(--sp-3)}.ad-prose ul{margin:0 0 var(--sp-3);padding-left:var(--sp-5)}.ad-prose li{margin-bottom:var(--sp-1)}
.ad-prose code{font-size:var(--fs-2)}
.ad-prose table{display:table;width:100%;font-size:var(--fs-3);line-height:20px;margin:var(--sp-3) 0 var(--sp-4)}
.ad-prose th{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);padding-bottom:var(--sp-2)}
.ad-prose td{padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;color:var(--fg-2)}
.ad-prose td:first-child{white-space:nowrap;color:var(--fg)}.ad-prose td:first-child code{white-space:nowrap}
.ad-prose pre{font-size:var(--fs-2);box-shadow:none;border:1px solid var(--line);border-radius:var(--r12)}
.ad-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:var(--sp-4) 0}
.ad-acts .btn{height:30px}.ad-acts .btn.primary{background:var(--accent);color:var(--accent-fg)}
.ad-base{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r16);background:var(--bg-2);margin-bottom:var(--sp-2)}
.ad-base .lbl-mono{font-size:10px;color:var(--fg-3);flex:none}
.ad-base code{flex:1;min-width:0;font-size:var(--fs-3);color:var(--accent-deep);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-ways{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-2);margin:var(--sp-5) 0 var(--sp-2)}
.ad-ways a{display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r16);color:inherit;text-decoration:none}
.ad-ways a:hover{border-color:var(--accent);background:var(--sel)}
.ad-ways b{font-weight:600}.ad-ways span{color:var(--fg-2);font-size:var(--fs-2);line-height:17px}
.ad-lims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);margin:var(--sp-2) 0 var(--sp-4)}
.ad-lims div{padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r16);display:flex;flex-direction:column}
.ad-lims b{font-size:var(--fs-6);line-height:26px;font-weight:600;color:var(--accent-deep)}.ad-lims span{color:var(--fg-2);font-size:var(--fs-2)}

/* code blocks: the look of the product's SQL blocks */
.ad-ex{border:1px solid var(--line);border-radius:var(--r20);background:var(--bg-2);overflow:hidden;min-width:0}
.ad-exbar{display:flex;align-items:center;gap:var(--sp-2);min-height:36px;padding:var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-3);border-bottom:1px solid var(--line)}
.ad-ext{font-size:var(--fs-2);font-weight:500;color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ad-hint{font-size:var(--fs-1);color:var(--fg-3);padding-right:var(--sp-2)}
.ad-langs{display:inline-flex;gap:2px;padding:2px;border-radius:var(--r8);background:var(--bg-3);flex:none}
.ad-langs button{height:22px;padding:0 var(--sp-2);border-radius:5px;font-size:var(--fs-2);font-weight:500;color:var(--fg-2)}
.ad-langs button:hover{color:var(--fg)}
.ad-langs button.on{background:var(--bg);color:var(--accent-deep);box-shadow:var(--sh-1)}
.ad-copy{display:inline-flex;align-items:center;gap:var(--sp-1);height:24px;padding:0 var(--sp-2);font-size:var(--fs-2);color:var(--fg-3);flex:none}
.ad-copy:hover{background:var(--bg-3);color:var(--fg)}.ad-copy.ok{color:var(--ok)}
.ad-copy svg{width:14px;height:14px}
.ad-pre{margin:0;padding:var(--sp-3) var(--sp-4);overflow:auto;white-space:pre;max-height:520px;font-family:var(--mono);font-size:var(--fs-2);line-height:19px;tab-size:4}
.ad-pre code{font-size:inherit;line-height:inherit;background:none;padding:0}

/* try it */
.ad-try{border:1px solid var(--line);border-radius:var(--r16);overflow:hidden;margin:var(--sp-4) 0 0}
.ad-tryh{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3)}
.ad-tryh code{font-size:var(--fs-3)}
.ad-trys{font-size:var(--fs-1);color:var(--fg-3);display:inline-flex;align-items:center;gap:var(--sp-1);white-space:nowrap}
.ad-tryh .btn svg{width:12px;height:12px;fill:currentColor;stroke:none}
.ad-tryo{border-top:1px solid var(--line);background:var(--bg-2);max-height:300px}

/* method badges */
.ad-m{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:18px;padding:0 6px;border-radius:var(--r4);font:600 10px var(--mono);letter-spacing:.04em;background:var(--bg-3);color:var(--fg-2);flex:none}
.ad-m.get{background:var(--ok-soft);color:var(--ok)}.ad-m.post{background:var(--accent-soft);color:var(--accent-deep)}
.ad-m.put,.ad-m.patch{background:var(--warn-soft);color:var(--warn)}.ad-m.delete{background:var(--err-soft);color:var(--err)}

/* the result, field by field */
.ad-fields{margin:var(--sp-3) 0 var(--sp-4);display:flex;flex-direction:column}
.ad-fields>div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-2);margin:0 calc(-1*var(--sp-2));border-radius:var(--r8);border-bottom:1px solid var(--line-soft)}
.ad-fields dt code{font-size:var(--fs-2);color:var(--accent-deep)}
.ad-fields dd{margin:0;color:var(--fg-2);font-size:var(--fs-3);line-height:20px}
.ad-fields dd code{background:var(--bg-3);padding:0 var(--sp-1);border-radius:var(--r4)}
.ad-fields .hot{background:var(--sel)}
.ad-fl{display:inline-block;min-width:100%;border-radius:var(--r4);cursor:default;box-shadow:-8px 0 0 transparent}
.ad-fl.hot{background:var(--accent-soft);box-shadow:-8px 0 0 var(--accent-soft),8px 0 0 var(--accent-soft)}

/* the event stream sample */
.ad-ssel{padding:var(--sp-3) var(--sp-3) var(--sp-2);display:flex;flex-direction:column;gap:2px;overflow:hidden}
.ad-ev{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--sp-2);align-items:baseline;padding:1px var(--sp-1);border-radius:var(--r4);opacity:.22;transition:opacity .25s,background .25s}
.ad-ev.in{opacity:1}.ad-ev.now{background:var(--accent-soft)}
.ad-ev b{font:600 10px/18px var(--mono);letter-spacing:.04em;color:var(--fg-3)}
.ad-ev.e-token b{color:var(--accent-deep)}.ad-ev.e-done b{color:var(--ok)}.ad-ev.e-start b{color:var(--fg)}
.ad-ev code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--fg-2)}.ad-ev.e-ka code{color:var(--fg-3);font-style:italic}
.ad-sseo{border-top:1px solid var(--line);padding:var(--sp-2) var(--sp-3) var(--sp-3);background:var(--bg)}
.ad-sseo .lbl-mono{font-size:10px;color:var(--fg-3)}
.ad-sseo p{margin:var(--sp-1) 0 0;min-height:22px;font-size:var(--fs-4);line-height:22px}
.ad-sseo p::after{content:"";display:inline-block;width:6px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--accent);border-radius:1px;animation:ad-blink 1s steps(2) infinite}
@keyframes ad-blink{50%{opacity:0}}

/* reference */
.ad-search{display:flex;align-items:center;gap:var(--sp-2);height:36px;padding:0 var(--sp-3);border:1px solid var(--line-2);border-radius:var(--r16);color:var(--fg-3);margin:var(--sp-4) 0;background:var(--bg)}
.ad-search:focus-within{border-color:var(--accent)}
.ad-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:var(--fs-4)}
.ad-search span{font-size:var(--fs-2);white-space:nowrap}
.ad-grp{border:1px solid var(--line);border-radius:var(--r20);margin-bottom:var(--sp-2);overflow:hidden}
.ad-grp>summary{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3);cursor:pointer;list-style:none}
.ad-grp>summary::-webkit-details-marker,.ad-op>summary::-webkit-details-marker{display:none}
.ad-grp>summary:hover{background:var(--bg-2)}
.ad-grp>summary svg{color:var(--fg-3);transition:transform .15s}.ad-grp[open]>summary svg{transform:rotate(90deg)}
.ad-grp>summary b{font-weight:600;white-space:nowrap}
.ad-gb{flex:1;min-width:0;color:var(--fg-3);font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-grp[open]>summary{border-bottom:1px solid var(--line)}
.ad-op{border-bottom:1px solid var(--line-soft)}.ad-op:last-of-type{border-bottom:0}
.ad-op>summary{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);cursor:pointer;list-style:none;min-width:0}
.ad-op>summary:hover,.ad-op[open]>summary{background:var(--bg-2)}
.ad-path{font-size:var(--fs-3);white-space:nowrap;flex:none;max-width:60%;overflow:hidden;text-overflow:ellipsis}
.ad-path i{font-style:normal;color:var(--accent-deep)}
.ad-sum{flex:1;min-width:0;color:var(--fg-3);font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-opb{padding:var(--sp-3) var(--sp-4) var(--sp-4);background:var(--bg-2);border-top:1px solid var(--line-soft)}
.ad-opb .ad-prose{font-size:var(--fs-3);line-height:21px;max-width:820px}
.ad-opb h6{margin:var(--sp-3) 0 var(--sp-1);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.ad-opb h6 span{text-transform:none;letter-spacing:0}
.ad-pt{border-collapse:collapse;width:100%;font-size:var(--fs-3)}
.ad-pt td{border-top:1px solid var(--line);padding:var(--sp-2) var(--sp-4) var(--sp-2) 0;vertical-align:top;color:var(--fg-2)}
.ad-pt td:first-child{white-space:nowrap;color:var(--fg)}.ad-pt td:nth-child(2){min-width:190px}
.ad-pt td p{margin:0}
.ad-pt em{font:500 10px var(--mono);font-style:normal;color:var(--warn);margin-left:var(--sp-2)}

/* narrow: the table of contents becomes a strip above the page */
@media (max-width:860px){
  #v-apidocs.on{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .ad-toc{display:flex;gap:var(--sp-1);overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid var(--line);padding:var(--sp-2) var(--sp-3)}
  .ad-toch,.ad-tg .lbl-mono{display:none}
  .ad-tg{flex-direction:row;margin:0;gap:var(--sp-1)}
  .ad-toc a{white-space:nowrap}.ad-toc a.on::before{display:none}
  .ad-wrap{padding:0 var(--sp-4) 72px}
  .ad-sec{padding:var(--sp-6) 0}
  .ad-text h1{font-size:24px;line-height:30px}
  .ad-exbar{flex-wrap:wrap}.ad-ext{flex-basis:100%}
  .ad-fields>div{grid-template-columns:minmax(0,1fr);gap:0}
  .ad-gb,.ad-sum{display:none}.ad-path{max-width:none;flex:1}
  .ad-prose td:first-child{white-space:normal}
}