/* Shared Bootstrap 6 tokens. Keep the site's existing light palette and sizing. */
:root {
    color-scheme: light;
    --bs-body-font-family:
        system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans",
        "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-mono:
        SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-fg-body: #212529;
    --bs-fg-1: #212529;
    --bs-fg-2: rgba(33, 37, 41, 0.75);
    --bs-fg-3: rgba(33, 37, 41, 0.5);
    --bs-bg-body: #fff;
    --bs-bg-1: #f8f9fa;
    --bs-bg-2: #e9ecef;
    --bs-bg-3: #dee2e6;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
    --bs-link-color: #0d6efd;
    --bs-link-hover-color: #0a58ca;
    --bs-code-font-size: 0.875em;
    --bs-code-color: #d63384;
    --bs-heading-margin-bottom: 0.5rem;
    --bs-list-padding-x: 2rem;

    --bs-primary-base: #0d6efd;
    --bs-primary-fg: #0d6efd;
    --bs-primary-fg-emphasis: #052c65;
    --bs-primary-bg: #0d6efd;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-primary-border: #9ec5fe;
    --bs-primary-contrast: #fff;
    --bs-secondary-base: #6c757d;
    --bs-secondary-fg: rgba(33, 37, 41, 0.75);
    --bs-secondary-fg-emphasis: #2b2f32;
    --bs-secondary-bg: #6c757d;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-secondary-border: #c4c8cb;
    --bs-secondary-contrast: #fff;
    --bs-success-base: #198754;
    --bs-success-fg: #198754;
    --bs-success-fg-emphasis: #0a3622;
    --bs-success-bg: #198754;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-success-border: #a3cfbb;
    --bs-success-contrast: #fff;
    --bs-danger-base: #dc3545;
    --bs-danger-fg: #dc3545;
    --bs-danger-fg-emphasis: #58151c;
    --bs-danger-bg: #dc3545;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border: #f1aeb5;
    --bs-danger-contrast: #fff;
    --bs-warning-base: #ffc107;
    --bs-warning-fg: #ffc107;
    --bs-warning-fg-emphasis: #664d03;
    --bs-warning-bg: #ffc107;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-warning-border: #ffe69c;
    --bs-warning-contrast: #000;
    --bs-info-base: #0dcaf0;
    --bs-info-fg: #0dcaf0;
    --bs-info-fg-emphasis: #055160;
    --bs-info-bg: #0dcaf0;
    --bs-info-bg-subtle: #cff4fc;
    --bs-info-border: #9eeaf9;
    --bs-info-contrast: #000;

    --bs-radius-5: 0.375rem;
    --bs-btn-input-min-height: 0;
    --bs-btn-input-sm-min-height: 0;
    --bs-btn-input-sm-padding-x: 0.5rem;
    --bs-btn-input-sm-line-height: 1.5;
    --bs-btn-input-sm-border-radius: 0.25rem;
    --bs-btn-input-lg-min-height: 0;
    --bs-btn-input-lg-font-size: 1.25rem;
    --bs-btn-input-lg-line-height: 1.5;
    --bs-btn-input-lg-border-radius: 0.5rem;

    /* Match the previous responsive type scale after renaming the utilities. */
    --bs-font-size-lg: 1.25rem;
    --bs-font-size-xl: calc(1.275rem + 0.3vw);
    --bs-font-size-2xl: calc(1.3rem + 0.6vw);
    --bs-font-size-3xl: calc(1.325rem + 0.9vw);
    --bs-font-size-4xl: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
    :root {
        --bs-font-size-xl: 1.5rem;
        --bs-font-size-2xl: 1.75rem;
        --bs-font-size-3xl: 2rem;
        --bs-font-size-4xl: 2.5rem;
    }
}

/* Bootstrap 6 reserves a gutter by default; the site manages its own scrollbar. */
html {
    scrollbar-gutter: auto;
}

