/* ========================================================================
   GaliVue V5.1.81 — MOBILE SHELL / AUTH VIEWPORT CORRECTION
   Presentation-only patch.

   Scope:
   - compact authenticated public header on phones;
   - preserve language + hamburger access;
   - keep the existing photographer bottom navigation as the app navigation;
   - keep the active-project Save & leave bar project-scoped;
   - place public login/signup/reset/verification surfaces below the fixed
     public header and remove dark mobile gutters.

   No route, auth, D1, R2, Stripe, Resend, project, selection or delivery
   business logic is changed by this stylesheet.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Stable public phone header for every localized homepage. V5.1.80's shell
   was present on the English home first; this repeats only the header geometry
   here so EN / FR / ES / DE share the same language + menu controls.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  body.gvf-homepage-v5171 .marketing-header{
    width:calc(100% - 16px)!important;
    max-width:none!important;
    left:50%!important;
    right:auto!important;
    top:6px!important;
    transform:translateX(-50%)!important;
    min-height:96px!important;
    padding:8px 10px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:38px 38px!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:6px!important;
    overflow:visible!important;
  }
  body.gvf-homepage-v5171 .marketing-header .brand{
    grid-column:1!important;grid-row:1!important;margin:0!important;min-width:0!important;
  }
  body.gvf-homepage-v5171 .marketing-header .brand img{
    display:block!important;width:auto!important;height:30px!important;max-width:112px!important;
  }
  body.gvf-homepage-v5171 .marketing-header .desktop-nav{display:none!important}
  body.gvf-homepage-v5171 .marketing-header .marketing-header-actions{display:contents!important}
  body.gvf-homepage-v5171 .marketing-header .header-language-switcher{
    display:inline-flex!important;grid-column:2!important;grid-row:1!important;justify-self:end!important;
    min-width:52px!important;height:34px!important;padding:4px 6px!important;border-radius:999px!important;
    background:#fff!important;border:1px solid rgba(17,17,17,.10)!important;box-shadow:none!important;
  }
  body.gvf-homepage-v5171 .marketing-header .header-language-switcher .language-globe{display:none!important}
  body.gvf-homepage-v5171 .marketing-header .header-language-switcher select{
    display:block!important;max-width:48px!important;min-width:42px!important;padding:2px 12px 2px 1px!important;
    font-size:.67rem!important;font-weight:900!important;line-height:1!important;
  }
  body.gvf-homepage-v5171 .marketing-header .menu-button{
    display:block!important;grid-column:3!important;grid-row:1!important;justify-self:end!important;
    width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;padding:0!important;margin:0!important;
  }
  body.gvf-homepage-v5171 .marketing-header .public-auth-actions{
    grid-column:1 / 4!important;grid-row:2!important;display:grid!important;
    grid-template-columns:minmax(88px,.7fr) minmax(0,1.3fr)!important;gap:7px!important;width:100%!important;min-width:0!important;
  }
  body.gvf-homepage-v5171 .marketing-header .header-login:not(.hidden),
  body.gvf-homepage-v5171 .marketing-header .header-dashboard:not(.hidden),
  body.gvf-homepage-v5171 .marketing-header .header-cta:not(.hidden){
    width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;padding:0 9px!important;margin:0!important;
    border-radius:11px!important;font-size:clamp(.67rem,2.8vw,.76rem)!important;line-height:1.05!important;
    white-space:normal!important;text-align:center!important;display:flex!important;align-items:center!important;justify-content:center!important;
  }
  body.gvf-homepage-v5171 .marketing-header .header-login,
  body.gvf-homepage-v5171 .marketing-header .header-dashboard{border:1px solid rgba(17,17,17,.10)!important;background:#fff!important}
  body.gvf-homepage-v5171 .marketing-header .header-cta{border:1px solid #9ed400!important;background:#c8ff3d!important;color:#111!important;box-shadow:none!important}
  body.gvf-homepage-v5171 .marketing-page{padding-top:112px!important}
}

/* ------------------------------------------------------------------------
   Authenticated public shell: on a phone the bottom app nav is the primary
   photographer navigation. Do not spend a second header row on Dashboard +
   avatar. Dashboard/profile remain reachable from the hamburger/app shell.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header{
    width:calc(100% - 16px)!important;
    min-height:58px!important;
    height:auto!important;
    padding:8px 10px!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:40px!important;
    row-gap:0!important;
    column-gap:8px!important;
    overflow:visible!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .brand{
    grid-column:1!important;
    grid-row:1!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .brand img{
    height:29px!important;
    max-width:108px!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .header-language-switcher{
    grid-column:2!important;
    grid-row:1!important;
    justify-self:end!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .menu-button{
    grid-column:3!important;
    grid-row:1!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .public-auth-actions{
    display:none!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-page{
    padding-top:72px!important;
  }

  /* V5.1.108 — authenticated mobile Dashboard header ownership.
     V5.1.85 already hides the public marketing header whenever Dashboard is
     visibly open. The old V5.1.81 rule below used to hide the workspace header
     as well and reserve public-header padding. On a hard refresh/account-return
     that produced an empty top band because both headers were hidden.

     Dashboard now owns its phone header consistently. Do not hide .workspace-head
     and do not reserve space for the public header while Dashboard is open. */
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171
    #dashboardDialog:not(.hidden) #dashboardPanel .gv39-dashboard-main{
    padding-top:0!important;
  }
}

