/* SPDX-License-Identifier: AGPL-3.0-or-later
   Copyright (C) 2026 Luca Padovan */

/* Qawk documentation.
   Same palette, type and density as the console, so the docs and the thing
   they describe look like one product. Dark first, light on request. */

:root {
  color-scheme: dark;
  --bg:        #0d1117;
  --bg-2:      #141a22;
  --bg-3:      #1b232d;
  --bg-4:      #212b36;
  --line:      #26303c;
  --line-2:    #354250;
  --fg:        #e3e9f0;
  --fg-dim:    #93a1b1;
  --fg-faint:  #64748b;
  --accent:    #3ba9a1;
  --accent-2:  #57c7bf;
  --accent-soft: rgba(59, 169, 161, .14);
  --ok:        #3fb950;
  --warn:      #d29922;
  --err:       #f05d5d;
  --info:      #58a6ff;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sidebar: 268px;
  --right: 440px;
  --head: 52px;
}

:root[data-theme="light"],
:root:not([data-theme="dark"]) { }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #ffffff; --bg-2: #f6f8fa; --bg-3: #eef2f6; --bg-4: #e6ecf2;
    --line: #d5dde5; --line-2: #c0cad4;
    --fg: #16202b; --fg-dim: #556373; --fg-faint: #7b8794;
    --accent: #157f78; --accent-2: #0f6b64;
    --accent-soft: rgba(21, 127, 120, .10);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff; --bg-2: #f6f8fa; --bg-3: #eef2f6; --bg-4: #e6ecf2;
  --line: #d5dde5; --line-2: #c0cad4;
  --fg: #16202b; --fg-dim: #556373; --fg-faint: #7b8794;
  --accent: #157f78; --accent-2: #0f6b64;
  --accent-soft: rgba(21, 127, 120, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.65 var(--sans);
  font-feature-settings: "tnum" 1, "cv05" 1, "cv08" 1, "ss03" 1;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select { font: inherit; color: inherit; }
code, kbd, pre, samp { font-family: var(--mono); }

/* ------------------------------------------------------------- header */

header.top {
  position: fixed; inset: 0 0 auto 0; height: var(--head); z-index: 40;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: .2px; }
.brand:hover { text-decoration: none; }
.brand img { width: 24px; height: 24px; display: block; }
.brand b { color: var(--fg); font-size: 16px; }
.brand span {
  color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; padding-top: 2px;
}
.top nav.links { display: flex; gap: 4px; margin-left: 10px; }
.top nav.links a {
  color: var(--fg-dim); padding: 6px 10px; border-radius: 6px; font-size: 13.5px;
}
.top nav.links a:hover { background: var(--bg-3); color: var(--fg); text-decoration: none; }
.top nav.links a.on { color: var(--accent-2); background: var(--accent-soft); }
.top .spacer { flex: 1; }

.search-wrap { position: relative; }
#search {
  width: 250px; background: var(--bg); border: 1px solid var(--line-2); color: var(--fg);
  border-radius: 7px; padding: 6px 10px 6px 30px; font-size: 13.5px; outline: none;
}
#search:focus { border-color: var(--accent); }
.search-wrap::before {
  content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-52%);
  color: var(--fg-faint); font-size: 16px; pointer-events: none;
}
#results {
  position: absolute; top: 36px; right: 0; width: 420px; max-height: 60vh; overflow: auto;
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); padding: 6px; display: none; z-index: 50;
}
#results.open { display: block; }
#results a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--fg); }
#results a:hover, #results a.sel { background: var(--bg-3); text-decoration: none; }
#results .r-t { font-weight: 500; font-size: 13.5px; }
#results .r-s { color: var(--fg-faint); font-size: 12px; }
#results .none { padding: 10px; color: var(--fg-faint); font-size: 13px; }

.icon-btn {
  background: none; border: 1px solid var(--line-2); border-radius: 7px; cursor: pointer;
  color: var(--fg-dim); width: 32px; height: 30px; display: grid; place-items: center; font-size: 14px;
}
.icon-btn:hover { color: var(--fg); border-color: var(--accent); }
#menu-btn { display: none; }

/* ------------------------------------------------------------- shell */

.shell { display: flex; padding-top: var(--head); min-height: 100vh; }

