/* ==========================================================================
   Scalar API reference theme — Taiga Cloud
   Loaded via custom_css in scalar_docs.py. Paired with theme=Theme.NONE.

   Scalar wraps its own styles in @layer scalar-base, scalar-theme,
   scalar-config. Unlayered CSS (this file) always beats layered CSS, so
   nothing here needs !important.

   Only documented CSS custom properties are used below. No selectors target
   Scalar's internal DOM, so this file survives bundle upgrades.
   Full variable list:
   https://github.com/scalar/scalar/blob/main/packages/themes/src/base/variables.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts

   with_default_fonts=False stops Scalar loading Inter and JetBrains Mono from
   fonts.scalar.com. Self-host Inter to keep it, or delete this @font-face
   block and the stack below falls back to system fonts with no network calls
   at all.

   Inter is SIL OFL. Grab Inter-Variable.woff2 from
   https://github.com/rsms/inter/releases and drop it in static/fonts/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --scalar-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Keep code monospaced — Inter is not, and request/response bodies lose
     column alignment without a mono stack. These fallbacks are all system
     fonts, so nothing extra to host. */
  --scalar-font-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Light mode
   -------------------------------------------------------------------------- */

.light-mode {
  --scalar-background-1: #ffffff;          /* main surface */
  --scalar-background-2: #f6f5f4;          /* raised panels, sidebar */
  --scalar-background-3: #f1ede9;          /* code blocks, wells */
  --scalar-background-accent: #0a85d10f;

  --scalar-color-1: #121212;               /* primary text */
  --scalar-color-2: rgba(0, 0, 0, 0.6);    /* secondary text */
  --scalar-color-3: rgba(0, 0, 0, 0.4);    /* muted text */
  --scalar-color-accent: #0a85d1;          /* links, active state */

  --scalar-border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-color-active: var(--scalar-color-accent);
  --scalar-sidebar-item-hover-color: currentColor;
  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
  --scalar-sidebar-item-active-background: var(--scalar-background-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-background: var(--scalar-background-2);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-color: var(--scalar-color-3);
}

/* --------------------------------------------------------------------------
   Dark mode
   -------------------------------------------------------------------------- */

.dark-mode {
  --scalar-background-1: #1a1a1a;
  --scalar-background-2: #212121;
  --scalar-background-3: #2b2b2b;
  --scalar-background-accent: #6cb6ff1f;

  --scalar-color-1: rgba(255, 255, 255, 0.86);
  --scalar-color-2: rgba(255, 255, 255, 0.55);
  --scalar-color-3: rgba(255, 255, 255, 0.35);
  --scalar-color-accent: #6cb6ff;

  --scalar-border-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-color-active: var(--scalar-color-accent);
  --scalar-sidebar-item-hover-color: currentColor;
  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
  --scalar-sidebar-item-active-background: var(--scalar-background-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-background: var(--scalar-background-2);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
  --scalar-sidebar-search-color: var(--scalar-color-3);
}

/* --------------------------------------------------------------------------
   Page shell

   The header is a flex child rather than position:fixed. Scalar owns its own
   scroll containers and a fixed overlay fights the sticky sidebar; this keeps
   the header pinned at the top of the viewport without touching Scalar's
   internals.

   If the sidebar's sticky behaviour misbehaves, the fallback is to let the
   page scroll normally (drop the heights below and the overflow on #app) and
   accept that the header scrolls away with it.
   -------------------------------------------------------------------------- */

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--scalar-background-1);
  color: var(--scalar-color-1);
  font-family: var(--scalar-font);
}

#app {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* --------------------------------------------------------------------------
   Introduction width

   Scalar lays the Introduction out as a two-column flex row -- the whole of
   info.description on the left, its own auth / client-library cards on the
   right (`.section-columns { gap: 48px; display: flex }`). That halves the
   width available to prose, so wide Markdown tables get squeezed.

   Stacking the columns gives the description the full width and drops the
   cards beneath it. Scoped with :has() so operation sections keep their
   side-by-side request/response layout.

   UNLIKE THE REST OF THIS FILE, this targets Scalar's internal DOM
   (.section-columns, .introduction-description). Those class names are not a
   documented API -- recheck this rule when upgrading the bundle. Delete it
   and the only regression is the squeezed intro column.
   -------------------------------------------------------------------------- */

