/* The API reference, dressed as part of the product.
 *
 * Swagger UI is loaded for what it does - a live console against the real
 * schema, which is worth far more than a prettier static page - and then
 * argued with, because its own styling is a different product's. Everything
 * below either replaces one of its surfaces with one of ours or removes
 * something it draws that this page already has.
 *
 * The rules are deliberately specific rather than `!important`-heavy: Swagger
 * ships a large stylesheet, and matching its specificity is more durable than
 * shouting over it, which stops working the moment it is shouted back at.
 */

.api-page { padding-bottom: 80px; }

/* ---- the page's own furniture ------------------------------------------ */

.api-hero { max-width: 1180px; margin: auto; padding: 62px 24px 34px; }
.api-hero h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.12; letter-spacing: -1.8px; font-weight: 500; margin: 18px 0 20px; }
.api-hero > p { font-size: 16.5px; color: var(--dim); max-width: 660px; }

.api-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;
  max-width: 1180px; margin: auto; padding: 8px 24px 26px;
}
.api-facts article { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--shell); }
.api-facts h3 { margin: 8px 0 6px; font-size: 15px; font-weight: 500; }
.api-facts p { margin: 0; font-size: 12.5px; color: var(--dim); line-height: 1.7; }
.api-facts code { font-size: 11.5px; }

.api-note { max-width: 1180px; margin: 0 auto 30px; }
#operations { max-width: 1180px; margin: auto; padding: 0 24px; }

/* ---- Swagger UI, restyled ---------------------------------------------- */

/* Its own topbar, title block and description duplicate the hero above. */
.swagger-ui .topbar,
.swagger-ui .information-container,
.swagger-ui .scheme-container { display: none; }

.swagger-ui { font-family: var(--font-ui), system-ui, sans-serif; color: var(--text); }
.swagger-ui .wrapper { max-width: none; padding: 0; }

/* Type. Swagger sets its own families on almost everything, so these have to
   be named individually rather than inherited. */
.swagger-ui .opblock-tag,
.swagger-ui .opblock .opblock-summary-operation-id,
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-description,
.swagger-ui .btn,
.swagger-ui select,
.swagger-ui label,
.swagger-ui .tab li,
.swagger-ui .parameter__name,
.swagger-ui table thead tr th,
.swagger-ui .response-col_status,
.swagger-ui .markdown p,
.swagger-ui .renderedMarkdown p { font-family: var(--font-ui), system-ui, sans-serif; color: var(--text); }
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .markdown p,
.swagger-ui .renderedMarkdown p { color: var(--dim); font-size: 13px; line-height: 1.7; }

/* A tag is a section heading on this page, so it is set like the guide's.
   The tag names are lowercase in the schema, where they belong - they are
   identifiers. Capitalising is presentation and stays here. */
.swagger-ui .opblock-tag {
  border-bottom: 1px solid var(--line); margin: 30px 0 10px; padding: 0 0 10px;
  font-size: 21px; font-weight: 500; letter-spacing: -0.5px;
  text-transform: capitalize;
}
.swagger-ui .opblock-tag:hover { background: none; }
/* Swagger wraps the name in an anchor, which takes its own link colour and
   makes every section heading look like something to click through to. */
.swagger-ui .opblock-tag a,
.swagger-ui .opblock-tag a span,
.swagger-ui .opblock-tag > a.nostyle span { color: var(--text); }
.swagger-ui .opblock-tag small { font-size: 12.5px; color: var(--faint); font-weight: 400; padding-left: 12px; text-transform: none; }
.swagger-ui .opblock-tag small p { color: var(--faint); margin: 0; }
/* Swagger leaves a tall empty block under a collapsed section. */
.swagger-ui .opblock-tag-section { margin: 0; }
.swagger-ui .opblock-tag-section > div:empty { display: none; }
.swagger-ui .no-margin { margin: 0; }

/* Operations become cards on the product's own surfaces. The method colour is
   kept - it is information, and every API reader already knows it. */
.swagger-ui .opblock {
  margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--glass); box-shadow: none;
}
.swagger-ui .opblock .opblock-summary { border-color: transparent; padding: 6px 10px; }
.swagger-ui .opblock.is-open .opblock-summary { border-bottom: 1px solid var(--line); }
.swagger-ui .opblock .opblock-summary-method {
  border-radius: var(--radius-xs); font-size: 11px; font-weight: 600; min-width: 74px;
  text-shadow: none; box-shadow: none; padding: 7px 0;
}
/* The path is the deep link to the operation, so it stays a link colour -
   ours rather than Swagger's, which is a different blue at a different weight
   and reads as a second brand on the page. */
.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path a,
.swagger-ui .opblock .opblock-summary-path span { font-size: 13.5px; font-weight: 500; color: var(--accent); }
.swagger-ui .opblock .opblock-summary-description { font-size: 12.5px; color: var(--dim); }

.swagger-ui .opblock.opblock-get { background: var(--glass); border-color: var(--line); }
.swagger-ui .opblock.opblock-post { background: var(--glass); border-color: var(--line); }
.swagger-ui .opblock.opblock-delete { background: var(--glass); border-color: var(--line); }
.swagger-ui .opblock.opblock-put,
.swagger-ui .opblock.opblock-patch { background: var(--glass); border-color: var(--line); }
.swagger-ui .opblock.is-open { border-color: var(--line-hi); }

