/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/*
 * Page chrome (kike-website's header/footer/toggle vocabulary) and the Swagger UI skin.
 *
 * Load order is the whole design: vendor/swagger-ui.css, then theme.css (tokens), then this
 * file. Two rules make the overrides win without !important arms races:
 *
 *   1. Swagger ships a complete `html.dark-mode` skin (256 rules) that is switched on by the
 *      `dark-mode` class this page keeps in step with data-theme. Every override below mirrors
 *      one of those selector shapes but starts from `html[data-theme]` instead, which lands on
 *      exactly the same specificity — and, being later in the cascade, wins. The same shape
 *      also beats Swagger's plain light rules, which are less specific.
 *   2. The handful of vendor declarations written with `!important` (code blocks) are the only
 *      ones overridden with `!important` here, with the reason stated at the declaration.
 *
 * Method accents come from --k-method (cyan GET, green POST, amber PUT/PATCH, red DELETE,
 * dim HEAD/OPTIONS), assigned per .opblock-* class on the same mirroring pattern.
 */

/* =============================================== page shell ============================================ */

.docs-shell {
  width: 100%;
  max-width: 72rem; /* kike-website's max-w-6xl */
  margin-inline: auto;
  padding-inline: 1.25rem;
}

@media (min-width: 768px) {
  .docs-shell {
    padding-inline: 2rem;
  }
}

.docs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--k-bg);
  border-bottom: 1px solid var(--k-line);
  transition: background-color 0.2s ease;
}

.docs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem; /* kike-website's h-14 */
}

.docs-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--k-fg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.docs-brand:hover {
  color: var(--k-glow);
}

.docs-brand__prompt,
.docs-brand__cursor {
  color: var(--k-glow);
}

.docs-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.docs-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  color: var(--k-dim);
  font-size: 0.78rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.docs-nav__link:hover {
  color: var(--k-fg);
  background-color: color-mix(in srgb, var(--k-line) 55%, transparent);
  border-color: var(--k-line);
}

.docs-nav__link[aria-current='page'] {
  color: var(--k-glow);
}

.docs-nav__idx {
  color: color-mix(in srgb, var(--k-glow) 70%, transparent);
}

/* Theme toggle — kike-website's ThemeToggle: bordered square, and in terminal a filled glow
   square. Same localStorage key (kike-theme) and same data-theme attribute, so a visitor who
   already chose editorial on the marketing site lands on editorial docs. */
.docs-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 1rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--k-line);
  color: var(--k-dim);
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.docs-theme-toggle:hover {
  border-color: var(--k-glow);
}

.docs-theme-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

.docs-theme-toggle .docs-theme-toggle__icon svg {
  width: 14px;
  height: 14px;
}

.docs-theme-toggle .icon-sun,
.docs-theme-toggle .icon-moon {
  display: none;
}

[data-theme='terminal'] .docs-theme-toggle__icon {
  background-color: var(--k-glow);
  color: var(--k-invert);
}

[data-theme='terminal'] .docs-theme-toggle .icon-sun {
  display: block;
}

[data-theme='editorial'] .docs-theme-toggle__icon {
  background: transparent;
  color: var(--k-dim);
}

[data-theme='editorial'] .docs-theme-toggle .icon-moon {
  display: block;
}

[data-theme='editorial'] .docs-theme-toggle:hover .docs-theme-toggle__icon {
  color: var(--k-fg);
}

.docs-main {
  position: relative;
  z-index: 1; /* over the editorial dotted-grid overlay */
}

/* =============================================== footer =============================================== */

.docs-footer {
  position: relative;
  z-index: 1;
  background-color: var(--k-bg);
  border-top: 1px solid var(--k-line);
}

.docs-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 2rem;
  font-size: 0.72rem;
  color: var(--k-dim);
}

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

.docs-footer__row--top {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--k-line);
  font-size: 0.875rem;
  color: var(--k-fg);
}

.docs-footer__status b {
  color: var(--k-glow);
  font-weight: 400;
}

