/*
 * Developer-hub API reference styling — the endpoint page (apis/endpoints/show):
 * a request line (verb badge + full URL) above the Details / Arguments / Response
 * / Try it tab group, the hierarchical field list (_fields) and the "Try it"
 * explorer (_try_it). Its own file, separate from docs.css: the API hub is its own
 * namespace (its own page space, controllers and views), so its chrome is isolated
 * from the docs page layout even where both consume the same tokens.
 *
 * Plain token-consuming CSS, the same pattern as prose.css/editor.css/docs.css, so
 * it tracks the active Ekosystem theme and survives Tailwind purge.
 *
 * An API guide page (apis/pages/show) is an article, not a reference page — it
 * reuses the docs article layout (`.docs-main`) and so stays in docs.css.
 */

/* Request line: the verb badge + the fully-qualified request URL, with a Copy
 * button on the right. Sunk below the page with `surface-lowered` (#EBEDF0 light
 * / #282F38 dark) rather than lifted with `surface-raised`, so the request line
 * reads as a recessed block. Scrolling lives on the inner `__line` so an
 * over-long URL slides under a Copy button that keeps its place. */
.api-request {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-md);
  background: oklch(var(--eko-t-color-surface-lowered));
}

.api-request__line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

.api-request__url {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.875rem;
  white-space: nowrap;
  color: oklch(var(--eko-t-color-text));
}

/* Copy / Copied pair, styled to match the fenced-code copy control in
 * prose.css so both affordances read as the same button. */
.api-request__copy,
.api-request__copied {
  flex: none;
  padding: 3px 8px;
  font-family: var(--eko-t-font-family-code);
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface));
  color: oklch(var(--eko-t-color-text-weak));
}

.api-request__copy {
  cursor: pointer;
}

.api-request__copy:hover {
  color: oklch(var(--eko-t-color-text));
  background: oklch(var(--eko-t-color-surface-raised));
}

.api-request__copied {
  color: oklch(var(--eko-t-color-status-success));
  border-color: oklch(var(--eko-t-color-border-success));
}

/* Inline monospace code (error codes in the Possible-errors table). */
.api-code {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.875em;
}

/* Required-scopes chips in the Details definition list. */
.api-scopes {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.api-scopes code {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.8125rem;
  padding: 0.1em 0.4em;
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface-raised));
}

/* Synthesised example response, a plain preformatted JSON block. */
.api-example {
  margin: 0;
  padding: 14px 16px;
  overflow: auto;
  border: 1px solid oklch(var(--eko-t-color-border));
  border-radius: var(--eko-t-border-radius-md);
  background: oklch(var(--eko-t-color-surface-raised));
  font-family: var(--eko-t-font-family-code);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Hierarchical field list (Arguments + Response tabs) ─────────────────────
 * A recursively-rendered list (apis/endpoints/_fields): each field is a row with
 * its name, type and flags, its description below, and any object/array children
 * indented under a left rule. */
.api-fields {
  list-style: none;
  margin: 0;
  padding: 0;
}

.api-field {
  padding: 0.85rem 0;
  border-top: 1px solid oklch(var(--eko-t-color-border));
}

.api-field:first-child {
  border-top: 0;
}

.api-field__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.api-field__name {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(var(--eko-t-color-text));
}

.api-field__type {
  font-family: var(--eko-t-font-family-code);
  font-size: 0.8125rem;
  color: oklch(var(--eko-t-color-text-weak));
}

.api-field__flag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.05em 0.4em;
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface-raised));
  color: oklch(var(--eko-t-color-text-weak));
}

/* The one flag that carries meaning rather than metadata, so it reads red rather
 * than as another gray chip. --eko-t-color-text-danger over the status colour
 * because only the text token has a lighter dark-theme value, and the weakest
 * status surface for the tint, which is the token pair's own light/dark treatment
 * of the same idea. (Both replace --eko-t-color-danger, which is not an Ekosystem
 * token — the var() resolved to nothing, leaving the flag uncoloured and, since an
 * invalid background beats the base class's gray, untinted too.) */
.api-field__flag--required {
  background: oklch(var(--eko-t-color-status-danger-weakest));
  color: oklch(var(--eko-t-color-text-danger));
}

.api-field__desc {
  margin: 0.35rem 0 0;
  font-size: 0.9375rem;
  color: oklch(var(--eko-t-color-text-weak));
}

.api-field__meta {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  color: oklch(var(--eko-t-color-text-weak));
}

.api-field__meta code {
  font-family: var(--eko-t-font-family-code);
  padding: 0.1em 0.35em;
  border-radius: var(--eko-t-border-radius-sm);
  background: oklch(var(--eko-t-color-surface-raised));
}

.api-field__children {
  margin: 0.6rem 0 0 0.5rem;
  padding-left: 1rem;
  border-left: 2px solid oklch(var(--eko-t-color-border));
}

/* ── "Try it" explorer (apis/endpoints/_try_it) ───────────────────────────────
 * The in-browser client on the Try it tab. Structure comes from eko cards — one
 * per part of the request, one for the response — so this only supplies the
 * stacking and the few bits of text the controller writes into. Placeholder
 * styling in the same token-consuming style as the rest of this file, to be
 * replaced by the finalised design without touching the controller or the markup
 * contract.
 *
 * The panel stacks with a gap rather than margins so that hiding a child (the
 * failure alert, the response card) collapses its spacing too — a `display: none`
 * element is not a flex item, so it takes no gap with it. */
.api-explorer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* The muted line the controller writes in place of an empty response-header list.
 * (Token feedback goes through the field's own eko-hint; card sub-headings use the
 * app's usual `text-sm text-muted` utilities.) */
.api-explorer__note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: oklch(var(--eko-t-color-text-weak));
}

/* The response headers the browser lets us read — only those the API marks as
 * exposed are visible cross-origin, so this list is usually short. */
.api-response__headers {
  margin: 0 0 0.75rem;
  font-family: var(--eko-t-font-family-code);
  font-size: 0.8125rem;
}

.api-response__header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.2rem 0;
  color: oklch(var(--eko-t-color-text-weak));
}

.api-response__header-name {
  min-width: 12rem;
  color: oklch(var(--eko-t-color-text));
}

/* Response body, highlighted client-side by highlight.js (the same highlighter
 * the editor preview uses). Only the JSON token classes are themed — that is all
 * a response body produces — mirroring the palette prose.css uses for code. */
.api-json .hljs-attr {
  color: oklch(var(--eko-t-color-status-info));
}

.api-json .hljs-string {
  color: oklch(var(--eko-t-color-status-success));
}

.api-json .hljs-number {
  color: oklch(var(--eko-t-color-status-warning));
}

.api-json .hljs-literal,
.api-json .hljs-keyword {
  color: oklch(var(--eko-t-color-accent));
}