/* Hyke Studio — The documentation's reference page (site-content-docs/docs-reference__a and its unavailable state).
 * Built from the approved design's own styles: the brand tokens live in tokens.css alone, the shared bar and footer
 * in site.css, and the design canvas's review aid and theme hooks are left out. Every address is the browser's own
 * disclosure element, closed on arrival; no script at all.
 * Owning section(s): §38 */

/* Variables the approved pages declare beyond the brand package's tokens.css. */
:root {
  --hs-card-border: rgba(26,25,23,0.12);
  --hs-hairline: rgba(26,25,23,0.10);
}
html[data-theme="dark"] {
  --hs-amber-ink: #E09A12;
  --hs-card-border: rgba(251,248,239,0.14);
  --hs-hairline: rgba(251,248,239,0.10);
}

/* One column under the documentation's own bar (site.css, _docs_nav.html) — the same bar and the same top spacing
   as the documentation home and the guides; the reference's addresses take the page's full width. */
.docs-layout { padding: 36px 0 80px; }
.docs-content { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.docs-kicker { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--hs-amber-ink); }
.docs-hero { display: flex; flex-direction: column; gap: 14px; }
.docs-title { margin: 0; font-size: clamp(26px, 3.8vw, 40px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; color: var(--hs-ink); }
.docs-subtitle { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--hs-ink-body); max-width: 640px; }

/* The base address, the first thing in the page's body. */
.ref-base { display: flex; flex-direction: column; gap: 9px; background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-card); box-shadow: var(--hs-lift); padding: 20px 22px; min-width: 0; }
@media (max-width: 720px) { .ref-base { padding: 16px; } }
.ref-base-label { margin: 0; font-family: var(--hs-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; color: var(--hs-ink-muted); text-transform: uppercase; }
.ref-base-value { font-family: var(--hs-font-mono); font-size: clamp(17px, 2.4vw, 24px); font-weight: 600; letter-spacing: -0.01em; color: var(--hs-ink); overflow-wrap: anywhere; display: block; }
.ref-base-note { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--hs-ink-body); }

/* The reference's own area — rendered from the service's own description. */
.ref-mount { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ref-generated-note { margin: 0; font-family: var(--hs-font-mono); font-size: 10.5px; line-height: 1.7; letter-spacing: 0.02em; color: var(--hs-ink-muted); border-left: 2px solid var(--hs-amber); padding-left: 12px; }
.ref-viewer { display: flex; flex-direction: column; gap: 16px; background: var(--hs-surface-sunk); border: 1px solid var(--hs-line); border-radius: var(--hs-r-tile); padding: 20px; min-width: 0; }
@media (max-width: 720px) { .ref-viewer { padding: 14px; } }
.ref-rate-limits-heading { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; color: var(--hs-ink); }
.ref-method { font-family: var(--hs-font-mono); font-size: 11px; font-weight: 600; color: var(--hs-ink-muted); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-chip); padding: 3px 8px; flex-shrink: 0; }
.ref-sub-heading { font-family: var(--hs-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; color: var(--hs-ink-muted); text-transform: uppercase; margin: 0 0 12px; }
.ref-answer-note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--hs-ink-body); white-space: pre-line; }
.ref-no-params { margin: 0; font-size: 13px; line-height: 1.55; color: var(--hs-ink-body); }

/* Options as definition blocks. */
.ref-params { display: flex; flex-direction: column; gap: 14px; }
.ref-param { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ref-param-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ref-param-name { font-family: var(--hs-font-mono); font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.ref-param-required { font-size: 11px; color: var(--hs-amber-ink); }
.ref-param-desc { margin: 0; font-size: 13px; line-height: 1.55; color: var(--hs-ink-body); white-space: pre-line; }

/* Response headers and fields as a compact grid. */
.ref-headers { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); row-gap: 8px; column-gap: 14px; }
@media (max-width: 560px) { .ref-headers { grid-template-columns: minmax(0, 1fr); row-gap: 3px; } }
.ref-header-name { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 600; color: var(--hs-ink); align-self: start; overflow-wrap: anywhere; }
.ref-header-meaning { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-body); white-space: pre-line; }
@media (max-width: 560px) { .ref-header-meaning { margin: 0 0 8px; } }

