/* Packminder homepage final visual layer.
   Kept fail-safe so core homepage content remains visible even if an enhancement script is delayed. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{overflow-x:hidden}

/* Header geometry is fixed from the first paint. Runtime code may change account state,
   but it must never change spacing, height, padding or button positions. */
.header-actions{
  position:relative;
  min-height:40px;
  padding-right:99px;
  box-sizing:border-box;
}
.header-actions #networkBadge{order:0}
.header-actions #authBtn{
  order:1;
  width:70px!important;
  min-width:70px!important;
  max-width:70px!important;
  min-height:40px!important;
  height:40px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.header-actions #resetBtn{
  order:2;
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  width:86px!important;
  min-width:86px!important;
  max-width:86px!important;
  min-height:40px!important;
  height:40px!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.header-actions #profileSettingsBtn{order:3}
#themeToggle{display:none!important}

/* The real Profile button uses the exact same geometry as the pre-runtime placeholder. */
.pm-everyone-profile{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:94px!important;
  min-width:94px!important;
  max-width:94px!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;
  padding:0 9px!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  color:var(--text)!important;
  font:inherit!important;
  font-size:.78rem!important;
  font-weight:900!important;
  white-space:nowrap!important;
  box-shadow:0 4px 14px rgba(13,43,86,.05)!important;
  z-index:3!important;
}
.pm-everyone-profile-icon{
  width:22px!important;
  min-width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  overflow:hidden!important;
  flex:0 0 22px!important;
}
.pm-everyone-profile-icon img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}

/* A visual Profile placeholder occupies the final slot before profile JavaScript arrives.
   The real button overlays this exact slot, so Safari has nothing to reflow. */
.header-actions::after{
  content:"👤  Profile";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:94px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 4px 14px rgba(13,43,86,.05);
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
  box-sizing:border-box;
  pointer-events:none;
  z-index:1;
}

#authBtn:not(.pm-profile-trigger):not([data-profile-shadowed="1"]){font-size:0!important;white-space:nowrap}
#authBtn:not(.pm-profile-trigger):not([data-profile-shadowed="1"])::after{content:"Sign up";font-size:.78rem;font-weight:inherit}
#resetBtn{font-size:0!important;white-space:nowrap}
#resetBtn::after{content:"Start again";font-size:.78rem;font-weight:inherit}

