/* UQL reference (uql-docs.html, generated by build-uql-docs.mjs). Loads after docs.css, before themes.css.
   Reference reading: no motion beyond the shared hover layer. Text never goes under 11px and phones never get
   smaller text than desktop. Rules only between real topics (cards, the results list, the help section);
   callouts are tinted panels without borders. Colours are tokens; the few page-only colours are set below. */
.reference-page {
  --code-bg: #0e1511;
  --code-bar: #1a241d;
  --code-text: #c9e6b0;
  --chip-bg: #223024;
  --chip-hover: #2c3e2b;
  --chip-text: #c3dcae;
  --warn-bg: #2d2a20;
  --warn-text: #d8c99f;
  --reading: 68ch;
}
.reference-card > summary > .reference-summary { transform: none; }

/* Layout */
.reference-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 72px; align-items: start; padding-block: 64px 88px; }
.reference-main { min-width: 0; max-width: 960px; }
.reference-sidebar {
  position: sticky; top: calc(var(--header-h) + 32px);
  max-height: calc(100vh - var(--header-h) - 56px); overflow: auto; padding-right: 16px;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.reference-contents { border: 0; }
.reference-contents > summary {
  min-height: 44px; padding: 0 0 var(--s-4); font: 500 var(--step--1)/1.4 var(--font);
  letter-spacing: 0; color: var(--paper-heading);
}
.reference-contents > summary > span { font-size: 17px; color: var(--paper-muted); }
/* styles.css turns every open summary>span 45deg (the "+" sign); this one is a chevron, so it flips instead. */
.reference-contents[open] > summary > span { transform: rotate(180deg); }
.reference-nav-group { margin-bottom: var(--s-6); }
.reference-nav-group h2 {
  font: 400 var(--label)/1.6 var(--mono); letter-spacing: var(--track-label);
  margin: 0 0 var(--s-2); color: var(--paper-muted);
}
/* A quiet rail; the topic being read gets ink colour and a 2px green bar (scrollspy in uql-docs.js). */
.reference-nav-group a,
.reference-nav-group button {
  display: block; width: 100%; text-align: left; background: none;
  font-size: var(--step--1); line-height: 1.45; color: var(--paper-muted);
  padding: 7px 0 7px 12px; border-left: 2px solid var(--dark-line);
  transition: color var(--dur-in) var(--ease-ui), border-color var(--dur-in) var(--ease-ui);
}
.reference-nav-group button { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.reference-nav-group button > span { font: var(--label) var(--mono); color: var(--paper-muted); }
.reference-nav-group a:hover,
.reference-nav-group button:hover { color: var(--paper-heading); border-left-color: var(--line-strong); }
.reference-nav-group a[aria-current] { color: var(--paper-heading); border-left-color: var(--green); }

/* Hero */
.reference-hero .eyebrow { color: var(--accent-soft); margin-bottom: var(--s-5); }
.reference-hero h1 {
  font-size: clamp(2.5rem, 1.9rem + 2.4vw, 3.875rem); font-weight: 400; letter-spacing: var(--track-display);
  line-height: 1.06; margin: 0 0 var(--s-5); color: var(--paper-heading);
}
.reference-hero .lead { font-size: var(--step-1); line-height: 1.6; color: var(--paper-text); max-width: 60ch; margin: 0 0 var(--s-5); }
.reference-meta { display: flex; gap: var(--s-2) var(--s-5); flex-wrap: wrap; font: var(--label)/1.7 var(--mono); color: var(--paper-muted); }
.reference-version-note {
  display: flex; gap: var(--s-4); align-items: baseline; max-width: 80ch;
  background: var(--paper-panel); border-radius: var(--radius-2); padding: var(--s-4) var(--s-5); margin-block: var(--s-6);
}
.reference-version-note > span {
  flex: none; width: 18px; height: 18px; line-height: 16px; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  font: var(--label) var(--mono); color: var(--paper-muted);
}
.reference-version-note p { font-size: var(--step--1); line-height: 1.65; color: var(--paper-muted); margin: 0; }
.reference-version-note strong { font-weight: 500; color: var(--paper-heading); }

/* Search and filters */
.reference-controls > label { display: block; font-size: var(--step--1); font-weight: 500; margin-bottom: var(--s-3); color: var(--paper-heading); }
.reference-search-box { position: relative; }
.reference-search-box > span { position: absolute; left: 16px; top: 9px; font-size: 27px; color: var(--paper-muted); pointer-events: none; }
.reference-search-box input {
  display: block; width: 100%; min-height: 54px; padding: 14px 52px 14px 46px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-2);
  background: var(--paper-panel); color: var(--paper-heading); font: var(--step-0) var(--font);
}
.reference-search-box input::placeholder { color: var(--paper-muted); opacity: 1; }
/* The "/" shortcut hint; hidden while typing and on touch screens. */
.reference-search-box kbd {
  position: absolute; right: 14px; top: 50%; translate: 0 -50%; pointer-events: none;
  min-width: 22px; text-align: center; font: var(--label)/1.6 var(--mono); color: var(--paper-muted);
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-1); padding: 1px 6px;
}
.reference-search-box:focus-within kbd { display: none; }
@media (hover: none), (pointer: coarse) { .reference-search-box kbd { display: none; } .reference-search-box input { padding-right: 16px; } }
.reference-filters { margin-top: var(--s-4); display: flex; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.reference-kind-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.reference-kind-filters button {
  min-height: 40px; font-size: var(--step--1); padding: 8px 12px; border-radius: var(--radius-1);
  border: 1px solid var(--line-strong); background: transparent; color: var(--paper-text);
  transition: background-color var(--dur-in) var(--ease-ui), color var(--dur-in) var(--ease-ui);
}
.reference-kind-filters button[aria-pressed="true"] { background: var(--green); color: var(--on-green); border-color: var(--green); }
.reference-kind-filters button:hover:not([aria-pressed="true"]) { background: var(--hover-fill); }
.reference-category-field { display: flex; gap: var(--s-2); align-items: center; font-size: var(--step--1); color: var(--paper-muted); }
.reference-category-field select {
  min-height: 40px; max-width: 100%; font: var(--step--1) var(--font); color: var(--paper-heading);
  border: 1px solid var(--line-strong); background: var(--paper-panel); border-radius: var(--radius-1); padding: 7px 22px 7px 10px;
}
.reference-search-suggestions { display: flex; align-items: center; gap: var(--s-2) 10px; margin-block: var(--s-4) var(--s-5); flex-wrap: wrap; font-size: var(--step--1); color: var(--paper-muted); }
.reference-search-suggestions > button[data-search] {
  min-height: 32px; font: var(--label) var(--mono); letter-spacing: .02em; background: var(--chip-bg); color: var(--chip-text);
  padding: 6px 9px; border-radius: var(--radius-1); transition: background-color var(--dur-in) var(--ease-ui);
}
.reference-search-suggestions > button[data-search]:hover { background: var(--chip-hover); }
.reference-search-suggestions #reference-clear {
  margin-left: auto; min-height: 32px; padding: 6px 0; background: transparent; color: var(--green); font-size: var(--step--1);
  text-decoration: underline; text-decoration-color: var(--green-40); text-underline-offset: 4px;
}
.reference-search-suggestions #reference-clear:hover { text-decoration-color: var(--green); }

