/* The service pages' layout (_ext/openapi_pages.py). The design is based on Scalar's API reference
   (https://scalar.com), MIT License, Copyright (c) 2023-present Scalar: see service-pages.LICENSE.

   Each endpoint's example request and response sit beside its fields when the page is wide enough, and
   below them when it isn't. Fields and types are definition lists, and a field's type opens out under it.
   No JavaScript is needed. */

/* Examples go beside the fields on wide screens, so service pages drop the theme's width caps. */
body:has(.api-endpoint) .sy-container,
body:has(.api-endpoint) .sy-content {
  max-width: 120rem;
}

/* The theme leaves room for its right sidebar, which service pages don't have. */
@media (min-width: 768px) {
  body:has(.api-endpoint) .sy-main {
    width: calc(100% - 18rem);
  }

  body:has(.api-endpoint) .sy-main,
  body:has(.api-endpoint) .sy-main .max-w-6xl {
    max-width: none;
  }
}

/* The page's outline is in the left sidebar instead (_ext/openapi_pages.py), so the right one goes, with the
   button that opens it on narrow screens. */
body:has(.api-endpoint) #rside,
body:has(.api-endpoint) .rside-overlay,
body:has(.api-endpoint) .sy-breadcrumbs button[aria-controls="rside"] {
  display: none;
}

/* The article's width decides the layout, since the theme's sidebar comes and goes with the window's. */
body:has(.api-endpoint) .yue {
  container: api-page / inline-size;
}

.api-endpoint {
  margin-bottom: 3rem;
}

@container api-page (min-width: 56rem) {
  .api-endpoint {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 2.5rem;
    align-items: start;
  }

  /* The examples stay in view while the fields beside them scroll. */
  .api-examples {
    position: sticky;
    top: calc(var(--sy-s-offset-top) + 1rem);
    max-height: calc(100vh - var(--sy-s-offset-top) - 2rem);
    overflow-y: auto;
  }
}

/* ---- Route: method and path ---- */

.yue p.api-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sy-f-mono);
  font-size: 0.875rem;
}

.yue p.api-route > code {
  padding: 0;
  background: none;
  font-size: inherit;
  overflow-wrap: anywhere;
}

.api-method {
  padding: 0.125rem 0.375rem;
  border: 1px solid currentColor;
  font-family: var(--sy-f-mono);
  font-size: 0.75rem;
  font-weight: 700;
}

/* Scalar's method colors, at a contrast of at least 4.5:1 on the theme's backgrounds. */
.api-get {
  color: #1d4ed8;
}
.api-post {
  color: #15803d;
}
.api-put,
.api-patch {
  color: #b45309;
}
.api-delete {
  color: #b91c1c;
}
.api-grpc {
  color: var(--sy-c-heading);
}
html.dark .api-get {
  color: #93c5fd;
}
html.dark .api-post {
  color: #86efac;
}
html.dark .api-put,
html.dark .api-patch {
  color: #fcd34d;
}
html.dark .api-delete {
  color: #fca5a5;
}

/* ---- Fields ---- */

/* "Path parameters", "Body", "Response" and the like: small capitals, as in the theme's sidebars. */
.yue p.api-label {
  margin: 1.75rem 0 0;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--sy-c-divider);
  font-family: var(--sy-f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sy-c-light);
}

.yue p.api-label code {
  text-transform: none;
}

.yue dl.api-fields {
  margin: 0 0 1rem;
}

.yue dl.api-fields > dt {
  margin: 0;
  padding-top: 0.625rem;
  border-top: 1px solid var(--sy-c-divider);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--sy-c-light);
}

.yue p.api-label + dl.api-fields > dt:first-child {
  border-top: 0;
}

/* The field's name. */
.yue dl.api-fields > dt > code:first-child {
  margin-right: 0.25rem;
  padding: 0;
  background: none;
  font-weight: 600;
  color: var(--sy-c-heading);
}

