/* omxconsole docs pages. omxqua's Developer family, as the console: theme.js puts oq-root oq-family-dev oq-night|oq-light
   on <html>, omxqua/tokens.css (a copy of the console's vendored omxqua) defines the --oq-* values, and this file keeps the
   docs' own token names pointing at them. Light by default; dark follows the system or the toggle. */
@font-face { font-family: "Geist"; src: url("fonts/geist-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --chrome: var(--oq-surface-2); --chrome-line: var(--oq-line); --chrome-text: var(--oq-ink); --chrome-muted: var(--oq-ink-2); --chrome-hover: rgb(var(--oq-state) / .06);
  --canvas: var(--oq-surface-0); --card: var(--oq-surface-1); --card-line: var(--oq-line); --card-line-2: var(--oq-line-2);
  --sunk: rgb(var(--oq-state) / .05); --hover: rgb(var(--oq-state) / .035); --sel: rgb(var(--oq-state) / .07);
  --text: var(--oq-ink); --text-2: var(--oq-ink-2); --muted: var(--oq-ink-2); --faint: var(--oq-ink-faint);
  /* one accent, ink, as in the console; links take the info blue so they still read as links */
  --accent: var(--oq-accent); --on-accent: var(--oq-on-accent); --link: var(--oq-info);
  --ok: var(--oq-ok); --warn: var(--oq-warn); --bad: var(--oq-bad);
  --ok-fg: var(--oq-ok); --bad-fg: var(--oq-bad); --warn-fg: var(--oq-warn); --port-fg: var(--oq-data-1); --max-fg: var(--oq-data-3); --hf-fg: var(--oq-data-4);
  --code: #0b0b0d; --code-text: #e4e4e7;
  --hue-models: var(--oq-data-1); --hue-add: var(--oq-data-3); --hue-network: var(--oq-data-2); --hue-keys: var(--oq-data-4); --hue-bench: var(--oq-data-5);
  --hue-logs: var(--oq-ink-2); --hue-gateway: var(--oq-data-6); --hue-notebook: var(--oq-data-2); --hue-settings: var(--oq-ink-2);
  --sans: Geist, ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: var(--oq-ease-in); --radius: var(--oq-radius-card, 12px);
}
.oq-night { --code: #151518; }  /* a code block on the night canvas is a raised surface, not a hole */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.6 var(--sans); color: var(--text); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { background: var(--sunk); border-radius: 5px; padding: 1px 5px; }
pre { background: var(--code); color: var(--code-text); border-radius: var(--radius); box-shadow: var(--oq-shadow-1); padding: 14px 16px; overflow-x: auto; line-height: 1.55; margin: 12px 0; }
h1, h2, h3 { letter-spacing: -.015em; line-height: 1.2; }
h1 { font-size: 34px; margin: 0 0 10px; font-weight: 650; letter-spacing: -.035em; }
h2 { font-size: 22px; margin: 44px 0 10px; font-weight: 620; }
h3 { font-size: 16px; margin: 24px 0 6px; font-weight: 600; }
p { margin: 8px 0; color: var(--text-2); }
.lab { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* the top bar: one floating omxqua island, as the console's top islands */
.top { position: sticky; top: 12px; z-index: 10; height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 6px 0 16px;
  max-width: 1080px; margin: 12px auto 0; border-radius: var(--oq-radius-full); background: var(--chrome); color: var(--chrome-text); box-shadow: var(--oq-shadow-2); }
.top .brand { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -.02em; color: var(--chrome-text); }
.top .brand::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.top .brand:hover { text-decoration: none; }
.top .brand small { font: 500 10.5px var(--mono); color: var(--chrome-muted); border: 1px solid var(--chrome-line); border-radius: 999px; padding: 1px 7px; }
.top nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.top nav a { color: var(--chrome-muted); padding: 0 12px; height: 34px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 13.5px; font-weight: 550;
  transition: background .15s, color .15s, transform var(--oq-spring-fast-dur) var(--oq-spring-fast); }
.top nav a:hover { background: var(--chrome-hover); color: var(--chrome-text); text-decoration: none; }
.top nav a:active, .top .theme:active { transform: scale(var(--oq-press-scale)); }
.top nav a[aria-current="page"] { color: var(--chrome-text); background: rgb(var(--oq-state) / .1); }
.top .theme { background: none; border: 0; color: var(--chrome-muted); cursor: pointer; font-size: 18px; line-height: 1; width: 36px; height: 36px; border-radius: 50%;
  transition: background .15s, transform var(--oq-spring-fast-dur) var(--oq-spring-fast); }
.top .theme:hover { background: var(--chrome-hover); color: var(--chrome-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 36px 24px 80px; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--oq-shadow-1); padding: 18px 20px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lede { font-size: 18px; color: var(--text-2); max-width: 720px; }
.pill { display: inline-flex; align-items: center; gap: 5px; font: 500 11px var(--mono); padding: 2px 8px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok-fg); } .pill.warn { color: var(--warn-fg); } .pill.bad { color: var(--bad-fg); } .pill.port { color: var(--port-fg); }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--card); border-radius: var(--radius); box-shadow: var(--oq-shadow-1); overflow: hidden; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--card-line-2); vertical-align: top; }
th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--card-line); }
tr:last-child td { border-bottom: 0; }
.foot { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--card-line); font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 150ms !important; transition-timing-function: ease-out !important; } }
.card > h3:first-child { margin-top: 0; }
a.card { color: inherit; display: block; transition: transform var(--oq-spring-dur) var(--oq-spring), box-shadow var(--oq-spring-dur) var(--oq-spring); }
a.card:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--oq-shadow-2); }
a.card:active { transform: scale(.985); transition-duration: var(--oq-spring-fast-dur); }
a.card h3 { color: var(--text); }
@media (max-width: 640px) {
  .top { position: static; height: auto; flex-wrap: wrap; margin: 8px 8px 0; padding: 6px 6px 6px 14px; gap: 2px 12px; border-radius: 22px; }
  .top .brand { flex: 1; }
  .top nav { order: 3; flex: 0 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .top nav a { padding: 4px 8px; white-space: nowrap; }
}