/**
 * "Did you mean ...?" hint under an email field.
 *
 * Nothing is rendered at rest, so a form that never sees a typo is
 * pixel-identical to before this shipped. That matters: these landing pages are
 * live and taking registrations while the plugin deploys.
 *
 * Colours come from the iDEAN system (DESIGN.md): Navy 700 is the documented
 * colour for links, Muted is the documented de-emphasis ink. Gold is
 * deliberately NOT used here even though this is the element asking to be
 * tapped -- the system reserves gold for CTAs and forbids it as body text, and
 * a suggestion under a field is body text.
 *
 * They are declared as custom properties because this stylesheet loads on every
 * Fluent Form on the site, and some of those forms sit on myAi surfaces which
 * own a different palette. A myAi page can restyle the hint by setting
 * --fex-es-accent / --fex-es-muted without touching this file.
 */

.fex-es {
    --fex-es-warn: #C0392B;   /* DESIGN.md colors.danger */
    --fex-es-accent: #273272; /* Navy 700 - DESIGN.md: links */
    --fex-es-muted: #7B8095;  /* Ink Muted */

    display: block;
    margin: 8px 0 0; /* 8px grid */
    font-size: 0.875em;
    line-height: 1.5;
    color: inherit;
    padding: 8px 12px;
    /* 10px is the system's control radius; DESIGN.md retired the mixed scale.
       No left accent bar: a thick coloured edge on one side is a tell, and the
       red text on a tint of the danger token already reads as a warning. */
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.07);
    animation: fex-es-in 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes fex-es-in {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fex-es { animation: none; }
}

.fex-es .fex-es__q {
    color: var(--fex-es-warn);
    font-weight: 600;
}

.fex-es .fex-es__yes,
.fex-es .fex-es__no {
    font: inherit;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* The suggestion itself: the thing to tap. Underlined rather than
   button-shaped so it cannot be mistaken for the form's submit control. */
.fex-es .fex-es__yes {
    color: var(--fex-es-warn);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fex-es .fex-es__yes:hover,
.fex-es .fex-es__yes:focus-visible {
    text-decoration-thickness: 2px;
}

.fex-es .fex-es__no {
    margin-inline-start: 16px;
    color: var(--fex-es-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fex-es .fex-es__no:hover,
.fex-es .fex-es__no:focus-visible {
    color: var(--fex-es-warn);
}

.fex-es .fex-es__yes:focus-visible,
.fex-es .fex-es__no:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fex-es--done {
    color: var(--fex-es-accent);
    background: transparent;
}

/* Tap targets on a phone, where most of these registrations come from. */
@media (max-width: 767px) {
    .fex-es {
        font-size: 0.9em;
    }
    .fex-es .fex-es__yes,
    .fex-es .fex-es__no {
        display: inline-block;
        padding: 4px 0;
        min-height: 32px;
    }
}