/* A oneof's fields, after "one of". */
.yue dl.api-fields > dt > .api-oneof ~ code {
  padding: 0;
  background: none;
  font-weight: 600;
  color: var(--sy-c-heading);
}

.yue dl.api-fields > dd {
  margin: 0.25rem 0 0;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
}

.yue dl.api-fields > dd > p {
  margin: 0;
}

/* A field with no notes: no definition at all, or, when its type opens out, no empty line above it. */
.yue dl.api-fields > dd:has(> p:only-child > .api-none) {
  display: none;
}

.yue dl.api-fields > dt:has(+ dd > p:only-child > .api-none) {
  padding-bottom: 0.625rem;
}

.yue dl.api-fields > dd > p:has(> .api-none) {
  display: none;
}

/* A field's type opened out under it: its fields, an enum's values, or a oneof's or union's choices. */
.yue details.api-nested {
  margin: 0.5rem 0 0;
  padding-left: 0.875rem;
  border-left: 1px solid var(--sy-c-divider);
}

.yue details.api-nested > summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--sy-c-light);
}

.yue details.api-nested > summary code {
  padding: 0;
  background: none;
}

.yue details.api-nested > dl.api-fields,
.yue .api-choices dl.api-fields {
  margin-bottom: 0;
}

.yue .api-choices {
  margin: 0.5rem 0 0;
}

.yue .api-choices > .sd-tab-content {
  padding: 0 0 0 0.875rem;
  border-left: 1px solid var(--sy-c-divider);
}

.yue .api-choices > .sd-tab-content > p {
  margin: 0.5rem 0 0;
}

.yue .api-choices > label.sd-tab-label {
  padding: 0.25rem 0.625rem;
  font-family: var(--sy-f-mono);
  font-size: 0.75rem;
}

/* Hidden before they're drawn when the reader folded them on an earlier page, until service-pages.js
   folds them. */
html.api-types-folded details.api-nested > :not(summary) {
  display: none;
}

/* "Collapse all types" above the endpoints, which service-pages.js adds. */
.yue .api-type-toggle:empty {
  display: none;
}

.yue .api-type-toggle button {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--sy-c-border);
  font-family: var(--sy-f-mono);
  font-size: 0.75rem;
  color: var(--sy-c-light);
  cursor: pointer;
}

.yue .api-type-toggle button:hover {
  color: var(--sy-c-heading);
}

/* "OpenAPI file: …" under the service's description. */
.yue p.api-download {
  font-size: 0.875rem;
}

.api-required {
  font-size: 0.75rem;
  font-weight: 600;
  color: #b45309;
}
html.dark .api-required {
  color: #fcd34d;
}

.api-tag {
  padding: 0 0.3rem;
  border: 1px solid var(--sy-c-border);
  font-size: 0.75rem;
  color: var(--sy-c-light);
}

/* ---- Examples ---- */

.api-examples {
  margin-top: 1rem;
}

/* "Request" and "Response: 200", a bar on top of each example. */
.yue p.api-example-title {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sy-c-border);
  border-bottom: 0;
  background: var(--gray-a2);
  font-family: var(--sy-f-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.yue p.api-example-title code {
  padding: 0;
  background: none;
  text-transform: none;
}

/* "No content." and the like, in the box under its title. */
.yue p.api-example-title + p {
  margin: 0 0 1.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sy-c-border);
  font-size: 0.875rem;
}

.api-examples .sd-tab-set,
.api-examples div[class*="highlight"] {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.api-examples .sd-tab-set {
  border: 1px solid var(--sy-c-border);
}

.api-examples .sd-tab-content div[class*="highlight"] {
  margin-bottom: 0;
}

/* Long examples scroll in their box rather than stretching the page. */
.api-examples pre {
  max-height: 28rem;
  overflow: auto;
  font-size: 0.8125rem;
}

/* ---- Credit ---- */

.yue p.api-credit {
  margin-top: 3rem;
  font-size: 0.75rem;
  color: var(--sy-c-light);
}