/* Extracted from resources/views\pages\api.blade.php. Keep page-specific styles centralized here. */
.api-page {
            --ink: #10231f;
            --ink-soft: #27463f;
            --muted: #5d7470;
            --line: #dbe7e4;
            --surface: #f8fbfa;
            --surface-2: #ffffff;
            --accent: #0f766e;
            --accent-soft: #e6f5f3;
            --code-bg: #0f172a;
            --code-fg: #e2e8f0;
            color: var(--ink);
            max-width: 100%;
            min-width: 0;
        }

        .api-hero {
            background:
                radial-gradient(circle at 10% 5%, rgba(15, 118, 110, 0.2), transparent 38%),
                linear-gradient(130deg, #f7fcfb 0%, #edf7f5 100%);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 26px;
            margin-bottom: 18px;
        }

        .api-hero-title {
            margin: 0 0 10px;
            font-size: 1.8rem;
            letter-spacing: -0.025em;
        }

        .api-subtitle {
            margin: 0 0 14px;
            color: var(--muted);
            max-width: 54rem;
        }

        .api-endpoint {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            max-width: 100%;
            min-width: 0;
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 8px 14px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            font-size: 0.92rem;
        }

        .api-endpoint span:last-child {
            min-width: 0;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .api-endpoints {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 2px;
        }

        .api-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
        }

        .api-method {
            background: #0f766e;
            color: #f0fdfa;
            border-radius: 999px;
            padding: 2px 10px;
            font-weight: 700;
            font-size: 0.78rem;
            letter-spacing: 0.04em;
        }

        .api-toc {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 0 0 18px;
        }

        .api-toc a {
            text-decoration: none;
            color: var(--ink-soft);
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 7px 12px;
            font-weight: 600;
            font-size: 0.88rem;
        }

        .api-toc a:hover {
            color: var(--accent);
            border-color: #b7d8d3;
        }

        .api-toc a:focus-visible,
        .api-actions .btn:focus-visible,
        .api-code:focus-visible {
            outline: 3px solid rgba(15, 118, 110, .28);
            outline-offset: 2px;
        }

        .api-section {
            background: var(--surface-2);
            border: 1px solid var(--line);
            border-radius: 14px;
            min-width: 0;
            padding: 21px;
            margin-bottom: 14px;
        }

        .api-section h2 {
            margin: 0 0 10px;
            font-size: 1.34rem;
            letter-spacing: -0.02em;
        }

        .api-section h3 {
            margin: 16px 0 8px;
            font-size: 1rem;
            color: var(--ink-soft);
            letter-spacing: 0.01em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .api-section p {
            margin-bottom: 10px;
            color: var(--muted);
        }

        .api-section ul {
            margin-bottom: 0.75rem;
        }

        .api-section code {
            background: var(--accent-soft);
            color: #0f615a;
            padding: 1px 6px;
            border-radius: 6px;
            font-size: 0.9em;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .api-section .table {
            margin-bottom: 0;
        }

        .api-section .table thead th {
            background: #f3f8f7;
            border-color: var(--line);
            font-weight: 700;
            color: var(--ink-soft);
        }

        .api-section .table td,
        .api-section .table th {
            border-color: var(--line);
            vertical-align: top;
        }

        .api-note {
            background: #f5fbfa;
            border: 1px solid #d5ebe7;
            border-left: 4px solid var(--accent);
            border-radius: 10px;
            padding: 12px 14px;
            color: #18453f;
            margin-top: 10px;
        }

        .api-page .api-code {
            background: var(--code-bg);
            color: var(--code-fg);
            border-radius: 12px;
            padding: 14px;
            overflow-x: auto;
            border: 1px solid #1e293b;
            margin: 0;
            max-width: 100%;
            overscroll-behavior-inline: contain;
            -webkit-overflow-scrolling: touch;
            white-space: pre;
        }

        .api-page .api-code code {
            background: transparent;
            color: inherit;
            padding: 0;
            white-space: pre;
        }

        .api-warning {
            background: #fffbeb;
            border-color: #fde7b2;
            border-left-color: #d97706;
            color: #72420b;
        }

        .api-meta-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: 10px;
            margin-top: 14px;
        }

        .api-meta {
            border: 1px solid var(--line);
            border-radius: 10px;
            background: var(--surface);
            padding: 12px;
        }

        .api-meta .k {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            color: var(--muted);
            margin-bottom: 4px;
            font-weight: 700;
        }

        .api-meta .v {
            color: var(--ink-soft);
            font-weight: 600;
        }

        .api-page .field-list {
            min-width: 10rem;
        }

        .api-page .field-permalink {
            align-items: center;
            color: inherit;
            display: inline-flex;
            gap: 6px;
            text-decoration: none;
        }

        .api-page .field-permalink .fa-link {
            color: var(--muted);
            font-size: .7rem;
            opacity: 0;
            transition: opacity .15s ease;
        }

        .api-page .field-permalink:hover .fa-link,
        .api-page .field-permalink:focus .fa-link {
            opacity: 1;
        }

        .api-page tr:target td {
            background: #ecf8f6;
        }

        .api-page [id] {
            scroll-margin-top: 5rem;
        }

        body[data-page="client-api-docs"] .public-wrapper {
            overflow-x: clip;
        }

        @media (max-width: 991.98px) {
            .api-hero,
            .api-section {
                padding: 16px;
                border-radius: 12px;
            }

            .api-endpoints {
                flex-direction: column;
                align-items: stretch;
            }

            .api-endpoint {
                width: 100%;
                border-radius: 12px;
                padding: 10px 12px;
                align-items: flex-start;
            }

            .api-meta-grid {
                grid-template-columns: 1fr;
            }

            .api-toc {
                flex-wrap: wrap;
                overflow: visible;
                padding-bottom: 0;
            }

            .api-toc a {
                white-space: normal;
            }

            .api-page .api-code {
                padding: 12px;
                font-size: 0.82rem;
            }
        }

        @media (max-width: 767.98px) {
            .api-section .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .api-section .table {
                min-width: 42rem;
                table-layout: auto;
            }

            .api-section .table th,
            .api-section .table td {
                min-width: 0;
                padding: 0.5rem 0.45rem;
                font-size: 0.8rem;
                line-height: 1.35;
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: break-word;
                hyphens: auto;
            }

            .api-section .table td code,
            .api-section .table th code {
                white-space: normal;
                overflow-wrap: anywhere;
                word-break: break-word;
            }
        }

        @media (max-width: 575.98px) {
            .api-hero-title {
                font-size: 1.42rem;
            }

            .api-section h2 {
                font-size: 1.16rem;
            }

            .api-section h3 {
                font-size: 0.92rem;
            }

            .api-endpoint {
                font-size: 0.84rem;
                width: 100%;
            }

            .api-method {
                font-size: 0.72rem;
                flex: 0 0 auto;
            }

            .api-actions > .btn {
                align-items: center;
                display: inline-flex;
                justify-content: center;
                min-height: 44px;
                text-align: center;
                white-space: normal;
                width: 100%;
            }

            .api-toc {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .api-toc a {
                align-items: center;
                display: flex;
                justify-content: center;
                line-height: 1.2;
                min-height: 44px;
                text-align: center;
                white-space: normal;
            }

            .api-page .api-code,
            .api-page .api-code code {
                overflow-wrap: anywhere;
                white-space: pre-wrap;
                word-break: break-word;
            }

            .api-page .api-code {
                overflow-x: visible;
            }

            .api-section .table-responsive {
                border: 0;
                overflow: visible;
            }

            .api-section .table,
            .api-section .table tbody {
                border: 0;
                display: block;
                min-width: 0;
                table-layout: auto;
                width: 100%;
            }

            .api-section .table thead {
                clip: rect(0 0 0 0);
                clip-path: inset(50%);
                height: 1px;
                overflow: hidden;
                position: absolute;
                white-space: nowrap;
                width: 1px;
            }

            .api-section .table tbody tr {
                background: #fff;
                border: 1px solid var(--line);
                border-radius: 9px;
                display: block;
                margin-bottom: 10px;
                overflow: hidden;
                width: 100%;
            }

            .api-section .table tbody td {
                border: 0;
                border-bottom: 1px solid #edf2f1;
                display: block;
                font-size: .86rem;
                min-width: 0;
                padding: 10px 11px;
                text-align: left;
                width: 100%;
            }

            .api-section .table tbody td:last-child {
                border-bottom: 0;
            }

            .api-mobile-table td::before {
                color: #58706b;
                content: attr(data-label);
                display: block;
                font-size: .68rem;
                font-weight: 800;
                letter-spacing: .055em;
                margin-bottom: 5px;
                text-transform: uppercase;
            }

            .api-auth-table td:nth-child(1)::before { content: "Transport"; }
            .api-auth-table td:nth-child(2)::before { content: "Example"; }
            .api-auth-table td:nth-child(3)::before { content: "Notes"; }
            .api-limits-table td:nth-child(1)::before { content: "Header"; }
            .api-limits-table td:nth-child(2)::before { content: "Value"; }
            .api-limits-table td:nth-child(3)::before { content: "Meaning"; }
            .api-resource-table td:nth-child(1)::before { content: "Action"; }
            .api-resource-table td:nth-child(2)::before { content: "Method"; }
            .api-resource-table td:nth-child(3)::before { content: "Endpoint"; }
            .api-resource-table td:nth-child(4)::before { content: "Request shape"; }
            .api-field-table td:nth-child(1)::before { content: "Field"; }
            .api-field-table td:nth-child(2)::before { content: "Rule"; }
            .api-field-table td:nth-child(3)::before { content: "Notes"; }
            .api-errors-table td:nth-child(1)::before { content: "Status"; }
            .api-errors-table td:nth-child(2)::before { content: "Meaning"; }

            .api-section .table tbody td:first-child {
                background: #f7fbfa;
            }

            .api-section .table tbody tr.api-table-empty td {
                background: #fff;
                padding: 1.5rem .75rem;
                text-align: center;
            }

            .api-section .table tbody tr.api-table-empty td::before {
                display: none;
            }

            .api-page .field-list {
                min-width: 0;
            }

            .api-page .field-permalink {
                min-height: 44px;
                padding: 5px 0;
                width: 100%;
            }

            .api-page .field-permalink .fa-link {
                opacity: .65;
            }
        }