.section-columns:has(.introduction-description) {
  flex-direction: column;
  width: 100%;
  /* background-color: brown; */
  gap: 24px;
}

/* Long tables should scroll rather than force the page sideways. */
/* .introduction-description table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
} */

/* --------------------------------------------------------------------------
   Per-section overrides

   Markdown is only the authoring format -- Scalar parses it and emits real
   DOM, so each section becomes a <div id="..."> wrapping a .markdown block
   with genuine <table>/<thead>/<tbody> elements.

   DEPENDS ON `generateHeadingSlug` IN reference.html. Scalar's default id is
   `<document-slug>/description/<heading>`, which these selectors would never
   match. That config option collapses it to the bare heading slug:

     "# Errors"      -> id="errors"
     "# Rate limits" -> id="rate-limits"

   Remove that option and every rule below silently stops applying. The id
   also follows the heading text, so renaming a heading breaks its selector.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Two-column sections

   reference.html wraps a section's own content in .tc-split-main and moves a
   chosen element into .tc-split-aside, because neither grouping exists in the
   markup: Scalar emits markdown children flat, and renders its own cards in a
   sibling column entirely outside the section.

   Doing the grouping in JS means this is ordinary block flow in two tracks --
   no row spans, no magic numbers, and each column sizes to its own content.
   -------------------------------------------------------------------------- */

.tc-split {
  display: grid;
  /* minmax(0, …) on the prose track stops long code spans forcing the grid
     wider than its container. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 32px;
  align-items: start;
}

/* Leading margins would push a column away from the section heading. */
.tc-split-main > :first-child,
.tc-split-aside > :first-child {
  margin-top: 0;
}

/* Grid items default to min-width:auto, so a wide card refuses to shrink and
   spills past the column edge. Let the track win instead. */
.tc-split-main,
.tc-split-aside {
  min-width: 0;
}

.tc-split-aside > * {
  max-width: 100%;
}

/* Scalar's own responsive rules are CONTAINER queries, not media queries:

     @container narrow-references-container (width<=900px) { … }

   The auth form puts Auth URL and Token URL in one row and collapses them to
   a single column under that query. Unmoved, the query resolves against the
   page-level container, so a card sitting in a ~830px column still believes
   it has the full page and overflows.

   Declaring the column as that container makes Scalar measure OUR width and
   collapse the row itself -- using its own breakpoint rather than us fighting
   its internal grid. Unnamed @container queries in the bundle resolve here
   too, which is what we want for anything else placed in this column. */
.tc-split-aside {
  container-type: inline-size;
  container-name: narrow-references-container;
}

.tc-split-aside > table {
  width: 100%;
  font-size: 14px;
}

/* Status codes and scheme names read better unwrapped. */
.tc-split-aside th:first-child,
.tc-split-aside td:first-child {
  white-space: nowrap;
}

/* Two half-width columns stop being readable on narrow viewports. */
/* Two half-width columns stop being readable on narrow viewports. */
@media (max-width: 900px) {
  .tc-split {
    display: block;
  }

  .tc-split-aside {
    margin-top: 24px;
  }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

/* position + z-index so the whole header, and anything absolutely positioned
   inside it like the docs menu, paints above Scalar's content. Without a
   stacking context here the panel competes individually with whatever
   Scalar positions inside #app. */
.tc-header {
  position: relative;
  z-index: 100;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
  padding: 0 20px;
  background: var(--scalar-background-1);
  border-bottom: 1px solid var(--scalar-border-color);
}

/* Logo and theme switch share the left cluster. */
.tc-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.tc-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Height is constrained here rather than baked into the asset. SVG scales
   cleanly, so only the height matters -- width follows the viewBox. */
.tc-brand img,
.tc-logo {
  display: block;
  height: 28px;
  width: auto;
}

/* Two logo slots, one per colour scheme. Exactly one is visible at a time,
   driven by the same body class as everything else, so the swap happens on
   the toggle with no JS involved.

   Both are in the DOM from the start, so neither flashes in on switch. */
body.light-mode .tc-logo-dark,
body.dark-mode .tc-logo-light {
  display: none;
}

.tc-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tc-nav a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--scalar-color-2);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}

