/* ==========================================================================
   The API documentation page, dressed in the site's silver.

   The page itself is fetched whole from the documentation service, so nothing
   there can be edited. It arrives with its own violet header and with Swagger's
   green and purple accents; this sheet is linked after both and restates the
   few colours that make it look like a different site.

   responsive.css is linked ahead of this one, which is where the fonts and the
   theme variables come from - so the two pages stay in step on their own.
   ========================================================================== */

/* Silver, whatever the visitor picked elsewhere: this page is a public
   integration document and is reached from outside, not through the menu. */
:root {
    --rule: #c7ccd4;
    --rule-soft: #dde1e7;
    --primary: #4a5666;
    --primary-dark: #363f4c;
    --link: #3f5a73;
    --link-hover: #2b3f52;
    --tint: #f4f5f7;
}

/* The same wash the site lays under its pages, held to the viewport so a long
   document does not restart it halfway down. */
body {
    background-color: #f5f7f9 !important;
    background-image: linear-gradient(180deg,
        #cfd5dd 0,
        #cfd5dd 150px,
        #e3e7ec 55%,
        #f5f7f9 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

/* Light and layered like the site's own, ending on the seam the menu bar makes. */
.custom-header {
    padding: 16px var(--gutter) 15px;
    background: #eef1f4;
    background-image: linear-gradient(180deg, #ffffff 0%, #eef1f4 45%, #e2e6ec 100%);
    color: var(--ink);
    border-bottom: 1px solid #b9c1cb;
    box-shadow: none;
}

.custom-header-text h1 {
    font-family: 'PT Serif', Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 700;
    color: var(--ink);
}

.custom-header-text p {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ink-soft);
    opacity: 1;
}

/* Quiet controls, the chosen one filled - the site's language switcher. */
.language-selector button {
    padding: 7px 15px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    color: var(--link);
    background: #ffffff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    transition: background-color .15s ease, border-color .15s ease;
}

.language-selector button:hover {
    color: var(--link-hover);
    background: var(--tint);
    border-color: #aab3bf;
}

.language-selector button.active,
.language-selector button.active:hover {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary);
}

/* --------------------------------------------------------------------------
   The document
   -------------------------------------------------------------------------- */

/* A white panel on the wash, the shape every other page on the site uses. */
#swagger-ui {
    max-width: 1180px;
    margin: 24px auto 44px;
    padding: 4px 0 24px;
    background-color: var(--surface);
    border: 1px solid var(--rule-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.swagger-ui .info {
    margin: 26px 0 22px;
}

.swagger-ui .info .title,
.swagger-ui .opblock-tag {
    font-family: 'PT Serif', Georgia, "Times New Roman", serif;
    color: var(--ink);
}

.swagger-ui .info .title {
    font-size: 24px;
}

/* The two badges beside the title: version, then the specification's own stamp. */
.swagger-ui .info .title small {
    background: #8b95a1;
}

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

.swagger-ui .opblock-tag {
    border-bottom-color: var(--rule);
}

.swagger-ui .opblock-tag small {
    color: var(--ink-soft);
}

.swagger-ui a,
.swagger-ui .info a,
.swagger-ui .info a:visited,
.swagger-ui .opblock-summary-path a {
    color: var(--link) !important;
}

.swagger-ui .info a:hover {
    color: var(--link-hover) !important;
}

/* Swagger writes inline code in purple; the site has no purple in it. */
.swagger-ui .renderedMarkdown code,
.swagger-ui .markdown code,
.swagger-ui .markdown pre,
.swagger-ui .renderedMarkdown pre {
    color: var(--link);
    background: var(--tint);
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Operations

   The method colours are Swagger's way of telling verbs apart at a glance.
   This document holds a single operation, so the colour distinguishes nothing
   and only shouts; it follows the theme instead. Restore the block below if
   more methods are ever added.
   -------------------------------------------------------------------------- */

.swagger-ui .opblock.opblock-post,
.swagger-ui .opblock.opblock-get,
.swagger-ui .opblock.opblock-put,
.swagger-ui .opblock.opblock-delete,
.swagger-ui .opblock.opblock-patch {
    background: var(--tint);
    border-color: var(--rule);
    box-shadow: none;
}

/* Swagger names the method twice over in its selectors, so these have to match
   it class for class to win. */
.swagger-ui .opblock.opblock-post .opblock-summary,
.swagger-ui .opblock.opblock-get .opblock-summary,
.swagger-ui .opblock.opblock-put .opblock-summary,
.swagger-ui .opblock.opblock-delete .opblock-summary,
.swagger-ui .opblock.opblock-patch .opblock-summary {
    border-color: var(--rule);
}

.swagger-ui .opblock.opblock-post .opblock-summary-method,
.swagger-ui .opblock.opblock-get .opblock-summary-method,
.swagger-ui .opblock.opblock-put .opblock-summary-method,
.swagger-ui .opblock.opblock-delete .opblock-summary-method,
.swagger-ui .opblock.opblock-patch .opblock-summary-method {
    background: var(--primary);
    border-radius: var(--radius);
    text-shadow: none;
    box-shadow: none;
}

.swagger-ui .opblock .opblock-summary-path,
.swagger-ui .opblock .opblock-summary-path__deprecated {
    color: var(--ink);
}

.swagger-ui .opblock .opblock-summary-description {
    color: var(--ink-soft);
}

.swagger-ui .opblock.opblock-post .tab-header .tab-item.active h4 span::after,
.swagger-ui .opblock.opblock-get .tab-header .tab-item.active h4 span::after,
.swagger-ui .opblock.opblock-put .tab-header .tab-item.active h4 span::after,
.swagger-ui .opblock.opblock-delete .tab-header .tab-item.active h4 span::after,
.swagger-ui .opblock.opblock-patch .tab-header .tab-item.active h4 span::after {
    background: var(--primary);
}

/* --------------------------------------------------------------------------
   Tables, models and the rest
   -------------------------------------------------------------------------- */

.swagger-ui table thead tr th,
.swagger-ui table thead tr td {
    color: var(--ink);
    border-bottom-color: var(--rule);
}

.swagger-ui .parameter__name,
.swagger-ui .response-col_status {
    color: var(--ink);
}

.swagger-ui .parameter__type,
.swagger-ui .prop-type {
    color: var(--link);
}

.swagger-ui .model-title,
.swagger-ui section.models h4 {
    color: var(--ink);
}

.swagger-ui section.models {
    border-color: var(--rule);
}

.swagger-ui section.models.is-open h4 {
    border-bottom-color: var(--rule);
}

.swagger-ui .model-box {
    background: var(--tint);
    border-radius: var(--radius);
}

.swagger-ui .btn {
    border-radius: var(--radius);
    border-color: var(--rule);
    color: var(--ink);
    box-shadow: none;
}

.swagger-ui .btn.authorize {
    color: var(--primary);
    border-color: var(--primary);
}

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

/* The site sheet stretches every select to the full width of its form; here
   they are Swagger's own narrow media-type pickers. */
.swagger-ui select,
.swagger-ui input[type="text"] {
    width: auto;
    max-width: 100%;
    border-radius: var(--radius);
    box-shadow: none;
}

/* The response section marks the Accept picker in plain green. */
.swagger-ui .response-control-media-type__accept-message {
    color: var(--ink-soft);
}

.swagger-ui .response-control-media-type--accept-controller select {
    border-color: var(--primary);
}

.swagger-ui .scheme-container {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 720px) {
    .custom-header {
        display: block;
    }

    .language-selector {
        margin-top: 12px;
    }

    #swagger-ui {
        margin: 12px 0 24px;
        border-left: 0;
        border-right: 0;
    }
}