/* ═══════════════════════════════════════════════════════════════
   Docs — API reference page (Scalar host chrome)

   Styles the banner above the Scalar mount and themes Scalar's CSS
   variables to match the marketing design system. Scalar's own
   layout/typography live inside the vendor bundle.
   ═══════════════════════════════════════════════════════════════ */

.docs-ref-banner {
  /* Embedded at the top of the reference column (the docs sidebar is the nav
     now, so the banner no longer spans full width). Rounded notice above the
     Scalar mount. */
  border: 1px solid var(--mkt-card-border);
  border-radius: 10px;
  background: hsl(150 20% 96%);
  padding: 0.625rem 1rem;
  margin-bottom: 1rem;
}

.docs-ref-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.docs-ref-banner-text {
  font-size: 0.8125rem;
  color: var(--mkt-body-color);
  margin: 0;
}

.docs-ref-banner-link {
  color: var(--mkt-sage-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.docs-ref-banner-link:hover { color: var(--foreground); }

.docs-ref-banner-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The buttons set explicit `display`, which would otherwise defeat the
   `hidden` attribute the JS toggles (author display beats the UA's
   [hidden] { display: none }). */
.docs-ref-banner [hidden] { display: none !important; }

.docs-ref-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: var(--foreground);
  color: var(--card, #fff);
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  text-decoration: none;
}
.docs-ref-btn:hover { opacity: 0.85; }
.docs-ref-btn:disabled { opacity: 0.5; cursor: default; }

.docs-ref-btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  color: var(--foreground);
  border: 1px solid var(--mkt-card-border);
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
}
.docs-ref-btn-ghost:hover { background: hsl(0 0% 0% / 0.04); }

.docs-ref-key-chip {
  font-family: var(--mk-font-mono), 'SF Mono', Menlo, monospace;
  font-size: 0.6875rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--mkt-card-border);
  background: hsl(0 0% 100% / 0.7);
  color: var(--foreground);
}

.docs-ref-noscript {
  max-width: 48rem;
  margin: 4rem auto;
  padding: 1.5rem;
  border: 1px solid var(--mkt-card-border);
  border-radius: 0.75rem;
  font-size: 0.9375rem;
  color: var(--mkt-body-color);
}
.docs-ref-noscript a { text-decoration: underline; color: var(--foreground); }

/* Scalar's "Generate MCP" sidebar link advertises Scalar's own MCP
   generator — confusing next to Canonical's real MCP server (see
   /documentation/mcp). No config flag for it in v1.62.4, so hide it. */
#scalar-reference .scalar-mcp-layer-link { display: none !important; }

/* Scalar's "Ask AI" agent (sidebar button hidden in docs-reference.js —
   it has no stable class — plus these agent panels/inputs). It routes to
   Scalar's hosted AI, not ours; no config flag in v1.62.4. */
.agent-scalar,
.agent-scalar-overlay,
.agent-button-container { display: none !important; }

/* Sticky-chrome offset: Scalar's try-it panels stick below the docs header
   (the banner now scrolls away inside the column, so it's no longer part of
   the offset). docs-reference.js measures the real header height and overrides
   this inline on the mount — keep the rule on #scalar-reference ONLY, since a
   descendant rule (e.g. the .light-mode compound below) would beat the
   inherited inline value inside Scalar's subtree. */
#scalar-reference {
  --scalar-custom-header-height: 3.5rem;
  /* Reserve height from first paint so the column doesn't grow (and pop the
     scrollbar) when Scalar mounts ~1s in. */
  min-height: calc(100vh - 12rem);
}

/* ── Loading skeleton ────────────────────────────────────────────
   Shown while the mount has no children; the moment Scalar injects its app,
   `:empty` stops matching and the skeleton disappears — no JS, no cleanup.
   The docs sidebar is real HTML outside the mount now, so the skeleton only
   mimics Scalar's content column (no fake sidebar rail). */
#scalar-reference:empty {
  border: 1px solid hsl(0 0% 92%);
  border-radius: 12px;
  background:
    linear-gradient(hsl(0 0% 92%) 0 0) 28px 28px / 260px 22px no-repeat,
    linear-gradient(hsl(0 0% 94%) 0 0) 28px 72px / min(560px, 70%) 13px no-repeat,
    linear-gradient(hsl(0 0% 94%) 0 0) 28px 100px / min(480px, 60%) 13px no-repeat,
    linear-gradient(hsl(0 0% 94%) 0 0) 28px 128px / min(520px, 64%) 13px no-repeat,
    linear-gradient(hsl(0 0% 93%) 0 0) 28px 184px / 180px 15px no-repeat,
    linear-gradient(hsl(0 0% 95%) 0 0) 28px 214px / min(600px, 76%) 90px no-repeat;
  animation: docs-skeleton-pulse 1.4s ease-in-out infinite;
}

@keyframes docs-skeleton-pulse {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  #scalar-reference:empty {
    animation: none;
  }
}

/* ── Scalar theme alignment ──────────────────────────────────────
   Scalar exposes --scalar-* custom properties; map them onto the
   marketing design tokens (marketing.css :root) so the reference
   reads as part of the site, not an embedded third-party widget.
   Scalar is pinned to light mode in docs-reference.js — the rest of
   the site is light-only. Both selector forms are needed: Scalar
   stamps `.light-mode` on its own root INSIDE the mount, and the
   id+class compound outranks the theme's own `.light-mode` rules. */