.tc-nav a:hover {
  background: var(--scalar-background-2);
  color: var(--scalar-color-1);
}

/* Primary call to action */
.tc-nav a.tc-btn,
.tc-nav button.tc-btn {
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--scalar-color-accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.tc-nav a.tc-btn:hover,
.tc-nav button.tc-btn:not(:disabled):hover {
  filter: brightness(1.08);
  color: #fff;
}

/* Signed in: recede to a quiet confirmation rather than a live CTA. */
.tc-nav button.tc-btn.is-authed {
  background: transparent;
  border: 1px solid var(--scalar-border-color);
  color: var(--scalar-color-2);
  cursor: default;
}

.tc-nav button.tc-btn.is-authed::before {
  content: '✓ ';
}

.tc-signout {
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--scalar-color-2);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.tc-signout:hover {
  background: var(--scalar-background-2);
  color: var(--scalar-color-1);
}

/* --------------------------------------------------------------------------
   Theme switch

   Pill track with a sliding knob and sun / moon icons, matching the shape of
   Scalar's own dark-mode control. Driven by the .dark-mode class on <body>,
   so it stays correct even when Scalar sets the class itself.
   -------------------------------------------------------------------------- */

.tc-theme {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.tc-theme *,
.tc-theme-track {
  box-sizing: border-box;
}

.tc-theme-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 46px;
  height: 24px;
  padding: 0 5px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 999px;
  background: var(--scalar-background-2);
}

.tc-theme-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  color: var(--scalar-color-3);
  transition: color 0.15s ease;
}

.tc-theme-icon svg {
  width: 12px;
  height: 12px;
  display: block;
}

.tc-theme-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  /* A drop shadow reads as a smudge on a dark track. Use a hairline ring
     instead, which defines the edge in both modes. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

body.dark-mode .tc-theme-knob {
  transform: translateX(22px);
  /* Lift the knob clear of the track rather than matching it, and swap the
     shadow for a ring so the circle stays crisp against a dark background. */
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

/* The knob sits above the inactive icon, so the icon under it must invert. */
body.light-mode .tc-theme-sun,
body.dark-mode .tc-theme-moon {
  color: #1a1a1a;
}

body.light-mode .tc-theme-moon,
body.dark-mode .tc-theme-sun {
  color: var(--scalar-color-3);
}

.tc-theme:hover .tc-theme-track {
  background: var(--scalar-background-3);
}

@media (prefers-reduced-motion: reduce) {
  .tc-theme-knob {
    transition: none;
  }
}

.tc-header :focus-visible {
  outline: 2px solid var(--scalar-color-accent);
  outline-offset: 2px;
}

/* Collapse secondary links on narrow viewports; keep brand, switch and CTA. */
@media (max-width: 720px) {
  .tc-nav a:not(.tc-btn) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Logo note

   The header <img> above is the logo. The Markdown image in info.description
   is no longer needed with this template — remove it from DESCRIPTION unless
   you want it in the content body as well.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Base URL copy field

   Built by reference.html from the fenced code block in the Introduction, so
   Swagger and ReDoc still get a plain code block from the same description.
   -------------------------------------------------------------------------- */

.tc-copyfield {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 20px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  background: var(--scalar-background-2);
}

.tc-copyfield-label {
  flex: 0 0 auto;
  color: var(--scalar-color-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* min-width:0 so a long URL truncates inside the field instead of stretching
   it past the column. */
.tc-copyfield-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--scalar-color-1);
  font-family: var(--scalar-font-code);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: none;
  padding: 0;
}

.tc-copyfield-copy {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 6px;
  background: var(--scalar-background-1);
  color: var(--scalar-color-2);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.tc-copyfield-copy:hover {
  border-color: var(--scalar-color-accent);
  color: var(--scalar-color-1);
}

.tc-copyfield-copy.is-copied {
  border-color: var(--scalar-color-accent);
  color: var(--scalar-color-accent);
}

/* --------------------------------------------------------------------------
   "You still need a bearer token" notice

   Shown only to readers who arrived holding a portal session cookie. The
   header says "Signed in" for them, which is true of the page and false of
   their requests -- a cookie carries no Authorization header, so anything
   sent from here, or copied off here, is refused until they press Scalar's
   Authorize button. Two surfaces share these colours: .tc-banner under the
   header, and .tc-authnotice beside the Authorize card itself.

   Scalar's palette has no warning token, so one is defined here. It is
   deliberately NOT a --scalar-* variable: those are mirrored into the MkDocs
   theme and checked for drift, and the guides have nothing to warn about.
   -------------------------------------------------------------------------- */

body {
  --tc-warn-surface: #fffaf0;
  --tc-warn-tint: rgba(168, 107, 0, 0.1);
  --tc-warn-border: rgba(168, 107, 0, 0.28);
  --tc-warn-accent: #a86b00;
  --tc-warn-on-accent: #ffffff;
}

/* The accent flips from a dark amber on white to a light amber on near-black,
   so the text ON it has to flip the other way. Two tokens rather than one, or
   the CTA label goes white-on-pale in dark mode. */
body.dark-mode {
  --tc-warn-surface: #241f13;
  --tc-warn-tint: rgba(240, 194, 107, 0.12);
  --tc-warn-border: rgba(240, 194, 107, 0.26);
  --tc-warn-accent: #f0c26b;
  --tc-warn-on-accent: #2a2109;
}

/* A flex child of <body>, like the header, so it takes its own strip at the
   top of the viewport and Scalar fills what is left -- no overlay, nothing
   for the sticky sidebar to fight.

   Padding matches .tc-header's 20px so the icon lines up under the logo. */
.tc-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--tc-warn-surface);
  border-bottom: 1px solid var(--tc-warn-border);
  color: var(--scalar-color-1);
  font-size: 13px;
}

