/* public/r/reference.css: the hosted API reference (/r/…). These pages are
   route handlers, outside Next's layout, so the Terminal tokens are copied here
   from app/globals.css; tests/reference-page.test.ts keeps them equal. Fonts
   are system stacks: next/font doesn't reach standalone pages.
   Spec: docs/superpowers/specs/2026-10-20-api-platform-api-reference.md */

:root {
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;

  /* Colours, light (Terminal) */
  --color-primary: #161614;
  --color-on-primary: #ffc24b;
  --color-secondary: #e9e7dc;
  --color-on-secondary: #3a3524;
  --color-accent: #00697a;
  --color-on-accent: #ffffff;
  --color-background: #f7f7f2;
  --color-foreground: #121210;
  --color-surface: #ffffff;
  --color-on-surface: #121210;
  --color-surface-muted: #edede6;
  --color-on-surface-muted: #57574f;
  --color-border: #dcdcd2;
  --color-input: #c8c8bd;
  --color-ring: #9a5b00;
  --color-error: #b8261b;
  --color-on-error: #ffffff;
  --color-success: #1e7a3a;
  --color-on-success: #ffffff;
  /* The Latitude layer: the one amber in light mode that isn't a keycap. */
  --color-highlight: #9a5b00;
  --color-overlay-shadow: 0 12px 32px rgb(18 18 16 / 0.16);

  /* Fonts (next/font sets --font-mono and --font-sans on <html>) */
  --font-family-mono: var(--font-mono), ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-family-sans: var(--font-sans), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type: the pack's levels as font shorthands, with their tracking */
  --type-display: 700 44px/1.1 var(--font-family-mono);
  --tracking-display: -0.04em;
  --type-headline-lg: 700 28px/1.2 var(--font-family-mono);
  --tracking-headline-lg: -0.03em;
  --type-headline-md: 600 20px/1.3 var(--font-family-mono);
  --tracking-headline-md: -0.02em;
  --type-headline-sm: 600 15px/1.4 var(--font-family-mono);
  --tracking-headline-sm: -0.01em;
  --type-body-lg: 400 18px/1.6 var(--font-family-sans);
  --type-body-md: 400 15px/1.55 var(--font-family-sans);
  --type-body-sm: 400 13px/1.5 var(--font-family-sans);
  --type-label-md: 500 13px/1.2 var(--font-family-mono);
  --type-label-caps: 600 11px/1.2 var(--font-family-mono);
  --tracking-caps: 0.06em;
  --type-mono: 400 13px/1.6 var(--font-family-mono);

  /* Space, shape and width (the pack's names) */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 20px;
  --spacing-xl: 32px;
  --spacing-2xl: 56px;
  --spacing-3xl: 96px;
  --spacing-gutter: 20px;
  --spacing-max-width: 1280px;
  --spacing-reading-width: 720px;
  --rounded-none: 0px;
  --rounded-sm: 2px;
  --rounded-md: 4px;
  --rounded-lg: 6px;
  --rounded-full: 9999px;
  --header-height: 64px;

  /* Legacy palette, still read by admin, the dashboard and the public CSS
     not yet moved to the tokens above. Each goes when its last user does. */
  --primary: #333333;
  --secondary: #666666;
  --accent: #888888;
  --background: #ffffff;
  --surface: #f9f9f9;
  --text: #333333;
  --border: #f0f0f0;
}

@media (min-width: 900px) {
  :root {
    --type-display: 700 56px/1.08 var(--font-family-mono);
    --type-body-lg: 400 19px/1.6 var(--font-family-sans);
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-primary: #ffb53d;
    --color-on-primary: #1a1000;
    --color-secondary: #22211c;
    --color-on-secondary: #f1e6c8;
    --color-accent: #5cd6e6;
    --color-on-accent: #00262c;
    --color-background: #0b0b0a;
    --color-foreground: #edebe3;
    --color-surface: #131312;
    --color-on-surface: #edebe3;
    --color-surface-muted: #1c1c1a;
    --color-on-surface-muted: #a09e94;
    --color-border: #2a2a26;
    --color-input: #3a3a33;
    --color-ring: #ffb53d;
    --color-error: #ff7b6e;
    --color-on-error: #2e0602;
    --color-success: #7edc8f;
    --color-on-success: #062410;
    --color-highlight: #ffb53d;
    --color-overlay-shadow: none;
    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --color-primary: #ffb53d;
  --color-on-primary: #1a1000;
  --color-secondary: #22211c;
  --color-on-secondary: #f1e6c8;
  --color-accent: #5cd6e6;
  --color-on-accent: #00262c;
  --color-background: #0b0b0a;
  --color-foreground: #edebe3;
  --color-surface: #131312;
  --color-on-surface: #edebe3;
  --color-surface-muted: #1c1c1a;
  --color-on-surface-muted: #a09e94;
  --color-border: #2a2a26;
  --color-input: #3a3a33;
  --color-ring: #ffb53d;
  --color-error: #ff7b6e;
  --color-on-error: #2e0602;
  --color-success: #7edc8f;
  --color-on-success: #062410;
  --color-highlight: #ffb53d;
  --color-overlay-shadow: none;
  color-scheme: dark;
}

[data-theme='light'] {
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--color-background); color: var(--color-foreground); }
body { font: var(--type-body-md); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--color-accent); text-underline-offset: 3px; }
code, pre { font-family: var(--font-family-mono); font-size: 0.92em; }
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.site { display: flex; align-items: baseline; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-gutter); border-bottom: 1px solid var(--color-border); }
.brand { font: var(--type-label-md); color: var(--color-on-surface); text-decoration: none; }
.site-label { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }

.layout { flex: 1; display: grid; grid-template-columns: 1fr; max-width: var(--spacing-max-width); width: 100%; margin: 0 auto; }
.sidebar { padding: var(--spacing-lg) var(--spacing-gutter); border-bottom: 1px solid var(--color-border); }
.sidebar input { width: 100%; font: var(--type-body-sm); padding: var(--spacing-sm); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-input); border-radius: var(--rounded-sm); }
.sidebar ul { list-style: none; display: grid; gap: var(--spacing-xs); margin-bottom: var(--spacing-md); }
.sidebar a { display: block; font: var(--type-body-sm); color: var(--color-on-surface); text-decoration: none; overflow-wrap: anywhere; }
.sidebar a:hover { color: var(--color-accent); }
.group-name { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); margin: var(--spacing-md) 0 var(--spacing-xs); overflow-wrap: anywhere; }

.content { padding: var(--spacing-xl) var(--spacing-gutter); min-width: 0; display: grid; gap: var(--spacing-2xl); }
/* Pages with no sidebar (sign-in, consent, errors): one column at every width. */
.layout.single { grid-template-columns: minmax(0, 1fr); max-width: var(--spacing-reading-width); }
.intro { display: grid; gap: var(--spacing-md); }
.intro h1 { font: var(--type-headline-lg); letter-spacing: var(--tracking-headline-lg); overflow-wrap: anywhere; }
h2 { font: var(--type-headline-md); letter-spacing: var(--tracking-headline-md); overflow-wrap: anywhere; }
h2.small { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }
h4 { font: var(--type-label-md); margin-top: var(--spacing-md); }
.meta, .constraints { font: var(--type-body-sm); color: var(--color-on-surface-muted); overflow-wrap: anywhere; }
.servers, .schemes { list-style: none; display: grid; gap: var(--spacing-xs); }

.group { display: grid; gap: var(--spacing-lg); min-width: 0; }
/* Grid items don't shrink below their content by default: wide code samples
   would stretch the page on a phone. */
.content > *, .op > *, .samples > *, .sample { min-width: 0; }
.op { display: grid; gap: var(--spacing-sm); padding: var(--spacing-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-lg); scroll-margin-top: var(--spacing-lg); min-width: 0; }
.op[hidden], .group[hidden], .sidebar li[hidden] { display: none; }
.op-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
.op-title { font: var(--type-headline-sm); letter-spacing: var(--tracking-headline-sm); overflow-wrap: anywhere; }
.anchor { font: var(--type-label-md); color: var(--color-on-surface-muted); text-decoration: none; }
.path { overflow-wrap: anywhere; }
.method { display: inline-block; font: var(--type-label-caps); letter-spacing: var(--tracking-caps); padding: 2px var(--spacing-xs); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); color: var(--color-on-surface); }
.m-get { color: var(--color-success); }
.m-post { color: var(--color-accent); }
.m-delete { color: var(--color-error); }
.m-put, .m-patch { color: var(--color-highlight); }
.badge, .req { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }
.req { color: var(--color-highlight); }
.type { font: var(--type-mono); color: var(--color-on-surface-muted); overflow-wrap: anywhere; }

.table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
th, td { text-align: left; vertical-align: top; padding: var(--spacing-sm); border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
td:nth-child(2), td:nth-child(3), thead th { white-space: nowrap; }
thead th { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }

details { border-left: 2px solid var(--color-border); padding-left: var(--spacing-md); margin: var(--spacing-xs) 0; }
summary { cursor: pointer; font: var(--type-body-sm); overflow-wrap: anywhere; }
.props { list-style: none; display: grid; gap: var(--spacing-sm); margin-top: var(--spacing-sm); }
.variants-kind { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }
.truncated { font: var(--type-body-sm); color: var(--color-on-surface-muted); }

pre { overflow-x: auto; padding: var(--spacing-md); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); }
.samples { display: grid; gap: var(--spacing-md); }
.sample figcaption { display: flex; justify-content: space-between; align-items: center; font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); margin-bottom: var(--spacing-xs); }
.sample button { font: var(--type-label-md); padding: 2px var(--spacing-sm); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); cursor: pointer; }

