/* ==========================================================================
   ChiDesk API v2 reference (/Developers/V2)

   Loaded only by Views/Developers/V2.cshtml, so everything here is free to be
   page-wide - nothing else on the website links this file.

   Note on specificity: the layout renders the Head section BEFORE it links
   Site.css, so Site.css always comes last in the cascade. The three overrides
   in the "site chrome" block below therefore have to win on specificity rather
   than on order - hence "html body" instead of "body". Do not simplify them
   back to a single element selector; the page starts scrolling sideways at
   1100px if you do.
   ========================================================================== */

/* --- site chrome overrides ------------------------------------------------ */

/* Site.css pins the body at min-width 1200px and only releases it below
   1024px, which leaves every viewport between 1024px and 1200px scrolling
   horizontally. This page is fluid, so release it. */
html body {
    min-width: 0;
}

/* The footer is built from .grid, which is a fixed 1120px + 40px padding =
   1200px. Make it fluid so it cannot be what forces a sideways scroll, while
   keeping the same 1120px content width on a wide screen. */
html body .grid {
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
}

/* --- shell --------------------------------------------------------------- */

.api-docs {
    text-align: left;
    background: #fff;
    color: #194e76;
    font-size: 16px;
    line-height: 1.65;
}

.api-docs *,
.api-docs *::before,
.api-docs *::after {
    box-sizing: border-box;
}

.api-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 240px;
    gap: 0 44px;
    align-items: start;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px 64px 32px;
}

.api-skip {
    position: absolute;
    left: -9999px;
    top: 0;
}

.api-skip:focus {
    position: static;
    display: inline-block;
    margin: 12px;
    padding: 8px 16px;
    background: #0072c6;
    color: #fff;
    border-radius: 4px;
}

.api-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- sidebar ------------------------------------------------------------- */

.api-sidebar {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 32px 12px 32px 0;
    border-right: 1px solid #e3ebf2;
    font-size: 14px;
}

.api-sidebar-close,
.api-sidebar-open {
    display: none;
}

.api-search {
    position: relative;
    margin-bottom: 24px;
}

.api-search-input {
    width: 100%;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    color: #194e76;
    background: #f7fafc;
    border: 1px solid #cfdbe6;
    border-radius: 4px;
    outline: none;
}

.api-search-input:focus {
    border-color: #0072c6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 114, 198, 0.15);
}

.api-search-clear {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 4px 9px;
    font-family: inherit;
    font-size: 12px;
    color: #5b7893;
    background: #e8eff5;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
}

.api-search-clear:hover {
    color: #194e76;
    background: #d8e4ee;
}

.api-search-count {
    margin: 8px 0 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #6b8299;
}

.api-nav-group {
    margin-bottom: 22px;
}

.api-nav-title {
    margin: 0 0 6px 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8299ae;
}

.api-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.api-nav-list li {
    margin: 0;
    padding: 0;
}

.api-nav-link {
    display: block;
    padding: 5px 10px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    color: #2c5f88;
    text-decoration: none;
}

a.api-nav-link:hover {
    color: #0a3a5c;
    background: #f1f6fa;
}

a.api-nav-link.is-active {
    color: #0a3a5c;
    background: #e8f2fa;
    border-left-color: #0072c6;
    font-weight: 600;
}

.api-nav-link.is-pending {
    color: #9bacbc;
    cursor: default;
}

.api-nav-alias {
    display: block;
    font-size: 12px;
    color: #8fa3b6;
}

.api-nav-soon {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7d6a3a;
    background: #fbf3de;
    border-radius: 9px;
    vertical-align: 1px;
}

/* --- content ------------------------------------------------------------- */

.api-content {
    min-width: 0;
    padding: 32px 0 0 0;
}

.api-intro {
    padding-bottom: 8px;
    margin-bottom: 8px;
}

/* --- version switcher ----------------------------------------------------- */