/* display:flex beats the hidden attribute's UA rule, so restate it. */
.tc-banner[hidden] {
  display: none;
}

/* A tinted disc rather than a bare glyph: at 13px the message reads as body
   copy, and the badge is what makes the strip scan as a notice. */
.tc-banner-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tc-warn-tint);
  color: var(--tc-warn-accent);
}

.tc-banner-icon svg {
  display: block;
}

/* min-width:0 so the sentence wraps inside the row instead of pushing the
   buttons off the edge on a narrow window. */
.tc-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Two lines, two weights: the state on top, the consequence under it. One
   run-on sentence made the reader parse the whole thing to find the verb. */
.tc-banner-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--scalar-color-1);
}

.tc-banner-detail {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--scalar-color-2);
}

/* Solid, not outlined. This is the one thing the reader is being asked to do,
   and an outlined button next to an outlined dismiss reads as a pair of equal
   options. */
.tc-banner-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--tc-warn-accent);
  color: var(--tc-warn-on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.tc-banner-cta:hover {
  filter: brightness(1.08);
}

/* The arrow leans into the direction of travel on hover -- the button jumps
   the reader down the page, and this is the only hint of that. */
.tc-banner-cta svg {
  display: block;
  transition: transform 0.15s ease;
}

.tc-banner-cta:hover svg {
  transform: translateX(2px);
}

.tc-banner-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--scalar-color-3);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.tc-banner-close:hover {
  background: var(--tc-warn-tint);
  color: var(--scalar-color-1);
}

.tc-banner :focus-visible {
  outline: 2px solid var(--scalar-color-accent);
  outline-offset: 2px;
}

/* Narrow: badge, message and dismiss hold the first row; the CTA is given
   order:1 so it wraps onto its own line beneath them, indented to line up
   with the text. Squeezing all four into one row turns the message into a
   two-word-per-line column. */
@media (max-width: 720px) {
  .tc-banner {
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  .tc-banner-text {
    flex: 1 1 0;
  }

  /* A zero-height full-width flex item, ordered between the dismiss and the
     CTA, so the CTA is pushed onto a line of its own while keeping its own
     width. Auto margins cannot do this -- flex decides where lines break
     before it distributes free space, so the button would stay on row one
     with the message squeezed around it. */
  .tc-banner::after {
    content: '';
    order: 1;
    flex: 0 0 100%;
    height: 0;
  }

  .tc-banner-cta {
    order: 2;
    flex: 0 0 auto;
    margin-left: 46px; /* badge width + gap, so it lines up with the text */
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc-banner-cta svg {
    transition: none;
  }
}

/* The banner's counterpart, placed by reference.html at the top of the
   Authentication aside so it sits directly above the Authorize card. */
.tc-authnotice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--tc-warn-border);
  border-left: 3px solid var(--tc-warn-accent);
  border-radius: 8px;
  background: var(--tc-warn-surface);
  color: var(--scalar-color-1);
  font-size: 13px;
  line-height: 1.5;
}

