/* API reference page: Redoc in the site's palette, with our own endpoint bar, cards and controls.
   Loaded only on /reference (pages.mjs renderReferencePage). */

/* Redoc reads its design tokens from :root. Setting them on <body> wins over the inherited values in both
   colour modes, because the site tokens they point at (styles.css) already follow the theme. Redoc's menus
   and search dialog render inside <body>, so they pick these up too. */
body.is-reference {
  --bg-color: var(--bg);
  --bg-color-raised: var(--bg-raised);
  --bg-color-tonal: var(--bg-subtle);
  --bg-color-hover: var(--bg-subtle);
  --bg-color-active: var(--accent-soft);
  --border-color-primary: var(--border);
  --border-color-secondary: var(--border);
  --text-color-primary: var(--text);
  --text-color-secondary: var(--text-muted);
  --text-color-description: var(--text-muted);
  --link-color-primary: var(--link);
  --link-color-primary-hover: var(--accent);
  --color-primary-base: var(--accent);
  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-family-monospaced: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --navbar-height: var(--header-h);
  /* From 1440px wide the longest endpoint name fits on one line next to its method badge. Narrower windows give
     the room back to the content, so a few long names wrap there instead of the endpoint pages getting cramped. */
  --sidebar-width: clamp(304px, 21vw + 74px, 376px);
  --sidebar-margin-horizontal: 20px;
  --sidebar-font-size: 13.5px;
  --sidebar-spacing-unit: 7px;
  /* Redoc derives these from the sidebar tokens at :root, where the derived value is fixed, so the sidebar tokens
     set here never reach them: set the menu item's own tokens too. */
  --menu-item-label-margin: 0 var(--sidebar-margin-horizontal);
  --menu-item-font-size: var(--sidebar-font-size);
  --menu-item-font-family: var(--font-family-base);
  --sidebar-bg-color: var(--bg-subtle);
  --sidebar-border-color: var(--border);
  --menu-item-bg-color-active: var(--accent-soft);
  --menu-content-color-active: var(--accent);
  --layout-three-panel-large-max-width: none;
  --panel-border-radius: 14px;
  --panel-samples-bg-color: var(--code-bg);
  --panel-samples-heading-bg-color: var(--bg-subtle);
  --panel-samples-body-bg-color: var(--code-bg);
  --panel-samples-code-block-bg-color: var(--code-bg);
  --panel-samples-dropdown-bg-color: var(--bg-raised);
}

/* Full width, edge to edge under the header; Redoc's own column padding is trimmed so the content gets the room. */
.is-reference .mg-main { padding: 0; }
.mg-redoc [data-testid='middle-panel'] { padding-left: 24px; padding-right: 24px; }
.mg-redoc [data-testid='right-panel'] { padding-right: 24px; }

/* The header's theme toggle is the only colour switch (reference.js mirrors it into Redoc). */
.mg-redoc [data-testid='color-mode-switcher'] { display: none; }
/* Redoc's attribution badge links out and loads a hosted logo; the vendored bundle drops the logo (pages.mjs). */
.mg-redoc a[href='https://redocly.com/redoc/'] { display: none; }

/* Method labels everywhere Redoc shows them (sidebar, card headers): soft pills in the method colour. The
   doubled class outranks Redoc's own `:root.dark .tag-*` rules. */
.is-reference .tag-get.tag-get { --tag-color: var(--method-get); }
.is-reference .tag-post.tag-post { --tag-color: var(--method-post); }
.is-reference .tag-put.tag-put { --tag-color: var(--method-put); }
.is-reference .tag-patch.tag-patch { --tag-color: var(--method-patch); }
.is-reference .tag-delete.tag-delete { --tag-color: var(--method-delete); }
.is-reference :is(.tag-get, .tag-post, .tag-put, .tag-patch, .tag-delete):is(.tag-get, .tag-post, .tag-put, .tag-patch, .tag-delete) {
  --tag-bg-color: color-mix(in srgb, var(--tag-color) 12%, transparent);
  --tag-bg-color-hover: color-mix(in srgb, var(--tag-color) 18%, transparent);
  font-weight: 700;
  border-radius: 6px;
}

