/* The API reference (/api/, tools/build_api.py): the documentation's pages
   (site.css's .doc, .prose, .doc-nav, .toc), with what is the API's own: the
   declarations and signatures in the code's look, the members, the lists of
   classes and the home page's themes. Its colours are site.css's, so the
   light reading applies to it as to the guides; the code stays on the night,
   as the guides' blocks do. */

.api .prose { max-width: 820px; }
.api-eyebrow { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); }
.api-eyebrow a { color: var(--link); }
.api-eyebrow code, .api-eyebrow a code { text-transform: none; letter-spacing: 0; background: none; border: 0; padding: 0; font-size: 0.8125rem; }
.prose .api-eyebrow + h1 { margin-top: 10px; }
.api h1 { overflow-wrap: break-word; }
.api-scope { color: var(--dusk); font-weight: 400; }
.prose .lede { color: var(--mist); font-size: 1.125rem; }
.prose h2 small { font-size: 0.8125rem; }
.api-section > h2 { scroll-margin-top: 72px; }
.api-member, .api-line, .api-values tr { scroll-margin-top: 72px; }

/* The header's link to the API, marked: the page is one of its. */
.top nav a[aria-current="page"] { color: var(--snow); background: rgba(232, 238, 247, 0.06); }

/* Code in a link of the sidebar or a list: the link's look, in the code's font. */
.api .doc-nav code, .api-list code, .api-chips code, .api-lineage code, .api-inherited code {
  background: none; border: 0; padding: 0; font-size: 0.875em; overflow-wrap: anywhere;
}