#scalar-reference,
#scalar-reference .light-mode {
  --scalar-font: "Saans", ui-sans-serif, system-ui, sans-serif;
  --scalar-font-code: var(--mk-font-mono), "SF Mono", Menlo, monospace;

  /* Surfaces */
  --scalar-background-1: hsl(0 0% 99%);   /* --background */
  --scalar-background-2: hsl(40 12% 97%); /* --mkt-bg-warm: panels, code headers */
  --scalar-background-3: hsl(0 0% 94%);
  --scalar-background-card: hsl(0 0% 100%); /* --card */

  /* Text */
  --scalar-color-1: hsl(0 0% 8%);   /* --foreground */
  --scalar-color-2: hsl(0 0% 42%);  /* --mkt-body-color */
  --scalar-color-3: hsl(0 0% 55%);  /* --mkt-caption-color */

  /* Accent = sage */
  --scalar-color-accent: hsl(155 30% 38%);          /* --mkt-sage-text */
  --scalar-background-accent: hsl(155 25% 46% / 0.08); /* --mkt-sage-soft */

  /* Chrome */
  --scalar-border-color: hsl(0 0% 90%); /* --mkt-card-border */
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;

  /* Buttons */
  --scalar-button-1: hsl(0 0% 8%);
  --scalar-button-1-color: hsl(0 0% 100%);
  --scalar-button-1-hover: hsl(0 0% 20%);

  /* Sidebar */
  --scalar-sidebar-background-1: hsl(0 0% 99%);
  --scalar-sidebar-color-1: hsl(0 0% 8%);
  --scalar-sidebar-color-2: hsl(0 0% 42%);
  --scalar-sidebar-border-color: hsl(0 0% 90%);
  --scalar-sidebar-item-hover-background: hsl(155 25% 46% / 0.08);
  --scalar-sidebar-item-active-background: hsl(155 25% 46% / 0.08);
  --scalar-sidebar-color-active: hsl(155 30% 38%);
  --scalar-sidebar-search-background: hsl(0 0% 100%);
  --scalar-sidebar-search-border-color: hsl(0 0% 90%);
  --scalar-sidebar-search-color: hsl(0 0% 55%);
}

/* ── Reference shell ─────────────────────────────────────────────
   The reference shares the docs shell (left sidebar + main) but drops the
   right-hand "On this page" TOC column and lets the main column run wide for
   Scalar's content + try-it panels. */
.docs-shell--reference {
  padding-top: 1.5rem;
}
@media (min-width: 1024px) {
  /* Slightly wider than the guides' 220px so endpoint rows (badge + label)
     never truncate. */
  .docs-shell--reference {
    grid-template-columns: 248px minmax(0, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1280px) {
  /* No third (TOC) column — Scalar carries its own in-endpoint structure. */
  .docs-shell--reference {
    grid-template-columns: 248px minmax(0, 1fr);
  }
}

/* ── Sidebar: API Reference endpoint list ────────────────────────
   Rendered under the active "API Reference" entry (docs_sidebar.html): tag
   sub-headers ("Search", "Companies") group the endpoints, so each row's
   label stays short. Indented under the "API Reference" link with a left rail,
   matching the guide pages' section sub-links. */
.docs-sidebar-endpoints {
  margin: 0.375rem 0 0.5rem;
  padding-left: 0.75rem;
  margin-left: 0.875rem;
  border-left: 1px solid var(--mkt-card-border);
  list-style: none;
}

.docs-endpoint-group {
  padding: 0.5rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mkt-caption-color, hsl(0 0% 55%));
}
.docs-endpoint-group:first-child {
  padding-top: 0.125rem;
}

.docs-sidebar-endpoint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem;
  margin: 0.0625rem 0;
  font-size: 0.8125rem;
  line-height: 1.2;
  color: var(--mkt-body-color);
  border-radius: var(--radius-md, 0.375rem);
}
.docs-sidebar-endpoint:hover {
  color: var(--foreground);
  background: var(--mkt-sage-soft);
}
.docs-sidebar-endpoint.active {
  color: var(--foreground);
  font-weight: 600;
  background: var(--mkt-sage-soft);
}

.docs-endpoint-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Method badge — compact, monospace, color-coded like Scalar's own. */
.docs-method {
  flex: none;
  font-family: var(--mk-font-mono), "SF Mono", Menlo, monospace;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.25rem 0.25rem;
  border-radius: 4px;
  min-width: 2.375rem;
  text-align: center;
  text-transform: uppercase;
}
.docs-method-get {
  color: hsl(205 70% 40%);
  background: hsl(205 70% 40% / 0.1);
}
.docs-method-post {
  color: hsl(155 45% 34%);
  background: hsl(155 45% 34% / 0.1);
}
.docs-method-put,
.docs-method-patch {
  color: hsl(35 80% 38%);
  background: hsl(35 80% 38% / 0.1);
}
.docs-method-delete {
  color: hsl(0 65% 45%);
  background: hsl(0 65% 45% / 0.1);
}