/* Reusable glass surfaces */
:root{
    --glass-background:rgba(255,255,255,.58);
    --glass-background-strong:rgba(255,255,255,.70);
    --glass-background-active:rgba(255,255,255,.76);
    --glass-border:rgba(255,255,255,.88);
    --glass-shadow:0 12px 30px rgba(20,29,25,.12),inset 0 1px 0 rgba(255,255,255,.82);
    --glass-blur:32px;
}

/* Prime only the Home glass surfaces themselves for the first compositor pass.
 * Keep the hint off .app-shell so descendants can keep sampling the body-level background. */
.home-auth-lock,
.home-action,
.home-shortcut,
.home-screen .weather-card,
body[data-page="home"] .app-menu-trigger--glass{
    will-change:backdrop-filter
}

.app-glass-panel,
.home-action,
.weather-card{
    background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,255,255,.48));
    border:1px solid var(--glass-border);
    box-shadow:var(--glass-shadow);
    backdrop-filter:blur(var(--glass-blur)) saturate(120%);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(120%);
}

.app-glass-panel--strong,
.weather-card{
    background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.62));
}

.app-glass-card,
.home-action{
    transition:transform .14s var(--ease),background .14s ease,box-shadow .14s ease;
}

.app-glass-card:active,
.home-action:active{
    transform:scale(.97);
    background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(255,255,255,.62));
    box-shadow:0 8px 22px rgba(20,29,25,.11),inset 0 1px 0 rgba(255,255,255,.90);
}

/* Home contrast belongs here; typography is owned by design-system.css. */
.home-screen .home-action{
    color:#142019;
    font-weight:var(--weight-semibold);
    letter-spacing:-.012em;
    text-shadow:0 1px 0 rgba(255,255,255,.52);
}

.home-screen .home-action .app-icon{
    color:#142019;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.55));
}

/* The weather card uses the same frosted-glass language as the shortcuts,
 * but with a cool, slightly darker tint so white weather information stays crisp. */
.home-screen .weather-card{
    color:#fff;
    background:linear-gradient(135deg,rgba(32,52,62,.34),rgba(255,255,255,.12));
    border-color:rgba(255,255,255,.66);
    box-shadow:0 14px 34px rgba(10,22,18,.16),inset 0 1px 0 rgba(255,255,255,.48);
    backdrop-filter:blur(30px) saturate(145%) brightness(1.03);
    -webkit-backdrop-filter:blur(30px) saturate(145%) brightness(1.03);
    text-shadow:0 2px 10px rgba(5,14,10,.34);
}

.home-screen .weather-card__date,
.home-screen .weather-card__icon,
.home-screen .weather-card__now strong,
.home-screen .weather-card__now small,
.home-screen .weather-card__forecast small,
.home-screen .weather-card__forecast b,
.home-screen .weather-card__forecast em{
    color:#fff!important;
}

.home-screen .weather-card__date{
    font-weight:var(--weight-semibold);
}

.home-screen .weather-card__icon,
.home-screen .weather-card__minimum-icon .app-icon{
    filter:drop-shadow(0 2px 7px rgba(5,14,10,.28));
}
.home-screen .weather-card__now strong{font-weight:var(--weight-semibold)}
.home-screen .weather-card__now small{font-weight:var(--weight-semibold)}
.home-screen .weather-card__forecast small{font-weight:var(--weight-semibold)}
.home-screen .weather-card__forecast b{font-weight:var(--weight-bold)}
.home-screen .weather-card__forecast em{font-weight:var(--weight-semibold)}
.home-screen .weather-card__minimum-icon{
    display:inline-grid;
    place-items:center;
    width:1.15em;
    margin-right:var(--space-1);
    font-size:var(--font-sm);
    line-height:var(--line-tight);
    vertical-align:-.04em;
}
.home-screen .weather-card__minimum-icon .app-icon{color:#fff}
.home-screen .home-action svg,.home-screen .weather-card svg{color:inherit;fill:currentColor}
.weather-card__now{border-right-color:rgba(255,255,255,.22)}
.weather-card__date{border-bottom-color:rgba(255,255,255,.22)!important}

/* Graceful fallback: keep controls readable when backdrop-filter is unavailable. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .app-glass-panel,.home-action{background:rgba(250,249,246,.94)}
    .app-glass-panel--strong{background:rgba(250,249,246,.97)}
    .home-screen .weather-card{background:rgba(45,62,69,.88)}
}