/* ---- The class's declaration: an editor's window, the header's tab ---- */
.api-decl {
  position: relative; margin: 24px 0 0 !important; overflow: hidden; border: 1px solid #22324f; border-radius: 14px; background: #081020;
  box-shadow: 0 30px 70px -40px rgb(0 0 0 / 0.9);
}
.api-decl-bar {
  display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 76px 0 14px;
  background: #0e1a33; border-bottom: 1px solid #22324f;
}
.api-decl-tab {
  /* The header's path on one line, shortened with an ellipsis when the bar
     is narrow: the copy button keeps its place at the bar's end. */
  display: block; flex: 0 1 auto; align-self: stretch; min-width: 0; margin-bottom: -1px; padding: 0 14px;
  border-bottom: 2px solid #00ffcc; background: #081020; color: #e8eef7; text-decoration: none;
  font: 500 0.8125rem/43px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.api-decl-tab:hover { color: #00ffcc; }
.api-decl .code-wrap { position: relative; }
/* The copy button in the window's bar, above its code (whose fade stays on the code). */
.api-decl .copy { top: -39px; right: 8px; opacity: 1; }
.api-decl pre { border: 0; border-radius: 0; background: transparent; }
.api-decl .code-wrap.more::after { border-radius: 0; }
/* A name in code that links: underlined, faintly (not by its colour alone). */
.api-decl a, .api-sig a, .api-line a, .api-values code a {
  color: #6fd0ff; text-decoration: underline; text-decoration-color: rgb(111 208 255 / 0.35);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.api-decl a:hover, .api-sig a:hover, .api-line a:hover, .api-values code a:hover { color: #00ffcc; text-decoration-color: currentColor; }

/* Its bases, as a breadcrumb, and the classes that derive from it. */
.api-lineage { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 0.9375rem; }
.prose .api-lineage { margin-top: 12px; }
.api-lineage + .api-lineage { margin-top: 6px; }
.api-lineage ol, .api-lineage ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.api-lineage ol li + li::before { content: "›"; margin: 0 8px; color: var(--dusk); }
.api-lineage li { margin: 0 !important; }
.api-lineage a { text-decoration: none; }
.api-lineage a:hover { text-decoration: underline; }
.api-lineage ul li:not(:last-child)::after { content: ","; color: var(--dusk); margin-right: 8px; }
.api-lineage [aria-current] code { color: var(--snow); font-weight: 600; }
.api-label { flex-shrink: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); }

/* ---- Members: the signature on the night, the comment under it ---- */
.api-section > * + * { margin-top: 12px; }
.api-member { border: 1px solid var(--night-line); border-radius: 12px; overflow: hidden; background: var(--night); }
.api-sig, .api-line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: start; background: #081020; }
.api-member .api-sig { border-bottom: 1px solid var(--night-line); }
.api-member.bare .api-sig { border-bottom: 0; }
code.sig {
  grid-column: 1; grid-row: 1; display: block; min-width: 0; padding: 12px 0 12px 16px; overflow-x: auto;
  white-space: pre; font-size: 0.8125rem; line-height: 1.7; color: #d6deeb; background: none; border: 0; border-radius: 0;
  overflow-wrap: normal; scrollbar-width: thin; scrollbar-color: #22324f transparent;
}
.sig-line { display: block; width: max-content; padding-right: 16px; }   /* the right margin, once scrolled */
.sig-arg { padding-left: 4ch; }
code.sig:focus-visible { outline-offset: -2px; }
.sig-name { color: #e8eef7; font-weight: 600; }
.sig-param { color: #a9b6cc; }
.api-anchor {
  grid-column: 2; grid-row: 1; display: grid; place-items: center; width: 36px; min-height: 44px; align-self: stretch;
  color: #8593ae; text-decoration: none; font: 500 0.875rem var(--mono); opacity: 0;
}
.api-anchor::before { content: "#"; }
.api-sig:hover .api-anchor, .api-line:hover .api-anchor, .api-anchor:focus-visible, :target > .api-sig .api-anchor, .api-line:target .api-anchor { opacity: 1; }
.api-anchor:hover { color: #00ffcc; }
@media (hover: none) { .api-anchor { opacity: 0.6; } }
/* A signature wider than its box: its right edge fades while there is more (api.js). */
.api-sig.more::after, .api-line.more::after {
  content: ""; grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch; width: 48px; pointer-events: none;
  background: linear-gradient(to right, rgb(8 16 32 / 0), #081020 85%);
}
/* The member a link leads to. */
.api-member:target { border-color: #00ffcc; box-shadow: 0 0 0 1px #00ffcc, 0 0 30px -10px rgb(0 255 204 / 0.5); }
.api-line:target { background: #0d1b33; box-shadow: inset 2px 0 0 #00ffcc; }

.api-doc { padding: 14px 16px 16px; font-size: 0.975rem; }
.api-doc > * + * { margin-top: 0.8em; }
.api-doc ul, .api-doc ol { padding-left: 1.3em; }
.api-doc pre { font-size: 0.8125rem; }
.api-source { display: block; width: fit-content; margin-left: auto; font: 0.75rem var(--mono); color: var(--dusk); text-decoration: none; }
.api-source:hover { color: var(--link); text-decoration: underline; }
.api-over { color: var(--mist); font-size: 0.9375rem; }

/* Members with nothing but their signature: one block, as the header lists them. */
.api-bare { border: 1px solid var(--night-line); border-radius: 12px; overflow: hidden; background: #081020; padding-block: 6px; }
.api-bare code.sig { padding-block: 3px; }
.api-line .api-anchor { min-height: 28px; }
.api-detail > * + * { margin-top: 1em; }
.api-line:hover { background: #0b1629; }

/* The parameters, the return, "see also". */
.api-params dl, .api-facts { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 16px; margin: 6px 0 0; }
.api-facts { margin: 0; }
.api-params dt, .api-facts dt { font-weight: 600; }
.api-facts dt { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusk); font-weight: 400; padding-top: 0.25em; }
.api-params dd, .api-facts dd { margin: 0; color: var(--mist); min-width: 0; }
.api-params dd > p + p, .api-facts dd > p + p { margin-top: 0.5em; }
.api-dir { font: 0.75rem var(--mono); color: var(--dusk); }
@media (max-width: 560px) {
  .api-params dl, .api-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .api-params dd, .api-facts dd { margin-bottom: 8px; }
}

/* An enum's values. */
.prose .api-member .api-values { margin: 0; border-width: 0; border-radius: 0; }
.prose .api-member .api-doc + .api-values { border-top: 1px solid var(--night-line); }
.api-values th:first-child, .api-values td:first-child { padding-left: 16px; }
.api-values th:last-child, .api-values td:last-child { padding-right: 16px; }
.api-foot { margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--night-line); }
.api-values .v-doc { min-width: 14ch; }
.api-values .v-name, .api-values .v-init { white-space: nowrap; }
.api-values .v-init code { color: var(--mist); }
.api-values td > p + p { margin-top: 0.4em; }
.api-values td { color: var(--mist); }
.api-values tr:target td { background: rgb(0 255 204 / 0.08); }
.api-values thead th { font-size: 0.8125rem; }

.api-inherited { color: var(--mist); font-size: 0.9375rem; }
.api-inherited span { color: var(--dusk); }

/* ---- Lists of classes and namespaces: a name and its line ---- */
.prose .api-list { list-style: none; padding: 0; border-top: 1px solid var(--night-line); }
.api-list li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 20px; align-items: baseline; padding: 10px 0; margin: 0 !important; border-bottom: 1px solid var(--night-line); }
.api-list a { font-weight: 600; }
.api-list span { color: var(--mist); font-size: 0.9375rem; }
@media (max-width: 640px) { .api-list li { grid-template-columns: minmax(0, 1fr); } }

/* ---- The home page: the API by theme ---- */
.api-themes { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 28px !important; }
.api-theme-card {
  display: grid; gap: 10px; align-content: start; padding: 20px 22px 22px; scroll-margin-top: 72px;
  background: var(--night); border: 1px solid var(--night-line); border-radius: var(--radius);
}
.prose .api-theme-card h2 { margin: 0; padding: 0; border: 0; font-size: 1.125rem; letter-spacing: -0.01em; }
.api-theme-card > p { color: var(--mist); font-size: 0.9375rem; }
.api-theme-card > p code { font-size: 0.8125rem; }
.prose .api-chips { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.api-chips li { margin: 0 !important; min-width: 0; }
.api-chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 8px; max-width: 100%;
  border: 1px solid var(--night-line); background: var(--night-2); color: var(--snow); text-decoration: none;
}
.api-chips a:hover { border-color: var(--aurora); color: var(--aurora); }
.api-more { margin-top: 1.5em; font-weight: 600; }

/* ---- The sidebar: the API's pages, then its themes, each folding ---- */
.api-theme { margin-left: -10px; }
.api-theme > summary {
  display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 8px;
  color: var(--mist); font-size: 0.9375rem; cursor: pointer; list-style: none;
}
.api-theme > summary::-webkit-details-marker { display: none; }
.api-theme > summary::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg); transition: transform 0.15s; margin-right: 2px;
}
.api-theme[open] > summary::before { transform: rotate(45deg); }
.api-theme > summary:hover { color: var(--snow); background: rgba(232, 238, 247, 0.05); }
.api-theme[open] > summary { color: var(--snow); }
.api-theme ul { list-style: none; margin: 2px 0 8px 13px; padding: 0 0 0 10px; border-left: 1px solid var(--night-line); display: grid; }
.doc-nav .api-theme .doc-group a, .doc-nav .api-theme a { margin-left: -11px; padding: 4px 10px; font-size: 0.875rem; border-radius: 0 8px 8px 0; }
@media (prefers-reduced-motion: reduce) { .api-theme > summary::before { transition: none; } }

/* The light reading: the parts drawn on the night keep it. */
:root[data-reading="light"] main:has(.api) .api-anchor { color: #8593ae; }
:root[data-reading="light"] main:has(.api) .api-chips a { background: #eef2f8; }
:root[data-reading="light"] main:has(.api) .api-member:target { border-color: #0a705f; box-shadow: 0 0 0 1px #0a705f; }

/* The search's results: a long Class::member breaks rather than overflows. */
.api .doc-results a { overflow-wrap: anywhere; }

/* A phone: the name's scope on a line of its own, above the name; the
   window's bar without its dots. */
@media (max-width: 560px) {
  .api-scope { display: block; font-size: 0.5em; letter-spacing: 0; margin-bottom: 4px; }
  .api-decl-bar .editor-dots { display: none; }
  .api-decl-bar { padding-left: 0; padding-right: 68px; }
  .api-decl-tab { font-size: 0.75rem; }
}

/* The light reading's inline code (site.css) is not the signatures' nor the
   lists' names: those keep their own look. */
:root[data-reading="light"] main:has(.api) code.sig,
:root[data-reading="light"] main:has(.api) .doc-nav code,
:root[data-reading="light"] main:has(.api) .api-list code,
:root[data-reading="light"] main:has(.api) .api-chips code,
:root[data-reading="light"] main:has(.api) .api-lineage code,
:root[data-reading="light"] main:has(.api) .api-inherited code,
:root[data-reading="light"] main:has(.api) .api-eyebrow code { background: none; border: 0; }

/* A phone: the signatures wrap rather than scroll, at spaces and after
   commas (never inside a name), each line of a declaration hanging under
   its start; a parameter a line stays so. Code blocks and the declaration's
   window keep their scroll and fade. */
@media (max-width: 599px) {
  code.sig { white-space: pre-wrap; overflow-wrap: normal; word-break: normal; padding-right: 12px; }
  .sig-line { width: auto; padding: 0 0 0 2ch; text-indent: -2ch; }
  .sig-arg { padding-left: 6ch; }
}