/* Homescreen guest/member states. The full-screen photo is owned by background.css on body. */
.home-screen{
    padding-bottom:0;
    background:transparent
}
.home-screen::before,.home-screen::after{content:none;display:none}

.home-auth-lock{
    position:absolute;
    z-index:4;
    top:max(20px,env(safe-area-inset-top));
    left:20px;
    width:var(--control-md);
    height:var(--control-md);
    border:1px solid rgba(255,255,255,.46);
    border-radius:var(--radius-round);
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(24px) saturate(1.5) brightness(1.04);
    -webkit-backdrop-filter:blur(24px) saturate(1.5) brightness(1.04);
    box-shadow:0 10px 28px rgba(12,22,18,.14),inset 0 1px 0 rgba(255,255,255,.44);
    color:#fff;
    font-size:var(--font-lg);
    text-shadow:0 1px 8px rgba(0,0,0,.22)
}
.home-auth-lock[hidden]{display:none}
.home-brand{
    margin:0 auto;
    position:relative;
    top:0;
    animation:HomeBrandLift .82s var(--ease) 1.58s backwards
}
.home-brand__logo{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:-10px auto -6px;
    opacity:0;
    transform:translate3d(0,16px,0);
    animation:HomeBrandLogoIn .50s var(--ease) both
}
.home-brand h1{filter:drop-shadow(0 4px 2px rgba(0,0,0,.2))}
.home-brand__word{
    display:inline-block;
    font-style:normal;
    opacity:0;
    transform:translate3d(0,14px,0);
    animation:HomeBrandWordIn .52s var(--ease) both
}
.home-brand__word:nth-child(1){animation-delay:.08s}
.home-brand__word:nth-child(2){animation-delay:.34s}
.home-brand__word:nth-child(3){animation-delay:.60s}
.home-brand p{
    margin:var(--space-2) 0 0;
    font-size:var(--font-sm);
    line-height:var(--line-normal);
    letter-spacing:.06em;
    font-weight:600;
    text-transform:none;
    color:rgba(255,255,255,.92);
    opacity:0;
    animation:HomeBrandSubtitleIn .80s var(--ease) 1.08s both
}
.home-weather-link{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    width:max-content;
    max-width:100%;
    margin:var(--space-3) auto 0;
    color:#fff;
    text-decoration:none;
    text-shadow:0 1px 3px rgba(0,0,0,.45);
    font-size:var(--font-sm);
    font-weight:700;
    opacity:0;
    animation:HomeWeatherLinkIn .50s var(--ease) 2.40s both
}
.home-weather-link:hover,.home-weather-link:focus-visible{text-decoration:none}
.home-weather-link .app-icon{text-decoration:none;display:inline-block;transition:transform .18s var(--ease)}
.home-weather-link:hover .app-icon{transform:translateX(var(--space-1))}
.weather-card__forecast-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit}
@keyframes HomeWeatherLinkIn{from{opacity:0}to{opacity:1}}
.weather-card{
    opacity:1;
    top:0;
    animation:HomeGlassSurfaceIn .56s var(--ease) 1.70s backwards
}
.home-screen:has(.home-auth-root[data-home-auth="member"]) .home-brand__logo .app-brand-logo{
    animation:HomeMemberLogoSettle .58s var(--ease) 1.70s both
}
@keyframes HomeBrandLogoIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
@keyframes HomeBrandWordIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes HomeBrandSubtitleIn{from{opacity:0}to{opacity:1}}
@keyframes HomeBrandLift{from{top:200px}to{top:0}}
@keyframes HomeGlassSurfaceIn{from{opacity:0;top:14px}to{opacity:1;top:0}}
@keyframes HomeMemberLogoSettle{from{width:150px}to{width:90px}}

.home-auth-root{
    width:100%;
    margin:auto 0 0;
    padding-top:var(--space-5);
    position:relative;
    z-index:2
}
.home-auth-state[hidden]{display:none}
.home-auth-state{
    position:relative;
    opacity:1;
    transform:none
}