/* The key line, an option's notes, the one imagin.studio line, and the values tables (docs-reference__a). */
.ref-auth-line { margin: 0; font-size: 13px; line-height: 1.6; color: var(--hs-ink-muted); }
.ref-param-note { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--hs-ink-muted); padding-left: 13px; border-left: 1px solid var(--hs-hairline); }
.ref-compat-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--hs-ink-muted); }
.ref-values { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); row-gap: 7px; column-gap: 14px; }
@media (max-width: 560px) { .ref-values { grid-template-columns: minmax(0, 1fr); row-gap: 3px; } }
.ref-value-name { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 600; color: var(--hs-ink); align-self: start; overflow-wrap: anywhere; }
.ref-value-meaning { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-body); }
@media (max-width: 560px) { .ref-value-meaning { margin: 0 0 8px; } }
.ref-answer-fields { margin-top: 12px; }
.ref-endpoint-body p code, .ref-endpoint-body li code { font-family: var(--hs-font-mono); font-size: 0.92em; color: var(--hs-ink); }

/* Worked examples. */
.ref-examples { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ref-example { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ref-example--after-refusals { margin-top: 16px; }
.ref-example-heading { margin: 0; font-size: 13px; font-weight: 600; color: var(--hs-ink); }
.ref-example-code { margin: 0; background: var(--hs-surface-sunk); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); padding: 14px 16px; overflow-x: auto; min-width: 0; }
.ref-example-code code { font-family: var(--hs-font-mono); font-size: 11.5px; line-height: 1.65; color: var(--hs-ink-body); white-space: pre; }

/* The notes above the refusals, and the lists they carry. */
.ref-never-notes { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.ref-never-note { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--hs-ink-body); padding-left: 13px; border-left: 2px solid var(--hs-good); }
.ref-closing-note { margin-top: 12px; }
.ref-never-note + .ref-values { margin-top: 10px; }
.ref-basic-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--hs-ink-body); }
.ref-basic-list li { margin: 0 0 4px; }
.ref-kind-list { margin: 4px 0 0 13px; padding-left: 16px; border-left: 1px solid var(--hs-hairline); font-family: var(--hs-font-mono); font-size: 11.5px; line-height: 1.6; color: var(--hs-ink-body); }
.ref-kind-list li { margin: 0 0 2px; }

/* Refusals. */
.ref-refusals { display: flex; flex-direction: column; gap: 8px; }
.ref-refusal { display: flex; align-items: baseline; gap: 10px; }
.ref-refusal-code { font-family: var(--hs-font-mono); font-size: 12px; font-weight: 600; color: var(--hs-bad); flex: 0 0 auto; min-width: 212px; white-space: nowrap; }
.ref-refusal-meaning { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-body); flex: 1 1 200px; min-width: 0; }
/* Below 760px the row stacks, so the meaning's 200px basis would become a 200px height; it takes its own height. */
@media (max-width: 760px) { .ref-refusal { flex-direction: column; align-items: flex-start; gap: 3px; } .ref-refusal-code { min-width: 0; } .ref-refusal-meaning { flex: 0 0 auto; } }