.foot { display: flex; flex-wrap: wrap; gap: var(--spacing-md); padding: var(--spacing-lg) var(--spacing-gutter); border-top: 1px solid var(--color-border); font: var(--type-body-sm); }
.foot a { color: var(--color-on-surface-muted); }
.credit { margin-right: auto; }

@media (min-width: 900px) {
  .layout { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--color-border); }
}

/* Hosted docs (docs/superpowers/specs/2026-10-20-api-platform-docs-hosting.md):
   the same tokens, a header with search, a table of contents, and the
   elements guides use (callouts, tables, images). */
.docs-head { align-items: center; flex-wrap: wrap; }
.docs-head .brand { display: inline-flex; align-items: center; gap: var(--spacing-sm); }
.docs-logo { height: 24px; width: auto; }
.docs-search { flex: 1; min-width: 160px; max-width: 360px; margin-left: auto; font: var(--type-body-sm); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-input); border-radius: var(--rounded-sm); }
.docs-theme { font: var(--type-label-md); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); cursor: pointer; }
.docs-banner { padding: var(--spacing-sm) var(--spacing-gutter); font: var(--type-body-sm); background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.sidebar a[aria-current='page'] { color: var(--color-accent); }
.docs-page { gap: var(--spacing-lg); align-content: start; }
.docs-results { display: grid; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-md); }
.docs-results[hidden] { display: none; }
.docs-results ul { list-style: none; display: grid; gap: var(--spacing-sm); }
.docs-results p { font: var(--type-body-sm); color: var(--color-on-surface-muted); }
.docs-article { display: grid; gap: var(--spacing-md); min-width: 0; max-width: var(--spacing-reading-width); }
.docs-article > * { min-width: 0; }
.docs-article h1 { font: var(--type-headline-lg); letter-spacing: var(--tracking-headline-lg); overflow-wrap: anywhere; }
.docs-article h2, .docs-article h3, .docs-article h4 { scroll-margin-top: var(--spacing-lg); }
.docs-article h3 { font: var(--type-headline-sm); letter-spacing: var(--tracking-headline-sm); }
.docs-article ul, .docs-article ol { padding-left: var(--spacing-lg); display: grid; gap: var(--spacing-xs); }
.docs-article img { max-width: 100%; height: auto; border-radius: var(--rounded-sm); }
.docs-article blockquote { border-left: 2px solid var(--color-border); padding-left: var(--spacing-md); color: var(--color-on-surface-muted); }
.docs-article hr { border: 0; border-top: 1px solid var(--color-border); }
.docs-article table { display: block; overflow-x: auto; }
.docs-article td, .docs-article thead th { white-space: normal; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.callout { display: grid; gap: var(--spacing-xs); padding: var(--spacing-md); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--rounded-sm); }
.callout-tip { border-left-color: var(--color-success); }
.callout-warning { border-left-color: var(--color-error); }
.callout-title { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); }
.docs-versions { margin-bottom: var(--spacing-md); }
.docs-toc { display: none; }

@media (min-width: 1200px) {
  .docs-layout { grid-template-columns: 260px minmax(0, 1fr) 220px; }
  .docs-toc { display: block; position: sticky; top: 0; align-self: start; padding: var(--spacing-xl) var(--spacing-gutter); }
  .docs-toc ul { list-style: none; display: grid; gap: var(--spacing-xs); }
  .docs-toc a { font: var(--type-body-sm); color: var(--color-on-surface-muted); text-decoration: none; }
  .docs-toc .toc-3 { padding-left: var(--spacing-md); }
}

/* The API client (docs/superpowers/specs/2026-10-21-api-platform-api-client.md):
   Try it under each operation, the environment panel in the sidebar, and the
   response. Status words carry the meaning; colour only repeats it. */
