/* ============================================================================
   Bionimal responsive overrides.
   MUST load LAST (after every per-screen stylesheet) so these equal-specificity
   rules win the cascade. The base styles (components.css + per-screen files)
   are intrinsically fluid — min(…,100%) card widths, clamp() type, an auto-fill
   pet grid — so this file only handles the small-screen ergonomics that remain.
   Suffix attribute selectors ([class$="-root"]) cover every screen at once;
   shared classes are ordered FIRST in markup so the legacy suffix class stays
   last in the class attribute and these selectors keep matching.
   ============================================================================ */

/* ---- Safety: never clip a screen; grow + scroll instead (any orientation).
   :not() lifts specificity to (0,2,0) so this wins over any base rule. ---- */
[class$="-root"]:not(.dashboard-root){
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;   /* dynamic viewport height: excludes the mobile URL bar */
    overflow-y: auto;
}

/* ---- Phones / portrait ---- */
@media only screen and (max-width: 600px){

    /* Tighter card padding on small screens. */
    .auth-card{
        padding: 22px 18px;
    }

    /* Full-width CTAs inside cards read better than centered pills. */
    .auth-card .btn{
        width: 100%;
    }
    .upload-actions{
        flex-direction: column;
    }

    /* Home CTAs stack. */
    .home-cta{
        width: 100%;
    }

    /* Dashboard header: keep the brand, let actions wrap below if needed. */
    .dashboard-header{
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .dashboard-brand{
        height: 32px;   /* ≈78px wide — stays above the 75px wordmark minimum */
    }
    .dashboard-actions{
        gap: 8px;
    }

    /* Tools row wraps so "Add a pet" never overflows. */
    .tools-section{
        flex-wrap: wrap;
    }
}