/* The top-nav "Developers" link points at this page, so this switcher is the
   only visible way to reach the v1 reference - it must survive Site.css.

   Deliberately a <div> and not a <nav>: Site.css sets "nav { float: left;
   overflow: hidden; }" and loads AFTER this file, so a <nav> here would float
   out of flow and clip its own children. role="navigation" carries the
   semantics instead. Same reason there is no <ul>/<li>: Site.css strips
   list-style in several nested contexts. float, overflow, list-style and
   text-align are all stated explicitly rather than relied on as defaults,
   because an element-level rule in Site.css beats an inherited value. */
.api-version-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    float: none;
    overflow: visible;
    margin: 0 0 18px 0;
    padding: 0;
    text-align: left;
    list-style: none;
}

.api-version-switch-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #6b8ca6;
}

.api-version-tab {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid #cddceb;
    border-radius: 999px;
    background: #fff;
    color: #194e76;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

/* The v1 tab is an <a>, so ".api-docs a" (0,2,0) and ".api-docs a:hover" (0,2,1)
   further down this file outrank a bare ".api-version-tab" (0,1,0) and would
   repaint it #0072c6 and UNDERLINE it on hover - a pill that underlines reads as
   broken. Beat them on specificity, the same way the site-chrome block at the
   top of this file does, rather than by reordering: ".api-docs a.api-version-tab"
   is (0,2,1) and its :hover/:focus is (0,2,2). */
.api-docs a.api-version-tab {
    color: #194e76;
    text-decoration: none;
}

.api-docs a.api-version-tab:hover,
.api-docs a.api-version-tab:focus {
    border-color: #0072c6;
    background: #f4f8fb;
    color: #0072c6;
    text-decoration: none;
}

/* The current version is a <span>, not a link - nothing to navigate to. */
.api-version-tab-active,
.api-version-tab-active:hover,
.api-version-tab-active:focus {
    border-color: #0072c6;
    background: #0072c6;
    color: #fff;
    cursor: default;
}

.api-version-tab-note {
    font-weight: 400;
    opacity: 0.78;
}

/* Beta badge on the v2 tab. A SOLID white chip with blue text, not a translucent
   one: 22% white over #0072c6 blends to about rgb(56,145,210), and white text on
   that is roughly 2.9:1 - under AA for text this size. White on #0072c6 is ~4.7:1
   and reads as a badge rather than a watermark. */
.api-version-beta {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    background: #fff;
    color: #0072c6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.api-eyebrow {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #0072c6;
}

/* Site.css sets text-align:center on h1, h2 and h3 for the marketing pages, and
   it loads after this file. An inherited text-align from .api-docs cannot beat a
   direct rule on the element, so every heading here has to state it. */
.api-docs h1 {
    margin: 6px 0 14px 0;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    text-align: left;
    color: #123c5c;
}

.api-lead {
    margin: 0 0 18px 0;
    font-size: 19px;
    line-height: 1.6;
    color: #3c6685;
    max-width: 68ch;
}

.api-version-note {
    max-width: 78ch;
    margin: 0;
    padding: 13px 18px;
    font-size: 14px;
    line-height: 1.6;
    background: #f4f8fb;
    border-left: 3px solid #0072c6;
    border-radius: 0 4px 4px 0;
}

.api-section {
    padding-top: 28px;
    margin-bottom: 26px;
}

/* The hidden attribute only hides an element through the UA stylesheet's
   [hidden]{display:none}, and ANY author-origin display declaration beats a
   UA-origin one no matter how weak its selector. Site.css:60-63 resets
   "header, footer, hgroup, section, nav { display: block }" in author origin,
   so setting .hidden = true on a <section> did nothing at all and the search
   filtered the endpoints while leaving every section on screen.

   Scoped to the docs subtree and matched on the attribute rather than on
   .api-section, so it also covers the sidebar <nav> and anything block-level a
   later ticket adds - the same trap is waiting for each of them. */
.api-docs [hidden] {
    display: none;
}

.api-docs h2 {
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    color: #123c5c;
    border-bottom: 1px solid #e3ebf2;
}

.api-docs h3 {
    margin: 32px 0 12px 0;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
    text-align: left;
    color: #16456a;
}

.api-docs h4.api-subheading {
    margin: 22px 0 8px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: #7b90a3;
}

.api-docs p {
    max-width: 82ch;
    margin: 0 0 14px 0;
    line-height: 1.7;
}

.api-list {
    max-width: 82ch;
    margin: 0 0 16px 0;
    padding-left: 22px;
}

.api-list li {
    margin-bottom: 8px;
    line-height: 1.7;
}

.api-list-code {
    list-style: none;
    padding-left: 0;
}

.api-list-code li {
    margin-bottom: 4px;
}

.api-docs code {
    padding: 2px 5px;
    font-family: Consolas, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
    font-size: 0.875em;
    color: #10465f;
    background: #f0f5f9;
    border: 1px solid #e0e9f1;
    border-radius: 3px;
    white-space: nowrap;
}

.api-docs a {
    color: #0072c6;
}

.api-docs a:hover {
    color: #003f6e;
    text-decoration: underline;
}

/* --- base url ------------------------------------------------------------ */

.api-baseurl {
    max-width: 82ch;
    margin: 0 0 18px 0;
    padding: 16px 20px;
    background: #103c5c;
    border-radius: 6px;
}

.api-baseurl-label {
    margin: 0 0 4px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #7fb3d8;
}

.api-baseurl-value {
    margin: 0;
    font-family: Consolas, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
    font-size: 16px;
    color: #ffffff;
    word-break: break-all;
}

/* --- callouts ------------------------------------------------------------ */

.api-callout {
    max-width: 82ch;
    margin: 0 0 18px 0;
    padding: 14px 18px;
    border-left: 3px solid #c9d6e2;
    border-radius: 0 5px 5px 0;
    background: #f6f9fb;
    font-size: 15px;
}

.api-callout p {
    margin-bottom: 8px;
}

.api-callout p:last-child {
    margin-bottom: 0;
}

.api-callout-title {
    font-weight: 700;
    color: #123c5c;
}

.api-callout-note {
    border-left-color: #a9c1d6;
    background: #f5f9fc;
}

.api-callout-tip {
    border-left-color: #2f9e63;
    background: #f2faf5;
}

.api-callout-tip .api-callout-title {
    color: #1d6b42;
}

.api-callout-important {
    border-left-color: #0072c6;
    background: #eef6fd;
}

.api-callout-important .api-callout-title {
    color: #005799;
}

.api-callout-warning {
    border-left-color: #c0392b;
    background: #fdf3f2;
}

.api-callout-warning .api-callout-title {
    color: #96271b;
}

.api-callout-warning .api-callout-title::before {
    content: "\26A0";
    margin-right: 7px;
    font-size: 15px;
}

/* --- tables -------------------------------------------------------------- */

.api-table-scroll {
    max-width: 100%;
    margin: 0 0 20px 0;
    overflow-x: auto;
    border: 1px solid #e3ebf2;
    border-radius: 5px;
}

.api-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14px;
}

