/* The password-recovery and activation card (registration/auth_card_base.html).

   One token set for eight screens that had drifted apart. Colour literals are the
   volt palette's own values; the sand action is Bootstrap's `btn-secondary` as
   restyled by custom.css, so nothing here recolours a button. */

/* A perceptible ground, so the white card reads as a surface instead of dissolving
   into a white page with only a faint shadow for an edge. */
.auth-page { background: #F3F4F6; min-height: 100vh; }

/* Round-3 (2026-10-20): optically centred from `md`. The fixed 12vh top offset left
   ~400px of grey under a short card at 1440 and crowded the fold under a tall one
   (the code-confirm card ended 58px above it), because the offset ignored the card's
   height. A flex column with a top/bottom bias (less above than below) centres any
   card. Phones keep a small fixed top offset: there the card is most of the screen. */
.auth-page__section { padding: 1.5rem 0 2rem; }
@media (min-width: 768px) {
    .auth-page__section {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 6vh 0 10vh;
    }
}

.auth-card {
    max-width: 30rem;
    border: 1px solid #E5E7EB;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .06);
    padding: 2rem 1.5rem;
}
@media (min-width: 576px) { .auth-card { padding: 2.5rem 2.25rem; } }

/* The wordmark was ~400px wide, heavier than the heading and the action together.
   Round-3: the single-colour navy lockup (img/logo_navy.svg); the two-tone one put a
   ~2.6:1 periwinkle lotus beside a navy word on white. */
.auth-card__brand { display: inline-block; }
.auth-card__logo { width: 13rem; max-width: 100%; height: auto; }
@media (max-width: 575.98px) { .auth-card__logo { width: 11rem; } }

.auth-card__title {
    margin: 1.5rem 0 .75rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111827;
    text-wrap: balance;
}
.auth-card__lede { margin: 0 auto 1.5rem; max-width: 36ch; color: #374151; text-wrap: balance; }
.auth-card__lede strong { color: #111827; }

/* A success / state glyph above the heading. */
.auth-card__icon {
    /* A block of its own: inline, it sat beside the wordmark whenever the line had room. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 1.5rem auto 0;
    border-radius: 50%;
    /* Round-3: a status glyph is not an action. Solid sand made it a second "button"
       beside the sand one (UI.md: sand is the screen's action). A pale slate disc
       for "sent", a sage one for "done". */
    background: #EEF0F5;
    color: #2E3A59;
}
.auth-card__icon--success { background: #E3F1EA; color: #2F6B4F; }

/* Controls: label above, full width, 44px at every width. */
.auth-card .form-label { font-weight: 600; color: #111827; }
.auth-card .form-control { min-height: 2.75rem; border-color: #6B7280; }
.auth-card .form-control::placeholder { color: #6B7280; opacity: 1; }
/* 15px: at 13-14px the action was the quietest text on the card. */
.auth-card .btn { min-height: 2.75rem; font-weight: 600; font-size: .9375rem; }
.auth-card .form-text { color: #4B5563; font-size: .875rem; }
.auth-card .form-control:focus {
    border-color: #6F7898;
    box-shadow: 0 0 0 .2rem rgba(46, 58, 89, .35);
}

/* Links in body ink with an underline: the theme's #9DA4BE was 2.4:1 on white, and on
   these screens the links ARE the way out. Padded to a 44px tap target. */
.auth-card a:not(.btn) {
    color: #2E3A59;
    text-decoration: underline;
    text-underline-offset: .15em;
}
.auth-card a:not(.btn):hover, .auth-card a:not(.btn):focus { color: #111827; }
.auth-card__brand, .auth-card a.auth-card__brand { text-decoration: none; }
.auth-card__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }
/* Every link in the footer or in a "didn't get it?" line is a 44px target and one
   size, whatever sentence it sits in. */
.auth-card__footer a, .auth-card__aside a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; }

.auth-card__rule { margin: 1.5rem 0 .75rem; color: #D1D5DB; opacity: 1; }
.auth-card__footer { text-align: center; margin: 0; font-size: 1rem; }
.auth-card__footer + .auth-card__footer { margin-top: 0; }
/* The secondary line under the action ("Didn't get it?", "Didn't do this?"). */
.auth-card__aside { text-align: center; margin: 1rem 0 0; color: #374151; font-size: .9375rem; text-wrap: balance; }
.auth-card__aside .auth-card__nowrap { white-space: nowrap; }

/* The legal line under the card, as every other public page carries. */
.auth-page__legal { margin: 1.25rem 0 0; text-align: center; font-size: .8125rem; color: #4B5563; }
.auth-page__legal a { color: #374151; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .35rem; }

/* An address or code the reader must check stays whole: it broke at its own hyphen. */
.auth-card .auth-card__identifier { white-space: nowrap; color: #111827; font-weight: 600; }
@media (max-width: 380px) { .auth-card .auth-card__identifier { white-space: normal; overflow-wrap: anywhere; } }

/* A refusal: red, iconless text would be colour alone; the role="alert" container and
   the leading glyph carry it. */
.auth-card .auth-card__error {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
    margin-top: .35rem;
    color: #B02A37;
    font-size: .875rem;
    font-weight: 500;
}
.auth-card .auth-card__error svg { flex-shrink: 0; margin-top: .15rem; }
.auth-card .form-control.is-invalid { border-color: #B02A37; }

/* The emailed code reads as a CODE, not as a name field. Round-3: full width at the
   standard height; the 12rem box ended mid-column and looked like another component. */
.auth-card .int-otp-code {
    max-width: none;
    width: 100%;
    min-height: 2.75rem;
    font-size: 1.25rem;
    letter-spacing: .35em;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.auth-card .int-otp-resend { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-size: .875rem; font-weight: 400; color: #2E3A59; text-decoration: underline; }

/* The wait hint under a button that is held until the bot check passes. */
.auth-card__status { display: block; text-align: center; margin-top: .5rem; color: #4B5563; font-size: .875rem; }
.auth-card__status.is-error { color: #B02A37; font-weight: 500; }

/* A phone never shows a stuck hover state on the action. */
@media (hover: none) {
    .auth-card .btn-secondary:hover { background-color: var(--bs-btn-bg); border-color: var(--bs-btn-border-color); }
}