/* Shared shell baseline styles: navbar and touch-target accessibility */
.navbar.bg-primary {
    background-color: #0b2742 !important;
}

.navbar {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 42px;
}

:root {
    --shell-main-padding-block-start: 1rem;
    --shell-main-padding-block-end: 1.5rem;
    --shell-main-padding-inline: 0.75rem;
    --shell-content-max-width: 980px;
    --shell-action-gap: 0.625rem;
    --shell-touch-target-min: 44px;
    --shell-touch-target-comfortable: 48px;
    --shell-fluid-title-min: 1.45rem;
    --shell-fluid-title-max: 2.1rem;
    --shell-fluid-body-min: 0.98rem;
    --shell-fluid-body-max: 1.16rem;
}

.shell-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.shell-main {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding-top: var(--shell-main-padding-block-start);
    padding-bottom: var(--shell-main-padding-block-end);
    padding-inline: var(--shell-main-padding-inline);
    overflow-x: clip;
}

.shell-main--center {
    display: flex;
    justify-content: center;
}

.shell-main--fill {
    display: flex;
    flex-direction: column;
}

.shell-main-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.shell-main > *,
.shell-main-grid > *,
.shell-scroll-y > * {
    min-width: 0;
}

.shell-height-full {
    height: 100%;
}

.shell-card-full {
    height: 100%;
    max-height: 100%;
}

.shell-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
}

.shell-content-max {
    width: min(var(--shell-content-max-width), 100%);
    margin-inline: auto;
    min-width: 0;
}

.shell-fluid-title {
    font-size: clamp(
        var(--shell-fluid-title-min),
        1.9vw + 1rem,
        var(--shell-fluid-title-max)
    );
    line-height: 1.15;
}

.shell-fluid-body {
    font-size: clamp(
        var(--shell-fluid-body-min),
        1vw + 0.78rem,
        var(--shell-fluid-body-max)
    );
    line-height: 1.6;
}

.shell-action-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--shell-action-gap);
    width: 100%;
    min-width: 0;
}

.shell-action-wrap > * {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.shell-action-wrap .btn,
.shell-action-wrap .button,
.shell-action-wrap [role='button'] {
    min-height: var(--shell-touch-target-min);
    min-width: var(--shell-touch-target-min);
    max-width: 100%;
}

.shell-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--shell-action-gap);
    min-width: 0;
}

.shell-nav-actions > * {
    min-width: 0;
}

.shell-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.shell-modal-scroll {
    max-height: min(70vh, calc(100dvh - 8rem));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.shell-long-text {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.shell-overflow-guard {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
}

.shell-form-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--shell-action-gap);
    width: 100%;
    min-width: 0;
}

.shell-form-grid > * {
    min-width: 0;
}

.shell-form-grid .form-control,
.shell-form-grid .form-select,
.shell-form-grid .form-range,
.shell-form-grid textarea {
    max-width: 100%;
}

.shell-modal-body {
    min-height: 0;
    overflow-x: hidden;
}

.shell-table-scroll table {
    min-width: max(100%, 22rem);
}

@media (width < 992px) {
    :root {
        --shell-main-padding-block-start: 0.75rem;
        --shell-main-padding-block-end: 1rem;
        --shell-main-padding-inline: 0.625rem;
        --shell-action-gap: 0.5rem;
        --shell-fluid-title-min: 1.3rem;
        --shell-fluid-title-max: 1.75rem;
        --shell-fluid-body-min: 0.95rem;
        --shell-fluid-body-max: 1.04rem;
    }

    .shell-action-wrap > * {
        flex: 1 1 calc(50% - var(--shell-action-gap));
    }

    .navbar .container-fluid {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .shell-nav-actions {
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .shell-nav-actions .btn,
    .shell-nav-actions .nav-link,
    .shell-nav-actions [role='button'] {
        min-height: var(--shell-touch-target-min);
    }

    .shell-form-grid > * {
        flex: 1 1 calc(50% - var(--shell-action-gap));
    }

    .shell-form-grid .shell-form-grid-wide,
    .shell-form-grid .shell-table-scroll,
    .shell-form-grid .shell-modal-scroll {
        flex: 1 1 100%;
    }
}

@media (width < 576px) {
    :root {
        --shell-main-padding-inline: 0.5rem;
    }

    .shell-action-wrap > * {
        flex: 1 1 100%;
    }

    .shell-action-wrap .btn,
    .shell-action-wrap .button {
        width: 100%;
        justify-content: center;
    }

    .shell-nav-actions > * {
        flex: 1 1 calc(50% - var(--shell-action-gap));
    }

    .shell-nav-actions .form-check,
    .shell-nav-actions .navbar-text {
        flex: 1 1 100%;
    }

    .shell-nav-actions .btn,
    .shell-nav-actions .nav-link {
        width: 100%;
        justify-content: center;
    }

    .shell-form-grid > * {
        flex: 1 1 100%;
    }

    .shell-modal-scroll {
        max-height: min(72vh, calc(100dvh - 6rem));
    }
}

@media (pointer: coarse) {
    .shell-action-wrap .btn,
    .shell-action-wrap .button,
    .shell-action-wrap [role='button'],
    .u-touch-target,
    .u-touch-target-comfortable {
        min-width: var(--shell-touch-target-comfortable);
        min-height: var(--shell-touch-target-comfortable);
    }

    .navbar .btn,
    .navbar .nav-link,
    .navbar .navbar-brand,
    .footer .btn,
    .question-status-panel button,
    .image-navigation .nav-btn,
    [role='button'] {
        min-width: 44px;
        min-height: 44px;
    }

    .form-check-input,
    .footer .form-check-input {
        min-width: 44px;
        min-height: 24px;
    }
}