/* Shared tablet and phone composition; loaded after ui-desktop.css. */
@media (max-width: 900px) {
    .mds-ui .icon-badge .dropdown--notifications {
        position: fixed;
        top: 72px;
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - 88px);
        max-height: calc(100dvh - 88px - env(safe-area-inset-bottom));
        grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .mds-ui .icon-badge.is-open .dropdown--notifications {
        display: grid;
    }

    .mds-ui .dropdown-notifications__header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mds-ui .dropdown-notifications__list {
        min-height: 0;
        max-height: none;
        grid-auto-rows: max-content;
        align-content: start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mds-ui .dropdown--notifications .dropdown-notifications__view-all {
        background: var(--mds-action);
        color: var(--mds-on-action);
    }

    .mds-ui
        :is(
            main,
            .layout,
            .widget,
            .card,
            .form-grid,
            .profile-form,
            .course-dashboard__main,
            .course-dashboard__side,
            .course-form__main,
            .course-form__side,
            .campaign-form-dialog__layout
        ) {
        min-width: 0;
    }

    .mds-ui :is(.actions, .section-head, .widget-header) {
        flex-wrap: wrap;
    }

    .mds-ui :is(.actions, .section-head, .widget-header) > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    body.mds-ui {
        font-size: 16px;
    }

    .mds-ui .dashboard-heading .dashboard-brand {
        display: none;
    }

    .mds-ui .layout > main {
        width: calc(100% - 16px);
        max-width: 560px;
        margin-inline: auto;
        padding: 16px 0 24px;
    }

    .mds-ui :is(main > *, .card, .widget, .form-grid, .profile-form, .list) {
        min-width: 0;
        max-width: 100%;
    }

    .mds-ui :is(.card, .widget) {
        padding: 16px 12px;
        text-align: center;
        justify-items: stretch;
    }

    /* Center summaries and card introductions, preserving full-width content. */
    .mds-ui :is(
        .course-card, .course-card__body, .module-card, .lesson-card,
        .course-module-card, .student-card, .commission-card, .asset-card,
        .upload-card, .campaign-detail-card, .campaign-overview-card,
        .campaign-content-box, .campaign-mobile-card, .auth__header
    ) {
        text-align: center;
    }

    .mds-ui :is(
        .course-card__title, .course-card__description, .commission-card__title,
        .commission-card__meta, .asset-card__title, .asset-card__meta,
        .campaign-mobile-card__title, .campaign-mobile-card__description
    ) {
        text-align: center;
    }

    .mds-ui :is(
        .course-card__meta, .course-card__tags, .commission-card__actions,
        .asset-card__actions, .section-head, .section-actions, .form-actions
    ) {
        justify-content: center;
    }

    /* Keep structured information and extended reading easy to scan. */
    .mds-ui :is(
        table, form, .lesson-content, .lesson-reader, .bible-reader,
        .bible-saved__panel, .pastoral-ai__support, .legal-card,
        .chat-list, .chat-messages, .notification-list, .error-box
    ) {
        text-align: start;
    }

    .mds-ui :is(.actions, .dashboard-heading, .section-head) {
        width: 100%;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
    }

    .mds-ui
        :is(.actions > div:first-child, .dashboard-heading > div:first-child) {
        width: 100%;
        text-align: center;
    }

    .mds-ui :is(.view-title, .dashboard-heading h1) {
        width: 100%;
        justify-content: center;
        font-size: 1.5rem;
        text-align: center;
    }

    .mds-ui :is(.actions > div > p, .dashboard-heading p) {
        margin-block: 8px 0;
        font-size: 0.9375rem;
    }

    .mds-ui :is(.btn, .view-back-button) {
        width: auto;
        max-width: 100%;
        min-height: 44px;
        height: auto;
    }

    .mds-ui
        :is(.actions, .form-actions, .course-form__actions, .filter-actions)
        > .btn,
    .mds-ui :is(.actions, .form-actions) > form {
        width: 100%;
    }

    .mds-ui :is(.form-actions, .course-form__actions, .filter-actions) {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }

    .mds-ui :is(.form-grid, .profile-form, .auth__form, .course-form) {
        width: 100%;
        text-align: start;
        justify-items: stretch;
        gap: 16px;
    }

    .mds-ui :is(.form-grid, .profile-form, .auth__form) > * {
        min-width: 0;
        max-width: 100%;
    }

    .mds-ui :is(.form-grid label, .auth__field, .hint, .form-grid p) {
        text-align: start;
    }

    .mds-ui :is(.widget-header, .admin-widget-header) {
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .mds-ui :is(.widget-header, .admin-widget-header) :is(h2, h3, p) {
        text-align: center;
        margin-inline: auto;
    }

    .mds-ui :is(.widget-header, .admin-widget-header) > :is(div, h2, h3, p) {
        width: 100%;
        min-width: 0;
    }

    .mds-ui :is(.metric-grid, .admin-summary-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .mds-ui .admin-dashboard-grid > * {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .mds-ui :is(.person-card, .commission-card) {
        padding: 16px 12px;
        gap: 12px;
        background: var(--mds-surface);
        color: var(--mds-ink);
        border: 1px solid var(--mds-border-soft);
        border-radius: var(--mds-radius-card);
    }

    .mds-ui .person-card {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
    }

    .mds-ui .person-card__body {
        width: 100%;
        min-width: 0;
        text-align: center;
        justify-items: center;
    }

    .mds-ui
        .person-card
        :is(.student-avatar, .avatar-initials, .person-card__avatar) {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .mds-ui :is(.person-card__name, .commission-card__title) {
        color: var(--mds-ink);
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
        text-transform: none;
    }

    .mds-ui
        :is(.person-card__email, .person-card__meta, .commission-card__meta) {
        color: var(--mds-muted);
        font-size: 0.875rem;
        line-height: 1.5;
    }

    .mds-ui .person-card__status {
        grid-column: 1;
        justify-self: center;
        margin: 0;
    }

    .mds-ui :is(.person-card__action-link, .commission-card__action-link) {
        min-height: 44px;
        color: var(--mds-link);
        font-size: 0.9375rem;
        font-weight: 600;
    }

    .mds-ui :is(.metric, .admin-summary-card) {
        min-height: 110px;
        padding: 14px 10px;
        text-align: center;
        align-items: center;
        justify-items: center;
        flex-direction: column;
        grid-template-columns: minmax(0, 1fr);
    }

    .mds-ui :is(.metric-label, .admin-summary-card__label) {
        font-size: 0.8125rem;
        line-height: 1.4;
        letter-spacing: normal;
        overflow-wrap: anywhere;
    }

    .mds-ui :is(.admin-summary-card strong, .metric-value) {
        font-size: 1.5rem;
        overflow-wrap: anywhere;
    }

    html body.mds-ui dialog {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
        margin: auto;
    }

    html body.mds-ui :is(.modal-header, .modal-footer, .modal-body) {
        padding: 16px 12px;
        text-align: start;
        justify-items: stretch;
    }

    .mds-ui .modal-header {
        flex-direction: row;
        justify-content: space-between;
    }

    .mds-ui .modal-header .btn {
        width: auto;
        flex: 0 0 auto;
    }

    .mds-ui .modal-footer > :is(.btn, form) {
        flex: 1 1 120px;
    }

    .mds-ui .layout > aside.is-mobile-menu-open .menu {
        max-height: calc(100dvh - 130px);
    }

    .mds-ui
        :is(
            .course-card__actions,
            .student-actions,
            .campaign-submission-actions
        ) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .mds-ui .course-card__actions .btn {
        flex: 1 1 130px;
        min-width: 0;
        max-width: none;
        height: auto;
        white-space: normal;
    }

    .mds-ui
        :is(
            .course-admin-header__description,
            .lesson-content,
            .lesson-reader,
            .bible-reader,
            .bible-saved__panel,
            .pastoral-ai__support
        ) {
        text-align: start;
        justify-items: stretch;
        overflow-wrap: anywhere;
    }

    .mds-ui :is(.auth__card, .campaign-public-card) {
        padding: 24px 16px;
        border-radius: 14px;
    }

    .mds-ui :is(.wrap, .campaign-public-wrap) {
        padding-inline: 8px;
    }

    .mds-ui :is(pre, .error-detail, .error-trace) {
        max-width: 100%;
        overflow-x: auto;
        text-align: start;
    }

    .mds-ui :is(img, video, iframe) {
        max-width: 100%;
    }

    /* Opt-in stacked table: headers remain in the accessibility tree. */
    .mds-ui .mds-table-cards {
        display: block;
        min-width: 0;
        width: 100%;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    .mds-ui .mds-table-cards thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .mds-ui .mds-table-cards tbody {
        display: grid;
        gap: 12px;
    }

    .mds-ui .mds-table-cards tbody tr {
        display: grid;
        padding: 12px;
        border: var(--mds-block-border-width) solid var(--mds-block-border);
        border-radius: var(--mds-radius-card);
        background: var(--mds-surface);
    }

    .mds-ui .mds-table-cards td {
        display: grid;
        grid-template-columns: minmax(72px, 0.35fr) minmax(0, 1fr);
        gap: 8px;
        padding: 8px 0;
        text-align: start;
        border: 0;
    }

    .mds-ui .mds-table-cards td::before {
        content: attr(data-label);
        color: var(--mds-muted);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .mds-ui .mds-table-cards td > * {
        min-width: 0;
        max-width: 100%;
    }
}