/* ==========================================================================
   Alerts, Messages & Empty States
   Extracted from main.css for modularity (v0.8.0)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Messages / Alerts
   -------------------------------------------------------------------------- */
.messages {
    margin-bottom: 1rem;
    padding: 0 1rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.message,
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.5rem;
    display: flex;
    flex-wrap: wrap;   /* the Pro wall's button keeps its width at 390 */
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xs);
    animation: slideUp var(--transition-slow, 0.3s ease) ease-out;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.25rem;
}

.alert-close:hover {
    opacity: 1;
}

.message-success,
.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.message-error,
.alert-error {
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

.message-warning,
.alert-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}

.message-info,
.alert-info {
    background: var(--info-bg);
    color: var(--info-text);
    border: 1px solid var(--info-border);
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.empty-state-message {
    font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Verify-email banner (A1b, v0.47.0)
   Slim, persistent nag for soft-gated users (logged in on signup, email not
   yet confirmed). Reuses the warning alert tokens; self-clears on verify.
   -------------------------------------------------------------------------- */
.verify-email-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 1200px;
    margin: 0 auto 1rem;
    padding: 0.75rem 1rem;
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
}

.verify-email-banner-icon {
    display: inline-flex;
    flex-shrink: 0;
}

/*
 * ⛔ **AN UNBREAKABLE EMAIL PINNED THIS SENTENCE AND THE PAGE SCROLLED
 * SIDEWAYS.** A flex item's default `min-width: auto` is its MIN-CONTENT width,
 * and every one of these banners puts the person's address in a `<strong>` —
 * one token with no break opportunity in it. So the sentence could not shrink
 * at all: measured at 320px the `<strong>` was 184.13px and the paragraph's box
 * was 184.13px, identical at 375. With the form's `flex-shrink: 0` beside it,
 * `16 + 24 + 12 + 184 + 12 + 109 + 16 ≈ 373px` of incompressible content sat in
 * a 288px box, the page scrolled 47px sideways, and "Resend email" rendered
 * outside its own banner, where only that scroll reached it.
 *
 * ⭐ **`overflow-wrap` IS THE ONE THAT CARRIES IT — MEASURED, NOT ASSUMED.**
 * Giving the address a break opportunity at every character collapses
 * min-content, so it fixes the floor as a side effect: remove it alone and the
 * page scrolls sideways again at 320 and 390, while removing `min-width: 0`
 * alone changes nothing, because there is no longer an unbreakable token for the
 * floor to catch on. `.item__title` and `.item__text` have carried `anywhere`
 * for the same reason.
 *
 * ⚠️ **`min-width: 0` IS KEPT AS THE FLEX PATH'S OWN GUARD, KNOWING IT IS
 * REDUNDANT TODAY.** With both gone the button is back outside the banner at
 * 620px — just above the breakpoint, where this is still a flex row — so it is
 * what stops the removal of a *typographic* rule from quietly undoing a *layout*
 * one. It cannot be made to fail on its own, and that is recorded rather than
 * hidden: the full seven-round matrix is in
 * `tests/browser/test_a_banner_fits_the_phone_it_warns_on.py`.
 */
.verify-email-banner-text {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.verify-email-banner-form {
    margin: 0;
    flex-shrink: 0;
}

/*
 * ⭐ **ON A PHONE THE CONTROL GOES UNDER THE WORDS** — the same arrangement
 * `.item` took on 2026-09-08 (`components/cards.css`, "a wide end slot becomes
 * a doors strip"), at the same 600px breakpoint, for the same reason: a button
 * beside a sentence is a column as wide as the button, and these banners carry
 * the longest sentences in the app. This is `.item--lead`'s shape exactly — the
 * mark keeps its column, and the control lines up with the words rather than
 * with the mark.
 *
 * ⚠️ Placement is explicit. Auto-placement would put the form at (row 2,
 * column 1), under the icon.
 */
@media (max-width: 600px) {
    .verify-email-banner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .verify-email-banner-icon {
        grid-column: 1;
        grid-row: 1;
    }

    .verify-email-banner-text {
        grid-column: 2;
        grid-row: 1;
    }

    .verify-email-banner-form {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }
}