/*
 * API documentation stylesheet.
 *
 * Extracted from the former single-page gateway/home/documentation.php so the
 * hub, every per-API page and every tab share one cacheable file instead of
 * re-sending ~1,300 lines of inline CSS on each request.
 *
 * Consumed by gateway/home/docs/_head.php.
 */

:root {
    --bg: #0f172a;
    --card: #1e293b;
    --border: #334155;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --accent: #8b5cf6;
    --green: #34d399;
    --blue: #38bdf8;
    --red: #f87171;
    --amber: #fbbf24
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh
}

a {
    color: var(--blue);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

code,
pre {
    font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', Consolas, monospace
}

/* Inline <code> in prose, tables and info boxes. Most call sites used to carry
   style="color:var(--blue)" inline and the rest rendered as unstyled body text,
   so the same identifier looked like two different things depending on which
   partial wrote it. Colouring the element itself makes them agree; the inline
   attribute still wins where one is present, and .doc-prose code / .hero
   .base-url code keep their own treatment. Excluded inside <pre>, whose tokens
   are coloured by jsonSyntax(). */
code {
    color: var(--blue)
}

pre code {
    color: inherit
}

/* ── Layout ── */
.sidebar {
    width: 260px;
    background: var(--card);
    border-right: 1px solid var(--border);
    padding: 20px 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 10
}

.sidebar .brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px
}

.sidebar .brand img {
    height: 28px;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin-bottom: 6px
}

.sidebar .brand span {
    font-size: 11px;
    color: var(--muted)
}

.sidebar .nav-group {
    padding: 0 12px;
    margin-bottom: 8px
}

.sidebar .nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    padding: 8px 8px 4px;
    font-weight: 700
}

.sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    transition: all .12s;
    text-decoration: none
}

.sidebar .nav-link:hover {
    background: rgba(99, 102, 241, .12);
    color: #a5b4fc;
    text-decoration: none
}

.sidebar .nav-link.active {
    background: rgba(99, 102, 241, .18);
    color: #a5b4fc;
    font-weight: 600
}

/* Method pill. Base rules live on .method-badge itself, not on a
   `.sidebar .nav-link` descendant selector — the hub's API cards use the same
   class and were otherwise picking up only the .badge-* colours, rendering as
   bare coloured text instead of a badge. */
.method-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .3px;
    padding: 1px 5px;
    border-radius: 3px;
    min-width: 34px;
    text-align: center;
    flex-shrink: 0
}

/* Slightly larger on a card, where it sits next to 14px text. */
.cat-card-head .method-badge {
    font-size: 10px;
    padding: 2px 7px;
    min-width: 42px;
    border-radius: 4px
}

.badge-get {
    background: #064e3b;
    color: #34d399
}

.badge-post {
    background: #1e3a5f;
    color: #60a5fa
}

.main {
    flex: 1;
    margin-left: 260px;
    padding: 0
}

/* ── Hero ── */
.hero {
    background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%);
    border-bottom: 1px solid var(--border);
    padding: 48px 40px
}

.hero h1 {
    font-size: 28px;
    margin-bottom: 8px
}

.hero h1 span {
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.hero p {
    color: var(--muted);
    font-size: 14px;
    max-width: 600px;
    line-height: 1.6
}

.hero .base-url {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px
}

.hero .base-url code {
    color: var(--blue);
    font-size: 13px
}

.hero .base-url .copy-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all .12s
}

.hero .base-url .copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent)
}

/* ── Content ── */
.content {
    padding: 0 40px 60px;
    max-width: 960px
}

.section {
    padding-top: 40px
}

.section>h2 {
    font-size: 20px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    scroll-margin-top: 24px
}

.section>h2 .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0
}

.section>p.desc {
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.6
}

/* ── Auth card ── */
.auth-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px
}

/* h2 and h3 are styled identically — a card's caption is a real heading, and
   which level it takes depends on where the card sits in the page outline,
   not on how it looks. */
.auth-card h2,
.auth-card h3 {
    font-size: 15px;
    margin: 0 0 10px
}

.auth-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6
}

.auth-card .header-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px
}

.auth-card .header-box .key {
    color: var(--green);
    font-weight: 600
}

.auth-card .header-box .val {
    color: var(--blue)
}

/* ── Endpoint card ── */
.endpoint {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
    scroll-margin-top: 24px
}

.endpoint-header {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border-bottom: 1px solid var(--border)
}

.endpoint-header .method {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
    letter-spacing: .3px
}

.method-get {
    background: #064e3b;
    color: #34d399
}

.method-post {
    background: #1e3a5f;
    color: #60a5fa
}