aside.side {
  position: fixed; top: var(--head); bottom: 0; left: 0; width: var(--sidebar);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border-right: 1px solid var(--line); padding: 14px 8px 40px;
}
aside.side .grp { margin-bottom: 2px; }
aside.side .grp > button {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--fg);
  padding: 7px 10px; border-radius: 6px; font-size: 13.5px; font-weight: 500;
}
aside.side .grp > button:hover { background: var(--bg-3); }
aside.side .grp > button .n {
  display: flex; align-items: center; justify-content: center;
  width: 18px; flex: none; color: var(--fg-faint); transition: color .14s;
}
aside.side .grp > button:hover .n,
aside.side .grp.open > button .n { color: var(--accent); }
aside.side .grp > button .caret {
  margin-left: auto; display: flex; align-items: center;
  color: var(--fg-faint); opacity: .45;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), opacity .15s, color .15s;
}
aside.side .grp > button:hover .caret { opacity: .95; color: var(--fg-dim); }
aside.side .grp.open > button .caret { transform: rotate(90deg); opacity: .9; color: var(--accent); }
aside.side .grp .caret .ico { stroke-width: 2.2; }
aside.side .grp ul { display: none; list-style: none; margin: 1px 0 6px; padding: 0 0 0 10px; }
aside.side .grp.open ul { display: block; }
aside.side .grp ul a {
  display: block; padding: 5px 10px; border-radius: 6px; color: var(--fg-dim);
  font-size: 13px; border-left: 2px solid transparent;
}
aside.side .grp ul a:hover { color: var(--fg); background: var(--bg-3); text-decoration: none; }
aside.side .grp ul a.on {
  color: var(--accent-2); background: var(--accent-soft);
  border-left-color: var(--accent); font-weight: 600;
}
aside.side .sec-label {
  color: var(--fg-faint); font-size: 10.5px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; padding: 14px 10px 6px;
}

main { flex: 1; min-width: 0; margin-left: var(--sidebar); }
.page { max-width: 860px; padding: 26px 42px 90px; }
.page.wide { max-width: none; }

/* ------------------------------------------------------------- content */

.crumbs { color: var(--fg-faint); font-size: 12.5px; margin-bottom: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
.crumbs a { color: var(--fg-dim); }
.crumbs .sep { opacity: .5; }

h1 { font-size: 34px; line-height: 1.2; letter-spacing: -.5px; margin: 0 0 12px; font-weight: 650; }
h2 {
  font-size: 22px; letter-spacing: -.2px; margin: 42px 0 12px; font-weight: 600;
  padding-top: 14px; border-top: 1px solid var(--line);
}
h3 { font-size: 17px; margin: 28px 0 8px; font-weight: 600; }
h4 { font-size: 14.5px; margin: 20px 0 6px; font-weight: 600; color: var(--fg-dim); }
h2:first-of-type { border-top: 0; padding-top: 0; }
.lead { font-size: 17.5px; line-height: 1.6; color: var(--fg-dim); margin: 0 0 24px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin: 4px 0; }
li > ul, li > ol { margin: 4px 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 34px 0; }

.anchor {
  color: var(--fg-faint); font-weight: 400; margin-left: 8px; opacity: 0;
  font-size: .8em; transition: opacity .12s;
}
h2:hover .anchor, h3:hover .anchor { opacity: 1; }

code {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: .875em;
}
pre {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 14px 16px; overflow-x: auto; margin: 0 0 16px; font-size: 13px; line-height: 1.6;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.pre-wrap { position: relative; }
.copy {
  position: absolute; top: 8px; right: 8px; background: var(--bg-3); color: var(--fg-dim);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 8px; font-size: 11px;
  cursor: pointer; opacity: 0; transition: opacity .12s;
}
.pre-wrap:hover .copy { opacity: 1; }
.copy:hover { color: var(--fg); border-color: var(--accent); }
.copy.done { color: var(--ok); border-color: var(--ok); }

table { border-collapse: collapse; width: 100%; margin: 0 0 18px; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--fg-dim); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
tbody tr:hover { background: var(--bg-2); }
td code { white-space: nowrap; }

blockquote {
  margin: 0 0 16px; padding: 2px 0 2px 16px; border-left: 3px solid var(--line-2);
  color: var(--fg-dim);
}

/* An admonition says what kind of thing it is before it says the thing. The
   mark is solid rather than outlined: at 17px an outline is a smudge. */
.note, .warn-box, .tip {
  --adm: var(--info);
  border: 1px solid var(--line); border-left: 3px solid var(--adm);
  background: var(--bg-2); border-radius: 0 9px 9px 0; padding: 13px 18px 14px;
  margin: 0 0 20px; font-size: 14px;
}
.warn-box { --adm: var(--warn); }
.tip { --adm: var(--ok); }
.note > :last-child, .warn-box > :last-child, .tip > :last-child { margin-bottom: 0; }
.note b, .warn-box b, .tip b { color: var(--fg); }

.adm-head {
  display: flex; align-items: center; gap: 8px; margin: 0 0 7px;
  color: var(--adm); font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
.adm-head .ico { color: var(--adm); flex: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 14px; margin: 0 0 22px; }
.card {
  display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px;
  padding: 16px 18px; color: var(--fg); transition: border-color .14s, transform .14s;
}
.card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); }
.card .ic { font-size: 19px; }
.card .ico { width: 24px; height: 24px; }
.card b { display: block; margin: 6px 0 4px; font-size: 15px; }
.card span { color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; display: block; }

.steps { counter-reset: s; list-style: none; padding: 0; }
.steps > li { counter-increment: s; position: relative; padding-left: 38px; margin: 0 0 20px; }
.steps > li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent);
  font-size: 12.5px; font-weight: 600; font-family: var(--mono);
}
.steps > li > b:first-child { display: block; margin-bottom: 3px; }

