/* Sign-up email check: the warning under the email field on /users/register
   (docs/plans/1016_1722_signup-email-warnings.md). Loaded only on that page, and not purged: the panel is built
   by app/public/js/signup-email-check.js after render. Every colour is a --lp-* theme token, so light and dark
   both hold. */

.lp-email-check:empty {
    display: none;
}

/* The panel adapts to its own width, not the viewport's, so it behaves the same in a narrow column. */
.lp-email-check {
    margin-top: .625rem;
    container-type: inline-size;
}

/* Screen-reader-only live line for what the panel can't say itself (the submit was held). */
.lp-email-check__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The field itself says "look below" while a warning is open. The words in the panel carry the meaning; the
   edge is only the pointer to them. */
.form-control.lp-email-check-field {
    border-color: var(--lp-ink-warning);
}

.form-control.lp-email-check-field:focus {
    border-color: var(--lp-ink-warning);
    box-shadow: 0 0 0 .2rem var(--lp-alert-warning-bd);
}

.lp-email-check__panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    padding: 1rem 1.125rem 1.125rem;
    border: 1px solid var(--lp-alert-warning-bd);
    border-radius: .5rem;
    background: var(--lp-alert-warning-bg);
    color: var(--lp-alert-warning-ink);
    animation: lp-email-check-in .18s cubic-bezier(.16, 1, .3, 1);
}

@keyframes lp-email-check-in {
    from {
        opacity: 0;
        transform: translateY(-.25rem);
    }
}

.lp-email-check__panel.is-redraw {
    animation: none;
}

/* Submit was stopped because the warning is unanswered: a ring around the whole panel, the same shape the
   theme uses for focus, so it reads as "this needs you" without moving anything. */
.lp-email-check__panel.is-attention {
    outline: 2px solid var(--lp-alert-warning-ink);
    outline-offset: 2px;
}

.lp-email-check__icon {
    grid-row: 1 / span 2;
    font-size: 1.125rem;
    line-height: 1.5rem;
}

.lp-email-check__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5rem;
    color: inherit;
    overflow-wrap: anywhere;
}

.lp-email-check__email {
    font-weight: 700;
}

/* The headline and icon carry the warning hue; the explanation is in the page's text colour so a few lines
   of it stay easy to read, in dark especially. */
.lp-email-check__body {
    margin: .25rem 0 0;
    color: var(--lp-text);
    font-size: .875rem;
    line-height: 1.5;
    max-width: 60ch;
}

.lp-email-check__controls {
    grid-column: 2;
}

.lp-email-check__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: .875rem;
}

/* The theme's primary button, sized for a panel and still a 44px target. */
.btn.lp-email-check__use {
    min-height: 2.75rem;
    padding: .5rem 1rem;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* A text button: the quieter answer next to the primary one. */
.lp-email-check__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.lp-email-check__link:hover {
    text-decoration-thickness: 2px;
}

.lp-email-check__link:focus-visible,
.lp-email-check__confirm:focus-within {
    outline: 2px solid var(--lp-primary);
    outline-offset: 2px;
}

.lp-email-check__link:focus:not(:focus-visible) {
    outline: none;
}

/* "Use anyway" sits on a raised tile of its own: it is the one decision in the panel, so it gets the surface
   colour while the explanation stays on the warning tint. */
.lp-email-check__confirm {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    min-height: 2.75rem;
    margin: .875rem 0 0;
    padding: .6875rem .875rem;
    border: 1px solid var(--lp-alert-warning-bd);
    border-radius: .3125rem;
    background: var(--lp-surface);
    color: var(--lp-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}

.lp-email-check__confirm input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: .0625rem 0 0;
    accent-color: var(--lp-primary);
    cursor: pointer;
}

.lp-email-check__confirm input:focus {
    outline: none;
}

.lp-email-check__confirm + .lp-email-check__actions {
    margin-top: .25rem;
}

.lp-email-check__panel.is-accepted .lp-email-check__confirm {
    border-color: var(--lp-border-strong);
}

.lp-email-check__prompt {
    margin: .75rem 0 0;
    font-size: .875rem;
    font-weight: 700;
}

/* A typo the customer chose to keep: one quiet line, with the way back. */
.lp-email-check__note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 .5rem;
    color: var(--lp-text-muted);
    font-size: .875rem;
    line-height: 1.5;
}

.lp-email-check__note .lp-email-check__link {
    color: var(--lp-primary);
    font-weight: 600;
}

.lp-email-check__note-icon {
    color: var(--lp-text-muted);
}

@container (max-width: 26rem) {
    .lp-email-check__panel {
        padding: .875rem .875rem 1rem;
        column-gap: .625rem;
    }

    .lp-email-check__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
    }

    .btn.lp-email-check__use {
        width: 100%;
        text-align: center;
    }

    .lp-email-check__use + .lp-email-check__link {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-email-check__panel {
        animation: none;
    }
}