.home-shortcut-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-3);
    margin-top:var(--space-3)
}
.home-shortcut{
    position:relative;
    overflow:hidden;
    min-height:96px;
    padding:var(--space-3) var(--space-3);
    border:1px solid rgba(255,255,255,.62);
    border-radius:var(--radius-lg);
    background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(245,239,229,.07));
    backdrop-filter:blur(30px) saturate(1.45) brightness(1.04);
    -webkit-backdrop-filter:blur(30px) saturate(1.45) brightness(1.04);
    box-shadow:0 14px 38px rgba(13,25,20,.16),inset 0 1px 0 rgba(255,255,255,.74),inset 0 -1px 0 rgba(255,255,255,.14);
    color:#fff;
    text-shadow:0 2px 10px rgba(5,14,10,.34);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    text-align:center;
    font-size:var(--font-md);
    font-weight:700;
    transition:transform .14s cubic-bezier(.22,.8,.28,1),background .14s ease
}
button.home-shortcut{width:100%;font:inherit;cursor:pointer}
.home-shortcut:active{transform:scale(.975);background:rgba(255,255,255,.28)}
.home-shortcut>.app-icon{
    font-size:var(--font-lg);
    color:#fff;
    text-shadow:0 2px 9px rgba(5,14,10,.38);
    filter:drop-shadow(0 2px 6px rgba(5,14,10,.24))
}
.home-shortcut--wide{
    width:100%;
    min-height:80px;
    padding:var(--space-3) var(--space-4);
    display:grid;
    grid-template-columns:46px 1fr 28px;
    gap:var(--space-3);
    align-items:center;
    text-align:left
}
.home-shortcut--wide .home-shortcut__icon{
    width:var(--icon-box-md);
    height:var(--icon-box-md);
    border-radius:var(--radius-round);
    display:grid;
    place-items:center;
    background:rgba(10,22,17,.14);
    border:1px solid rgba(255,255,255,.62);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 4px 14px rgba(5,14,10,.10)
}
.home-shortcut--wide .home-shortcut__icon .app-icon{
    font-size:var(--font-lg);
    color:#fff;
    filter:drop-shadow(0 2px 6px rgba(5,14,10,.30))
}
.home-shortcut--wide .home-shortcut__label{
    font-family:var(--font-heading-family);
    font-size:var(--font-lg);
    line-height:var(--line-tight);
    font-weight:500;
    letter-spacing:-.025em;
    color:#fff;
    text-shadow:0 2px 12px rgba(5,14,10,.38)
}
.home-shortcut--wide .home-shortcut__arrow{
    justify-self:end;
    font-size:var(--font-sm);
    color:#fff;
    opacity:.92;
    text-shadow:0 2px 9px rgba(5,14,10,.36)
}
.home-shortcut--access{
    grid-template-columns:46px 1fr;
    background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(245,238,226,.08))
}
.home-auth-state--member,.home-auth-state--guest{margin-bottom:0}
.home-auth-state--guest .home-shortcut-grid{margin-top:0}
.home-registration-card{
    width:100%;
    min-height:146px;
    margin-top:var(--space-3);
    padding:18px 18px calc(18px + max(14px,env(safe-area-inset-bottom)));
    border:1px solid rgba(255,255,255,.94);
    border-top:3px solid rgba(179,110,75,.78);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:rgba(255,253,249,.98);
    backdrop-filter:blur(24px) saturate(1.12);
    -webkit-backdrop-filter:blur(24px) saturate(1.12);
    box-shadow:0 -12px 34px rgba(13,25,20,.18),inset 0 1px 0 rgba(255,255,255,.96);
    color:var(--ink);
    text-shadow:none;
    display:grid;
    grid-template-columns:50px minmax(0,1fr) 26px;
    gap:var(--space-3);
    align-items:center;
    position:relative;
    transition:transform .14s cubic-bezier(.22,.8,.28,1),background .14s ease
}
.home-registration-card:active{transform:translateY(2px);background:#fff}
button.home-registration-card{font:inherit;text-align:left;cursor:pointer}
.home-checkin-card{min-height:124px}
.home-checkin-card .home-registration-card__copy strong{font-family:var(--font-heading-family);font-size:var(--font-lg);font-weight:var(--weight-medium);letter-spacing:-.02em}

.home-registration-card__icon{
    width:var(--icon-box-lg);
    height:var(--icon-box-lg);
    border-radius:var(--radius-round);
    display:grid;
    place-items:center;
    background:#f3ebe4;
    color:var(--terracotta);
    font-size:var(--font-lg)
}
.home-registration-card__copy{display:block;min-width:0}
.home-registration-card__copy small{
    display:block;
    margin-bottom:var(--space-1);
    color:var(--terracotta);
    font-size:var(--font-sm);
    line-height:var(--line-tight);
    font-weight:var(--weight-bold);
    letter-spacing:.08em;
    text-transform:uppercase
}
.home-registration-card__copy strong{display:block;font-size:var(--font-lg);line-height:var(--line-tight)}
.home-registration-card__copy span{display:block;margin-top:var(--space-1);color:#5f6c65;font-size:var(--font-md);line-height:var(--line-normal);font-weight:var(--weight-medium)}
.home-registration-card__arrow{justify-self:end;color:var(--green);font-size:var(--font-lg)}

.home-auth-state:not([hidden]) .home-shortcut,
.home-auth-state:not([hidden]) .home-registration-card{
    opacity:1;
    top:0;
    animation:HomeGlassSurfaceIn .58s var(--ease) 1.84s backwards
}
.home-auth-state:not([hidden]) .home-shortcut:nth-child(2){animation-delay:1.90s}
.home-auth-state:not([hidden]) .home-shortcut:nth-child(3){animation-delay:1.96s}
.home-auth-state:not([hidden]) .home-shortcut:nth-child(4){animation-delay:2.02s}
.home-auth-state:not([hidden]) .home-registration-card{animation-delay:2.08s}

.home-auth-state--member .home-shortcut-grid{gap:var(--space-2);margin-top:0}
.home-auth-state--member .home-shortcut{min-height:86px}
.home-auth-state--member .home-shortcut--wide{min-height:76px}
.home-auth-state--member .home-shortcut-grid .home-shortcut>.app-icon{font-size:var(--font-lg)}
.home-auth-state--member .home-shortcut-grid .home-shortcut span{font-size:var(--font-sm)}

/* Internal returns to Home keep the settled state; a real reload recreates JS state and plays the intro again. */
.home-screen--revisit .home-brand,
.home-screen--revisit .home-brand__logo,
.home-screen--revisit .home-brand__word,
.home-screen--revisit .home-brand p,
.home-screen--revisit .weather-card,
.home-screen--revisit .home-weather-link,
.home-screen--revisit .home-auth-state:not([hidden]) .home-shortcut,
.home-screen--revisit .home-auth-state:not([hidden]) .home-registration-card{
    animation:none;
    opacity:1;
    top:0;
    transform:none
}
.home-screen--revisit:has(.home-auth-root[data-home-auth="member"]) .home-brand__logo .app-brand-logo{
    width:90px;
    animation:none
}

@media (prefers-reduced-motion:reduce){
    .home-brand,.home-brand__logo,.home-brand__word,.home-brand p,.weather-card,.home-weather-link,
    .home-auth-state:not([hidden]) .home-shortcut,
    .home-auth-state:not([hidden]) .home-registration-card{
        animation:none;
        opacity:1;
        top:0;
        transform:none
    }
    .home-screen:has(.home-auth-root[data-home-auth="member"]) .home-brand__logo .app-brand-logo{
        width:90px;
        animation:none
    }
}

@media (max-height:760px){
    .home-brand{margin-top:0}
    .home-brand__logo{margin-top:-16px;margin-bottom:-10px}
    .weather-card{margin-top:var(--space-5)}
    .home-auth-root{padding-top:var(--space-3)}
    .home-shortcut{min-height:82px;font-size:var(--font-sm)}
    .home-shortcut--wide{min-height:68px;padding:var(--space-2) var(--space-3)}
    .home-shortcut--wide .home-shortcut__icon{width:var(--icon-box-md);height:var(--icon-box-md)}
    .home-shortcut--wide .home-shortcut__label{font-size:var(--font-lg)}
    .home-auth-state--member .home-shortcut{min-height:72px}
    .home-auth-state--member .home-shortcut--wide{min-height:66px}
}


/* Home cards dock at the bottom edge without undoing the shortcut spacing.
   The card itself owns safe-area padding for gesture/navigation bars. */
.home-screen{padding-bottom:0}
.home-auth-root{margin-bottom:0}
.home-auth-state--guest,.home-auth-state--member{margin-bottom:0}
.home-auth-state--guest>.home-registration-card,
.home-auth-state--member>.home-todo-list:last-child>.home-registration-card:last-child{
    border-bottom-left-radius:0;border-bottom-right-radius:0;
}


/* Completed guests have four shortcuts but no bottom check-in/agreement card.
   Leave real breathing space beneath that final row, without changing either
   the guest check-in or the pending toilet agreement bottom docking. */
.home-auth-state--member:not(:has(.home-todo-card)){
    padding-bottom:max(calc(var(--space-8) + var(--space-6)),env(safe-area-inset-bottom));
}