/* ============================================================================
   MOBILE.CSS — Slenvox mobile overhaul (MOBILE-UX-PLAN.md / MOBILE-UX-PRD.md)
   ONE-WAY GLASS CONTRACT: every rule in this file lives inside a max-width
   media query. Desktop (>=1025px) computed styles can never match this file.
   LOAD ORDER CONTRACT: linked LAST in <head> on every user-facing page — wins
   all equal-specificity ties against earlier stylesheets.
   Two things intentionally BEAT this file (do not fight them here):
     1. sidebar.js's runtime-injected <style> (appended to <head> after these
        links). Drawer OPEN/CLOSE mechanics (transform/position/height) and
        #sidebarToggle visibility are owned THERE; this file owns drawer SKIN
        (width, padding, label visibility) only.
     2. review.html?render=1 (the headless overlay compositor that builds the
        FINAL video) disables this stylesheet at boot — see initRenderMode()
        in review.js. That guard must never be removed.
   ========================================================================== */

/* ============================= <=1024 — TABLET ============================ */
@media (max-width: 1024px){

    /* S1: decorative sun orbs are <body> children at right:-80px — they poke
       past the right edge at any sub-desktop width (measured: pricing
       scrollWidth 470@390px, 880@800px). Decor only; hidden below desktop. */
    .cin-sun-orb{display:none}

    /* S2: intended tablet collapses that were cascade-dead in components.css's
       1024 block (contact.css / about.css / subpages.css load later and have
       zero media queries — PRD 4.1 pattern, stress-test C12) */
    .contact-split{grid-template-columns:1fr;gap:var(--space-2xl)}
    .contact-split-visual{order:-1}
    .founder-layout{grid-template-columns:1fr;text-align:center}
    .founder-story{order:2}
    .founder-photo-wrap{order:1;justify-content:center;margin-bottom:var(--space-lg)}
    .founder-story .about-eyebrow{padding-left:0}
    .founder-story .about-eyebrow::before{display:none}
    .founder-badges{justify-content:center}
    .community-channels{grid-template-columns:repeat(2,1fr)}

}

