/*
 * Showdigs Scribe theme — matches www.showdigs.com
 * Brand: lime #D8E85A / #C8EA00, cyan #01ADE4, teal #1A6280, ink #0B0C0C
 */

:root {
    --sd-ink: #0b0c0c;
    --sd-ink-soft: #242321;
    --sd-muted: #4b463f;
    --sd-line: #d8dde3;
    --sd-wash: #f4f6f8;
    --sd-paper: #fbfcfd;
    --sd-sidebar: #eef2f5;
    --sd-lime: #d8e85a;
    --sd-lime-deep: #c8ea00;
    --sd-cyan: #01ade4;
    --sd-teal: #1a6280;
    --sd-green: #00be6d;
    --sd-code: #12181c;
    --sd-code-panel: #152028;
    --sd-radius: 12px;
    --sd-radius-pill: 9999px;
    --sd-font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --sd-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sd-sidebar-w: 268px;
    --sd-dark-w: 50%;
}

html {
    font-family: var(--sd-font) !important;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body,
.tocify-wrapper,
.content,
.dark-box,
input,
button {
    font-family: var(--sd-font) !important;
}

body {
    color: var(--sd-ink-soft);
    background: var(--sd-paper);
}

/* —— Layout —— */
.tocify-wrapper {
    width: var(--sd-sidebar-w) !important;
    background: var(--sd-sidebar) !important;
    background-image:
        radial-gradient(120% 80% at 0% 0%, rgba(1, 173, 228, 0.08), transparent 55%),
        linear-gradient(180deg, #f7f9fb 0%, var(--sd-sidebar) 100%) !important;
    border-right: 1px solid var(--sd-line) !important;
    box-shadow: none !important;
    color: var(--sd-ink-soft) !important;
}

.page-wrapper {
    margin-left: var(--sd-sidebar-w) !important;
    /* Split paint so the dark column stays continuous even when no example
       floats on a given section (pagination, prose-only blocks, etc.). */
    background: linear-gradient(
        to right,
        var(--sd-paper) 0 50%,
        var(--sd-code-panel) 50% 100%
    ) !important;
}

.page-wrapper .dark-box {
    width: 50% !important;
    background: var(--sd-code-panel) !important;
    background-image:
        radial-gradient(90% 60% at 100% 0%, rgba(200, 234, 0, 0.12), transparent 50%),
        radial-gradient(70% 50% at 0% 100%, rgba(1, 173, 228, 0.16), transparent 55%),
        linear-gradient(165deg, #10161b 0%, var(--sd-code-panel) 45%, #0e171d 100%) !important;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.04) !important;
    border: none !important;
}

/* Keep Scribe's dual-column model: left prose (margin-right 50%) + right floated
   examples over the absolute .dark-box. Content must stay transparent so the
   dark-box shows through on the right — a paper fill paints over the dark side. */
.content {
    width: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.content > aside,
.content > details,
.content > dl,
.content > h1,
.content > h2,
.content > h3,
.content > h4,
.content > h5,
.content > h6,
.content > ol,
.content > p,
.content > table,
.content > ul,
.content > div,
.content > form > aside,
.content > form > details,
.content > form > h1,
.content > form > h2,
.content > form > h3,
.content > form > h4,
.content > form > h5,
.content > form > h6,
.content > form > p,
.content > form > table,
.content > form > ul,
.content > form > div {
    margin-right: 50% !important;
    padding-left: 2.5rem !important;
    padding-right: 2rem !important;
    box-sizing: border-box !important;
    text-shadow: none !important;
}

.content blockquote,
.content pre,
.content .annotation {
    width: 50% !important;
    float: right !important;
    clear: right !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 1.25rem 1.5rem !important;
}

/* —— Brand / sidebar chrome —— */
.tocify-wrapper .logo,
.tocify-wrapper img.logo {
    display: block;
    width: auto !important;
    max-width: 148px;
    height: auto;
    margin: 1.25rem 1.25rem 0.75rem !important;
    padding: 0 !important;
}

.tocify-wrapper .sd-brand {
    display: block;
    padding: 1.35rem 1.25rem 0.5rem;
    text-decoration: none;
}

.tocify-wrapper .sd-brand img {
    display: block;
    width: 142px;
    height: auto;
}

.tocify-wrapper .sd-brand-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1.25rem 1rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--sd-radius-pill);
    background: rgba(216, 232, 90, 0.45);
    color: var(--sd-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tocify-wrapper .search {
    margin: 0 1rem 1rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.tocify-wrapper > .search:before {
    content: "" !important;
}

.tocify-wrapper .search input {
    width: 100% !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0.7rem 0.9rem !important;
    border: 1px solid var(--sd-line) !important;
    border-radius: var(--sd-radius) !important;
    background: #fff !important;
    color: var(--sd-ink) !important;
    font-family: var(--sd-font) !important;
    font-size: 0.9rem !important;
    box-shadow: 0 1px 0 rgba(26, 98, 128, 0.04);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tocify-wrapper .search input::placeholder {
    color: #8a847c;
}

.tocify-wrapper .search input:focus {
    outline: none !important;
    border-color: var(--sd-cyan) !important;
    box-shadow: 0 0 0 3px rgba(1, 173, 228, 0.18) !important;
}

.tocify-wrapper .lang-selector {
    display: none !important; /* language lives on the code panel only */
}

/* —— TOC —— */
#toc {
    padding: 0 0.65rem 1.5rem !important;
}

.tocify-wrapper .tocify-item > a {
    color: var(--sd-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 550 !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.7rem !important;
    transition: background 140ms ease, color 140ms ease;
}

.tocify-wrapper .tocify-item.level-1 > a {
    color: var(--sd-ink) !important;
    font-weight: 700 !important;
    font-size: 0.84rem !important;
    letter-spacing: 0.01em;
}

.tocify-wrapper .tocify-subheader .tocify-item > a {
    font-weight: 500 !important;
    font-size: 0.82rem !important;
    padding-left: 0.95rem !important;
}

.tocify-wrapper .tocify-item > a:hover {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--sd-teal) !important;
}

.tocify-wrapper .tocify-focus,
.tocify-wrapper .tocify-item.tocify-focus > a,
.tocify-wrapper li.tocify-focus > a {
    background: #fff !important;
    color: var(--sd-ink) !important;
    box-shadow: inset 3px 0 0 var(--sd-lime-deep), 0 1px 2px rgba(11, 12, 12, 0.04) !important;
}

.tocify-wrapper .tocify-header {
    margin-bottom: 0.35rem !important;
}

.tocify-wrapper li {
    color: var(--sd-ink-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tocify-wrapper .tocify-subheader {
    display: none;
    background: rgba(255, 255, 255, 0.45) !important;
    background-image: none !important;
    border-radius: 10px !important;
    margin: 0.15rem 0 0.45rem !important;
    padding: 0.2rem 0 !important;
    box-shadow: none !important;
}

.tocify-wrapper .jets-searching .tocify-subheader,
.tocify-wrapper .tocify-subheader.visible {
    display: block !important;
}

.tocify-wrapper .toc-footer {
    border-top: 1px solid var(--sd-line) !important;
    padding: 1rem 1.15rem 0.35rem !important;
    background: transparent !important;
}

.tocify-wrapper .toc-footer li,
.tocify-wrapper .toc-footer a {
    color: var(--sd-muted) !important;
    font-size: 0.78rem !important;
    text-decoration: none !important;
}

.tocify-wrapper .toc-footer a:hover {
    color: var(--sd-cyan) !important;
}

.tocify-wrapper #last-updated {
    border-top: none !important;
    padding-top: 0 !important;
    opacity: 0.75;
}

/* —— Mobile nav —— */
#nav-button {
    background: var(--sd-ink) !important;
    color: #fff !important;
    border-radius: 0 0 var(--sd-radius) 0 !important;
}

#nav-button span {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: var(--sd-font) !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
}

#nav-button img {
    display: none;
}

/* —— Typography (content) —— */
.content h1,
.content h2,
.content h3,
.content h4 {
    font-family: var(--sd-font) !important;
    color: var(--sd-ink) !important;
    letter-spacing: -0.02em;
}

.content h1 {
    font-size: 2rem !important;
    font-weight: 800 !important;
    /* Vertical only — shorthand margin would zero margin-right and crush the dark column. */
    margin-top: 0 !important;
    margin-bottom: 0.85rem !important;
    padding-top: 0.5rem !important;
    border-bottom: none !important;
    background: transparent !important;
    background-image: none !important;
}

.content h1:not(:first-child) {
    margin-top: 2.75rem !important;
    padding-top: 1.5rem !important;
    border-top: 1px solid var(--sd-line);
}

.content h2 {
    font-size: 1.25rem !important;
    font-weight: 750 !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
    background: transparent !important;
    background-image: none !important;
    border-top: none !important;
}

.content h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

.content p,
.content li,
.content td,
.content th {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: var(--sd-ink-soft) !important;
}

/* Example/response blockquotes float into the dark code column — keep light text. */
.content blockquote,
.content blockquote > p,
.content pre > p,
.content .annotation,
.content .annotation p {
    color: rgba(255, 255, 255, 0.88) !important;
}

.content a {
    color: var(--sd-teal) !important;
    text-decoration-color: rgba(26, 98, 128, 0.35);
    text-underline-offset: 2px;
    transition: color 140ms ease;
}

.content a:hover {
    color: var(--sd-cyan) !important;
}

.content blockquote a,
.content pre a,
.content .annotation a {
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.45) !important;
}

.content code {
    font-family: var(--sd-mono) !important;
    font-size: 0.84em !important;
    background: rgba(1, 173, 228, 0.08) !important;
    color: var(--sd-teal) !important;
    border: 1px solid rgba(26, 98, 128, 0.12);
    border-radius: 6px !important;
    padding: 0.1em 0.35em !important;
}

.content pre > code,
.content .highlight code,
.content blockquote code,
.dark-box code {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    padding: 0 !important;
}

.content table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    /* 50% width + 50% margin-right keeps white tables in the left column.
       width:100% was spilling into the dark side (e.g. Pagination). */
    width: 50% !important;
    max-width: 50% !important;
    overflow: hidden;
    border: 1px solid var(--sd-line) !important;
    border-radius: var(--sd-radius) !important;
    background: #fff;
}

.content table th,
.content table td {
    border-bottom: 1px solid var(--sd-line) !important;
    border-right: none !important;
    padding: 0.7rem 0.85rem !important;
}

.content table th {
    background: var(--sd-wash) !important;
    font-weight: 700 !important;
    color: var(--sd-ink) !important;
}

.content table tr:last-child td {
    border-bottom: none !important;
}

/* Left-column callouts stay light; right-column blockquotes keep Scribe's dark panel. */
.content aside {
    border: 1px solid var(--sd-line) !important;
    border-left: 3px solid var(--sd-cyan) !important;
    background: rgba(1, 173, 228, 0.06) !important;
    border-radius: 0 var(--sd-radius) var(--sd-radius) 0 !important;
    color: var(--sd-ink-soft) !important;
    box-shadow: none !important;
}

.content aside p,
.content aside li {
    color: var(--sd-ink-soft) !important;
}

.content aside.warning,
.content aside.notice {
    border-left-color: var(--sd-lime-deep) !important;
    background: rgba(216, 232, 90, 0.18) !important;
}

.content aside.success {
    border-left-color: var(--sd-green) !important;
    background: rgba(0, 190, 109, 0.08) !important;
}

.content blockquote,
.content .annotation {
    background-color: var(--sd-code) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.content blockquote > p {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
}

/* —— Method badges —— */
.content .badge {
    border-radius: var(--sd-radius-pill) !important;
    font-family: var(--sd-mono) !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.55rem !important;
    border: none !important;
    box-shadow: none !important;
}

.badge.badge-get,
.badge.badge-green,
.badge.badge-darkgreen {
    background: rgba(0, 190, 109, 0.15) !important;
    color: #067a4a !important;
}

.badge.badge-post,
.badge.badge-blue,
.badge.badge-darkblue,
.badge.badge-black {
    background: rgba(1, 173, 228, 0.14) !important;
    color: var(--sd-teal) !important;
}

.badge.badge-put,
.badge.badge-patch,
.badge.badge-darkgoldenrod {
    background: rgba(216, 232, 90, 0.4) !important;
    color: #4f5600 !important;
}

.badge.badge-delete,
.badge.badge-red {
    background: rgba(220, 70, 70, 0.12) !important;
    color: #a12828 !important;
}

.badge.badge-darkred,
.badge.badge-purple,
.badge.badge-grey {
    background: rgba(26, 98, 128, 0.12) !important;
    color: var(--sd-teal) !important;
}

/* —— Endpoint forms / params —— */
.content .fancy-heading-panel,
.content h2 + p + .endpoint,
.content form[id^="form-"] {
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius);
    background: #fff;
    padding: 0.35rem 0.85rem 0.85rem;
    /* Keep white chrome in the left column only. */
    margin-top: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    margin-right: 50% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

.content label {
    color: var(--sd-muted) !important;
    font-weight: 600 !important;
}

.content input,
.content select,
.content textarea {
    border: 1px solid var(--sd-line) !important;
    border-radius: 8px !important;
    font-family: var(--sd-font) !important;
}

.content input:focus,
.content select:focus,
.content textarea:focus {
    border-color: var(--sd-cyan) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(1, 173, 228, 0.16) !important;
}

/* —— Code panel —— */
/* Pin to the same geometry as .dark-box (right:0, width 50% of page-wrapper).
   100vw-based calc drifted from the absolute 50% column (scrollbar/viewport). */
.page-wrapper .lang-selector,
.dark-box .lang-selector {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: calc(var(--sd-sidebar-w) + (100% - var(--sd-sidebar-w)) / 2) !important;
    width: auto !important;
    z-index: 50 !important;
    box-sizing: border-box !important;
    background: var(--sd-code-panel) !important;
    background-image: linear-gradient(180deg, #10161b 0%, var(--sd-code-panel) 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 0.85rem 1.25rem 0.75rem !important;
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.dark-box .lang-selector button,
.dark-box .lang-button {
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--sd-radius-pill) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-family: var(--sd-font) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.85rem !important;
    margin: 0 0 0.65rem !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.dark-box .lang-selector button:hover,
.dark-box .lang-button:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.dark-box .lang-selector button.active,
.dark-box .lang-button.active {
    background: var(--sd-lime) !important;
    color: var(--sd-ink) !important;
    border-color: transparent !important;
}

.content pre,
.dark-box pre,
.content .highlight {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: var(--sd-code) !important;
    box-shadow: none !important;
}

.content aside + .highlight,
.content .example-request,
.content pre {
    font-family: var(--sd-mono) !important;
}

.hljs {
    background: transparent !important;
    font-family: var(--sd-mono) !important;
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
}

/* Brand-friendlier syntax accents on dark panel */
.hljs-keyword,
.hljs-selector-tag,
.hljs-name {
    color: #7dd3fc !important;
}

.hljs-string,
.hljs-attr,
.hljs-attribute {
    color: var(--sd-lime-deep) !important;
}

.hljs-number,
.hljs-literal {
    color: #86efac !important;
}

.hljs-comment {
    color: #7a8791 !important;
}

/* —— Scrollbars —— */
.tocify-wrapper,
.page-wrapper .dark-box,
.content {
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 98, 128, 0.35) transparent;
}

/* —— Motion —— */
@media (prefers-reduced-motion: no-preference) {
    .tocify-wrapper .tocify-item > a,
    .dark-box .lang-button,
    .content a {
        transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .content h1 {
        animation: sd-fade-up 420ms ease both;
    }
}

@keyframes sd-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* —— Responsive —— */
@media (max-width: 980px) {
    .tocify-wrapper {
        z-index: 40;
    }

    .page-wrapper {
        margin-left: 0 !important;
    }

    .page-wrapper .dark-box {
        display: none !important;
    }

    .page-wrapper .lang-selector,
    .dark-box .lang-selector {
        display: none !important;
    }

    .content {
        margin-right: 0 !important;
        padding: 1.5rem 1.15rem 3rem !important;
        background: var(--sd-paper) !important;
    }

    .content > aside,
    .content > details,
    .content > dl,
    .content > h1,
    .content > h2,
    .content > h3,
    .content > h4,
    .content > h5,
    .content > h6,
    .content > ol,
    .content > p,
    .content > table,
    .content > ul,
    .content > div,
    .content > form > aside,
    .content > form > details,
    .content > form > h1,
    .content > form > h2,
    .content > form > h3,
    .content > form > h4,
    .content > form > h5,
    .content > form > h6,
    .content > form > p,
    .content > form > table,
    .content > form > ul,
    .content > form > div {
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .content blockquote,
    .content pre,
    .content .annotation {
        width: auto !important;
        float: none !important;
        clear: none !important;
    }

    .content table {
        width: 100% !important;
        max-width: none !important;
    }

    .content .fancy-heading-panel,
    .content h2 + p + .endpoint,
    .content form[id^="form-"] {
        margin-right: 0 !important;
    }
}