/* ── Email typo suggestion (email-typo.js) ─────────────────────────────────────
   The hint that sits under any input carrying data-rf-email-typo.

   Its OWN file rather than a block in site.css, because the four surfaces that use it do not
   share a stylesheet: /Account/Register and the invite fields load site.css, but /f/{token}
   loads only tokens.css + publicform.css and /b/{token} paints its own palette on top of
   site.css. Styles that live where the component's JS lives can be linked by whoever needs
   them; styles parked in a page's stylesheet are the trap where borrowing a class silently
   applies nothing.

   Deliberately quiet: this is a suggestion about something probably fine, not a validation
   error, so it never borrows the error red — a helpful guess dressed as a rejected field is
   how people learn to ignore it.

   Every colour carries a literal fallback because two of those surfaces are anonymous and
   brand-themed: an unresolved token there would render invisible text on somebody's booking
   page, which is worse than a slightly-off grey. */

.rf-typo {
    /* One knob. A new surface with its own accent sets --rf-typo-accent and nothing else. */
    --rf-typo-accent: var(--bk-accent, var(--pf-accent, var(--accent, #3b5bdb)));

    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin: 6px 0 0; font-size: 12.5px; line-height: 1.4;
    color: var(--text-muted, #6b6b78);
}

.rf-typo-use {
    border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; font-weight: 650;
    color: var(--text, #1c1c1f);
    border-bottom: 1px solid var(--border-2, #d8d8e0);
    text-decoration: none;
}
.rf-typo-use:hover { border-bottom-color: currentColor; }
.rf-typo-use:focus-visible {
    outline: 2px solid var(--rf-typo-accent); outline-offset: 2px; border-radius: 2px;
}

.rf-typo-no {
    margin-left: 2px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 14px; line-height: 1; padding: 2px 4px;
    color: var(--text-faint, #9a9aa6);
}
.rf-typo-no:hover { color: var(--text, #1c1c1f); }
.rf-typo-no:focus-visible {
    outline: 2px solid var(--rf-typo-accent); outline-offset: 1px; border-radius: 2px;
}