.pill {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 5px; letter-spacing: .4px; vertical-align: middle;
}
.pill.get { background: rgba(63,185,80,.16); color: var(--ok); }
.pill.post { background: rgba(88,166,255,.16); color: var(--info); }
.pill.put { background: rgba(210,153,34,.18); color: var(--warn); }
.pill.delete { background: rgba(240,93,93,.16); color: var(--err); }
.pill.head, .pill.patch { background: var(--bg-4); color: var(--fg-dim); }
.pill.req { background: rgba(240,93,93,.14); color: var(--err); }
.pill.opt { background: var(--bg-4); color: var(--fg-faint); }

.kbd {
  display: inline-block; background: var(--bg-3); border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; font-size: 11.5px;
  font-family: var(--mono);
}

.pager { display: flex; gap: 14px; margin-top: 52px; border-top: 1px solid var(--line); padding-top: 22px; }
.pager a {
  flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; color: var(--fg);
  display: flex; align-items: center; gap: 12px; min-width: 0;
  transition: border-color .14s, background .14s;
}
.pager a:hover { border-color: var(--accent); background: var(--bg-2); text-decoration: none; }
.pager a .ico { color: var(--fg-faint); flex: none; transition: color .14s, transform .14s; }
.pager a:hover .ico { color: var(--accent-2); }
.pager a.prev:hover .ico { transform: translateX(-3px); }
.pager a.next:hover .ico { transform: translateX(3px); }
.pager a span { min-width: 0; }
.pager a.next { text-align: right; justify-content: flex-end; }
.pager small { display: block; color: var(--fg-faint); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; }
.pager b { font-weight: 500; }

/* on-page table of contents */
.toc {
  position: fixed; top: calc(var(--head) + 26px); right: 0; width: 210px; padding: 0 20px 40px 0;
  max-height: calc(100vh - var(--head) - 40px); overflow-y: auto; font-size: 13px;
}
.toc b { display: block; color: var(--fg-faint); font-size: 10.5px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 8px; }
.toc a { display: block; color: var(--fg-dim); padding: 3px 0 3px 10px; border-left: 2px solid var(--line); }
.toc a:hover { color: var(--fg); text-decoration: none; }
.toc a.on { color: var(--accent-2); border-left-color: var(--accent); }
.toc a.h3 { padding-left: 22px; font-size: 12.5px; }
@media (max-width: 1340px) { .toc { display: none; } }
@media (min-width: 1341px) { main.has-toc .page { margin-right: 210px; } }

/* ------------------------------------------------------------- landing */

.hero { padding: 60px 42px 40px; max-width: 980px; }
.hero h1 { font-size: 46px; letter-spacing: -1px; }
.hero .lead { font-size: 19px; max-width: 700px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.btn {
  display: inline-block; padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 14.5px;
  background: var(--accent); color: #04211f; border: 1px solid var(--accent);
}
.btn:hover { background: var(--accent-2); text-decoration: none; }
.btn.ghost { background: none; color: var(--fg); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--accent); background: var(--bg-2); }