.try[hidden], .env[hidden], [data-vars-for][hidden], .try-result[hidden], .try button[hidden] { display: none; }
.try { border-left-color: var(--color-accent); }
.try > summary, .env > summary { font: var(--type-label-md); color: var(--color-accent); }
.try-form, .env { display: grid; gap: var(--spacing-sm); min-width: 0; }
.env { margin-bottom: var(--spacing-md); }
.try fieldset, .env fieldset { display: grid; gap: var(--spacing-sm); border: 0; padding: 0; margin: var(--spacing-sm) 0 0; min-width: 0; }
.try legend, .env legend { font: var(--type-label-caps); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-on-surface-muted); margin-bottom: var(--spacing-xs); }
.try-field { display: grid; gap: var(--spacing-xs); min-width: 0; }
.try-field label { font: var(--type-body-sm); overflow-wrap: anywhere; }
.try-field input, .try-field select, .try-field textarea { width: 100%; min-width: 0; font: var(--type-mono); padding: var(--spacing-xs) var(--spacing-sm); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-input); border-radius: var(--rounded-sm); }
.try-field textarea { resize: vertical; }
.try-field [aria-invalid='true'] { border-color: var(--color-error); }
.try-problem { font: var(--type-body-sm); color: var(--color-error); }
.try-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm); }
.try button, .env button { font: var(--type-label-md); padding: var(--spacing-xs) var(--spacing-md); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); cursor: pointer; }
.try button[data-send] { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary); }
.try button[aria-disabled='true'] { opacity: 0.6; cursor: progress; }
.try input:focus-visible, .try select:focus-visible, .try textarea:focus-visible, .try button:focus-visible, .env input:focus-visible, .env select:focus-visible, .env textarea:focus-visible, .env button:focus-visible, .try summary:focus-visible, .env summary:focus-visible, .try-body:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
.try-hint { font: var(--type-body-sm); color: var(--color-on-surface-muted); }
.try-result { display: grid; gap: var(--spacing-sm); min-width: 0; }
.try-result:empty { display: none; }
.try-status { font: var(--type-label-md); overflow-wrap: anywhere; }
.try-status[data-class='success'] { color: var(--color-success); }
.try-status[data-class='client'], .try-status[data-class='server'], .try-status[data-class='failed'] { color: var(--color-error); }
.try-body { max-height: 420px; overflow: auto; white-space: pre; }
.try-result table { font: var(--type-mono); }
.env-history ol { list-style: none; display: grid; gap: var(--spacing-xs); }
.env-history button { width: 100%; text-align: left; overflow-wrap: anywhere; }
/* The announcement repeats the status line for screen readers only. */
.try-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Shared collections (docs/superpowers/specs/2026-10-22-api-platform-api-client-collections.md):
   Collections for members and Examples for readers, in the sidebar under the
   environment. Load buttons start hidden; the script shows them. */
.coll, .coll-group, .coll ol, .coll-item { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.coll { gap: var(--spacing-sm); margin-bottom: var(--spacing-md); }
.coll > summary { font: var(--type-label-md); color: var(--color-accent); }
.coll-group { gap: var(--spacing-xs); }
.coll-group > summary { font: var(--type-body-sm); color: var(--color-on-surface); overflow-wrap: anywhere; }
.coll ol { list-style: none; gap: var(--spacing-sm); margin-top: var(--spacing-xs); }
.coll-item { gap: var(--spacing-xs); overflow-wrap: anywhere; padding-left: var(--spacing-sm); border-left: 1px solid var(--color-border); font: var(--type-body-sm); }
.coll-missing .coll-head { color: var(--color-on-surface-muted); }
.coll button { font: var(--type-label-md); padding: var(--spacing-xs) var(--spacing-md); color: var(--color-on-surface); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); cursor: pointer; }
.coll button[hidden] { display: none; }
.coll-curl > summary { color: var(--color-on-surface-muted); }
.coll .sample { min-width: 0; }
.coll .sample pre { overflow-x: auto; }
.coll summary:focus-visible, .coll button:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; }
/* Save, Saved on this device and the schema check, made by playground.js.
   The check's words carry the result; the border only repeats it. */
.try-save { display: grid; gap: var(--spacing-sm); min-width: 0; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-border); border-radius: var(--rounded-sm); background: var(--color-surface); }
.try-save [hidden] { display: none; }
.try-check { display: grid; gap: var(--spacing-xs); font: var(--type-body-sm); padding-left: var(--spacing-sm); border-left: 2px solid var(--color-border); overflow-wrap: anywhere; }
.try-check[data-check='match'] { border-left-color: var(--color-success); }
.try-check[data-check='mismatch'] { border-left-color: var(--color-error); }
.try-check ul { padding-left: var(--spacing-lg); font: var(--type-mono); }
.env-saved[hidden] { display: none; }
.env-saved ol { list-style: none; display: grid; gap: var(--spacing-xs); }
.env-saved li { display: flex; gap: var(--spacing-xs); min-width: 0; }
.env-saved li > :first-child { flex: 1; min-width: 0; text-align: left; overflow-wrap: anywhere; }