.tc-authnotice[hidden] {
  display: none;
}

.tc-authnotice code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--scalar-background-3);
  font-family: var(--scalar-font-code);
  font-size: 12px;
}

/* Scalar's OWN Authorize button, tinted to match the banner's CTA for exactly
   as long as the reader holds a cookie and no bearer -- the banner points at
   this button, so the two should read as one instruction rather than a notice
   and an unrelated grey control. reference.html adds and removes the class
   from the same state that shows the banner, so it reverts to Scalar's
   styling the moment a bearer lands.

   The colour is applied by CLASS, not by a selector aimed at Scalar's markup:
   the button is found by its label in JS, which is the same contract the
   banner copy already depends on.

   THE `body` PREFIX IS LOAD BEARING -- do not "simplify" it away. This is the
   one place in this file where the note at the top does not hold. That button
   is a ScalarButton with variant="outlined", which carries Tailwind utilities:

     outlined: 'active:bg-btn-1 shadow-border bg-b-1 text-c-1 hover:bg-b-2'

   `.bg-b-1` is 0-1-0, exactly what a bare `.tc-authorize-cta` scores, and the
   bundle injects its stylesheet at runtime -- after this file's <link>. Equal
   specificity, later in the document, so Scalar took the background and left
   our near-black label text on its own dark grey. The arithmetic that wins:

     body .tc-authorize-cta:not(:disabled)         0-2-1  >  .bg-b-1     0-1-0
     ...:not(:disabled):hover                      0-3-1  >  :hover      0-2-0

   :not(:disabled) matters because Scalar's disabled compound variant is only
   0-1-0 too -- without it we would paint a dead button as a live one.
   The descendant rule is for the label, which Scalar may wrap in its own
   element carrying `text-c-1`. */
body .tc-authorize-cta:not(:disabled),
body .tc-authorize-cta:not(:disabled) * {
  color: var(--tc-warn-on-accent);
}

body .tc-authorize-cta:not(:disabled) {
  background: var(--tc-warn-accent);
  border-radius: 6px;
  font-weight: 600;
  /* `shadow-border` draws the outlined variant's hairline as a box-shadow;
     over a solid fill it reads as a smudge. */
  box-shadow: none;
}

body .tc-authorize-cta:not(:disabled):hover,
body .tc-authorize-cta:not(:disabled):active {
  background: var(--tc-warn-accent);
  filter: brightness(1.08);
}

/* A control Scalar renders that cannot work against this API -- currently the
   Refresh button, which it shows for every non-implicit flow even though
   okta_token_exchange never returns a refresh token to spend. reference.html
   decides which controls qualify; this only takes them out of the layout.

   !important, and the only one in this file. Everywhere else specificity is
   enough and is preferred, because it leaves Scalar's own states (hover,
   disabled, active) able to win where they should. Here nothing should ever
   win: the control does not work, so it must not be visible, whatever display
   value the bundle sets on it now or after an upgrade. */
body .tc-dead-control {
  display: none !important;
}

/* Applied to the Authorize card for a couple of seconds when the banner's
   button jumps the reader here -- a smooth scroll ends silently, and without
   this it is not obvious what was scrolled to. Drawn as a ring so it never
   shifts the card's layout. */
@keyframes tc-flash {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  20%,
  60% {
    box-shadow: 0 0 0 4px var(--tc-warn-border);
  }
}

.tc-flash {
  animation: tc-flash 2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .tc-flash {
    animation: none;
    box-shadow: 0 0 0 3px var(--tc-warn-border);
  }
}

/* Staff-only header links, revealed after sign-in by the is_staff claim.
   Discovery only -- the targets are gated server-side. */
.tc-nav a.tc-staff-only[hidden] {
  display: none;
}

.tc-nav a.tc-staff-only {
  border: 0px solid var(--scalar-border-color);
}

/* --------------------------------------------------------------------------
   Docs menu

   A dropdown rather than separate header links, so the staff entries appear
   inside it after sign-in instead of widening the header.
   -------------------------------------------------------------------------- */