.endpoint-header .path {
    color: var(--blue);
    font-size: 14px;
    font-weight: 600
}

.endpoint-header .auth-tag {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px
}

.tag-public {
    background: #064e3b;
    color: #34d399
}

.tag-bearer {
    background: #713f12;
    color: #fbbf24
}

.tag-deprecated {
    background: #7f1d1d;
    color: #f87171
}

.endpoint-body {
    padding: 20px
}

/* Unscoped: the shared partials under gateway/home/docs/ are included both
   inside .endpoint-body (per-API tabs) and directly in the hub page, where a
   descendant selector left the paragraph completely unstyled. */
.ep-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.5
}

/* ── Params table ── */
/* Section caption. Applied to h2/h3 elements, not divs — these are the real
   section headings of a documentation page and crawlers read the outline. The
   explicit `margin: 0 0 8px` overrides the browser's default heading margin so
   the level can change without moving anything on screen; the handful of
   sections that want breathing room set `margin-top` inline. */
.params-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin: 0 0 8px
}

.params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 20px
}

.params-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--border)
}

.params-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #1a2536;
    vertical-align: top
}

.params-table tr:last-child td {
    border-bottom: none
}

.param-name {
    color: var(--blue);
    font-weight: 600
}

.param-type {
    color: var(--accent);
    font-size: 11px
}

.param-required {
    color: var(--red);
    font-size: 10px;
    font-weight: 700
}

.param-optional {
    color: var(--muted);
    font-size: 10px
}

/* ── Code blocks ── */
.code-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0
}

.code-tab {
    padding: 7px 16px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    transition: all .12s;
    user-select: none
}

.code-tab.active {
    background: #111827;
    color: var(--text);
    border-color: var(--border)
}

.code-block {
    background: #111827;
    border: 1px solid var(--border);
    border-radius: 0 6px 6px 6px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 16px;
    position: relative
}

.code-block pre {
    font-size: 12px;
    line-height: 1.6;
    white-space: pre;
    color: var(--text)
}

.code-block .copy-code {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    transition: all .12s
}

.code-block .copy-code:hover {
    border-color: var(--accent);
    color: var(--accent)
}

/* ── JSON syntax ── */
.json-key {
    color: #a78bfa
}

.json-str {
    color: #34d399
}

.json-num {
    color: #fbbf24
}

.json-bool {
    color: #f472b6
}

.json-null {
    color: #94a3b8
}

/* ── Status table ── */
.status-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px
}

.status-table th {
    text-align: left;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--muted);
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px
}

.status-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #1a2536;
    /* Description cells wrap to several lines; without this the code badge and
       Charged pill float to the middle of the row. */
    vertical-align: top;
    line-height: 1.5
}

/* Keep the narrow columns from being squeezed by the description column. */
.billing-table td:first-child,
.billing-table th:first-child {
    white-space: nowrap
}

.status-table code.mc {
    background: rgba(139, 92, 246, .12);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap
}

/* Charged Yes/No — the column merchants actually scan for. */
.chg {
    font-weight: 700;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .3px
}

.chg-yes {
    background: #713f12;
    color: #fbbf24
}

.chg-no {
    background: #064e3b;
    color: #34d399
}

.status-code {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px
}

.sc-2xx {
    background: #064e3b;
    color: #34d399
}

.sc-4xx {
    background: #713f12;
    color: #fbbf24
}

.sc-5xx {
    background: #7f1d1d;
    color: #f87171
}

/* ── Info / Warn box ── */
.info-box {
    background: rgba(99, 102, 241, .08);
    border: 1px solid rgba(99, 102, 241, .25);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px
}

.info-box .info-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 4px
}

.info-box p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6
}

.warn-box {
    background: rgba(245, 158, 11, .06);
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 20px
}

.warn-box .info-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--amber);
    margin-bottom: 4px
}

.warn-box p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6
}

/* ── Footer ── */
.footer {
    border-top: 1px solid var(--border);
    padding: 32px 40px;
    margin-top: 40px
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px;
    margin-bottom: 24px
}

.footer-col h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    margin: 0 0 10px
}

.footer-col p,
.footer-col li {
    font-size: 12px;
    color: #64748b;
    line-height: 1.7
}

.footer-col ul {
    list-style: none
}

.footer-col ul li::before {
    content: '→ ';
    color: var(--accent)
}

.footer-bottom {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: #475569
}

/* ── Responsive ── */
/* Drawer toggle. Anchored top-RIGHT: at top-left it sat on top of the
   sidebar's logo, and the sidebar is 260px wide, so on a phone the right edge
   is the strip that stays visible once the drawer slides in. z-index clears
   the sidebar (10) and its backdrop (9). */
.mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 30;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer
}

.mobile-toggle:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.mobile-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round
}

/* aria-expanded decides the glyph — the state the assistive tech reads and the
   state the eye reads can never drift apart. */
.mobile-toggle .mt-x,
.mobile-toggle[aria-expanded="true"] .mt-bars {
    display: none
}

.mobile-toggle[aria-expanded="true"] .mt-x {
    display: block
}

/* Tap-anywhere-to-close, and it stops the page reading as scrollable
   underneath an open drawer. */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9;
    background: rgba(2, 6, 23, .6)
}

@media(max-width:768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .mobile-toggle {
        display: flex
    }

    .sidebar-backdrop.open {
        display: block
    }

    /* Don't scroll the page behind an open drawer. */
    body.nav-open {
        overflow: hidden
    }

    .main {
        margin-left: 0
    }

    .hero,
    .content,
    .footer {
        padding-left: 20px;
        padding-right: 20px
    }

    .footer-grid {
        grid-template-columns: 1fr
    }

    /* Tab strip: scroll sideways rather than wrap to three ragged rows once an
       API carries the static set plus admin-authored tabs. */
    .doc-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 0 14px;
        scrollbar-width: none
    }

    .doc-tabs::-webkit-scrollbar {
        display: none
    }

    .doc-tab {
        padding: 10px 11px;
        font-size: 12px
    }

    .endpoint-header {
        padding: 14px
    }

    /* The share button's margin-left:auto leaves it stranded on its own line
       once the title row wraps. */
    .ep-share {
        margin-left: 0
    }

    /* Right-aligned 100px labels beside an input leave ~40% of a phone screen
       for the field itself — stack them instead. */
    .try-panel .try-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px
    }

    .try-panel .try-row label {
        min-width: 0;
        text-align: left
    }

    /* Send button and the remember controls stop fitting side by side. */
    .try-actions {
        flex-wrap: wrap;
        row-gap: 10px
    }

    /* Reference tables are the one thing here that genuinely cannot reflow. */
    .params-table,
    .status-table {
        display: block;
        overflow-x: auto
    }

    /* display:block on its own does not produce a scroll: the table still
       shrink-to-fits the viewport and the description column collapses to one
       word per line. A floor on the text column pushes the table past the
       container so the overflow is real. Set on the cell rather than the table
       so thead and tbody stay one anonymous table box and the columns keep
       lining up. */
    .params-table td:last-child,
    .status-table td:last-child {
        min-width: 240px
    }
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-track {
    background: var(--bg)
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px
}

::-webkit-scrollbar-thumb:hover {
    background: #475569
}

/* ── Try-It ── */
.try-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    display: none
}

.try-panel.open {
    display: block
}

.try-panel .try-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--accent);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px
}

.try-panel .try-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    align-items: center
}

/* Scoped to .try-row: this is the 100px right-aligned field gutter, and as a
   bare `.try-panel label` it also matched .remember-label — which is one class
   and therefore lost — forcing the checkbox caption to 100px wide at 11px/600
   and stranding the ? button and status text behind a gap. */
.try-panel .try-row label {
    font-size: 11px;
    color: var(--muted);
    min-width: 100px;
    text-align: right;
    font-weight: 600;
    flex-shrink: 0
}

.try-panel input {
    flex: 1;
    padding: 7px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 12px;
    font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
    outline: none
}

.try-panel input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, .15)
}

.try-panel input::placeholder {
    color: #475569
}

.try-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    align-items: center
}

.btn-try {
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all .15s;
    letter-spacing: .3px
}

.btn-send {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff
}

.btn-send:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, .3);
    transform: translateY(-1px)
}

.btn-send:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none
}

.btn-toggle-try {
    padding: 6px 14px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    transition: all .12s;
    margin-left: auto
}

.btn-toggle-try:hover {
    background: rgba(139, 92, 246, .12)
}

.btn-toggle-try.active {
    background: var(--accent);
    color: #fff
}

.try-response {
    margin-top: 12px
}

.try-response .code-block {
    margin-bottom: 0
}

.try-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    margin-right: 6px;
    vertical-align: middle
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.try-status {
    font-size: 11px;
    margin-left: 8px;
    font-weight: 600
}

.try-status.s-ok {
    color: var(--green)
}

.try-status.s-err {
    color: var(--red)
}

/* ── Remember Key bar ── */
/* Lives inside .try-actions, immediately right of Send Request. The margin is
   the flex row's own gap now, not a stacked block's top margin. */
.remember-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px
}

.remember-label {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 12px;
    color: var(--muted);
    user-select: none;
    transition: color .12s
}

