/* ---- OpenAPI dialect badge -------------------------------------------------
   The spec still declares the openapi field - it is required, and consumers
   parse it - this only stops the UI advertising the dialect to human readers,
   who have no use for it. */
.swagger-ui .info .title .version-stamp {
    display: none;
}

/* ---- header layout --------------------------------------------------------
   The h1 holds a bare text node plus a span wrapping the pills. Laying it out
   as flex centres them against each other properly.

   vertical-align: middle does NOT do this: it aligns the box's midpoint to the
   parent's baseline plus half its x-height, which on a 36px heading leaves the
   pill visibly high. Flex align-items: center uses the real line box, so the
   two line up whatever the title's font size. */
.swagger-ui .info .title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* The span is itself a flex item; make it a flex container too, or its own
   baseline alignment re-introduces the offset for the pills inside it. */
.swagger-ui .info .title > span {
    display: flex;
    align-items: center;

    /* Optical, not geometric. align-items: center lines the pill up with the
       centre of the text's FONT box - ascent plus descent. The eye instead
       reads the centre of the capitals, and this font reserves more space
       above the caps (for accents) than it uses below the baseline, so the
       font-box centre sits ~0.11em above the cap-height centre and the pill
       looks high. Measured on this font: cap height 26px at 36px, putting the
       cap centre 4px lower.

       In em so it holds if the heading size changes. Transform rather than
       margin so it shifts nothing else in the layout. */
    transform: translateY(0.11em);
}

/* ---- version pill ---------------------------------------------------------
   {node major}.{commit count}.{commit hash}[-dirty].{mode}
   Tinted by environment mode, so the pill doubles as the environment
   indicator. */
.swagger-ui .info .title small:not(.version-stamp) {
    background: linear-gradient(135deg, #1a7f37 0%, #2da44e 100%);
    padding: 5px 15px;
    border-radius: 999px;
    /* Spacing comes from the flex gap above, not a margin, so the pill has no
       asymmetric offset of its own to fight the centring. */
    margin: 0;
    box-shadow: 0 2px 8px rgba(45, 164, 78, 0.35);
}

.swagger-ui .info .title small:not(.version-stamp) pre.version {
    display: inline-block;
    /* Monospace because most of the components are a count, a hash and a short
       keyword - they read better fixed-width, and it stops the pill reflowing
       as the count grows. */
    font-family: ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    margin: 0;
    padding: 0;
    /* line-height 1 so the pill's padding is the only vertical space around the
       text - default leading would pad it unevenly and reopen the offset. */
    line-height: 1;
}

/* ---- the OpenAPI document link -------------------------------------------
   The "/_assets/json" link under the title.

   Swagger UI sets this to 12px via ".swagger-ui .info hgroup.main a", which is
   one element more specific than a plain ".swagger-ui .info a.link" - so the
   hgroup has to appear here too, or the rule silently loses. The inner span
   carries the visible text and is targeted separately because it has no size
   of its own to inherit past. */
.swagger-ui .info hgroup.main a.link,
.swagger-ui .info hgroup.main a.link .url {
    font-size: 14px;
}

/* A full-width accent under Swagger UI's top bar, so the mode is still legible
   once the header is scrolled past. */
.swagger-ui .topbar {
    border-bottom: 4px solid #2da44e;
}