/* The list of addresses — every one a closed section of its own. */
.ref-op-rows { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ref-op-path { font-family: var(--hs-font-mono); font-size: 13px; font-weight: 600; color: var(--hs-ink); overflow-wrap: anywhere; }
.ref-op-desc { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--hs-ink-muted); flex: 1 1 240px; min-width: 0; }
.ref-endpoint { background: var(--hs-surface); border: 1px solid var(--hs-card-border); border-radius: var(--hs-r-field); min-width: 0; }
.ref-endpoint[open] { box-shadow: var(--hs-lift); }
.ref-endpoint > summary { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 13px 16px; list-style: none; cursor: pointer; border-radius: var(--hs-r-field); min-width: 0; }
.ref-endpoint > summary::-webkit-details-marker { display: none; }
.ref-endpoint > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--hs-ink-muted); border-bottom: 1.5px solid var(--hs-ink-muted); transform: translateY(-3px) rotate(45deg); margin-left: auto; flex: 0 0 auto; align-self: center; }
.ref-endpoint[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.ref-endpoint > summary:hover { background: var(--hs-surface-sunk); }
.ref-endpoint > summary:focus-visible { outline: 2px solid var(--hs-amber); outline-offset: -2px; }
.ref-endpoint[open] > summary { border-bottom: 1px solid var(--hs-hairline); border-radius: var(--hs-r-field) var(--hs-r-field) 0 0; }
.ref-endpoint-body { display: flex; flex-direction: column; gap: 22px; padding: 20px 22px 24px; min-width: 0; }
@media (max-width: 720px) { .ref-endpoint-body { padding: 16px 14px 18px; } }
.ref-endpoint-body > div { min-width: 0; }
/* At phone width the full addresses get the row's whole width at a smaller size. */
@media (max-width: 560px) {
  .ref-endpoint > summary { padding: 12px; gap: 8px; }
  .ref-endpoint > summary .ref-op-path { font-size: 10.5px; }
}

/* The unavailable state: one plain line pointing at the quick start. */
.ref-unavailable { margin: 0; font-size: 15px; line-height: 1.65; color: var(--hs-ink-body); max-width: 720px; }
.ref-unavailable a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Sticky section headings (owner request 2026-09-30, lane DC-3; the pattern of the Hitchhyke vendor portal's listing
   form, whose section headings stick under its page header). The documentation's own bar sticks under the site's bar,
   and each section's heading — "Rate limits", and every opened address's row — sticks under both while its section
   scrolls. Each heading is sticky inside its own section, so it lets go as its section ends and the next section's
   heading takes its place; a closed address is only its row, so it never sticks. The heights are the two bars' own:
   the site's bar as js/nav-menu.js measures it (--site-bar-height; it wraps to two or three rows between 640px and
   about 1,010px), else its one-row 77px (57px below 640px, site.css .nav); the documentation's bar 44px.
   The selectors are one step more specific than a bare class so the design pages' injected sticky-top rule
   ([data-element-id]{top:0}) cannot pull them up under the bars.
   Backgrounds, so nothing shows through: an address row has its own card's surface, stuck or not. The documentation's
   bar and "Rate limits" sit on the page's lit floor, which no flat colour matches, so they stay clear at rest and take
   the site bar's solid colour, the full width of the window, only while stuck (a scroll-state container query, drawn on
   a ::before layer behind the words; the box-shadow widens it without widening the page). A browser without
   scroll-state queries gives them that solid colour all the time instead, so words never show through there either. */
:root { --ref-site-bar-height: var(--site-bar-height, 77px); --ref-docs-bar-height: 44px; }
@media (max-width: 639px) { :root { --ref-site-bar-height: var(--site-bar-height, 57px); } }
.container .docs-subnav { position: sticky; top: var(--ref-site-bar-height); z-index: 4; background: var(--hs-ground); }
.ref-rate-limits > .ref-rate-limits-heading { position: sticky; top: calc(var(--ref-site-bar-height) + var(--ref-docs-bar-height)); z-index: 3; background: var(--hs-ground); padding: 10px 0; margin: -10px 0; }
.ref-endpoint > summary { position: sticky; top: calc(var(--ref-site-bar-height) + var(--ref-docs-bar-height)); z-index: 3; background: var(--hs-surface); }
@supports (container-type: scroll-state) {
  .container .docs-subnav, .ref-rate-limits > .ref-rate-limits-heading { container-type: scroll-state; background: transparent; }
  .container .docs-subnav::before, .ref-rate-limits > .ref-rate-limits-heading::before { content: ""; position: absolute; inset: 0; z-index: -1; }
  /* The bar's own hairline is see-through, so its layer reaches under it and draws the hairline itself, solid. */
  .container .docs-subnav::before { bottom: -1px; }
  @container scroll-state(stuck: top) {
    .container .docs-subnav::before, .ref-rate-limits > .ref-rate-limits-heading::before { background: var(--hs-ground); box-shadow: 0 0 0 100vmax var(--hs-ground); clip-path: inset(0 -100vmax); border-bottom: 1px solid var(--hs-hairline); }
  }
}
/* An anchor lands below both bars with room to read its heading. */
main [id] { scroll-margin-top: calc(var(--ref-site-bar-height) + var(--ref-docs-bar-height) + 16px); }