/* Start cards (internal links, so no arrow) */
.reference-start-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.reference-start-cards a {
  display: block; padding: var(--s-4); background: var(--paper-panel); border: 1px solid var(--dark-line);
  border-radius: var(--radius-2); font-size: var(--step-0); font-weight: 500; line-height: 1.45; color: var(--paper-heading);
}
.reference-start-cards span { display: block; font: 400 var(--label)/1.6 var(--mono); letter-spacing: .02em; color: var(--accent-soft); margin-bottom: var(--s-2); }
.reference-example-note { max-width: var(--reading); font-size: var(--step--1); line-height: 1.65; color: var(--paper-muted); margin: var(--s-5) 0; }
.reference-example-note code { font: .9em var(--mono); color: var(--chip-text); background: var(--chip-bg); padding: 1px 5px; border-radius: var(--radius-1); }
.reference-results-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); border-bottom: 1px solid var(--dark-line); padding-bottom: var(--s-3); }
.reference-results-toolbar p { margin: 0; font: var(--label)/1.7 var(--mono); color: var(--paper-muted); }
.reference-results-toolbar button { min-height: 32px; padding: 6px 0; background: transparent; color: var(--paper-text); font-size: var(--step--1); }
.reference-results-toolbar button:hover { color: var(--green); }