/* Keep compatibility rules below Bootstrap's helpers and utilities. */
@layer components {
    /* Preserve block flow and margins in cards and prose callouts. */
    .card-body,
    .card-header,
    .alert {
        display: block;
    }

    .card-body > *,
    .alert > p {
        margin-block: revert-layer;
    }

    h1,
    .h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
    h2,
    .h2 {
        font-size: calc(1.325rem + 0.9vw);
    }
    h3,
    .h3 {
        font-size: calc(1.3rem + 0.6vw);
    }
    h4,
    .h4 {
        font-size: calc(1.275rem + 0.3vw);
    }
    h5,
    .h5 {
        font-size: 1.25rem;
    }
    h6,
    .h6 {
        font-size: 1rem;
    }

    .app-lead {
        font-size: 1.25rem;
        font-weight: 300;
    }

    .app-display {
        font-size: calc(1.525rem + 3.3vw);
        font-weight: 300;
        line-height: 1.2;
    }

    .btn {
        display: inline-block;
        --bs-btn-line-height: 1.5;
        --bs-btn-white-space: normal;
    }

    .btn-outline {
        --bs-btn-border-color: var(--bs-theme-fg);
        --bs-btn-disabled-border-color: var(--bs-theme-fg);
    }

    .btn-neutral {
        --bs-theme-bg: #f8f9fa;
        --bs-theme-contrast: #000;
    }

    .form-control {
        display: block;
        --bs-control-line-height: 1.5;
        --bs-control-box-shadow: none;
    }

    .form-control:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    .btn:focus-visible {
        outline: 0;
        box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--bs-theme-bg, #0d6efd) 50%, transparent);
    }

    .btn-outline.theme-secondary {
        --bs-secondary-fg: #6c757d;
    }

    .check {
        --bs-check-size: 1em;
        --bs-check-margin-block: 0.25em;
        border-radius: 0.25em;
    }

    .form-range {
        --bs-range-track-bg: #dee2e6;
        --bs-range-track-fill-bg: transparent;
        --bs-range-thumb-box-shadow: none;
        --bs-range-thumb-border: 0;
    }

    .form-range-input {
        height: 1.5rem;
    }

    .alert {
        margin-bottom: 1rem;
        color: var(--bs-theme-fg-emphasis, var(--bs-alert-color));
        --bs-alert-border-radius: 0.375rem;
    }

    .alert-neutral {
        --bs-alert-bg: #fcfcfd;
        --bs-alert-color: #495057;
        --bs-alert-border-color: #e9ecef;
    }

    .alert-link {
        color: inherit;
        font-weight: 700;
    }

    .card {
        --bs-card-spacer-y: 1rem;
        --bs-card-spacer-x: 1rem;
        --bs-card-border-radius: 0.375rem;
        --bs-card-cap-bg: rgba(33, 37, 41, 0.03);
    }

    .badge {
        display: inline-block;
        min-height: 0;
        --bs-badge-padding-x: 0.65em;
        --bs-badge-padding-y: 0.35em;
        --bs-badge-font-size: 0.75em;
        --bs-badge-font-weight: 700;
        --bs-badge-border-width: 0;
        --bs-badge-border-radius: 0.375rem;
    }

    .list-group-item.theme-success {
        color: var(--bs-success-fg-emphasis);
        background-color: var(--bs-success-bg-subtle);
        border-color: var(--bs-success-border);
    }

    .dialog {
        --bs-dialog-border-radius: 0.5rem;
        --bs-dialog-backdrop-blur: 0;
        --bs-dialog-header-border-color: var(--bs-border-color);
        --bs-dialog-footer-border-color: var(--bs-border-color);
        --bs-dialog-footer-padding: 0.75rem;
    }

    .dialog > form {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .popover {
        --bs-popover-border-radius: 0.5rem;
        --bs-popover-box-shadow: none;
    }

    /* Preserve the existing container widths and the lg columns used by the apps. */
    @media (min-width: 576px) {
        .container {
            max-width: 540px;
        }
    }
    @media (min-width: 768px) {
        .container {
            max-width: 720px;
        }
    }
    @media (min-width: 992px) {
        .container {
            max-width: 960px;
        }
        .lg\:col-3 {
            flex: 0 0 auto;
            width: 25%;
        }
        .lg\:col-4 {
            flex: 0 0 auto;
            width: 33.33333333%;
        }
    }
    @media (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
        h1,
        .h1 {
            font-size: 2.5rem;
        }
        h2,
        .h2 {
            font-size: 2rem;
        }
        h3,
        .h3 {
            font-size: 1.75rem;
        }
        h4,
        .h4 {
            font-size: 1.5rem;
        }
        .app-display {
            font-size: 4rem;
        }
    }
    @media (min-width: 1400px) {
        .container {
            max-width: 1320px;
        }
    }
}