/* Flash messages (@alert.latte). Same tokens as site.css / admin.css. */
.flash-stack {
    position: fixed;
    top: calc(var(--site-header-h, var(--adm-header-h, 72px)) + 1rem);
    left: 1rem;
    right: 1rem;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: 560px;
    margin: 0 auto;
    pointer-events: none;
}
.flash {
    --flash-color: #574f48;
    --flash-soft: #f4f2ef;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    padding: .9rem .75rem .9rem 1rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e4ddd5;
    border-left: 4px solid var(--flash-color);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(38, 33, 29, .16);
    color: #26211d;
    font-size: .93rem;
    line-height: 1.5;
    pointer-events: auto;
    animation: flash-in .22s ease-out;
}
.flash-success { --flash-color: #1f7a3d; --flash-soft: #e9f5ec; }
.flash-danger  { --flash-color: #730b09; --flash-soft: #f6eceb; }
.flash-warning { --flash-color: #9a5b00; --flash-soft: #fdf3e2; }
.flash-info,
.flash-primary,
.flash-secondary { --flash-color: #1d4f7a; --flash-soft: #e9f0f7; }

.flash-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--flash-soft);
    color: var(--flash-color);
    font-size: .95rem;
}
.flash-text {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .15rem;
    overflow-wrap: anywhere;
}
.flash-close {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    margin: -.1rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #574f48;
    cursor: pointer;
}
.flash-close:hover {
    background: #f4f2ef;
    color: #26211d;
}
.flash-close:focus-visible {
    outline: 2px solid #730b09;
    outline-offset: 1px;
}

/* Auto-close countdown */
.flash-auto::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--flash-color);
    opacity: .35;
    transform-origin: left;
    animation: flash-countdown var(--flash-duration, 6000ms) linear forwards;
}
.flash.is-paused::after {
    animation-play-state: paused;
}

.flash.is-leaving {
    animation: flash-out .2s ease-in forwards;
}

@keyframes flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes flash-out {
    to { opacity: 0; transform: translateY(-8px); }
}
@keyframes flash-countdown {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
    .flash,
    .flash.is-leaving {
        animation: none;
    }
    .flash-auto::after {
        display: none;
    }
}
