/* Hidden means hidden everywhere, including iOS Safari. This prevents empty toast/modal
   containers from rendering as floating shapes before their content is ready. */
[hidden]{display:none!important}

html{scrollbar-gutter:stable}

.brand-button{
  width:108px;
  height:88px;
  min-height:88px;
  display:block;
  position:relative;
  padding:0;
  overflow:visible;
  flex:0 0 108px;
}

.brand-logo-img{
  position:absolute;
  left:0;
  top:50%;
  width:108px;
  height:auto;
  display:block;
  object-fit:contain;
  object-position:left center;
  transform:translateY(-50%);
  pointer-events:none;
  user-select:none;
  transition:opacity .16s ease;
}

.brand-logo-light{opacity:1}
.brand-logo-dark{opacity:0}
html[data-theme="dark"] .brand-logo-light{opacity:0}
html[data-theme="dark"] .brand-logo-dark{opacity:1}

.site-header{
  min-height:94px;
  padding:3px 0;
  isolation:isolate;
  background:transparent;
  border-bottom:0;
}
.site-header::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  pointer-events:none;
}

/* These controls have permanent homes elsewhere. Never flash old header controls on refresh. */
#themeToggle,#affiliateAdminBtn,#guestResumeBtn{display:none!important}

.theme-toggle .sun{
  color:#F5B800;
  font-size:20px;
  line-height:1;
  text-shadow:0 0 10px rgba(245,184,0,.18);
  font-family:"Segoe UI Symbol","Apple Color Emoji","Segoe UI Emoji",sans-serif;
}
.theme-toggle .moon{font-size:19px;line-height:1}

.demo-flag{
  display:inline-block;
  width:30px;
  height:20px;
  flex:0 0 30px;
  font-size:0!important;
  line-height:0;
  border-radius:2px;
  background:url('/flags/es.svg') center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(16,33,59,.10);
}

@media (min-width:900px){
  .home-hero h1{
    font-size:clamp(4.5rem,5.7vw,5.75rem);
    line-height:.90;
    max-width:475px;
    margin-top:18px;
  }
  .home-hero h1 br{display:none}
  .home-hero h1 span{margin-left:.13em}
}

@media (max-width:820px){
  .site-header{min-height:94px;padding:3px 0}
  .brand-button{
    width:96px;
    height:88px;
    min-height:88px;
    flex-basis:96px;
  }
  .brand-logo-img{width:96px}
}
@media (max-width:410px){
  .brand-button{width:90px;flex-basis:90px}
  .brand-logo-img{width:90px}
}

/* Retired homepage treatments must stay retired even if an older document is loaded. */
.home-v3 .home-hero::before{
  content:none!important;
  background:none!important;
  background-image:none!important;
}
.home-v3 .hero-travel-art,
.home-v3 .hero-travel-art::before,
.home-v3 .hero-travel-art::after,
.home-v3 .hero-handnote,
.home-v3 .home-jump-cards{
  display:none!important;
  visibility:hidden!important;
  content:none!important;
}

/* Defensive iOS layout guard: the mobile trip form must size to its own content, never
   inherit the desktop matched-column height or a stale cached grid row size. */
@media(max-width:820px){
  .home-v3 .value-action-grid{
    align-items:start!important;
    grid-auto-rows:auto!important;
  }
  .home-v3 .prompt-card{
    align-self:auto!important;
    height:auto!important;
    min-height:0!important;
  }
}

/* Final desktop prompt geometry lives in blocking first-paint CSS. This prevents the prompt
   shrinking after refresh and removes the empty gap beneath What we know. */
@media(min-width:821px){
  html body #introView.home-v3 .prompt-card{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }
  html body #introView.home-v3 .prompt-card #tripPrompt{
    flex:1 1 210px!important;
    height:auto!important;
    min-height:210px!important;
    resize:none!important;
  }
  html body #introView.home-v3 .prompt-card .completeness{
    margin-top:10px!important;
    flex:0 0 auto!important;
  }
  html body #introView.home-v3 .prompt-card .prompt-footer{
    margin-top:10px!important;
    padding-top:0!important;
  }
}

/* Guest appearance control is a true pill switch: sun on the left, moon on the right. */
.pm-guest-theme{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:3px!important;
  border:1px solid var(--border)!important;
  border-radius:999px!important;
  background:var(--surface-2)!important;
}
.pm-guest-theme button{
  min-height:38px!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:0!important;
}
.pm-guest-theme button::before{font-size:1.05rem;line-height:1}
.pm-guest-theme button[data-theme-choice="light"]::before{content:"☀️"}
.pm-guest-theme button[data-theme-choice="dark"]::before{content:"🌙"}
.pm-guest-theme button.active{
  background:var(--surface)!important;
  box-shadow:0 2px 8px rgba(11,45,107,.10)!important;
}
.pm-guest-continue-list{
  width:100%;min-height:42px;margin:0 0 9px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface-2);color:var(--text);font:inherit;font-size:.72rem;font-weight:850;cursor:pointer
}

#introView{--home-section-gap:clamp(46px,7vw,72px)}
.site-footer{margin-top:var(--home-section-gap);padding:28px 0 4px;border-top:1px solid var(--border)}
.site-footer-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.footer-brand{display:flex;align-items:center;gap:13px;min-width:0}
.footer-brand-logo{width:96px;height:auto;display:block}
.footer-copy strong{display:block;font-size:.88rem}
.footer-copy span{display:block;color:var(--muted);font-size:.75rem;margin-top:4px;line-height:1.45}
.footer-links{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px 15px;max-width:520px}
.footer-links a{color:var(--muted);font-size:.76rem;font-weight:750;text-decoration:none}
.footer-links a:hover{color:var(--blue)}
.footer-bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:22px;padding-top:17px;border-top:1px solid color-mix(in srgb,var(--border) 75%,transparent);color:var(--muted);font-size:.7rem}
html[data-theme="dark"] .footer-brand-logo{filter:none}

@media(max-width:640px){
  #introView{--home-section-gap:40px}
  .site-footer{padding-top:22px}
  .site-footer-inner{display:grid;gap:18px}
  .footer-brand-logo{width:84px}
  .footer-links{justify-content:flex-start;gap:10px 14px}
  .footer-bottom{display:grid;gap:5px;margin-top:18px}
}