/* Cards: one rule between topics. The root scroll-padding already clears the header. */
.reference-search-section,
.reference-card { scroll-margin-top: 0; }
.reference-card { border-bottom: 1px solid var(--dark-line); }
.reference-card > summary { padding: var(--s-5) 0; align-items: flex-start; gap: var(--s-5); }
.reference-summary { display: block; min-width: 0; flex: 1; }
.reference-card-meta { display: block; font: var(--label)/1.6 var(--mono); letter-spacing: .02em; color: var(--accent-soft); margin-bottom: 6px; }
.reference-card summary strong { display: block; font: 500 var(--step-1)/1.35 var(--font); letter-spacing: -.01em; color: var(--paper-heading); }
.reference-card[data-kind="command"] summary strong { font: 500 1rem/1.5 var(--mono); letter-spacing: 0; color: var(--green); }
.reference-card[data-kind="topic"] summary strong { font: 500 1rem/1.5 var(--mono); letter-spacing: 0; color: var(--paper-heading); }
.reference-card-description {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  max-width: var(--reading); margin-top: var(--s-2); font-size: .9375rem; font-weight: 400; line-height: 1.6; color: var(--paper-muted);
}
.reference-expand { flex: none; font: 23px var(--font); color: var(--accent-soft) !important; margin-top: 12px; }
.reference-card[open] > summary { padding-bottom: var(--s-4); }
.reference-card[open] .reference-card-description { display: none; }
.reference-card[open] .reference-expand { transform: rotate(45deg); }

/* Reading width and rhythm inside an open entry */
.reference-card-body { padding: 0 0 var(--s-6); overflow-wrap: anywhere; }
.reference-card-body p,
.reference-card-body li { max-width: var(--reading); font-size: var(--step-0); line-height: 1.7; color: var(--paper-text); margin: 0 0 var(--s-4); }
.reference-card-body li { padding-left: 4px; margin-bottom: var(--s-2); }
.reference-card-body ul,
.reference-card-body ol { max-width: var(--reading); padding-left: 24px; margin-block: var(--s-4) var(--s-5); }
.reference-card-body li::marker { color: var(--paper-muted); }
.reference-card-body strong { font-weight: 600; color: var(--paper-heading); }
.reference-card-body h3 { font-size: var(--step-1); font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--paper-heading); margin: var(--s-6) 0 var(--s-3); }
.reference-card-body a { color: var(--green); text-decoration: underline; text-decoration-color: var(--green-40); text-underline-offset: 4px; transition: text-decoration-color var(--dur-in) var(--ease-ui); }
.reference-card-body a:hover { text-decoration-color: var(--green); }
.reference-card-body code { font: .875em/1.6 var(--mono); color: var(--chip-text); background: var(--chip-bg); padding: 1px 5px; border-radius: var(--radius-1); }

/* Code blocks: a frame, not a callout. uql-docs.js wraps each example in .reference-code with a label row that
   holds the shared copy.js button. Without JS the <pre> stands alone with the same frame. */
.reference-card-body pre {
  position: relative; white-space: pre; overflow: auto; max-width: 100%;
  background: var(--code-bg); border: 1px solid var(--dark-line); border-radius: var(--radius-2);
  padding: var(--s-4) var(--s-5); margin: var(--s-4) 0 var(--s-5);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.reference-card-body pre > code { display: block; min-width: fit-content; background: none; border: 0; padding: 0; font: .8125rem/1.75 var(--mono); color: var(--code-text); }
.reference-code { margin: var(--s-4) 0 var(--s-5); border: 1px solid var(--dark-line); border-radius: var(--radius-2); overflow: hidden; background: var(--code-bg); }
.reference-code > pre { margin: 0; border: 0; border-radius: 0; }
.reference-code-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 4px 6px 4px var(--s-4); background: var(--code-bar); border-bottom: 1px solid var(--dark-line);
  font: var(--label)/1.6 var(--mono); letter-spacing: .02em; color: var(--accent-soft);
}
.reference-code-slot { display: flex; }
.reference-code-toolbar .copy-button {
  min-height: 32px; padding: 4px 10px; border-radius: var(--radius-1); background: transparent;
  border: 1px solid transparent; color: var(--paper-heading); font: 500 var(--step--1)/1.3 var(--font);
  transition: background-color var(--dur-in) var(--ease-ui), color var(--dur-in) var(--ease-ui), border-color var(--dur-in) var(--ease-ui);
}
.reference-code-toolbar .copy-button:hover { background: var(--hover-fill); border-color: var(--line-strong); }
.reference-code-toolbar .copy-button:active { scale: .97; }
.reference-code-toolbar .copy-button.is-copied { color: var(--green); border-color: var(--green-40); }
@media (pointer: coarse) { .reference-code-toolbar .copy-button { min-height: 44px; } }

