/* Kromatic brand overrides for the two generated docs pages (neumann#183).
 *
 * Neumann serves no hand-authored HTML: the only `text/html` documents it
 * returns are FastAPI's generated Swagger UI (`/docs`) and ReDoc (`/redoc`)
 * pages (see `core/analytics.py`). Those pages ship third-party CSS from a CDN,
 * so brand colour and typography have to be applied as overrides on top of it
 * rather than authored from scratch.
 *
 * This file is NOT vendored — unlike `kromatic.css` it is neumann's own, and it
 * is the right place to edit. It reads its colours and fonts exclusively from
 * the tokens `kromatic.css` defines, so a brand change upstream propagates by
 * re-copying that file alone.
 *
 * Load order matters: both stylesheets are injected at the END of `<head>`
 * (see `core/branding.py`) so they win the cascade against `swagger-ui.css`.
 *
 * Presentation only. Nothing here changes an API or MCP response.
 */

/* ============================================================
   Shared page frame — the brand header and footer bracket the
   generated widget on both pages.
   ============================================================ */
body {
  background-color: var(--bg);
}

/* Matches Swagger UI's own `.swagger-ui .wrapper` box (max-width 1460px,
   20px gutters) so the panel's left edge lines up with the API reference
   underneath it instead of sitting on a second, narrower grid. */
.kromatic-docs {
  max-width: 1460px;
  margin: 0 auto;
  padding: 2rem 20px 0;
}

.kromatic-docs h1 {
  font-size: 2rem;
}

/* The pointer to the canonical documentation on kromatic.com (neumann#185).
   It is the first prose on the page and has to read as the way out to the real
   docs, so it is set larger than body copy with the brand accent as a leading
   rule. Colours are brand tokens, never literals — see
   `tests/test_brand_surfaces.py::test_docs_stylesheet_only_reads_brand_tokens`. */
.kromatic-docs__canonical {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  padding-left: 0.85rem;
  border-left: 3px solid var(--accent);
}

/* The access/pricing panel sits above the API reference, so a developer who
   reads only the top of the page still learns what a run costs. */
.kromatic-docs .panel {
  margin-bottom: 0;
}

.kromatic-docs .panel ul {
  margin-bottom: 0;
}

/* ============================================================
   Widget isolation — keep the vendored BASE rules out of the
   generated widgets.

   `kromatic.css` is written for a hand-authored page, so it styles
   bare elements. Two of those reach inside Swagger UI and distort
   it: `main` (Swagger renders an unclassed <main>, which the
   760px `--content-width` squeezes the whole operations column
   into) and `pre` (Swagger's version badge is a <pre class=
   "version">, which picks up the cream background and yellow left
   border and renders white-on-cream, i.e. unreadable). Everything
   else the vendored file sets on a bare element — body, headings,
   paragraphs, lists, links, rules — is brand typography we WANT
   the docs to inherit.

   `tests/test_brand_surfaces.py::test_vendored_base_rules_are_each
   _classified` enumerates the bare-element selectors in
   `kromatic.css` and fails on one that is neither neutralised here
   nor on its inherit-by-design list, so re-copying that file from
   upstream cannot silently reintroduce this.

   The selectors below are one class deeper than the vendored rules
   they override and one class shallower than Swagger's own, so they
   beat the brand base without displacing the widget's own styling.
   ============================================================ */
.swagger-ui main,
redoc main {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.swagger-ui pre,
.swagger-ui code,
redoc pre,
redoc code {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}

/* ============================================================
   Swagger UI (`/docs`) — swagger-ui-dist 5
   ============================================================ */
.swagger-ui {
  font-family: "Atkinson", system-ui, -apple-system, sans-serif;
}

.swagger-ui .info .title,
.swagger-ui .opblock-tag,
.swagger-ui .info h1,
.swagger-ui .info h2,
.swagger-ui .info h3,
.swagger-ui .info h4 {
  font-family: "Atkinson", system-ui, -apple-system, sans-serif;
  color: rgb(var(--black));
}

.swagger-ui .info .title small.version-stamp {
  background-color: var(--accent);
}

.swagger-ui .info a,
.swagger-ui .renderedMarkdown a {
  color: var(--accent);
}

.swagger-ui .info a:hover,
.swagger-ui .renderedMarkdown a:hover {
  color: var(--accent-dark);
}

/* Swagger's own top bar is not rendered by FastAPI's template today; hiding it
   keeps a future dependency bump from introducing a second, unbranded header
   above the Kromatic one. */
.swagger-ui .topbar {
  display: none;
}

.swagger-ui .scheme-container {
  background: var(--bg);
  box-shadow: none;
  border-bottom: 1px solid rgba(var(--gray), 0.25);
}

.swagger-ui .btn.execute {
  background-color: var(--btn-blue-bg);
  border-color: var(--btn-blue-bg);
  border-radius: var(--btn-blue-radius);
  color: #fff;
}

.swagger-ui .btn.execute:hover {
  background-color: var(--btn-blue-hover);
  border-color: var(--btn-blue-hover);
}

.swagger-ui .btn.authorize {
  border-radius: var(--btn-blue-radius);
  border-color: var(--accent);
  color: var(--accent);
}

.swagger-ui .btn.authorize svg {
  fill: var(--accent);
}

.swagger-ui section.models {
  border-color: rgba(var(--gray), 0.3);
}

.swagger-ui section.models h4 {
  font-family: "Atkinson", system-ui, -apple-system, sans-serif;
  color: rgb(var(--black));
}

/* ============================================================
   ReDoc (`/redoc`)
   ============================================================ */
/* ReDoc renders its own typography and palette from the `theme` attribute on
   the `<redoc>` element (set in `core/branding.py`), which is the only reliable
   lever — its styles are injected at runtime and outrank a stylesheet. These
   rules cover the page frame around it, which the theme does not reach. */
redoc {
  display: block;
  background-color: var(--bg);
}