.tc-menu {
  position: relative;
  display: inline-flex;
  /* nav is a flex row; without this the trigger shrinks and the label wraps
     under the chevron once the header gets crowded */
  flex: 0 0 auto;
}

/* Matches .tc-nav a exactly -- same padding, size and colour -- so the menu
   reads as one of the nav items rather than a button dropped among them. */
.tc-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  white-space: nowrap;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--scalar-color-2);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.tc-menu-trigger:hover,
.tc-menu-trigger[aria-expanded='true'] {
  background: var(--scalar-background-2);
  color: var(--scalar-color-1);
}

/* The panel already signals "open"; a persistent fill on the trigger makes it
   look selected rather than expanded. */
.tc-menu-trigger[aria-expanded='true']:not(:hover) {
  background: none;
}

/* SVGs are inline by default, so they sit on the text baseline and ride high
   next to a 14px label. display:block takes it out of inline layout and lets
   the flex row centre it against the text. */
.tc-menu-chevron {
  display: block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.tc-menu-trigger[aria-expanded='true'] .tc-menu-chevron {
  transform: rotate(180deg);
}

/* Anchored to the trigger. The header is not a stacking context, so a z-index
   above Scalar's sticky panels is needed for the panel to sit over content. */
.tc-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  background: var(--scalar-background-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.tc-menu-panel[hidden] {
  display: none;
}

.tc-nav .tc-menu-panel a {
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--scalar-color-2);
  font-size: 14px;
  white-space: nowrap;
}

.tc-nav .tc-menu-panel a:hover {
  background: var(--scalar-background-2);
  color: var(--scalar-color-1);
}

/* Staff entries are hidden until sign-in; without this the display above
   would override the hidden attribute. */
.tc-nav .tc-menu-panel a.tc-staff-only[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tc-menu-chevron {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Version switcher

   The dropdown inside .tc-version-slot is SCALAR'S OWN document selector,
   moved out of the top of the sidebar by placeVersionSwitcher() in
   reference.html. It keeps Scalar's own styling because the slot carries the
   .scalar-app class its utility classes are scoped to, so the rules here only
   frame it and undo the spacing it arrives with.

   THOSE UTILITY CLASSES ARE NOT A DOCUMENTED API. Scalar injects its
   stylesheet at runtime, i.e. after this file, so the overrides below need one
   extra level of specificity (.tc-header ...) to win against equally specific
   utilities like `.scalar-app .px-3`. Recheck them when upgrading the bundle;
   losing them costs sidebar padding in a 56px bar, not the control.
   -------------------------------------------------------------------------- */

.tc-version {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* nav is a flex row; without this the slot shrinks and the version label
     ellipsises away as soon as the header gets crowded */
  flex: 0 0 auto;
}

.tc-version-slot {
  display: inline-flex;
  align-items: center;
  /* The trigger inside is `w-full`, so its width has to come from here. The
     open panel is sized to match the trigger, and its rows carry a radio
     button the trigger does not -- so this has to fit "v1.0.63 (current)"
     PLUS that control, or the longest entry ellipsises in the list. It also
     stops the pill resizing on every switch. */
  min-width: 178px;
  padding: 5px 8px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 6px;
  background: var(--scalar-background-2);
}

/* Empty until Scalar mounts, and permanently empty when the config names a
   single document -- Scalar draws no selector for one. An empty pill would
   read as a control that does nothing, so it collapses instead. */
.tc-version-slot:empty {
  display: none;
}

/* Arrives with the sidebar's own spacing (`px-3 pt-3`), which is wrong in a
   56px bar. Overridden rather than stripped off the node: the classes are
   Scalar's, and a re-render would put them straight back. */
.tc-header .tc-version-slot .document-selector {
  width: 100%;
  padding: 0;
}

/* `text-base` sizes the label for the sidebar; match the nav instead. */
.tc-header .tc-version-slot .document-selector,
.tc-header .tc-version-slot .document-selector span {
  font-size: 14px;
}

/* Sits beside the switcher rather than in the Docs menu: choosing a version
   and reading what changed between versions are the same errand. */
.tc-nav a.tc-version-changelog {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Inline SVGs sit on the text baseline and ride high against a 14px label. */
.tc-version-changelog svg {
  display: block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
}