.remember-label:hover {
    color: var(--text)
}

.remember-label input[type=checkbox] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer
}

.remember-status {
    font-size: 11px;
    font-weight: 600;
    color: var(--green);
    opacity: 0;
    transition: opacity .3s
}

.remember-status.show {
    opacity: 1
}

.remember-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    transition: all .12s;
    flex-shrink: 0
}

.remember-help-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(139, 92, 246, .1)
}

/* ── Help Modal ── */
.rk-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .65);
    z-index: 200;
    align-items: center;
    justify-content: center
}

.rk-modal-overlay.open {
    display: flex
}

.rk-modal {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 28px 24px;
    max-width: 420px;
    width: calc(100% - 32px);
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5)
}

.rk-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color .12s
}

.rk-modal-close:hover {
    color: var(--text)
}

.rk-modal h3 {
    font-size: 15px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px
}

.rk-modal h3 .rk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(139, 92, 246, .15);
    font-size: 13px
}

.rk-modal .rk-sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 18px
}

.rk-modal .rk-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px
}

.rk-modal .rk-row .rk-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(139, 92, 246, .15);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.rk-modal .rk-row p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0
}

.rk-modal .rk-row p strong {
    color: var(--text);
    display: block;
    margin-bottom: 2px
}

.rk-modal .rk-note {
    background: rgba(245, 158, 11, .06);
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 7px;
    padding: 10px 14px;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 6px
}

.rk-modal .rk-note strong {
    color: var(--amber)
}

/* ── Endpoint title row (API name + category + share) ── */
.ep-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.ep-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3
}

.ep-anchor {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    opacity: .35;
    transition: opacity .12s;
    flex-shrink: 0
}

.endpoint:hover .ep-anchor,
.ep-anchor:focus {
    opacity: 1
}

.ep-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(139, 92, 246, .14);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, .28)
}

.ep-share {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .12s, border-color .12s, background .12s;
    font-family: inherit
}

.ep-share:hover {
    color: var(--text);
    border-color: var(--accent);
    background: rgba(139, 92, 246, .1)
}

.ep-share svg {
    width: 12px;
    height: 12px;
    fill: currentColor
}

.ep-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

/* ── Share modal ── */
.share-modal {
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto
}

.share-modal .sm-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.share-modal .sm-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(148, 163, 184, .12);
    color: var(--muted);
    border: 1px solid var(--border)
}

.share-modal .sm-badge-path {
    text-transform: none;
    letter-spacing: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--blue)
}

.share-modal .sm-badge-warn {
    background: rgba(248, 113, 113, .12);
    border-color: rgba(248, 113, 113, .3);
    color: var(--red)
}

.share-modal .sm-desc {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0 0 16px;
    max-height: 132px;
    overflow-y: auto
}

.share-modal .sm-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    margin-bottom: 7px
}

.share-modal .sm-linkbox {
    display: flex;
    gap: 8px;
    margin-bottom: 18px
}

.share-modal .sm-linkbox input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--blue);
    padding: 9px 11px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace
}

.share-modal .sm-linkbox input:focus {
    outline: none;
    border-color: var(--accent)
}

.share-modal .sm-linkbox button {
    background: var(--accent);
    border: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 0 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0
}

.share-modal .sm-linkbox button:hover {
    filter: brightness(1.1)
}

.share-modal .sm-ai {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: rgba(139, 92, 246, .1);
    border: 1px solid rgba(139, 92, 246, .35);
    border-radius: 8px;
    padding: 11px 13px;
    margin-bottom: 18px;
    cursor: pointer;
    font-family: inherit;
    color: var(--text);
    transition: background .12s, border-color .12s
}

.share-modal .sm-ai:hover {
    background: rgba(139, 92, 246, .18);
    border-color: var(--accent)
}

.share-modal .sm-ai.is-copied {
    background: rgba(52, 211, 153, .12);
    border-color: var(--green)
}

.share-modal .sm-ai svg {
    width: 19px;
    height: 19px;
    fill: var(--accent);
    flex-shrink: 0
}

.share-modal .sm-ai.is-copied svg {
    fill: var(--green)
}

.share-modal .sm-ai-text strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 2px
}

.share-modal .sm-ai-text em {
    display: block;
    font-size: 11px;
    font-style: normal;
    color: var(--muted);
    line-height: 1.5
}

.share-modal .sm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 14px
}

.share-modal .sm-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color .12s, border-color .12s, transform .12s;
    font-family: inherit
}

.share-modal .sm-opt:hover {
    color: var(--text);
    border-color: var(--accent);
    transform: translateY(-1px)
}