/* ============================== <=768 — PHONE ============================= */
@media (max-width: 768px){

    /* ---- S1: public header + nav drawer ------------------------------------
       ROOT CAUSE: backdrop-filter promoted .header to containing block for the
       fixed #navLinks panel; the old .header{overflow-x:hidden} band-aid then
       clipped the open panel to the 64px header strip. A solid background
       replaces the blur on phones; the drawer is viewport-fixed again, and the
       header stacking context (panel z1050 < toggle z1100) works as designed. */
    .header{
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:rgba(12,12,12,.95);
        overflow:visible;
        /* Header sits ABOVE the (now full-screen) drawer so the logo + close-X
           stay visible and tappable instead of being sliced by the panel. */
        z-index:1060;
    }
    /* The drawer (.nav-links) is a CHILD of .header, so at full width it paints
       over the sibling logo (z-auto). Lift the logo above the drawer (z1050) but
       below the close-X toggle (z1100) so it shows in the top-left when open. */
    .header .logo{position:relative;z-index:1055}
    /* FULL-SCREEN OPAQUE DRAWER (fixes the "broken menu" on phones — both the
       logged-out Login/Sign-Up variant and the logged-in Dashboard/avatar
       variant, since both render inside this same panel):
         - was a 280px floating strip → the page bled through on the left and
           the logo was sliced. Full width + the existing opaque bg removes the
           bleed-through entirely (no separate dimming scrim needed).
         - items inherited align-items:center from the desktop nav → they floated
           dead-centre in empty space. flex-start top/left-aligns them into a
           normal vertical menu that starts just below the header. */
    .nav-links{
        width:100%;
        height:100vh;height:100dvh;
        overflow-y:auto;
        align-items:flex-start;
        justify-content:flex-start;
        padding:calc(var(--header-h) + var(--space-xl)) var(--space-xl) var(--space-2xl);
        gap:var(--space-xs);
    }
    .nav-links .nav-item{
        display:block;width:100%;
        padding:var(--space-sm) 0;
        font-size:var(--text-lg);
    }
    /* Login/Sign-Up (logged out) and Dashboard+avatar (logged in) block:
       give it breathing room below the plain links and keep it full-width. */
    .nav-links .nav-right{width:100%;margin-top:var(--space-lg);align-items:flex-start}

    /* ---- S1: app sidebar drawer --------------------------------------------
       ROOT CAUSE: the drawer opened as the 68px hover rail (base rail width
       wins over the dead 280px rule; labels opacity:0 need :hover). Rest
       state below == old hover state, so nothing on touch depends on hover.
       Open/close transform + toggle visibility stay in sidebar.js (F1). */
    .sidebar,
    .sidebar:hover{
        width:280px;
        padding:var(--space-lg);
        overflow:visible;
    }
    .sidebar .sidebar-text,
    .sidebar .sidebar-logo .logo-wordmark{opacity:1}
    .sidebar .sidebar-link,
    .sidebar .sidebar-toggle,
    .sidebar .sidebar-account-trigger{padding:.75rem var(--space-md)}
    .sidebar .sidebar-logo{padding:.75rem var(--space-md)}
    /* When the drawer is OPEN the fixed hamburger (top:12px, ~44px) sits over the
       logo. Drop the logo below it so both stay readable. Only when open, so the
       closed off-canvas rail is unaffected; .sidebar-nav is flex:1 and absorbs
       the offset, so the bottom account block stays pinned. */
    .sidebar.sidebar-mobile-open .sidebar-logo{margin-top:44px}
    /* tap-hover on tool pages must not shove .tool-content sideways */
    .tool-page.has-sidebar .sidebar:hover ~ .tool-content{margin-left:0}
    /* Logged-in tool page on mobile: the sidebar is off-canvas, so the desktop
       left-margin (= collapsed sidebar width) + wide --space-2xl side padding
       were shoving the column right and narrowing it — the uppercase button text
       ("GENERATE SEO METADATA") overflowed and clipped on both edges. Drop the
       margin and match the logged-out column's slim gutters. */
    .tool-page.has-sidebar .tool-content{
        margin-left:0;
        padding-left:var(--space-md);
        padding-right:var(--space-md);
    }

    /* ---- S2: index hero (migrated from components.css's mobile block, where
       pages/index/hero.css — loaded later — was killing it; PRD 4.1/4.4) */
    .hero{padding-top:calc(var(--header-h) + var(--space-2xl));text-align:center}
    .hero-title .line-2{display:block;overflow:hidden}
    .hero-split{grid-template-columns:1fr;gap:var(--space-2xl)}
    .hero-text{align-items:center}
    .hero-title{font-size:var(--text-hero);max-width:100%}
    .hero-subtitle{max-width:100%;margin:0 auto}
    .hero-preview-card{max-width:300px;margin:0 auto}
    .hero-prompt-box{margin:0 auto var(--space-2xl)}
    .hero-cta{flex-direction:column;width:100%}
    .hero-cta .btn{width:100%}
    /* rotating-word headings ("Built for every ___") reserve fixed widths that
       break lines awkwardly on phones */
    .hero-rotating-word{min-width:0}
    #personaSection .hero-rotating-word{width:auto}

    /* ---- S2: contact page (migrated dead rules; PRD 4.7) */
    .contact-split-form{padding:var(--space-xl)}
    .contact-cards-row{grid-template-columns:1fr}

    /* ---- S2: community (migrated dead rule) */
    .community-channels{grid-template-columns:1fr}

    /* ---- S2: pricing — belt+braces: both comparison tables already scroll in
       their own inline overflow-x:auto wrappers (#individualComparison /
       #teamComparison — do NOT double-wrap); this stops any residual page
       widening when the collapsible opens */
    .compare-content{overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* ---- S2: pricing FAQ (F3) — the accordion CSS now lives in pricing.html's
       own <style> block at ALL widths (single owner); the phone-only copy that
       was here has been removed. */

    /* ---- S3: Your Videos — the table is 6 columns (Title/Created/Duration/
       Platform/Finalize Time/Action). Keep the two that close the mobile loop:
       Title / Action (download+review; the Action text also carries status).
       Skeleton rows share the classes, so loading collapses identically. */
    .video-table th:nth-child(2),.video-table td:nth-child(2),
    .video-table th:nth-child(3),.video-table td:nth-child(3),
    .video-table th:nth-child(4),.video-table td:nth-child(4),
    .video-table th:nth-child(5),.video-table td:nth-child(5){display:none}
    #videosContainer{overflow-x:auto}
    .video-table th,.video-table td{padding:10px 8px}
    .video-table .title-cell{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    /* 44px touch minimum (measured 37px) — F8 */
    .video-table .btn{padding:.65rem 1rem;min-height:44px}

    /* ---- S3: dashboard — workspace cards were squeezing into three 90px
       columns (dashboard.css's own 1fr fix sits ABOVE its base rule in the
       same file and loses; one home is here now) */
    .dash-workspace-grid{grid-template-columns:1fr}
    .dash-welcome{flex-direction:column;align-items:flex-start;gap:var(--space-md)}
    .dash-section{padding:0 var(--space-lg) var(--space-xl)}

    /* ---- S3: create — the two fixed bars clear the (hidden) sidebar rail on
       desktop with left:68px; on phones the drawer is off-canvas, so full
       width, and the bottom bar respects the home-indicator inset */
    .cpv2-header{left:0;padding-left:64px} /* 64px clears the fixed hamburger */
    .cpv2-bottom-bar{left:0;padding-bottom:calc(28px + env(safe-area-inset-bottom))}

    /* ---- S3: desktop-only gate (D4) — brand-kits / global-assets / repurpose.
       Cosmetic only: the page (and its real auth) still loads underneath. */
    .dashboard-gated .content-area{display:none}
    /* DEVIATION (S3): repurpose.html keeps its .main-header OUTSIDE .content-area
       (a sibling), so hiding content-area alone would strand the "Promote Video"
       header above the gate card. Scoped to gated pages at <=768; brand-kits /
       global-assets have no sibling .main-header so this only affects repurpose. */
    .dashboard-gated .main-header{display:none}
    .mobile-gate-card{
        display:flex !important;    /* beats the inline display:none (F7 idiom) */
        flex-direction:column;align-items:center;justify-content:center;
        text-align:center;gap:var(--space-md);
        min-height:70vh;padding:var(--space-2xl) var(--space-lg);
    }
    .mobile-gate-card h2{font-size:var(--text-xl);font-weight:500}
    .mobile-gate-card p{color:var(--text-secondary);font-size:var(--text-sm);max-width:320px;line-height:1.6}
    .mobile-gate-card .btn{min-height:44px}
    .mobile-gate-icon{font-size:40px;opacity:.8}

    /* ---- S4: REVIEW — WATCH + FINALIZE MODE (PRD D1/D2; guardrails G-1..G-7)
       HIDE CHROME ONLY. Never display:none the driven <video> elements,
       #playerStage, #playerContainer, #aspectFrame or #layerStack — the player
       engine drives them; fitPreview() re-fits via its ResizeObserver when the
       siblings below collapse. The render page (review.html?render=1) never
       sees these rules (link disabled in initRenderMode — S1). */
    .panel-scenes,
    .panel-timeline,
    .resize-handle-v,
    .editor-menu-left,
    #exportWrap,
    #sceneToolbar,
    #trimPanel,
    #layerHandlesOverlay{display:none !important}

    /* full column for the player; dvh so browser chrome doesn't hide the
       controls (56px review header + 48px menu bar stay visible) */
    .review-layout{height:calc(100vh - 104px);height:calc(100dvh - 104px)}

    /* watch-only canvas: taps fall through overlay layers to the video layer,
       whose existing handler toggles play/pause (review.js ~1900); nothing
       is selectable. Overlays keep PAINTING (parity) — only hit-testing off. */
    .layer-node:not(.layer-node-video){pointer-events:none}

    /* these two overlays clear the 68px rail on desktop; no rail on phones.
       #renderVeil carries an inline left → needs !important. */
    .finalize-overlay{left:0}
    #renderVeil{left:0 !important}

    /* ready-modal: hide ONLY Promote (D2) — Download + My Videos remain */
    #repurposeBtn{display:none}

    /* header squeeze: clear the fixed hamburger; keep title on one line (px,
       not vw — G-5) */
    .review-header{padding-left:64px}
    .review-project-name{max-width:180px}
    .review-header .user-info{gap:var(--space-sm)}

    /* the "open on a larger screen" note (element added in review.html) */
    .review-mobile-note{
        display:block !important;   /* beats its inline display:none */
        padding:8px 14px;
        background:rgba(184,151,46,0.08);
        border-bottom:1px solid rgba(184,151,46,0.2);
        color:var(--text-secondary);
        font-size:12px;line-height:1.5;text-align:center;
    }

    /* ---- S4 follow-up: player bar — free the seek bar (owner, 2026-07-06).
       main.css's @media(hover:none) forces the volume slider always-open at
       80px on touch; at 390px that squeezes the flex:1 .progress-wrap (the
       real seek bar, touch-drag already wired in review.js) to ~0. Phones
       have hardware volume — hide the slider, keep the speaker tap-to-mute,
       and the seek bar expands to fill the freed space automatically. */
    .player-vol-slider{display:none}

}

/* ============================== <=480 — SMALL PHONE ======================= */
/* Placed AFTER the 768 block: these refinements must beat the 768 rules
   above (equal specificity → later wins). Migrated from components.css's 480
   block, which the hero migration above would otherwise silently defeat. */
@media (max-width: 480px){
    .section-title{font-size:var(--text-2xl)}
    .hero-title{font-size:var(--text-3xl)}
}