.swagger-ui .opblock-section-header {
  background: var(--sunken); box-shadow: none; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); min-height: 0; padding: 10px 20px;
}
.swagger-ui .opblock-section-header h4,
.swagger-ui .opblock-section-header > label { font-size: 12px; font-weight: 500; color: var(--dim); margin: 0; }

.swagger-ui .parameters-col_description input[type=text],
.swagger-ui textarea,
.swagger-ui select,
.swagger-ui input[type=text],
.swagger-ui input[type=file] {
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--sunken);
  color: var(--text); font-size: 12.5px; box-shadow: none;
}
.swagger-ui textarea:focus,
.swagger-ui input[type=text]:focus,
.swagger-ui select:focus { border-color: var(--accent); outline: none; }

.swagger-ui table thead tr th,
.swagger-ui table thead tr td { border-bottom: 1px solid var(--line); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.6px; }
.swagger-ui .parameter__name { font-size: 12.5px; font-weight: 500; }
.swagger-ui .parameter__type,
.swagger-ui .parameter__in { font-size: 11px; color: var(--faint); }
.swagger-ui .response-col_status { font-size: 13px; font-weight: 500; }

/* Buttons, in the product's own vocabulary. */
.swagger-ui .btn {
  border-radius: var(--radius-xs); border: 1px solid var(--line); background: var(--glass);
  color: var(--text); font-size: 12px; font-weight: 500; box-shadow: none; text-transform: none;
}
.swagger-ui .btn:hover { background: var(--raised); border-color: var(--line-hi); box-shadow: none; }
.swagger-ui .btn.execute { background: var(--accent); border-color: var(--accent); color: #fff; }
.swagger-ui .btn.execute:hover { background: var(--accent-deep); }
.swagger-ui .btn.cancel { background: var(--glass); border-color: var(--danger); color: var(--danger); }
.swagger-ui .btn.authorize { border-color: var(--good); color: var(--good); }
.swagger-ui .btn.authorize svg { fill: var(--good); }

/* The filter box sits above everything and is the fastest way to find a route,
   so it is given the width to look like a search field rather than an input
   somebody forgot to style. */
.swagger-ui .filter .operation-filter-input {
  width: 100%; max-width: 360px; margin: 0 0 20px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--sunken); font-size: 12.5px;
}

/* Code and payloads. Swagger renders these on a near-black block regardless of
   theme, which is the one place its own choice is better than ours - a JSON
   body is easier to read on a fixed dark ground than on a surface that moves. */
.swagger-ui .highlight-code > .microlight,
.swagger-ui .responses-inner pre { border-radius: var(--radius-xs); font-size: 12px; }
.swagger-ui .model-box,
.swagger-ui section.models { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--sunken); }
.swagger-ui section.models .model-container { background: var(--glass); border-radius: var(--radius-xs); }
.swagger-ui .model-title,
.swagger-ui .model { color: var(--text); font-size: 12.5px; }
.swagger-ui .prop-type { color: var(--accent); }

.swagger-ui .response-control-media-type--accept-controller select { border-color: var(--good); }
.swagger-ui .loading-container .loading::after { color: var(--dim); }

/* Links inside Swagger's own markdown, which the guide's `a` rule misses. */
.swagger-ui a.nostyle,
.swagger-ui .markdown a,
.swagger-ui .renderedMarkdown a { color: var(--accent); }

/* ---- dark theme --------------------------------------------------------
 * Swagger UI has no dark mode. Rather than invert the whole thing - which
 * turns the method colours into their complements and makes GET look like
 * DELETE - the handful of surfaces it hard-codes to white or near-black are
 * re-pointed at the theme's own tokens.
 */
[data-theme="dark"] .swagger-ui,
[data-theme="dark"] .swagger-ui .opblock-tag,
[data-theme="dark"] .swagger-ui section.models h4,
[data-theme="dark"] .swagger-ui .model-title { color: var(--text); }
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path a,
[data-theme="dark"] .swagger-ui .parameter__name,
[data-theme="dark"] .swagger-ui .response-col_status,
[data-theme="dark"] .swagger-ui table thead tr td,
[data-theme="dark"] .swagger-ui .tab li,
[data-theme="dark"] .swagger-ui label { color: var(--text); }
[data-theme="dark"] .swagger-ui .opblock-body pre.microlight { background: #16161a; }
/* Swagger draws its chevrons as inline SVG with a hard-coded near-black fill,
   which on a dark ground is an expand control nobody can see. */
[data-theme="dark"] .swagger-ui svg:not(:root),
[data-theme="dark"] .swagger-ui .expand-operation svg,
[data-theme="dark"] .swagger-ui .opblock-summary-control svg,
[data-theme="dark"] .swagger-ui .arrow { fill: var(--dim); }
[data-theme="dark"] .swagger-ui .model-toggle:after { filter: invert(1) brightness(1.6); }
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-method { color: #0d0d0f; }

@media (max-width: 720px) {
  .api-hero { padding-top: 40px; }
  .swagger-ui .opblock .opblock-summary { flex-wrap: wrap; }
}