.api-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: left;
    color: #5b7893;
    background: #f6f9fb;
    border-bottom: 1px solid #e3ebf2;
    white-space: nowrap;
}

.api-table td {
    padding: 11px 14px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid #eef3f7;
}

.api-table tbody tr:first-child td {
    border-top: 0;
}

.api-table td code {
    white-space: nowrap;
}

.api-cell-type {
    color: #6b8299;
    white-space: nowrap;
}

.api-param-name {
    color: #0a4a6b;
    font-weight: 600;
}

.api-required {
    font-size: 12px;
    font-weight: 700;
    color: #b3261e;
}

.api-optional {
    font-size: 12px;
    color: #7b90a3;
}

.api-tag {
    display: inline-block;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 9px;
}

.api-tag-query {
    color: #2c5f88;
    background: #e7f0f7;
}

.api-tag-route {
    color: #6a4a94;
    background: #f1ebfa;
}

.api-tag-body {
    color: #1d6b42;
    background: #e8f6ee;
}

.api-status {
    display: inline-block;
    min-width: 40px;
    padding: 1px 8px;
    font-family: Consolas, Menlo, Monaco, 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    border-radius: 3px;
}

.api-status-2 {
    color: #1d6b42;
    background: #e8f6ee;
}

.api-status-4 {
    color: #96271b;
    background: #fceceb;
}

.api-status-5 {
    color: #7a4b00;
    background: #fdf3e2;
}

/* --- verb badges --------------------------------------------------------- */