/* Sidebar method badges: aligned pills tinted in the method colour, filled for the item being read. */
.mg-redoc .menu-content [data-component-name='Tags/HttpTag'],
.mg-redoc .menu-content .tag-hook {
  --badge: var(--text-muted);
  flex: none; min-width: 42px; padding: 2px 5px; border-radius: 6px; text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; line-height: 1.5; text-transform: uppercase;
  color: var(--badge); background: color-mix(in srgb, var(--badge) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge) 32%, transparent);
  transition: background 0.12s, box-shadow 0.12s, color 0.12s;
}
.mg-redoc .menu-content .tag-get { --badge: var(--method-get); }
.mg-redoc .menu-content .tag-post { --badge: var(--method-post); }
.mg-redoc .menu-content .tag-put { --badge: var(--method-put); }
.mg-redoc .menu-content .tag-patch { --badge: var(--method-patch); }
.mg-redoc .menu-content .tag-delete { --badge: var(--method-delete); }
.mg-redoc .menu-content .tag-hook { --badge: #8b5cf6; }
.mg-redoc .menu-content a:hover [data-component-name='Tags/HttpTag'],
.mg-redoc .menu-content a:hover .tag-hook {
  background: color-mix(in srgb, var(--badge) 20%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--badge) 55%, transparent);
}
.mg-redoc .menu-content [data-active='true'] [data-component-name='Tags/HttpTag'],
.mg-redoc .menu-content [data-active='true'] .tag-hook {
  color: #fff; background: var(--badge);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--badge) 45%, transparent);
}
html.dark .mg-redoc .menu-content [data-active='true'] [data-component-name='Tags/HttpTag'],
html.dark .mg-redoc .menu-content [data-active='true'] .tag-hook { color: #0c1017; }
/* Webhook events are delivered as POSTs, but in the sidebar they are events, not endpoints to call. */
.mg-redoc .menu-content a[href^='#/events/'] [data-component-name='Tags/HttpTag'] { --badge: #8b5cf6; }
.mg-redoc .menu-content a[href^='#/events/'] [data-component-name='Tags/HttpTag'] > div { font-size: 0; }
.mg-redoc .menu-content a[href^='#/events/'] [data-component-name='Tags/HttpTag'] > div::after { content: 'event'; font-size: 10px; }
.mg-redoc .menu-content .tag-http-deprecated { text-decoration: line-through; opacity: 0.6; }
/* The badge's own inner wrapper adds padding; the pill above owns the spacing. */
.mg-redoc .menu-content [data-component-name='Tags/HttpTag'] > div, .mg-redoc .menu-content .tag-hook > div { padding: 0; }

/* Section title: eyebrow (the tag) above the title; actions wrap below a long title instead of squeezing it. */
.mg-title-row { flex-wrap: wrap; row-gap: 12px; }
.mg-redoc .mg-title-row > :has(> .mg-eyebrow) { display: flex; flex-direction: column; align-items: flex-start; }
.mg-redoc .mg-eyebrow { margin: 0 0 6px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.mg-redoc [data-testid='page-actions'] { display: flex; align-items: center; gap: 8px; }

/* Endpoint bar: method, path, copy, "Try it". */
.mg-endpoint-bar {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 28px; padding: 6px 6px 6px 8px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); box-shadow: var(--shadow);
}
.mg-endpoint-bar .mg-method { flex: none; }
.mg-endpoint-path { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--text); background: transparent; }
.mg-endpoint-copy {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.mg-endpoint-copy:hover { color: var(--accent); background: var(--accent-soft); }
.mg-endpoint-copy[data-state='copied'] { color: var(--mg-green); }
.mg-endpoint-copy svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-try-it {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px;
  background: var(--accent-gradient); color: #fff; font: 600 13.5px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: filter 0.12s, box-shadow 0.12s;
}
.mg-try-it:hover { filter: brightness(1.06); box-shadow: var(--shadow-lift); }
.mg-try-it svg { width: 13px; height: 13px; fill: currentColor; }

/* Request and response cards. */
.mg-redoc :is(.panel-request-samples, .panel-response-samples) {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Footer of the request card: the compact Ask AI box, which opens the Assistant about this endpoint. */
.mg-request-footer { padding: 8px 10px; border-top: 1px solid var(--border); background: var(--bg-subtle); }
.mg-ask-ai {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 3px 4px 3px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-raised);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.mg-ask-ai:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.mg-ask-ai-icon { flex: none; display: grid; }
.mg-ask-ai-icon svg { width: 16px; height: 16px; fill: var(--accent); }
.mg-ask-ai input {
  flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--text);
  font: 13.5px/1.4 inherit; font-family: inherit;
}
.mg-ask-ai input::placeholder { color: var(--text-muted); }
.mg-ask-ai input:focus { outline: none; }
.mg-ask-ai-send {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 999px; background: var(--accent-gradient); color: #fff; cursor: pointer;
}
.mg-ask-ai-send:hover { filter: brightness(1.08); }
.mg-ask-ai-send svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* "Open API client" at the foot of the sidebar. */
.mg-open-client {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; width: calc(100% - 2 * var(--sidebar-margin-horizontal)); margin: 8px var(--sidebar-margin-horizontal) 4px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-raised); color: var(--text);
  font: 500 13px/1.2 inherit; font-family: inherit; cursor: pointer;
}
.mg-open-client:hover { border-color: var(--accent); color: var(--accent); }
.mg-open-client svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 560px) {
  .mg-endpoint-bar { flex-wrap: wrap; }
  .mg-endpoint-path { flex-basis: 100%; order: 3; padding: 4px 2px 0; }
  .mg-try-it { margin-left: auto; }
}