/* Copy link to an entry: a "#" link at the top of the open entry. */
.reference-card-actions { display: flex; justify-content: flex-end; margin: 0 0 var(--s-3); }
.reference-card-body .reference-permalink {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 0;
  font-size: var(--step--1); color: var(--paper-muted); text-decoration: none;
  transition: color var(--dur-in) var(--ease-ui);
}
.reference-card-body .reference-permalink::before {
  content: "#"; content: "#" / ""; /* decorative: the second form keeps it out of the accessible name */
  font: 500 var(--step-0)/1 var(--mono); color: var(--accent-soft); transition: translate var(--dur-in) var(--ease-ui);
}
.reference-card-body .reference-permalink:hover,
.reference-card-body .reference-permalink:focus-visible,
.reference-card-body .reference-permalink.is-copied { color: var(--green); }
@media (hover: hover) and (pointer: fine) {
  .reference-card-body .reference-permalink:hover::before { translate: -2px 0; }
}
.reference-card-body .reference-permalink:focus-visible::before { translate: -2px 0; }
@media (pointer: coarse) { .reference-card-body .reference-permalink { min-height: 44px; } }

/* Callouts: tinted panels, no rules around them */
.reference-context { max-width: var(--reading); background: var(--paper-panel); border-radius: var(--radius-2); padding: var(--s-3) var(--s-4); margin: var(--s-4) 0; }
.reference-context > span { font: var(--label)/1.6 var(--mono); letter-spacing: .02em; color: var(--accent-soft); }
.reference-card-body .reference-context p { font-size: var(--step--1); line-height: 1.65; margin: 4px 0 0; }
.reference-card-body .reference-module { font-size: var(--step--1); line-height: 1.65; color: var(--warn-text); background: var(--warn-bg); border-radius: var(--radius-2); padding: var(--s-3) var(--s-4); }
.reference-related { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); }
.reference-related > span { font-size: var(--step--1); color: var(--paper-muted); margin-right: var(--s-2); }
.reference-card-body .reference-related a {
  min-height: 32px; display: inline-flex; align-items: center; font: var(--label) var(--mono); letter-spacing: .02em;
  text-decoration: none; color: var(--chip-text); background: var(--chip-bg); padding: 6px 9px; border-radius: var(--radius-1);
  transition: background-color var(--dur-in) var(--ease-ui);
}
.reference-card-body .reference-related a:hover { background: var(--chip-hover); }
.reference-related-link { display: inline-block; font-size: var(--step-0); margin-top: var(--s-2); }
.reference-card-body .reference-source-note { font-size: var(--step--1); color: var(--paper-muted); }
.reference-card-body pre.reference-manual {
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; max-height: 650px; overflow: auto;
  font: .8125rem/1.75 var(--mono); color: var(--paper-text); background: var(--paper-panel); border-color: transparent; padding: var(--s-5);
}
.reference-note { max-width: var(--reading); background: var(--paper-panel); padding: var(--s-4) var(--s-5); border-radius: var(--radius-2); margin-top: var(--s-5); }
.reference-note > strong { font-size: var(--step-0); }
.reference-card-body .reference-note p { margin: var(--s-2) 0 0; }
.reference-variant { border: 0; background: var(--paper-panel); border-radius: var(--radius-2); padding: 0 var(--s-4); margin-block: var(--s-3); }
.reference-variant > summary { font-size: var(--step-0); color: var(--paper-heading); padding-block: var(--s-3); }
.reference-variant .reference-manual { margin: 0 0 var(--s-4); }
.reference-card-body .reference-variant pre.reference-manual { background: var(--code-bg); }

