/* The docs site (LAB-386): the terminal's tokens (tokens.css, copied as is), its dark look. */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; background: var(--bg); color: var(--ink-2); font: 400 var(--fs-l)/1.55 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.top { flex: none; display: flex; align-items: center; gap: var(--sp-5); height: var(--h-top-bar); padding: 0 var(--sp-8); background: var(--surface); border-bottom: 1px solid var(--line-soft); }
.brand { display: flex; align-items: baseline; gap: var(--sp-4); color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand b { font: 700 var(--fs-xl) var(--font-display); }
.brand span { color: var(--ink-2); }
.ver { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lang { margin-left: auto; padding: var(--sp-2) var(--sp-5); border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); }
.lang:hover { text-decoration: none; background: var(--surface-3); }

.main { flex: 1; min-height: 0; display: flex; }
.nav { flex: none; width: var(--w-docs-nav); display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-6) var(--sp-4); background: var(--surface); border-right: 1px solid var(--line-soft); overflow-y: auto; }
.q { height: var(--h-control); margin-bottom: var(--sp-4); padding: 0 var(--sp-4); border: none; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font: inherit; outline: none; }
.q:focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }
#toc, #found { display: flex; flex-direction: column; gap: var(--sp-1); }
#toc[hidden], #found[hidden], .subs[hidden] { display: none; }
.item, .sub { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-ml); color: var(--ink-2); }
.item:hover, .sub:hover { background: var(--surface-row-hover); color: var(--ink); text-decoration: none; }
.item.on { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.subs { display: flex; flex-direction: column; margin: 0 0 var(--sp-3) var(--sp-5); }
.sub { padding: var(--sp-2) var(--sp-4); color: var(--ink-3); }
.item.fn code { font: 400 var(--fs-code) var(--font-mono); color: var(--code-fn); }
.cap { margin: var(--sp-5) var(--sp-4) var(--sp-2); font-size: var(--fs-m); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: var(--tracking-oo-cap); }
.empty { padding: var(--sp-4); color: var(--ink-3); }

.body { flex: 1; min-width: 0; overflow-y: auto; background: var(--surface); }
.md { max-width: var(--w-blocks); margin: 0 auto; padding: var(--sp-8) var(--sp-8) var(--sp-11); }
.md[hidden] { display: none; }
.md h1 { font: 700 var(--fs-h2) var(--font-display); color: var(--ink); margin: 0 0 var(--sp-5); }
.md h2 { font: 700 var(--fs-title) var(--font-display); color: var(--ink); margin: var(--sp-10) 0 var(--sp-4); }
.md h3, .md h4 { font-size: var(--fs-xl); color: var(--ink); margin: var(--sp-8) 0 var(--sp-3); }
.md p { margin: 0 0 var(--sp-5); }
.md .quiet { color: var(--ink-3); }
.md code { font: 400 var(--fs-code) var(--font-mono); color: var(--code-fn); background: var(--surface-2); padding: 0 var(--sp-2); border-radius: var(--r-xs); }
.md b { color: var(--ink); }
.md ul, .md ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-2); }
.md li ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-8); }
.md table { width: 100%; margin: 0 0 var(--sp-6); border-collapse: collapse; font-size: var(--fs-base); }
.md th { text-align: left; font-weight: 600; color: var(--ink-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.md td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.md .hit, .md tr.hit td { background: var(--accent-tint); }

.example { position: relative; }
.code { margin: 0 0 var(--sp-6); padding: var(--sp-6); border-radius: var(--r-card); background: var(--surface-sunken); color: var(--ink-soft); font: 400 var(--fs-code)/var(--lh-code) var(--font-mono); white-space: pre; overflow-x: auto; }
.copy { position: absolute; top: var(--sp-4); right: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2); height: var(--h-button); padding: 0 var(--sp-4); border: none; border-radius: var(--r-m); background: var(--surface-2); color: var(--ink-2); font: inherit; cursor: pointer; opacity: 0; transition: opacity var(--t-layer); }
.example:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { background: var(--surface-3); color: var(--ink); }
.copy svg { width: var(--ico-m); height: var(--ico-m); fill: currentColor; }
.hl-kw { color: var(--code-kw); } .hl-fn { color: var(--code-fn); } .hl-ev { color: var(--code-ev); font-weight: 600; }
.hl-str { color: var(--code-str); } .hl-num { color: var(--code-num); } .hl-com { color: var(--code-com); font-style: italic; }

.flow { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0 0 var(--sp-6); padding: var(--sp-7); border-radius: var(--r-card); background: var(--surface-sunken); }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.flow-box { padding: var(--sp-3) var(--sp-5); border-radius: var(--r-m); background: var(--surface-2); color: var(--ink); font-weight: 600; }
.flow-arrow { color: var(--ink-3); }

/* A phone: the sections above the article, the whole page scrolls. */
@media (max-width: 760px) {
  html, body { height: auto; }
  .top { padding: 0 var(--sp-6); }
  .brand span { display: none; }
  .main { flex-direction: column; }
  .nav { width: auto; border-right: none; border-bottom: 1px solid var(--line-soft); max-height: 40vh; }
  .body { overflow: visible; }
  .md { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
}