/* Shared responsive corrections. Keep portal typography and colours unchanged. */
.content > *,
.staff-content > *,
.card,
.grid > *,
.settings-grid > *,
.access-list > *,
.wizard-wrap > *,
.wizard-grid > *,
.sg-page > *,
.ms-panel > *,
.paid-selector > *,
.paid-panel > *,
.paid-google-selected > * {
    min-width: 0;
}

/* Canvas/table intrinsic widths must not become a grid's minimum track width. */
.ms-panel,
.paid-selector,
.paid-panel,
.paid-google-selected,
.sg-page,
.wizard-wrap {
    grid-template-columns: minmax(0, 1fr);
}

.table-wrap {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
}

.table-wrap:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 3px;
}

/* Keep the chart contained while its resize observer updates the bitmap. */
.search-chart-shell canvas {
    max-width: 100%;
}

/* The Work filter has eight controls: wrap before the tablet breakpoint. */
@media (max-width: 1360px) {
    .content .wk-filter {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .content .wk-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .content :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .staff-content :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
    .panel :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .content .button,
    .staff-content .button {
        max-width: 100%;
        min-height: 44px;
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
        line-height: 1.35;
    }

    .staff-content .card-head,
    .staff-content .filter-summary {
        flex-wrap: wrap;
    }

    .staff-content .card-head > *,
    .staff-content .filter-summary > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .content .wk-filter {
        grid-template-columns: minmax(0, 1fr);
    }
}