.share-modal .sm-opt svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}

.share-modal .sm-native {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    display: none
}

.share-modal .sm-native:hover {
    color: var(--text);
    border-color: var(--accent)
}

.share-modal h3 .rk-icon svg {
    width: 12px;
    height: 12px;
    fill: var(--accent)
}

/* ═══════════════════════════════════════════════════════════
   Per-API pages — added when /documentation was split from one
   long page into a hub + one page per API + one page per tab.
   ═══════════════════════════════════════════════════════════ */

/* ── Hub: search ── */
.doc-search {
    width: 100%;
    padding: 11px 14px;
    margin: 4px 0 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 14px;
    font-family: inherit
}

.doc-search:focus {
    outline: none;
    border-color: var(--accent)
}

.doc-search::placeholder {
    color: var(--muted)
}

.doc-search-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 18px 0
}

/* ── Hub: category groups + API cards ── */
.cat-group {
    margin-bottom: 26px
}

.cat-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border)
}

.cat-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--border);
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0;
    vertical-align: middle
}

/* min() guard: a bare 285px track is wider than a 320px viewport once the
   content's 20px side padding is taken off, which pushed the whole page into a
   horizontal scroll on small phones. */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(285px, 100%), 1fr));
    gap: 12px
}

.cat-card {
    display: block;
    padding: 13px 15px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color .15s, transform .15s
}

.cat-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    text-decoration: none
}

.cat-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px
}

.cat-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text)
}

.cat-card-path {
    display: block;
    font-size: 11px;
    color: var(--blue);
    word-break: break-all;
    margin-bottom: 6px
}

.cat-card-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0
}

/* ── API page: breadcrumbs ── */
.crumbs {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px
}

.crumbs a {
    color: var(--muted)
}

.crumbs a:hover {
    color: var(--blue)
}

.crumb-sep {
    margin: 0 6px;
    opacity: .5
}

/* ── API page: tab strip ── */
/* 20px matches .endpoint-header's inline padding so the first tab lines up
   with the API name above it. */
.doc-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    padding: 0 20px;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, .12)
}

.doc-tab {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    text-decoration: none;
    transition: color .15s, border-color .15s
}

.doc-tab:hover {
    color: var(--text);
    text-decoration: none
}

.doc-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600
}

.ep-tab-label {
    font-weight: 400;
    color: var(--muted)
}

.ep-tab-label::before {
    content: '— ';
    opacity: .6
}

.content-api {
    padding-top: 26px
}

/* ── Overview: "more on this API" links ── */
.next-tabs {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border)
}

/* ── Use cases (Overview) ── */
.use-cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 20px
}

.use-case {
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 7px
}

/* h3 for document outline, sized to match the surrounding cards rather than
   the browser default — the heading level is about structure, not size. */
.use-case h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px
}

.use-case p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6
}

.next-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(215px, 100%), 1fr));
    gap: 10px
}

.next-card {
    display: block;
    padding: 11px 13px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 7px;
    text-decoration: none;
    transition: border-color .15s
}

.next-card:hover {
    border-color: var(--accent);
    text-decoration: none
}

.next-card strong {
    display: block;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px
}

.next-card span {
    display: block;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.55
}

/* ── Dynamic tabs: admin-authored rich text ── */
.doc-prose {
    font-size: 14px;
    line-height: 1.75;
    color: var(--text)
}

.doc-prose h1,
.doc-prose h2,
.doc-prose h3,
.doc-prose h4 {
    color: var(--text);
    margin: 22px 0 10px;
    line-height: 1.35
}

.doc-prose h1 { font-size: 20px }
.doc-prose h2 { font-size: 17px }
.doc-prose h3 { font-size: 15px }
.doc-prose h4 { font-size: 14px }

.doc-prose p {
    margin-bottom: 12px
}

.doc-prose ul,
.doc-prose ol {
    margin: 0 0 12px 20px
}

.doc-prose li {
    margin-bottom: 5px
}

.doc-prose code {
    background: rgba(139, 92, 246, .12);
    color: var(--blue);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 12px
}

.doc-prose pre {
    background: #0b1220;
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 12px 14px;
    overflow-x: auto;
    margin-bottom: 12px;
    font-size: 12px
}

.doc-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
    display: block;
    overflow-x: auto
}

.doc-prose th,
.doc-prose td {
    border: 1px solid var(--border);
    padding: 8px 11px;
    text-align: left;
    vertical-align: top
}

.doc-prose th {
    background: var(--card);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap
}

.doc-prose blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 13px;
    margin: 0 0 12px;
    color: var(--muted)
}

.doc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 7px
}