/* Empty state, more, help */
.reference-empty { padding: var(--s-6) var(--s-5); background: var(--paper-panel); border-radius: var(--radius-2); margin-top: var(--s-5); }
.reference-empty h2 { font-size: var(--step-2); letter-spacing: var(--track-h2); color: var(--paper-heading); margin: 0 0 var(--s-2); }
.reference-empty p { max-width: var(--reading); font-size: var(--step-0); line-height: 1.65; color: var(--paper-text); margin: 0 0 var(--s-4); }
.reference-more { width: 100%; margin-top: var(--s-5); padding: 15px; font-size: var(--step--1); }
.reference-help { border-top: 1px solid var(--dark-line); margin-top: var(--s-7); padding-top: var(--s-6); }
.reference-help h2 { font-size: var(--step-3); letter-spacing: var(--track-h2); color: var(--paper-heading); }
.reference-help p { max-width: var(--reading); font-size: var(--step-0); color: var(--paper-text); line-height: 1.7; }
.reference-help a { color: var(--green); text-decoration: underline; text-decoration-color: var(--green-40); text-underline-offset: 4px; }
.reference-help a:hover { text-decoration-color: var(--green); }
.reference-layout [hidden] { display: none !important; }

/* Narrower screens: layout changes only; text sizes stay as on desktop. */
@media (max-width: 1100px) {
  .reference-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .reference-start-cards { grid-template-columns: 1fr; }
  .reference-start-cards a { padding: var(--s-3) var(--s-4); }
  .reference-start-cards span { display: inline-block; min-width: 150px; margin: 0 var(--s-3) 0 0; }
  .reference-filters { align-items: flex-start; }
  .reference-category-field { width: 100%; }
  .reference-category-field select { flex: 1; min-width: 0; }
}
@media (max-width: 800px) {
  .reference-layout { grid-template-columns: 1fr; gap: var(--s-5); padding-block: 28px 60px; }
  .reference-sidebar { position: static; max-height: none; padding: 0; overflow: visible; border-bottom: 1px solid var(--dark-line); }
  .reference-contents nav { max-height: 340px; overflow: auto; columns: 2; column-gap: var(--s-5); padding-bottom: var(--s-3); }
  .reference-nav-group { break-inside: avoid; }
  .reference-nav-group a, .reference-nav-group button { padding-block: 10px; }
  .reference-version-note { padding: var(--s-4); margin-block: var(--s-5); gap: var(--s-3); }
  .reference-card > summary { gap: var(--s-3); }
  .reference-card-body pre { padding: var(--s-4); }
}
@media (max-width: 480px) {
  .reference-start-cards span { display: block; min-width: 0; margin: 0 0 4px; }
  .reference-contents nav { columns: 1; }
  .reference-kind-filters button { padding-inline: 10px; }
  .reference-search-suggestions #reference-clear { margin-left: 0; }
  .reference-results-toolbar { align-items: flex-start; }
  .reference-card-body pre.reference-manual { max-height: 500px; padding: var(--s-4); }
}

/* Light theme for this page. Most of it comes from the tokens; these are the page-only colours. */
:root[data-theme="light"] .reference-page {
  --code-bg: #e1e6d9;
  --code-bar: #d6dfcc;
  --code-text: #2f5135;
  --chip-bg: #dce5d3;
  --chip-hover: #cddcc0;
  --chip-text: #35563b;
  --warn-bg: #ece2d3;
  --warn-text: #6a4a33;
}
:root[data-theme="light"] :is(.reference-search-box input, .reference-category-field select, .reference-kind-filters button, .reference-search-box kbd) { border-color: var(--theme-field-line); }
:root[data-theme="light"] .reference-kind-filters button[aria-pressed="true"] { border-color: var(--green); }
/* --green on --code-bar is about 4.4:1 in light; the small "Copied" label uses the darker accent (about 5.2:1). */
:root[data-theme="light"] .reference-code-toolbar .copy-button.is-copied { color: var(--accent-soft); }
:root[data-theme="light"] .reference-card-body pre.reference-manual { background: var(--paper-panel); }
:root[data-theme="light"] .reference-card-body .reference-variant pre.reference-manual { background: var(--code-bg); }