/* ------------------------------------------------------------- API */

.api-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--right); gap: 30px; }
@media (max-width: 1180px) { .api-layout { grid-template-columns: minmax(0,1fr); } }

/* On a wide screen the two columns scroll on their own, the way the sidebar
   already does. The right column holds the sample and the send panel, which
   together are taller than a screen: sticky was enough when it was one code
   block, and stopped being enough the moment there was a form under it. A
   reader comparing a parameter with the sample should not have to scroll one
   of them out of sight to reach the other.
   Below that width there is one column, and the page scrolls as any page. */
@media (min-width: 1181px) {
  body.api-page { overflow: hidden; }
  body.api-page .shell { height: 100vh; }
  body.api-page main { height: calc(100vh - var(--head)); overflow: hidden; }
  body.api-page .page.wide {
    height: 100%; padding: 0; display: flex; flex-direction: column; min-height: 0;
  }
  /* the breadcrumbs stay put: they say where you are, and that does not
     change as either column moves */
  body.api-page #api-crumbs {
    flex: none; margin: 0; padding: 18px 42px 12px;
    border-bottom: 1px solid var(--line); background: var(--bg);
  }
  #api-main { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 42px 80px; }
  /* one endpoint: two scrollers, no outer one */
  #api-main.split { overflow: hidden; padding: 0; }
  #api-main.split .api-layout { height: 100%; gap: 0; }
  #api-main.split .api-layout > * {
    height: 100%; overflow-y: auto; overscroll-behavior: contain; min-width: 0;
  }
  #api-main.split .api-layout > :first-child { padding: 26px 30px 80px 42px; }
  #api-main.split .rightcol {
    position: static; padding: 26px 20px 80px 0; border-left: 1px solid var(--line);
    padding-left: 22px;
  }
  /* a thin scrollbar, so a column that scrolls does not shout about it */
  #api-main.split .api-layout > *::-webkit-scrollbar { width: 9px; }
  #api-main.split .api-layout > *::-webkit-scrollbar-thumb {
    background: var(--line-2); border-radius: 5px;
  }
  #api-main.split .api-layout > * { scrollbar-width: thin; }
}

.ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.ep-url {
  display: flex; align-items: center; gap: 10px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  font-family: var(--mono); font-size: 13px; overflow-x: auto; width: 100%;
}
.ep-url .path { color: var(--fg); white-space: nowrap; }
.ep-url .base { color: var(--fg-faint); }

.params { margin: 0 0 20px; }
.param { border-bottom: 1px solid var(--line); padding: 10px 0; }
.param:last-child { border-bottom: 0; }
.param .nm { font-family: var(--mono); font-size: 13.5px; color: var(--fg); }
.param .ty { color: var(--accent); font-size: 12px; font-family: var(--mono); margin-left: 8px; }
.param .rq { float: right; }
.param .ds { color: var(--fg-dim); font-size: 13.5px; margin-top: 3px; }
.param .ds code { font-size: 12.5px; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.tabs button {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--fg-dim); font-family: var(--mono);
}
.tabs button:hover { color: var(--fg); border-color: var(--line-2); }
.tabs button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-2); }
.tabs button.code-200.on { border-color: var(--ok); color: var(--ok); background: rgba(63,185,80,.12); }
.tabs button.code-err.on { border-color: var(--err); color: var(--err); background: rgba(240,93,93,.12); }