@media (max-width:380px){
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header{
    width:calc(100% - 12px)!important;
    padding-inline:8px!important;
  }
  html[data-galivue-auth-state="authenticated"] body.gvf-homepage-v5171 .marketing-header .brand img{
    height:27px!important;
    max-width:100px!important;
  }
}

/* ------------------------------------------------------------------------
   Project context bar: it must never leak into Dashboard / Quick Links.
   The existing project-mode workflow remains unchanged and may show it.
   ------------------------------------------------------------------------ */
@media (max-width:767px){
  #dashboardPanel:not(.project-mode) #activeProjectTopbar,
  #dashboardPanel:not(.project-mode) .gv399-active-project-topbar{
    display:none!important;
  }
  #dashboardPanel.project-mode #activeProjectTopbar.hidden,
  #dashboardPanel.project-mode .gv399-active-project-topbar.hidden{
    display:none!important;
  }
}

/* ------------------------------------------------------------------------
   Public authentication surfaces on phones.

   The public header intentionally sits above app modals (hero CSS gives it a
   high z-index). Therefore auth forms need a real viewport region below that
   header rather than starting at y=0 underneath it.
   ------------------------------------------------------------------------ */
@media (max-width:700px){
  body.gvf-homepage-v5171 #loginDialog:not(.hidden),
  body.gvf-homepage-v5171 #signupDialog:not(.hidden),
  body.gvf-homepage-v5171 #verifyEmailDialog:not(.hidden),
  body.gvf-homepage-v5171 #resetPasswordDialog:not(.hidden){
    inset:calc(var(--gv-public-header-h,96px) + var(--gv-public-header-top,6px) + 6px) 0 0 0!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    place-items:start stretch!important;
    align-items:start!important;
    justify-items:stretch!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    background:#f7f4ed!important;
  }

  body.gvf-homepage-v5171 #loginDialog:not(.hidden) > .login-panel,
  body.gvf-homepage-v5171 #signupDialog:not(.hidden) > .login-panel,
  body.gvf-homepage-v5171 #verifyEmailDialog:not(.hidden) > .login-panel,
  body.gvf-homepage-v5171 #resetPasswordDialog:not(.hidden) > .login-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100%!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:22px max(20px,env(safe-area-inset-right)) calc(42px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
    background:#f7f4ed!important;
  }

  body.gvf-homepage-v5171 #loginDialog .dialog-head,
  body.gvf-homepage-v5171 #signupDialog .dialog-head,
  body.gvf-homepage-v5171 #verifyEmailDialog .dialog-head,
  body.gvf-homepage-v5171 #resetPasswordDialog .dialog-head{
    position:static!important;
    top:auto!important;
    padding:2px 0 14px!important;
    margin:0!important;
    background:transparent!important;
  }

  body.gvf-homepage-v5171 #loginDialog .dialog-head h2,
  body.gvf-homepage-v5171 #signupDialog .dialog-head h2,
  body.gvf-homepage-v5171 #verifyEmailDialog .dialog-head h2,
  body.gvf-homepage-v5171 #resetPasswordDialog .dialog-head h2{
    font-size:clamp(1.7rem,8vw,2.15rem)!important;
    line-height:1.02!important;
  }

  body.gvf-homepage-v5171 #loginDialog .login-help,
  body.gvf-homepage-v5171 #signupDialog .login-help,
  body.gvf-homepage-v5171 #verifyEmailDialog .login-help,
  body.gvf-homepage-v5171 #resetPasswordDialog .login-help{
    margin-top:0!important;
  }

  /* iOS must not zoom the viewport when an input receives focus. */
  body.gvf-homepage-v5171 #loginDialog input,
  body.gvf-homepage-v5171 #loginDialog select,
  body.gvf-homepage-v5171 #signupDialog input,
  body.gvf-homepage-v5171 #signupDialog select,
  body.gvf-homepage-v5171 #verifyEmailDialog input,
  body.gvf-homepage-v5171 #resetPasswordDialog input{
    font-size:16px!important;
  }
}

/* Keep the public logged-out two-row header clean at the very narrow edge. */
@media (max-width:360px){
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .header-language-switcher{
    min-width:50px!important;
    padding-inline:4px!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .menu-button{
    width:36px!important;
    min-width:36px!important;
  }
}

/* Preserve V5.1.80's wider-phone/small-tablet single-row public header. */
@media (min-width:601px) and (max-width:700px){
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header{
    min-height:64px!important;
    grid-template-columns:auto 1fr!important;
    grid-template-rows:48px!important;
    padding:7px 12px 7px 16px!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .brand{
    grid-column:1!important;grid-row:1!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .marketing-header-actions{
    display:flex!important;grid-column:2!important;grid-row:1!important;justify-content:flex-end!important;gap:6px!important;min-width:0!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .header-language-switcher,
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .menu-button,
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .public-auth-actions{
    grid-column:auto!important;grid-row:auto!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .public-auth-actions{
    display:flex!important;width:auto!important;gap:5px!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .header-login:not(.hidden),
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-header .header-cta:not(.hidden){
    width:auto!important;height:38px!important;min-height:38px!important;white-space:nowrap!important;
  }
  html[data-galivue-auth-state="logged-out"] body.gvf-homepage-v5171 .marketing-page{padding-top:78px!important}
}