.api-verb {
    display: inline-block;
    min-width: 62px;
    padding: 2px 9px;
    font-family: Consolas, Menlo, Monaco, 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    color: #fff;
    border-radius: 3px;
    vertical-align: 2px;
}

.api-verb-get {
    background: #0072c6;
}

.api-verb-post {
    background: #1d7a45;
}

.api-verb-put {
    background: #a2661a;
}

.api-verb-delete {
    background: #b3261e;
}

/* Only one endpoint in the API is a PATCH - the ClassPass status update - but the
   badge class is generated from the verb, so without this rule that one endpoint
   renders a white-on-transparent badge nobody can read. */
.api-verb-patch {
    background: #6b3fa0;
}

/* --- endpoints ----------------------------------------------------------- */

.api-category-summary {
    max-width: 82ch;
    font-size: 17px;
    color: #3c6685;
}

.api-endpoint {
    padding: 22px 0 10px 0;
    border-top: 1px solid #eef3f7;
}

.api-endpoint:first-of-type {
    border-top: 0;
}

.api-docs h3.api-endpoint-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px 0;
    font-size: 17px;
}

.api-path {
    font-family: Consolas, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
    font-size: 17px;
    font-weight: 600;
    color: #123c5c;
    word-break: break-all;
}

/* Object schemas. The block reuses .api-endpoint for search and layout; the name reads as a type
   rather than a path, so it gets its own treatment instead of borrowing .api-path. */
.api-schema-name {
    font-family: Consolas, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
    font-size: 17px;
    font-weight: 600;
    color: #123c5c;
    word-break: break-all;
}

.api-permalink {
    font-size: 15px;
    color: #b9c8d5;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.12s ease-in-out;
}

.api-endpoint-heading:hover .api-permalink,
.api-permalink:focus {
    opacity: 1;
}

.api-endpoint-summary {
    margin-bottom: 12px;
    color: #3c6685;
}

.api-details {
    max-width: 82ch;
    margin: 0 0 20px 0;
    padding: 10px 16px;
    font-size: 14px;
    background: #f7fafc;
    border: 1px solid #e3ebf2;
    border-radius: 5px;
}

.api-details summary {
    font-weight: 600;
    color: #2c5f88;
    cursor: pointer;
}

.api-details p {
    margin-top: 10px;
}

/* --- code samples -------------------------------------------------------- */

.api-samples {
    max-width: 100%;
    margin: 0 0 22px 0;
}

.api-samples-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: -1px;
}

.api-tab {
    padding: 7px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #5b7893;
    background: #eef3f7;
    border: 1px solid #dde7ef;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}

.api-tab:hover {
    color: #123c5c;
    background: #e3ebf2;
}

.api-tab.is-active {
    color: #fff;
    background: #123c5c;
    border-color: #123c5c;
}

.api-sample {
    position: relative;
    display: none;
}

.api-sample.is-active {
    display: block;
}

.api-sample-label {
    position: absolute;
    top: 9px;
    left: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6d8fa8;
}

.api-copy {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 2;
    padding: 4px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #cfe2f0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 3px;
    cursor: pointer;
}

.api-copy:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.api-copy.is-copied {
    color: #d6f5e3;
    border-color: rgba(140, 230, 180, 0.5);
    background: rgba(45, 150, 95, 0.35);
}

.api-code {
    margin: 0;
    padding: 16px 18px;
    overflow-x: auto;
    font-family: Consolas, 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #e6eef5;
    background: #10293d;
    border-radius: 0 5px 5px 5px;
    tab-size: 4;
}

.api-samples-tabs + .api-sample .api-code {
    border-top-left-radius: 0;
}

.api-sample:first-child .api-code {
    border-radius: 5px;
}

.api-code code {
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    white-space: pre;
}

/* Hand-rolled token classes. The highlighter in ApiDocs.js emits these; there
   is no third-party syntax library on this page by design. */
.api-code .tok-str {
    color: #9ad9a4;
}

.api-code .tok-com {
    color: #7e97ab;
    font-style: italic;
}

.api-code .tok-key {
    color: #6fc0ee;
}

.api-code .tok-num {
    color: #f0c987;
}

.api-code .tok-flag {
    color: #e8a3c8;
}

.api-code .tok-prop {
    color: #a8c8ea;
}

/* --- search empty state -------------------------------------------------- */

.api-search-empty {
    max-width: 82ch;
    margin: 28px 0;
    padding: 26px 28px;
    background: #f7fafc;
    border: 1px solid #e3ebf2;
    border-radius: 6px;
}

.api-search-empty-title {
    font-size: 19px;
    font-weight: 700;
    color: #123c5c;
}

#api-search-empty-term {
    color: #b3261e;
}

