/* Reduced motion and 640px reflow. Print rules live in cu-print-sheet.css.
   FOIA letters stay on cu-clocks.css. */

/* Non-essential motion. Loading spinners stay, so a wait is still visible. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }

    .cu-loading .mud-progress-circular.mud-progress-indeterminate,
    .cu-loading .mud-progress-circular.mud-progress-indeterminate * {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }
}

/* 200% of 1280px is 640px. 400% reflow is 320px. Both sit under this cap.
   The Master Map svg keeps its own width so the tree still scrolls. */
@media (max-width: 640px) {
    .cu-shell,
    .cu-shell__main,
    .cu-shell__main > div,
    .cu-compare-page,
    .cu-compare-board,
    .cu-discuss-page,
    .cu-learn,
    .cu-fine,
    .cu-map {
        max-width: 100%;
        min-width: 0;
    }

    .cu-shell__name,
    .cu-shell__beta,
    .cu-compare-money__name,
    .cu-compare-venue__name,
    .cu-dossier-hero__name,
    .cu-dossier__seat,
    .cu-page-title {
        white-space: normal;
        overflow-wrap: anywhere;
        min-width: 0;
        max-width: 100%;
    }

    .cu-dossier-hero,
    .cu-dossier-hero--stacked {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }

    .cu-dossier-hero__photo-col,
    .cu-dossier-hero--stacked .cu-dossier-hero__photo-col {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 8rem;
    }

    .cu-shell__main p,
    .cu-shell__main h1,
    .cu-shell__main h2,
    .cu-shell__main h3,
    .cu-shell__main li,
    .cu-shell__main td,
    .cu-shell__main th,
    .cu-shell__main a,
    .cu-shell__main figcaption,
    .cu-shell__main dd,
    .cu-shell__main dt {
        overflow-wrap: anywhere;
        min-width: 0;
    }

    .cu-shell__main a.cu-faq__permalink {
        box-sizing: border-box;
        width: 44px;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }

    .cu-shell__main img,
    .cu-shell__main video,
    .cu-shell__main canvas,
    .cu-shell__main table,
    .cu-shell__main pre,
    .cu-shell__main iframe {
        max-width: 100%;
    }

    .cu-compare-board__columns,
    .cu-compare-row,
    .cu-community-boards,
    .cu-feed,
    .cu-bill-row {
        min-width: 0;
        max-width: 100%;
    }
}