/**
 * Responsive layer (Sprint U1). The base rules in reset/layout/components are
 * mobile-first (designed for a phone); these media queries progressively
 * enhance the layout for larger phones and tablets. No horizontal scrolling
 * at any width — wide content (tables) scrolls inside its own container.
 */

/* Larger phones: reveal the sync indicator's text label next to its dot. */
@media (min-width: 400px) {
    .sync__label {
        display: inline;
    }
}

/* Tablets and up. */
@media (min-width: 700px) {
    .container {
        padding: var(--sp-8) var(--sp-6) var(--sp-10);
    }

    .app-header {
        padding-left: var(--sp-6);
        padding-right: var(--sp-6);
    }

    .app-header__title {
        font-size: var(--fs-lg);
    }

    .page-title {
        font-size: var(--fs-2xl);
    }

    .brand-lockup__logo {
        height: 124px;
    }
}

/* Wide screens: keep the history table readable but never full-bleed. */
@media (min-width: 1000px) {
    .table {
        font-size: var(--fs-md);
    }
}

/* Respect reduced-motion preferences (accessibility). */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}