/* One stable no-sign-up note beside the suitcase. The suitcase itself is disabled by hero-photo.css. */
.home-v3 .hero-handnote{display:none!important}
.home-v3 .hero-travel-art::before{
  content:"No sign up required";
  position:absolute;
  left:-52px;
  top:39px;
  z-index:7;
  width:112px;
  pointer-events:none;
  color:color-mix(in srgb,var(--text) 74%,var(--blue));
  font-size:.76rem;
  line-height:1.22;
  font-weight:800;
  font-style:italic;
  letter-spacing:-.015em;
  text-align:center;
  transform:rotate(-4deg);
  white-space:normal;
  box-sizing:border-box;
  text-decoration-line:underline;
  text-decoration-color:var(--coral,#FF6B5B);
  text-decoration-thickness:1.2px;
  text-underline-offset:4px;
  text-decoration-skip-ink:none;
}
.home-v3 .hero-travel-art::after{content:none!important;display:none!important}

.home-v3 .hero-preview-card .demo-trip-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.home-v3 .hero-preview-card .demo-trip-title{min-width:0!important;flex:1 1 auto!important}
.home-v3 .hero-preview-card .demo-trip-meta-right{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:9px!important;
  margin-left:auto!important;
  flex:0 0 auto!important;
}

/* Higher specificity than the later demo script so the weather size stays flag-height. */
html body .home-v3 .hero-preview-card .demo-weather-mini{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-height:24px!important;
  color:#17304f!important;
  font-size:1.18rem!important;
  font-weight:900!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html body .home-v3 .hero-preview-card .demo-weather-mini-icon{
  display:inline-block!important;
  font-size:1.35rem!important;
  line-height:1!important;
}

/* Important reliability rule: never hide the whole demo while waiting for JavaScript.
   The original HTML demo remains fully usable until home-v4 replaces it. */
.home-v3 #interactiveDemo{visibility:visible!important}

@media(max-width:820px){
  /* Restore the larger logo/header that was previously shown on mobile, but make it part of
     first-paint CSS so it does not resize after JavaScript loads. */
  .site-header{min-height:94px!important;gap:7px!important}
  #brandHomeBtn.brand-button{
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:88px!important;
    min-height:88px!important;
    flex:0 0 96px!important;
    padding:0!important;
    overflow:visible!important;
  }
  #brandHomeBtn .brand-logo-img{
    inset:auto!important;
    left:0!important;
    top:50%!important;
    width:96px!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    transform:translateY(-50%)!important;
    object-fit:contain!important;
    object-position:left center!important;
  }

  .header-actions{
    min-height:40px!important;
    padding-right:99px!important;
    gap:5px!important;
    min-width:0!important;
    flex:0 0 auto!important;
  }
  .header-actions #authBtn{
    width:70px!important;min-width:70px!important;max-width:70px!important;
    min-height:40px!important;height:40px!important;padding:0!important;
  }
  .header-actions #resetBtn{
    display:inline-flex!important;visibility:visible!important;opacity:1!important;
    width:82px!important;min-width:82px!important;max-width:82px!important;
    min-height:40px!important;height:40px!important;padding:0!important;
  }
  .header-actions::after{width:94px;height:40px;font-size:.7rem}
  .pm-everyone-profile{
    width:94px!important;min-width:94px!important;max-width:94px!important;
    height:40px!important;min-height:40px!important;padding:0 8px!important;
    gap:5px!important;font-size:.7rem!important;
  }
  .pm-everyone-profile-icon{width:21px!important;min-width:21px!important;height:21px!important;flex-basis:21px!important;font-size:.75rem!important}
  #authBtn:not(.pm-profile-trigger):not([data-profile-shadowed="1"])::after{font-size:.7rem}
  #resetBtn::after{font-size:.69rem}

  .home-v3 .hero-travel-art::before{
    left:-58px;
    top:34px;
    width:70px;
    font-size:.56rem;
    line-height:1.22;
    text-align:center;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
  }
  .home-v3 .hero-preview-card .demo-trip-meta-right{gap:7px!important}
  html body .home-v3 .hero-preview-card .demo-weather-mini{
    min-height:22px!important;
    font-size:1.08rem!important;
    gap:4px!important;
  }
  html body .home-v3 .hero-preview-card .demo-weather-mini-icon{
    font-size:1.28rem!important;
  }

  /* Prevent iOS Safari focus-zoom from making refreshes look randomly enlarged. */
  .home-v3 input,
  .home-v3 textarea,
  .home-v3 select{font-size:16px!important}
}

@media(max-width:390px){
  #brandHomeBtn.brand-button{width:90px!important;min-width:90px!important;max-width:90px!important;flex-basis:90px!important}
  #brandHomeBtn .brand-logo-img{width:90px!important}
  .header-actions{padding-right:93px!important;gap:4px!important}
  .header-actions #authBtn{width:62px!important;min-width:62px!important;max-width:62px!important}
  .header-actions #resetBtn{display:inline-flex!important;width:74px!important;min-width:74px!important;max-width:74px!important}
  .header-actions::after{width:88px;height:40px;font-size:.66rem}
  .pm-everyone-profile{width:88px!important;min-width:88px!important;max-width:88px!important;height:40px!important;min-height:40px!important;padding:0 6px!important;font-size:.66rem!important}
  #resetBtn::after{font-size:.63rem}
  #authBtn:not(.pm-profile-trigger):not([data-profile-shadowed="1"])::after{font-size:.64rem}

  .home-v3 .hero-travel-art::before{
    left:-52px;
    top:31px;
    width:64px;
    font-size:.52rem;
  }
  .home-v3 .hero-preview-card .demo-trip-meta-right{gap:5px!important}
  html body .home-v3 .hero-preview-card .demo-weather-mini{font-size:1rem!important}
  html body .home-v3 .hero-preview-card .demo-weather-mini-icon{font-size:1.2rem!important}
}