@charset "utf-8";

/*
 * Bootstrap API guide - layout and syntax highlighting only.
 * Surfaces use Bootstrap CSS variables so light/dark themes stay in sync.
 */

:root {
    --guide-header-offset: 5rem;
    --guide-content-max: 72rem;
    --guide-rail-gap: 2rem;
    --guide-rail-edge: 0.75rem;
}

main a[name],
main [id],
main h2,
main h3,
main h4 {
    scroll-margin-top: var(--guide-header-offset);
}

.guide-page-content {
    max-width: var(--guide-content-max);
    overflow: visible;
}

.guide-request-type-block {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
}

.guide-request-type-block:has(.guide-sample-panel--floating),
.guide-request-type-block:has(.guide-sample-panel:not(.d-none)) {
    content-visibility: visible;
}

.guide-brand-logo {
    max-height: 4rem;
    width: auto;
}

[data-bs-theme="dark"] .guide-brand-logo-dark {
    display: block !important;
}

[data-bs-theme="dark"] .guide-brand-logo-light {
    display: none !important;
}

[data-bs-theme="light"] .guide-brand-logo-dark {
    display: none !important;
}

[data-bs-theme="light"] .guide-brand-logo-light {
    display: block !important;
}

.guide-theme-switch .form-check-input {
    cursor: pointer;
}

.guide-sidebar-sticky {
    top: var(--guide-header-offset);
    max-height: calc(100vh - var(--guide-header-offset));
}

.guide-toc-link.guide-toc-active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.guide-table thead th,
.guide-table thead th.guide-table-header {
    background-color: var(--guide-surface-bg);
    color: var(--bs-body-color);
}

.guide-table tr.guide-table-row-shared-pool td {
    background-color: var(--bs-info-bg-subtle);
}

.guide-table.table-hover > tbody > tr.guide-table-row-shared-pool:hover > td {
    background-color: var(--bs-info-bg-subtle);
}

.guide-sample-panel.guide-code-surface {
    background-color: var(--guide-code-bg) !important;
    border-color: var(--bs-border-color) !important;
    color: var(--bs-body-color);
}

.guide-sample-panel-header {
    display: none;
}

.guide-sample-panel-title {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    line-height: 1.3;
}

.guide-sample-panel-request-type {
    font-size: 0.6875rem;
    font-weight: 600;
    vertical-align: baseline;
}

.guide-sample-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.guide-sample-panel-format {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.guide-sample-panel-close {
    flex-shrink: 0;
}

.guide-sample-panel:not(.guide-sample-panel--floating) {
    max-height: min(70vh, 640px);
}

.guide-code-surface .guide-sample-output,
.guide-code-surface .guide-highlighted-code {
    background-color: var(--guide-code-bg) !important;
}

.guide-code-surface .hl-main,
.guide-code-surface .hl-main pre,
.guide-code-surface .guide-code-sample {
    background: transparent !important;
}

#guideMainFooter {
    z-index: 1010;
    left: 0;
    right: 0;
}

@media (min-width: 992px) {
    #guideMainFooter {
        left: 25%;
    }
}

@media (min-width: 1200px) {
    #guideMainFooter {
        left: 16.666667%;
    }
}

#guideTocNav [data-bs-toggle="collapse"] .bi-chevron-down,
#content_topic [data-bs-toggle="collapse"] .bi-chevron-down,
#content_topic_mobile [data-bs-toggle="collapse"] .bi-chevron-down {
    transition: transform 0.2s ease-in-out;
    font-size: 0.65rem;
}

#guideTocNav [data-bs-toggle="collapse"].collapsed .bi-chevron-down,
#content_topic [data-bs-toggle="collapse"].collapsed .bi-chevron-down,
#content_topic_mobile [data-bs-toggle="collapse"].collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

.guide-sample-details > summary {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.guide-sample-format-toggle {
    display: inline-flex;
    vertical-align: middle;
    flex-shrink: 0;
}

.guide-sample-formats-header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.guide-sample-formats-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
}

.guide-sample-group-formats .guide-sample-format-toggle .btn.active {
    z-index: 1;
}

.guide-sample-details > summary::-webkit-details-marker {
    display: none;
}

.guide-sample-details:not([open]) .guide-sample-panel {
    display: none;
}

.guide-sample-details .guide-code-sample {
    font-size: 13px;
    white-space: pre-wrap;
    word-break: break-word;
}

.guide-request-type-group-divider {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid var(--bs-border-color);
    opacity: 0.65;
}