.api-button {
    padding: 8px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: #0072c6;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.api-button:hover {
    background: #005799;
}

.api-footer-note {
    margin-top: 44px;
    padding-top: 20px;
    font-size: 14px;
    color: #6b8299;
    border-top: 1px solid #e3ebf2;
}

/* --- on this page -------------------------------------------------------- */

.api-toc {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 36px 0 32px 4px;
    font-size: 13px;
}

.api-toc-title {
    margin: 0 0 8px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8299ae;
}

.api-toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid #e3ebf2;
}

.api-toc-list li {
    margin: 0;
}

.api-toc-list a {
    display: block;
    padding: 4px 10px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: #6b8299;
    text-decoration: none;
    line-height: 1.45;
    /* Paths have no spaces to break on, so without this the longer ones run out
       past the rail and get clipped. */
    overflow-wrap: break-word;
    word-break: break-word;
}

.api-toc-list a:hover {
    color: #123c5c;
    text-decoration: none;
}

.api-toc-list a.is-active {
    color: #0072c6;
    border-left-color: #0072c6;
    font-weight: 600;
}

.api-toc-list .api-toc-sub a {
    padding-left: 22px;
    font-size: 12.5px;
}

/* --- responsive ---------------------------------------------------------- */

/* Two columns: the on-this-page rail is the first thing to go. */
@media only screen and (max-width: 1199px) {

    .api-shell {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 0 32px;
        padding: 0 24px 56px 24px;
    }

    .api-toc {
        display: none;
    }
}

/* One column: the sidebar becomes an off-canvas panel behind a button. */
@media only screen and (max-width: 899px) {

    .api-shell {
        display: block;
        padding: 0 20px 48px 20px;
    }

    .api-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        width: 84%;
        max-width: 320px;
        height: 100%;
        max-height: none;
        padding: 24px 20px;
        background: #fff;
        border-right: 1px solid #dde7ef;
        box-shadow: 0 0 40px rgba(18, 60, 92, 0.22);
        transform: translateX(-102%);
        transition: transform 0.18s ease-in-out;
    }

    .api-sidebar.is-open {
        transform: translateX(0);
    }

    .api-sidebar-close {
        display: block;
        float: right;
        padding: 4px 12px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 600;
        color: #5b7893;
        background: #eef3f7;
        border: 1px solid #dde7ef;
        border-radius: 3px;
        cursor: pointer;
    }

    .api-sidebar-open {
        display: inline-block;
        margin-bottom: 20px;
        padding: 8px 16px;
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        color: #2c5f88;
        background: #eef3f7;
        border: 1px solid #dde7ef;
        border-radius: 4px;
        cursor: pointer;
    }

    .api-content {
        padding-top: 24px;
    }

    .api-docs h1 {
        font-size: 31px;
    }

    .api-lead {
        font-size: 17px;
    }

    .api-docs h2 {
        font-size: 24px;
    }

    .api-docs h3 {
        font-size: 18px;
    }
}

@media only screen and (max-width: 599px) {

    .api-shell {
        padding: 0 14px 40px 14px;
    }

    .api-docs h1 {
        font-size: 27px;
    }

    .api-docs h3.api-endpoint-heading {
        gap: 6px;
    }

    .api-path {
        font-size: 15px;
    }

    .api-code {
        font-size: 12px;
        padding: 14px 14px;
    }

    /* Site.css drops the footer columns to full width below 500px but the
       footer still carries 20px of its own padding; keep the inner grid from
       adding another 40px on each side on a phone. */
    html body .grid {
        padding: 24px 0;
    }
}