.rightcol { position: sticky; top: calc(var(--head) + 24px); align-self: start; }
.panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 11px; margin: 0 0 16px; }
.panel > .ph {
  padding: 9px 14px; border-bottom: 1px solid var(--line); color: var(--fg-faint);
  font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.panel > .pb { padding: 12px 14px; }
.panel pre { background: var(--bg); margin: 0; font-size: 12px; border-radius: 7px; }
/* The real logo above its name, the way an API reference does it: the mark is
   what is recognised, the word is what confirms it. */
.lang-tabs { display: flex; gap: 4px; flex-wrap: nowrap; padding: 12px 10px 4px; }
.lang-tabs button {
  background: none; border: 1px solid transparent; border-radius: 8px;
  padding: 8px 4px 6px; cursor: pointer; color: var(--fg-faint);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  flex: 1 1 0; min-width: 0;
  font-size: 8.8px; letter-spacing: 0; font-weight: 600; text-transform: uppercase;
  transition: background .12s, border-color .12s, color .12s;
}
.lang-tabs button span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lang-tabs button .logo { opacity: .55; transition: opacity .12s; }
.lang-tabs button:hover { color: var(--fg); background: var(--bg-3); }
.lang-tabs button:hover .logo { opacity: .9; }
.lang-tabs button.on {
  color: var(--fg); border-color: var(--accent); background: var(--accent-soft);
}
.lang-tabs button.on .logo { opacity: 1; }

.ep-list { margin: 0 0 22px; }
.ep-list a {
  display: flex; align-items: baseline; gap: 12px; padding: 9px 12px; border-radius: 8px;
  border: 1px solid transparent; color: var(--fg);
}
.ep-list a:hover { background: var(--bg-2); border-color: var(--line); text-decoration: none; }
.ep-list .pill { flex: 0 0 52px; text-align: center; }
.ep-list .p { font-family: var(--mono); font-size: 13px; }
.ep-list .s { color: var(--fg-faint); font-size: 12.5px; margin-left: auto; text-align: right; }

/* ------------------------------------------------------------- icons */

.ico { vertical-align: -.18em; flex: none; }
h2 > .ico, h3 > .ico { margin-right: 9px; color: var(--accent); vertical-align: -.1em; }
.card .ico { color: var(--accent); }

.panel > .ph .ico { color: var(--fg-faint); }
.lang-tabs button .ico, .copy .ico, .btn-send .ico { margin-right: 5px; }
td .ico, li > .ico { color: var(--accent); margin-right: 6px; }

/* the copy button on a generated sample is always there: it is the point */
.copy.always { opacity: 1; display: inline-flex; align-items: center; }
.panel .pre-wrap .copy { top: 6px; right: 6px; background: var(--bg-3); }

/* ------------------------------------------------------- send a request */

.panel.try .pb { display: flex; flex-direction: column; gap: 10px; }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span {
  color: var(--fg-dim); font-size: 11px; font-weight: 600; letter-spacing: .4px;
  text-transform: uppercase;
}
.fld input, .fld textarea {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 7px;
  padding: 7px 10px; font-size: 12.5px; font-family: var(--mono); color: var(--fg);
  outline: none; width: 100%; resize: vertical;
}
.fld input:focus, .fld textarea:focus { border-color: var(--accent); }
.fld small { color: var(--fg-faint); font-size: 11px; line-height: 1.4; }

.btn-send {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #04211f; border: 1px solid var(--accent);
  border-radius: 8px; padding: 9px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.btn-send:hover { background: var(--accent-2); }
:root[data-theme="light"] .btn-send { color: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .btn-send { color: #fff; } }

.resp:empty { display: none; }
.resp {
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  background: var(--bg); font-size: 12.5px;
}
.resp.busy { color: var(--fg-faint); }
.resp.ok { border-color: rgba(63,185,80,.5); }
.resp.bad { border-color: rgba(240,93,93,.45); }
.resp .rline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.resp .ms { margin-left: auto; color: var(--fg-faint); font-size: 11px; font-family: var(--mono); }
.resp pre { max-height: 300px; overflow: auto; margin: 0; font-size: 11.5px; }
.resp p { margin: 0 0 8px; color: var(--fg-dim); font-size: 12.5px; line-height: 1.5; }
.resp pre code { white-space: pre-wrap; word-break: break-word; }

/* a long generated sample wraps rather than hiding behind a scrollbar */
.panel .pre-wrap pre code { white-space: pre-wrap; word-break: break-word; }

/* ------------------------------------------------------------ figures */

figure { margin: 0 0 22px; }
figure img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-2);
}
figure figcaption {
  color: var(--fg-faint); font-size: 12.5px; margin-top: 8px; line-height: 1.5;
}
figure figcaption b { color: var(--fg-dim); }

/* ------------------------------------------------------------- mobile */

@media (max-width: 960px) {
  :root { --sidebar: 0px; }
  #menu-btn { display: grid; }
  .top nav.links { display: none; }
  #search { width: 150px; }
  #results { width: min(92vw, 420px); }
  aside.side {
    width: 280px; transform: translateX(-100%); transition: transform .2s ease;
    z-index: 45; box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  aside.side.open { transform: none; }
  main { margin-left: 0; }
  .page, .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: 32px; }
  h1 { font-size: 27px; }
  .backdrop { position: fixed; inset: var(--head) 0 0 0; background: rgba(0,0,0,.5); z-index: 44; }
}

/* ------------------------------------------------- code, numbered and lit */

/* Line numbers come from a counter on each line, not from a gutter column, so
   they stay beside the right line when a long line wraps -- and they are not
   in what the copy button copies, because ::before content never is. */
pre.hl { counter-reset: l; padding: 12px 0; position: relative; }
pre.hl code { display: block; }
pre.hl .li {
  display: block; position: relative; padding: 0 16px 0 52px; min-height: 1.6em;
  white-space: pre-wrap; word-break: break-word;
}
pre.hl .li::before {
  counter-increment: l; content: counter(l);
  position: absolute; left: 0; width: 36px; text-align: right;
  color: var(--fg-faint); opacity: .55; font-variant-numeric: tabular-nums;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
pre.hl .li:hover::before { opacity: .9; }
/* a single line is a command to run, not a listing to refer to */
pre.hl.one { padding: 12px 0; }
pre.hl.one .li { padding-left: 16px; }
pre.hl.one .li::before { content: none; }

/* The language, once, in the corner -- so a reader knows what they are
   looking at without counting sigils. */
pre.hl::after {
  content: attr(data-lang); position: absolute; top: 6px; right: 10px;
  font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--fg-faint); opacity: .5; pointer-events: none;
}
pre.hl[data-lang="text"]::after { content: none; }
.pre-wrap:hover pre.hl::after { opacity: 0; }

/* Tokens. Two families only -- what is data (strings, numbers) and what is
   instruction (keywords, flags) -- plus comments receding and URLs standing
   out. More colours than that is decoration. */
.t-c { color: var(--fg-faint); font-style: italic; }
.t-s { color: #a5d6a7; }
.t-n { color: #ffab70; }
.t-k { color: #79c0ff; font-weight: 500; }
.t-f { color: #d2a8ff; }
.t-v { color: #ffab70; }
.t-p { color: #7ee0d6; }
.t-u { color: var(--accent-2); text-decoration: underline; text-decoration-style: dotted; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .t-s { color: #0a7a3d; }
  :root:not([data-theme="dark"]) .t-n { color: #9a4b00; }
  :root:not([data-theme="dark"]) .t-k { color: #0550ae; }
  :root:not([data-theme="dark"]) .t-f { color: #7b3fb8; }
  :root:not([data-theme="dark"]) .t-v { color: #9a4b00; }
  :root:not([data-theme="dark"]) .t-p { color: #0f6b64; }
}
:root[data-theme="light"] .t-s { color: #0a7a3d; }
:root[data-theme="light"] .t-n { color: #9a4b00; }
:root[data-theme="light"] .t-k { color: #0550ae; }
:root[data-theme="light"] .t-f { color: #7b3fb8; }
:root[data-theme="light"] .t-v { color: #9a4b00; }
:root[data-theme="light"] .t-p { color: #0f6b64; }

/* ------------------------------------------------------------ scrollbars */

/* One scrollbar style everywhere, thin and quiet. The code blocks wrap rather
   than scroll sideways, so the only bars left are the ones that mean
   something: a column, and a response too long to show at once. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--fg-faint); }
*::-webkit-scrollbar-corner { background: transparent; }

/* No sideways bar under a sample: it wraps instead, which is what a reader
   wants from a shell line they are about to copy anyway. */
pre, .panel pre, .resp pre { overflow-x: hidden; }

/* The API reference's endpoint tree sits inside the numbered section, so its
   own groups nest one level further in. */
aside.side .grp.sub { margin: 2px 0; }
aside.side .grp.sub > button {
  font-size: 12.5px; font-weight: 600; color: var(--fg-dim); padding: 6px 10px;
}
aside.side .grp.sub > button:hover { color: var(--fg); }
aside.side .grp.sub ul { padding-left: 8px; }
aside.side .grp.sub .sec-label { padding: 10px 10px 3px; font-size: 9.5px; }