.guide-request-type-badge {
    font-size: 0.9em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.guide-request-type-badge-copy {
    cursor: pointer;
    vertical-align: middle;
    line-height: 1.2;
    border: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.guide-request-type-badge-copy:hover {
    filter: brightness(1.06);
}

.guide-request-type-badge-copy:focus {
    outline: none;
    box-shadow: none;
}

.guide-request-type-badge-copy:focus-visible {
    filter: brightness(1.06);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.guide-request-type-badge-copy:active {
    border: 0;
    box-shadow: none;
}

.guide-request-type-badge-icon {
    opacity: 0.55;
    font-size: 0.85em;
    margin-left: 0.35em;
    vertical-align: -0.05em;
}

.guide-request-type-badge-copy:hover .guide-request-type-badge-icon,
.guide-request-type-badge-copy:focus-visible .guide-request-type-badge-icon {
    opacity: 0.85;
}

.guide-request-type-badge-copy.guide-request-type-badge--copied .guide-request-type-badge-icon {
    opacity: 1;
}

/*
 * Wide main column: sample panel floats in the right gutter (position: fixed via JS).
 * JS only adds --floating when main.clientWidth >= 1280; no container query on main.
 */
.guide-sample-panel.guide-sample-panel--floating {
    position: fixed;
    margin-top: 0 !important;
    z-index: 1005;
    box-shadow: var(--bs-box-shadow);
    max-height: calc(100vh - var(--guide-header-offset) - 1.5rem);
    overflow: auto;
    content-visibility: visible;
}

.guide-sample-panel.guide-sample-panel--floating .guide-sample-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background-color: var(--guide-code-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.guide-sample-panel.guide-sample-panel--floating .guide-sample-panel-body {
    padding-top: 0.75rem !important;
}

[data-bs-theme="dark"] {
    --guide-surface-bg: var(--bs-secondary-bg);
    --guide-code-bg: var(--bs-body-bg);
    --guide-hl-muted: #adb5bd;
    --guide-hl-tag: #79d4a4;
    --guide-hl-code: #ff8787;
    --guide-hl-string: #91caff;
    --guide-hl-var: #74c0fc;
    --guide-hl-number: #b197fc;
    --guide-hl-comment: #868e96;
    --guide-hl-entity: #d0bfff;
    --guide-hl-gutter: #6c757d;
}

[data-bs-theme="light"] {
    --guide-surface-bg: var(--bs-secondary-bg);
    --guide-code-bg: var(--bs-tertiary-bg);
    --guide-hl-muted: #57606a;
    --guide-hl-tag: #116329;
    --guide-hl-code: #cf222e;
    --guide-hl-string: #0a3069;
    --guide-hl-var: #953800;
    --guide-hl-number: #6639ba;
    --guide-hl-comment: #6e7781;
    --guide-hl-entity: #8250df;
    --guide-hl-gutter: #8c959f;
}

.guide-code-surface .hl-main,
.guide-code-surface .hl-main pre,
.guide-code-surface .guide-code-sample {
    font-size: 13px;
    font-family: var(--bs-font-monospace);
    background: transparent !important;
    color: var(--bs-body-color);
}

.guide-code-surface .hl-brackets,
.guide-code-surface .hl-quotes {
    color: var(--guide-hl-muted);
}

.guide-code-surface .hl-reserved,
.guide-code-surface .hl-inlinetags {
    color: var(--guide-hl-tag);
}

.guide-code-surface .hl-code,
.guide-code-surface .hl-builtin,
.guide-code-surface .hl-special {
    color: var(--guide-hl-code);
}

.guide-code-surface .hl-string {
    color: var(--guide-hl-string);
    font-weight: normal;
}

.guide-code-surface .hl-var,
.guide-code-surface .hl-identifier {
    color: var(--guide-hl-var);
}

.guide-code-surface .hl-number {
    color: var(--guide-hl-number);
}

.guide-code-surface .hl-comment,
.guide-code-surface .hl-mlcomment,
.guide-code-surface .hl-inlinedoc {
    color: var(--guide-hl-comment);
    font-style: italic;
}

.guide-code-surface .hl-default,
.guide-code-surface .hl-types {
    color: var(--bs-body-color);
}

.guide-code-surface .hl-url {
    color: var(--guide-hl-string);
    text-decoration: underline;
}

.guide-code-surface .hl-entity,
.guide-code-surface .hl-prepro {
    color: var(--guide-hl-entity);
}

.guide-code-surface .hl-gutter {
    color: var(--guide-hl-gutter);
}

.guide-code-surface .guide-sample-ellipsis {
    color: var(--guide-hl-comment);
}

.guide-agent-resources {
    font-size: 0.8125rem;
    line-height: 1.45;
}

.guide-agent-resources-label {
    color: var(--bs-secondary-color);
    font-weight: 500;
}