/* VerifyUGC dark polish for the Redoc API reference.
   The Redoc theme object (developers-reference.js) does the heavy lifting; this file
   covers the handful of surfaces Redoc leaves at browser defaults and removes the
   stock Redocly branding. Selectors here are intentionally structural / attribute /
   role based rather than Redoc's generated styled-component class names, which are
   unstable across the pinned `latest` bundle. */

:root { color-scheme: dark; }

html,
body {
  margin: 0;
  background: #070710; /* --bg */
  color: #edecf7; /* --text */
  font-family: "Inter", system-ui, sans-serif;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#redoc {
  min-height: 100vh;
  background: #070710;
}

/* Dark, on-brand scrollbars (sidebar, right panel, code samples). */
* {
  scrollbar-width: thin;
  scrollbar-color: #2a2a3d #070710;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #070710;
}
::-webkit-scrollbar-thumb {
  background: #2a2a3d;
  border-radius: 6px;
  border: 2px solid #070710;
}
::-webkit-scrollbar-thumb:hover {
  background: #3a3a52;
}

/* Selection in the brand purple. */
::selection {
  background: rgba(168, 85, 247, 0.35);
  color: #fff;
}

/* Remove the "API docs by Redocly" footer link in the sidebar. */
a[href^="https://redocly.com"],
a[href^="https://redoc.ly"],
a[href*="redocly.com/redoc"] {
  display: none !important;
}

/* The Redoc loading spinner sits on a white svg by default — keep its frame dark. */
.redoc-wrap,
.menu-content {
  background: #0c0c18; /* --bg2 */
}

/* Search box inside the sidebar: dark field + subtle border so it doesn't read white. */
.menu-content input[type="text"],
[role="search"] input {
  background: #13131f !important; /* --surface */
  color: #edecf7 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 9px !important;
}
.menu-content input[type="text"]::placeholder,
[role="search"] input::placeholder {
  color: #8b8ba8 !important; /* --faint */
}

/* Tables in the middle panel (parameter / schema rows) — keep borders on-brand. */
#redoc table td,
#redoc table th {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Text legibility on dark surfaces.
   Redoc's light-theme defaults render most middle-panel content text at #333
   (rgb(51,51,51)), which is invisible on our near-black background. The theme
   object can't reach these, so we set them here. We scope to #redoc and use a
   readable light grey for body copy, pure-ish white for headings, and brand
   accents for links / inline code so the page reads like the rest of the site.
   ──────────────────────────────────────────────────────────────────────── */

/* Default: all content text light. */
#redoc,
#redoc p,
#redoc li,
#redoc span,
#redoc div,
#redoc td,
#redoc th,
#redoc dd,
#redoc dt,
#redoc label,
#redoc b,
#redoc strong,
#redoc em {
  color: #edecf7; /* --text */
}

/* Headings: brighter white, brand display font. */
#redoc h1,
#redoc h2,
#redoc h3,
#redoc h4,
#redoc h5 {
  color: #f7f6fc !important;
}

/* Secondary / muted copy: descriptions, parameter meta, required/enum labels. */
#redoc p,
#redoc .redoc-markdown p,
#redoc table td p {
  color: #c7c6dd !important; /* between --text and --dim — readable but soft */
}

/* Property names / parameter keys in tables read as primary text. */
#redoc td,
#redoc th {
  color: #edecf7 !important;
}

/* Type hints & "required" tags keep their themed accent but stay visible. */
#redoc .sc-type,
#redoc [class*="type"] {
  color: #9b9bbd; /* --dim */
}

/* Links and inline code in the brand accents. */
#redoc a {
  color: #22d3ee !important; /* --info / cyan */
}
#redoc a:hover {
  color: #a855f7 !important; /* --a1 / purple */
}
#redoc code,
#redoc p code,
#redoc li code,
#redoc td code {
  color: #22d3ee !important;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ── Code sample syntax theme (right panel JSON) ──
   Redoc tokenizes samples with Prism-style spans that default to #333.
   Map them to a cohesive dark palette (City-Lights / Night-Owl flavour). */
#redoc pre,
#redoc pre code {
  color: #e6e6f0 !important;
  background: #070710 !important; /* --bg */
}
#redoc .token.punctuation {
  color: #8b8ba8 !important; /* --faint */
}
#redoc .token.property,
#redoc .token.key,
#redoc .token.tag,
#redoc .token.attr-name {
  color: #a855f7 !important; /* purple — keys */
}
#redoc .token.string,
#redoc .token.attr-value {
  color: #34d399 !important; /* green — strings */
}
#redoc .token.number,
#redoc .token.boolean {
  color: #fbbf24 !important; /* amber — numbers/booleans */
}
#redoc .token.null,
#redoc .token.keyword {
  color: #f87171 !important; /* red — null/keywords */
}
#redoc .token.operator,
#redoc .token.comment {
  color: #6b6b88 !important;
}

/* Response status rows: keep the dot/label readable on dark tab bars. */
#redoc [class*="ResponseTab"],
#redoc [class*="response"] {
  color: #edecf7;
}

/* The "Authorization" / security panel labels. */
#redoc h5,
#redoc [class*="security"] {
  color: #edecf7 !important;
}

/* Mobile: stop the page panning sideways and keep the sidebar search at 16px so
   iOS doesn't zoom on focus. Redoc handles its own column collapse. */
html { overflow-x: hidden; }
@media (max-width: 640px) {
  .menu-content input[type="text"],
  [role="search"] input { font-size: 16px !important; }
}