/* Session 8 — mobile & tablet responsiveness. Shared by all 5 templates.
   Linked in each template's <head> AFTER the inline <style> block so that,
   at equal specificity, these rules win the cascade. */

/* 1. Fluid root font — all Tailwind text-* AND spacing are rem-based, so the
   whole UI scales: ~14px @ 320px, ~14.4px @ 430px, back to 16px @ >=768px
   (desktop and large tablets are pixel-identical to before). */
html { font-size: clamp(14px, 0.45vw + 12.5px, 16px); }

/* 2. Small screens (phones, portrait up to 640px) */
@media (max-width: 640px) {
    /* Charts: per-page inline <style> sets 250px; this link loads later, so it wins. */
    .chart-container { height: 180px; }

    /* iOS Safari auto-zooms into inputs with font-size < 16px — pin form fields. */
    input, select, textarea { font-size: 16px; }
}

/* 3. Narrow screens (phones up to 480px) */
@media (max-width: 480px) {
    /* Full-screen modal panels.
       !important required: Tailwind Play CDN injects its runtime <style> into
       <head> AFTER this <link>, so equal-specificity utilities (mx-4, max-w-lg,
       rounded-xl) would otherwise win the cascade. */
    .modal-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        max-height: 100vh;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* Login card (hand-rolled px CSS in login.html) */
    .login-container { padding: 12px; }
    .login-card { padding: 24px 20px; }
    .logo { margin-bottom: 24px; }
    .logo-icon { width: 48px; height: 48px; font-size: 22px; }
    .login-card h1 { font-size: 19px; }
}

/* 4. S17 center branding — bound the nav logo: its height is fixed (h-7)
   but an unbounded <img> keeps its intrinsic aspect ratio, so a wide center
   logo (16:1 banners are common) would overflow the sticky header — shrink-0
   forbids flex shrinking. object-contain keeps it inside on all viewports. */
.brand-logo { object-fit: contain; max-width: 160px; }