.docs-footer a {
  color: var(--k-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}

.docs-footer a:hover {
  color: var(--k-fg);
}

.docs-footer__sep {
  margin-inline: 0.5rem;
  color: var(--k-line);
}

.docs-footer__eof {
  color: var(--k-glow);
}

.docs-fallback {
  max-width: 42rem;
  margin: 3rem auto;
  padding-inline: 1rem;
  color: var(--k-fg);
}

.docs-fallback a {
  color: var(--k-glow);
}

/* =============================================== Swagger UI ============================================ */

/* The container itself: transparent over the themed page, not Swagger's own dark panel. */
html[data-theme] .swagger-ui {
  background-color: transparent;
  color: var(--k-fg);
}

/* Typography: one family everywhere, mono reserved for paths, types, code and parameters.
   :where() keeps the second argument's specificity at zero so the first rule stays tied with
   (and, being later, beats) Swagger's `.swagger-ui <el> { font-family: sans-serif }` rules. */
html[data-theme] .swagger-ui,
html[data-theme] .swagger-ui :where(*) {
  font-family: var(--k-font-sans);
}

html[data-theme]
  .swagger-ui
  :where(
    code,
    pre,
    kbd,
    samp,
    .model,
    .parameter__in,
    .parameter__extension,
    .parameter__type,
    .parameter__deprecated,
    .response__extension,
    .base-url,
    .opblock-summary-path,
    .prop-type,
    .prop-format,
    .model-hint
  ) {
  font-family: var(--k-font-mono);
}

/* ---- info block ---- */
html[data-theme] .swagger-ui .info {
  margin: 2rem 0 1.25rem;
}

html[data-theme] .swagger-ui .info .title {
  color: var(--k-fg);
  font-family: var(--k-font-display);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

html[data-theme] .swagger-ui .info .title small {
  background-color: color-mix(in srgb, var(--k-line) 70%, transparent);
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .info .title small.version-stamp {
  background-color: var(--k-glow);
  color: var(--k-invert);
}

html[data-theme] .swagger-ui .info h1,
html[data-theme] .swagger-ui .info h2,
html[data-theme] .swagger-ui .info h3,
html[data-theme] .swagger-ui .info h4,
html[data-theme] .swagger-ui .info h5,
html[data-theme] .swagger-ui .info li,
html[data-theme] .swagger-ui .info p,
html[data-theme] .swagger-ui .info pre,
html[data-theme] .swagger-ui .info table {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .info .base-url {
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .info a {
  color: var(--k-glow);
}

html[data-theme] .swagger-ui .info a:hover {
  color: color-mix(in srgb, var(--k-glow) 75%, var(--k-fg));
}

/* ---- tag headings (the "01 / groups" style section titles) ---- */
html[data-theme] .swagger-ui .opblock-tag {
  border-bottom: 1px solid var(--k-line);
  color: var(--k-fg);
  font-family: var(--k-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.85rem 0;
  transition: border-color 0.2s ease;
}

html[data-theme] .swagger-ui .opblock-tag:hover {
  border-bottom-color: color-mix(in srgb, var(--k-glow) 45%, var(--k-line));
}

html[data-theme] .swagger-ui .opblock-tag small {
  color: var(--k-dim);
  font-size: 0.75rem;
}

html[data-theme] .swagger-ui .opblock-tag code {
  background-color: var(--k-panel);
  border: 1px solid var(--k-line);
  color: var(--k-dim);
  font-family: var(--k-font-mono);
  font-size: 0.7rem;
}

/* ---- method accents ---- */
html[data-theme] .swagger-ui .opblock.opblock-get {
  --k-method: var(--k-cyan);
}

html[data-theme] .swagger-ui .opblock.opblock-post {
  --k-method: var(--k-green);
}

html[data-theme] .swagger-ui .opblock.opblock-put {
  --k-method: var(--k-amber);
}

html[data-theme] .swagger-ui .opblock.opblock-patch {
  --k-method: var(--k-amber);
}

html[data-theme] .swagger-ui .opblock.opblock-delete {
  --k-method: var(--k-red);
}

html[data-theme] .swagger-ui .opblock.opblock-options,
html[data-theme] .swagger-ui .opblock.opblock-head,
html[data-theme] .swagger-ui .opblock.opblock-query,
html[data-theme] .swagger-ui .opblock.opblock-deprecated {
  --k-method: var(--k-dim);
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  ) {
  background-color: color-mix(in srgb, var(--k-method, var(--k-dim)) 7%, var(--k-panel2));
  border: 1px solid color-mix(in srgb, var(--k-method, var(--k-dim)) 30%, var(--k-line));
  box-shadow: none;
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-section-header {
  background-color: color-mix(in srgb, var(--k-method, var(--k-dim)) 12%, var(--k-panel));
  border-top: 1px solid color-mix(in srgb, var(--k-method, var(--k-dim)) 25%, var(--k-line));
  border-bottom: 1px solid color-mix(in srgb, var(--k-method, var(--k-dim)) 25%, var(--k-line));
  box-shadow: none;
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-section-header
  .tab-header
  .tab-item
  .opblock-title
  span::after {
  background-color: var(--k-method, var(--k-dim));
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-summary {
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--k-method, var(--k-dim)) 22%, transparent);
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-summary-method {
  background-color: var(--k-method, var(--k-dim));
  border-radius: 3px;
  color: var(--k-invert);
  font-family: var(--k-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-shadow: none;
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-summary
  .opblock-summary-path {
  color: var(--k-fg);
}

html[data-theme]
  .swagger-ui
  .opblock:is(
    .opblock-get,
    .opblock-post,
    .opblock-put,
    .opblock-patch,
    .opblock-delete,
    .opblock-options,
    .opblock-head,
    .opblock-query,
    .opblock-deprecated
  )
  .opblock-summary:hover
  .opblock-summary-path {
  color: var(--k-glow);
}

/* ---- operation body text ---- */
html[data-theme] .swagger-ui .opblock .opblock-summary-description,
html[data-theme] .swagger-ui .opblock .opblock-summary-operation-id,
html[data-theme] .swagger-ui .opblock .opblock-title_normal,
html[data-theme] .swagger-ui .opblock .parameter__in,
html[data-theme] .swagger-ui .opblock .parameter__type,
html[data-theme] .swagger-ui .opblock .response-col_description,
html[data-theme] .swagger-ui .opblock .response-col_links,
html[data-theme] .swagger-ui .opblock .response-col_status,
html[data-theme] .swagger-ui .opblock .response__extension {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .opblock .opblock-summary-operation-id,
html[data-theme] .swagger-ui .opblock .parameter__in,
html[data-theme] .swagger-ui .opblock .parameter__type,
html[data-theme] .swagger-ui .opblock .response__extension,
html[data-theme] .swagger-ui .opblock .opblock-description-wrapper i {
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .opblock .opblock-description-wrapper p,
html[data-theme] .swagger-ui .opblock .opblock-description-wrapper i {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .opblock .responses-inner h4,
html[data-theme] .swagger-ui .opblock .responses-inner h5 {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .opblock .tab-header .tab-item {
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .opblock .tab-header .tab-item.active .opblock-title {
  color: var(--k-fg);
}

/* ---- parameters, responses, tables ---- */
html[data-theme] .swagger-ui table thead tr td,
html[data-theme] .swagger-ui table thead tr th {
  border-bottom: 1px solid var(--k-line);
  color: var(--k-fg);
}

html[data-theme] .swagger-ui table tbody tr td,
html[data-theme] .swagger-ui table tbody tr th {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .parameter__name {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .parameter__name.required span,
html[data-theme] .swagger-ui .parameter__name.required::after {
  color: var(--k-red);
}

html[data-theme] .swagger-ui .parameter__deprecated {
  color: var(--k-red);
}

html[data-theme] .swagger-ui .table-container {
  padding: 1rem 0;
}

/* ---- code and examples ---- */
html[data-theme] .swagger-ui pre.microlight,
html[data-theme] .swagger-ui .opblock pre.microlight,
html[data-theme] .swagger-ui .opblock .highlight-code pre.microlight,
html[data-theme] .swagger-ui .markdown pre,
html[data-theme] .swagger-ui .renderedMarkdown pre {
  /* The vendor writes both the background and the text colour of these blocks with
     !important ("... pre.microlight { background: ...; color: ... }"), so only !important
     declarations of the same order take them back — and the colour has to win too, because
     unstyled spans would otherwise inherit black-on-cream from `.markdown pre{color:#000}`. */
  background-color: var(--k-code-bg) !important;
  border: 1px solid var(--k-code-line);
  color: var(--k-code-fg) !important;
  font-family: var(--k-font-mono);
  font-weight: 400;
}

/* Inline code stays themed; only the code inside a block joins the dark code surface. */
html[data-theme] .swagger-ui .markdown pre code,
html[data-theme] .swagger-ui .renderedMarkdown pre code {
  background-color: transparent;
  color: inherit;
}

html[data-theme] .swagger-ui .highlight-code .header {
  background-color: var(--k-panel);
  border-bottom: 1px solid var(--k-line);
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .copy-to-clipboard,
html[data-theme] .swagger-ui .download-contents {
  background-color: var(--k-line);
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .markdown,
html[data-theme] .swagger-ui .renderedMarkdown {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .markdown p,
html[data-theme] .swagger-ui .markdown li,
html[data-theme] .swagger-ui .markdown pre,
html[data-theme] .swagger-ui .markdown code,
html[data-theme] .swagger-ui .renderedMarkdown p,
html[data-theme] .swagger-ui .renderedMarkdown li,
html[data-theme] .swagger-ui .renderedMarkdown pre {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .markdown code,
html[data-theme] .swagger-ui .renderedMarkdown code {
  background-color: var(--k-panel);
  color: var(--k-cyan);
  font-family: var(--k-font-mono);
}

html[data-theme] .swagger-ui .markdown a,
html[data-theme] .swagger-ui .renderedMarkdown a,
html[data-theme] .swagger-ui .opblock-tag a.link,
html[data-theme] .swagger-ui .opblock-external-docs a.link {
  color: var(--k-glow);
}

/* ---- controls ---- */
html[data-theme] .swagger-ui input,
html[data-theme] .swagger-ui textarea,
html[data-theme] .swagger-ui select {
  background-color: var(--k-panel2);
  border: 1px solid var(--k-line);
  border-radius: 0;
  color: var(--k-fg);
  font-family: var(--k-font-mono);
}

html[data-theme] .swagger-ui input:focus,
html[data-theme] .swagger-ui textarea:focus,
html[data-theme] .swagger-ui select:focus {
  /* Mirrors the vendor's own !important focus rule, which otherwise pins the border blue in
     terminal mode; !important is required to override an !important declaration. */
  border-color: var(--k-glow) !important;
  box-shadow: none;
  outline: none;
}

html[data-theme] .swagger-ui .operation-filter-input {
  background-color: var(--k-panel2);
  border: 1px solid var(--k-line);
  color: var(--k-fg);
  font-family: var(--k-font-mono);
}

html[data-theme] .swagger-ui .btn {
  border-radius: 0;
  font-family: var(--k-font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

html[data-theme] .swagger-ui .btn:not(.execute):not(.modal-btn) {
  background-color: transparent;
  border: 1px solid var(--k-line);
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .btn:not(.execute):not(.modal-btn):hover {
  background-color: transparent;
  border-color: var(--k-glow);
  color: var(--k-glow);
}

html[data-theme] .swagger-ui .scheme-container .btn.authorize,
html[data-theme] .swagger-ui .btn.authorize {
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--k-glow) 55%, transparent);
  color: var(--k-glow);
}

html[data-theme] .swagger-ui .scheme-container .btn.authorize:hover,
html[data-theme] .swagger-ui .btn.authorize:hover {
  background-color: color-mix(in srgb, var(--k-glow) 12%, transparent);
}

/* The padlock ships with a hard-coded accent (`color: #49cc90`) and inherits its fill from
   currentColor, so both properties have to be retargeted — mirrored down the vendor's deeper
   `.scheme-container` shape so the terminal skin cannot win the specificity tie. */
html[data-theme] .swagger-ui .scheme-container .btn.authorize svg,
html[data-theme] .swagger-ui .btn.authorize svg {
  color: var(--k-glow);
  fill: currentColor;
}

html[data-theme] .swagger-ui .opblock .btn.execute,
html[data-theme] .swagger-ui .btn.execute {
  background-color: var(--k-glow);
  border-color: var(--k-glow);
  color: var(--k-invert);
  font-weight: 700;
}

html[data-theme] .swagger-ui .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

html[data-theme] .swagger-ui .auth-btn-wrapper {
  justify-content: flex-start;
  padding: 0.75rem 0;
}

/* ---- scheme container (the Authorize panel; the Servers block is removed at render time) ---- */
html[data-theme] .swagger-ui .scheme-container {
  background-color: var(--k-panel);
  border: 1px solid var(--k-line);
  box-shadow: none;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
}

html[data-theme] .swagger-ui .auth-container {
  background-color: var(--k-panel2);
  border-bottom: 1px solid var(--k-line);
  border-radius: 0;
}

html[data-theme] .swagger-ui .auth-container h4,
html[data-theme] .swagger-ui .scopes h2 {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .scopes h2 a {
  color: var(--k-glow);
}

html[data-theme] .swagger-ui .dialog-ux .modal-ux {
  background-color: var(--k-panel);
  border: 1px solid var(--k-line);
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .dialog-ux .modal-ux-header {
  border-bottom-color: var(--k-line);
}

html[data-theme] .swagger-ui .dialog-ux .modal-ux-header h3,
html[data-theme] .swagger-ui .dialog-ux .modal-ux h4,
html[data-theme] .swagger-ui .dialog-ux .modal-ux p,
html[data-theme] .swagger-ui .dialog-ux .modal-ux label {
  color: var(--k-fg);
}

/* ---- schemas / model viewer ---- */
html[data-theme] .swagger-ui section.models {
  border-color: var(--k-line);
}

html[data-theme] .swagger-ui section.models h4,
html[data-theme] .swagger-ui section.models h5 {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui section.models h4:hover {
  background-color: color-mix(in srgb, var(--k-line) 45%, transparent);
}

html[data-theme] .swagger-ui section.models .model-container {
  background-color: var(--k-panel);
}

html[data-theme] .swagger-ui section.models .model-container:hover {
  background-color: color-mix(in srgb, var(--k-glow) 8%, var(--k-panel));
}

html[data-theme] .swagger-ui .model-box {
  background-color: var(--k-panel2);
}

html[data-theme] .swagger-ui .model-box .model,
html[data-theme] .swagger-ui .model-box .model-title,
html[data-theme] .swagger-ui .model {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .model .property,
html[data-theme] .swagger-ui .model .property.primitive,
html[data-theme] .swagger-ui .model .prop-format,
html[data-theme] .swagger-ui .model-title {
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .model .prop-type {
  color: var(--k-cyan);
}

html[data-theme] .swagger-ui .json-schema-2020-12 {
  background-color: color-mix(in srgb, var(--k-panel2) 80%, transparent);
}

html[data-theme] .swagger-ui .json-schema-2020-12__title,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword__name--primary,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword__value--primary,
html[data-theme] .swagger-ui .json-schema-2020-12-json-viewer__name--primary,
html[data-theme] .swagger-ui .json-schema-2020-12-json-viewer__value--primary {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .json-schema-2020-12-property .json-schema-2020-12__title,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword__name,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword__value,
html[data-theme] .swagger-ui .json-schema-2020-12-json-viewer__name,
html[data-theme] .swagger-ui .json-schema-2020-12-json-viewer__value,
html[data-theme] .swagger-ui .json-schema-2020-12__attribute,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword--description {
  color: var(--k-dim);
}

html[data-theme] .swagger-ui .json-schema-2020-12-property .json-schema-2020-12__title {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .json-schema-2020-12__constraint {
  background-color: var(--k-cyan);
  color: var(--k-invert);
}

html[data-theme] .swagger-ui .json-schema-2020-12__constraint--string {
  background-color: var(--k-amber);
}

html[data-theme] .swagger-ui .json-schema-2020-12-body,
html[data-theme] .swagger-ui .json-schema-2020-12-json-viewer__children,
html[data-theme] .swagger-ui .json-schema-2020-12-keyword__children {
  border-left-color: color-mix(in srgb, var(--k-fg) 18%, transparent);
}

/* ---- loading / misc ---- */
html[data-theme] .swagger-ui .loading-container .loading::after {
  color: var(--k-fg);
}

html[data-theme] .swagger-ui .loading-container .loading {
  border-color: var(--k-glow) var(--k-line) var(--k-line);
}

/* =============================================== responsive ============================================ */

@media (max-width: 640px) {
  .docs-header__inner {
    flex-wrap: wrap;
    padding-block: 0.5rem;
  }

  .docs-nav {
    overflow-x: auto;
  }

  /* Drop the numbers rather than wrap the bar: brand + two links + toggle overflow 390px
     by ~20px, and a second row would cost a third of a phone viewport to a sticky header. */
  .docs-nav__idx {
    display: none;
  }

  .docs-nav__link {
    padding-inline: 0.4rem;
  }

  .docs-theme-toggle {
    margin-left: 0.35rem;
    flex: none;
  }

  .docs-footer__row--top {
    font-size: 0.8rem;
  }
}