/*
 * OTP fallback ladder — styles for the alternative channels offered once the OTP countdown expires.
 * Pairs with /js/otp-fallback.js, which renders the markup these rules target.
 *
 * Linked only by the screens that mount the component (the unified login/registration screen and the
 * wallet profile editor), so it stays out of common.css.
 *
 * Colour and weight tokens come from common.css (--tap-blue, --tap-grey, --tap-medium); nothing new
 * is defined here.
 */

/* The container. Hidden until the countdown expires, then otp-fallback.js sets display:flex
 * explicitly — on the login screen this element sits next to .otp-timer-wrapper, which is a centred
 * flex ROW, and the options must stack regardless of what surrounds them. */
.otp-fallback {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    width: 100%;
    max-width: 320px;
    margin: -1rem auto 0;
}

/* "Send it another way" — gives the buttons context instead of leaving them bare. */
.otp-fallback-prompt {
    font-size: 13px;
    font-weight: var(--tap-medium);
    color: var(--tap-grey);
    text-align: center;
    margin: 0 0 .1rem;
}

/* Outline styling (via .tp-btn-secondary) is deliberate: entering the code is still the primary
 * action on this screen, so these sit below the Enter button in the hierarchy rather than
 * competing with it. */
.otp-fallback-option {
    width: 100%;
    font-size: 14px;
    /* A masked target can be long (se***y@pr***e.com) — keep it on one line and ellipsize rather
     * than wrapping and stretching the pill out of shape.
     * text-overflow needs a block box, so this overrides the inline-flex on .tp-btn-secondary,
     * which means the centring has to come from text-align, not justify-content. */
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Profile editor: the OTP box is a compact inline panel, so the ladder is scaled down to match and
 * left-aligned with the field rather than centred in the page. */
.otp-edit-container .otp-fallback {
    max-width: none;
    margin: .5rem 0 0;
}

.otp-edit-container .otp-fallback-prompt {
    text-align: left;
    font-size: 12px;
}

.otp-edit-container .otp-fallback-option {
    text-align: center;
    font-size: 13px;
    padding: .5rem 1rem;
}