/*
 * Sign-in shell (login, forgot password, confirm, new password, MFA, MFA setup).
 *
 * base_auth.html loads this after style.css and workspace_glass.css on every
 * host. It lays the pages out on the provider-directory palette (the tokens in
 * directory_branding.css, no orange, solid colours so contrast is measurable)
 * and the style guide's phone rules: text 16px minimum, fields 56px tall with
 * 18px text, standalone buttons 48px, tap targets 44px, no lone last words.
 * Scoped to body.auth-page so the shared dark-glass rules still serve any
 * other page that carries that class.
 */

body.auth-page {
    --auth-canvas: #ffffff;
    --auth-page: #f2f4f7;
    --auth-line: #d3d9e1;
    --auth-control: #858fa0;
    --auth-ink: #182038;
    --auth-body: #1b2330;
    --auth-ink-3: #565f73;
    --auth-navy: #182038;
    --auth-navy-hover: #2a3553;
    --auth-blue: #2f6fa8;
    --ws2-text-primary: #182038;
    --ws2-text-tertiary: #565f73;
    --ws2-accent-text: #2f6fa8;
    --ws2-elevated: #f2f4f7;
    background: #f2f4f7 !important;
    color: #1b2330;
}

body.auth-page .auth-skip-link {
    background: #ffffff;
    color: #182038;
}

/* The wordmark asset is dark navy: show it as is on the light page. */
body.auth-page .auth-brand img {
    filter: none;
}

body.auth-page .auth-card {
    background: #ffffff;
    border: 1px solid #d3d9e1;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Two axes, the same on every page: titles (the logo, the card heading, the
   footer link, the help line) sit on the centre line; reading text and fields
   run left to right across the full card width. A left-aligned heading under
   the centred logo made the logo read as off-centre, and a long centred
   paragraph over left-aligned text read the same way (Mikl, 2026-10-19). */
body.auth-page .auth-card h1 {
    color: #182038;
    text-align: center;
    text-wrap: balance;
    /* One 18px step under the title, the same as the gap between fields; the
       base 9px sat the first label, notice or paragraph right under it. */
    margin-bottom: var(--sp-4);
}

body.auth-page .auth-card p,
body.auth-page .auth-card .auth-intro {
    color: #444e62;
    font-size: 16px;
    text-wrap: pretty;
}

/* Two intro paragraphs in a row read as one block: a 13.5px break between
   them, not the 27px that separates sections. */
body.auth-page .auth-card .auth-intro:has(+ .auth-intro) {
    margin-bottom: var(--sp-3);
}

body.auth-page .auth-form label {
    /* 9px between a label and its field (the base 4.5px read as glued). */
    gap: var(--sp-2);
    color: #1b2330;
    font-size: 16px;
    font-weight: 600;
}

body.auth-page .auth-form input[type="text"],
body.auth-page .auth-form input[type="email"],
body.auth-page .auth-form input[type="password"],
body.auth-page .auth-form select,
body.auth-page .auth-form textarea {
    min-height: 56px;
    font-size: 18px;
    font-family: inherit;
    background-color: #ffffff;
    border: 1px solid #858fa0;
    color: #182038;
    box-shadow: none;
}

body.auth-page .auth-form input::placeholder,
body.auth-page .auth-form textarea::placeholder {
    color: #565f73;
    opacity: 1;
}

body.auth-page .auth-form input:focus,
body.auth-page .auth-form select:focus,
body.auth-page .auth-form textarea:focus {
    border-color: #2f6fa8;
    box-shadow: none;
    /* Drawn over the field's own edge: one crisp ring that stays in line with
       the labels and button, not a second ring floating outside the box. */
    outline: 2px solid #2f6fa8;
    outline-offset: -2px;
}

body.auth-page .auth-form .btn-primary {
    min-height: 48px;
    padding-block: 0;
    font-size: 18px;
    font-family: inherit;
    background: #182038;
    color: #ffffff;
    border: none;
}

body.auth-page .auth-form .btn-primary:hover {
    background: #2a3553;
}

body.auth-page .auth-form .btn-primary:focus-visible,
body.auth-page .auth-footer-links a:focus-visible,
body.auth-page .auth-help a:focus-visible {
    outline: 3px solid #2f6fa8;
    outline-offset: 2px;
}

body.auth-page .auth-error {
    background: #fcebe7;
    border: 1px solid #f3cdc4;
    color: #9a2f1c;
    font-size: 16px;
    text-wrap: balance;
}

body.auth-page .auth-info {
    background: #e8f5ed;
    border: 1px solid #c4e3d1;
    color: #1c6b40;
    font-size: 16px;
    text-wrap: balance;
}

body.auth-page .auth-totp-secret {
    background: #f2f4f7;
    color: #182038;
    font-size: 16px;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.8;
}

/* The key is four-character groups, each a plain span with no whitespace between
   them, so selecting and copying the box yields the bare key. */
body.auth-page .auth-totp-secret span {
    display: inline-block;
    margin-right: 12px;
    white-space: nowrap;
}

/* The note under the Verify button gets room above it. */
body.auth-page .auth-form + .auth-help-note {
    margin-top: var(--sp-6);
}

body.auth-page .auth-qr {
    background: #ffffff;
    border: 1px solid #d3d9e1;
}

body.auth-page .auth-footer-links {
    border-top: 1px solid #d3d9e1;
    font-size: 16px;
}

/* Links: a 44px-tall hit area without growing the layout. The footer link is a
   padded inline-block with the room given back by a negative margin; the help
   link stays inline (so the sentence can wrap around it) and gets its hit area
   from a pseudo-element. */
body.auth-page .auth-footer-links a {
    display: inline-block;
    padding: 11px 10px;
    margin: -11px -10px;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 22px;
    color: #2f6fa8;
    text-decoration: underline;
}

body.auth-page .auth-help {
    font-size: 16px;
    color: #565f73;
    /* The sentence and the link are two flex items, so a wrap always lands
       between them and never leaves the address alone under a few words. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 0.3em;
}

body.auth-page .auth-help a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -11px;
    padding-inline: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    color: #2f6fa8;
    text-decoration: underline;
}

/* Phones: the card fills the screen. The desktop spacing (page gutter plus
   wrap gutter plus wide card padding) squeezed the fields into the middle 60%
   of a 320px screen and cut the email hint off; here the page keeps one
   gutter, the card sits close under the logo and its padding is even. */
@media (max-width: 480px) {
    body.auth-page header.auth-brand {
        padding-top: var(--sp-6);
    }

    body.auth-page main {
        padding: 0 var(--sp-4) var(--sp-6);
    }

    body.auth-page .auth-wrap {
        padding: var(--sp-6) 0;
    }

    body.auth-page .auth-card {
        padding: var(--sp-8) var(--sp-5);
    }

    body.auth-page .auth-card h1 {
        font-size: 22px;
        overflow-wrap: break-word;
    }
}

@media (max-width: 360px) {
    body.auth-page .auth-card h1 {
        font-size: 20px;
    }
}