/* =========================================================================
   Metro AI Publishing Factory — Responsive (responsive.css)
   Mobile-first refinements. Base styles target small screens; these
   rules enhance layout from tablet upward and tidy up tiny screens.
   ========================================================================= */

/* ---------- Tablet and below ---------- */
@media (max-width: 900px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .auth-card { grid-template-columns: 1fr; max-width: 440px; }
    .auth-card__art { display: none; }
}

@media (max-width: 720px) {
    :root { --header-height: 60px; }

    .app-header__inner { gap: var(--space-2); }
    .brand__tag { display: none; }

    /* Move compact nav to the bottom as a segmented bar */
    .app-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 45;
        margin: 0;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));
        background: rgba(255, 253, 247, 0.96);
        border-top: 1px solid var(--color-border);
        backdrop-filter: blur(8px);
    }
    .app-nav__link { flex-direction: column; gap: 2px; font-size: 0.72rem; padding: var(--space-2) var(--space-4); }
    .app-main { padding-bottom: 96px; }

    .account-chip__name { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .form-actions { flex-direction: column-reverse; }
    .form-actions .btn { width: 100%; }

    .page-head { align-items: flex-start; }
    .cover-preview { grid-template-columns: 100px 1fr; }
}

/* ---------- Mobile (small) ---------- */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .stat-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
    .stat-card { padding: var(--space-4); }
    .stat-card__value { font-size: 1.5rem; }
    .auth-card__body { padding: var(--space-6) var(--space-5); }
    .form-section { padding: var(--space-4); }
    .page-card { grid-template-columns: 64px 1fr; }
}

/* ---------- Very small (320px) ---------- */
@media (max-width: 360px) {
    .container { padding: 0 var(--space-3); }
    .stat-grid { grid-template-columns: 1fr; }
    .app-nav__link span { font-size: 0.68rem; }
}