@media screen {
    :root {
        --page-gutter: clamp(1rem, 2vw, 2rem);
    }

    /* Page containers follow the viewport; dialogs retain their own size limits. */
    .header-inner,
    .institutional-inner,
    .shell,
    .content-shell,
    body > main,
    body > header .hero {
        box-sizing: border-box;
        margin-inline: 0;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    body > main {
        padding-inline: var(--page-gutter);
    }

    .header-inner,
    .header-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .institutional-inner {
        align-items: start;
    }

    .header-inner > .top-actions,
    .institutional-inner > .top-actions {
        max-width: 100%;
    }

    .header-inner > *,
    .header-row > *,
    main .panel,
    main .card {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .header-inner > .actions,
    .header-row > .actions {
        justify-content: flex-end;
        margin-left: auto;
        max-width: 100%;
    }

    header .hero-text,
    header .hero > p,
    .institutional-footer > p {
        max-width: none;
    }

    h1,
    h2,
    h3,
    .actions,
    .btn,
    button {
        overflow-wrap: anywhere;
    }

    main .actions,
    main .actions > *,
    .panel :is(input, select, textarea),
    main form :is(input, select, textarea) {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }

    .table-wrap {
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
    }

    main img,
    main video,
    .plotly-chart,
    .chart {
        max-width: 100%;
        min-width: 0;
    }

    @media (max-width: 520px) {
        .grid,
        .reports-grid,
        .metrics,
        .stats-grid,
        .dashboard-grid,
        .service-grid,
        .form-grid,
        .info-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .grid > *,
        .reports-grid > *,
        .metrics > *,
        .stats-grid > *,
        .dashboard-grid > *,
        .service-grid > *,
        .form-grid > *,
        .info-grid > * {
            min-width: 0;
        }
    }
}