/* SEC-32 (sprint lane B): the passkeys page and the sign-in page's passkey controls.
   Uses the shared tokens only (--border, --muted, --surface); nothing here is tenant specific, so it is NOT in cbs.css.
   Loaded ONLY when MT.Passkeys.Enabled is true (the link is inside the flag-gated panel on Login.aspx and on the passkey
   pages), so every rule below is invisible to a site with the feature off.

   WHAT WAS WRONG ON THE SIGN-IN PAGE (measured in docs/design/harness/login.html, ?v=old), and the cause of each:
   1. TWO SCROLL BARS: the passkey block carried the class card-content, which theme.css and layout.css make a scroll
      owner (overflow-y: auto, min-height: 0, flex 1 1 auto). A card with two scroll owners scrolls twice.
      FIX: the block is a plain block now (.auth-alt), not a card-content.
   2. THE "Sign in with a passkey" BUTTON 17-18px TALL: the same block was a flex column with a constrained height, and a
      flex child shrinks. FIX: nothing inside .auth-alt may shrink (flex: 0 0 auto), and the button keeps .btn's 40px.
   3. THE RECOVERY BUTTON CUT OFF AT THE RIGHT: .auth-alt .btn was width: 100% with content-box sizing (padding and border
      added on top), and the block ignored the card footer's 15px right margin that the Sign in button respects.
      FIX: border-box, and the block takes the same right margin as .card-footer.
   4. A HORIZONTAL BAR WITH THE RECOVERY SECTION: the same content-box inputs. FIX: border-box on everything inside.
   5. NESTED SCROLLING ON SHORT SCREENS: on a viewport too short for the card (a phone in landscape) the card's own
      content area scrolled inside the page. FIX: the page body owns the one scroll bar, the card grows to its content,
      and a short screen scrolls ONCE, from the top (margin-based centring, not justify-content: center, which clips the top). */

/* ---------------------------------------------------------------- sign-in page */

/* One scroll owner: the page body. The card is as tall as its content; nothing inside it scrolls. */
body.auth-page .page-body {
    overflow-y: auto;
}

body.auth-page .auth-center {
    flex: 1 0 auto;
    justify-content: flex-start;   /* centring is done with auto margins below, so overflow starts at the top */
}

body.auth-page .card.card-scroll.auth-card {
    max-height: none;
    margin-block: auto;
}

body.auth-page .card.card-scroll.auth-card > .card-content {
    overflow: visible;
}

/* A short screen (a laptop at 600px, a phone upright at 640px or 844px with the recovery form open): the card is about 460px tall and the shell around it
   (app bar 86, footer 63 above 768px, page padding) leaves about 400. Spacing, not type: the page padding and the
   card's own vertical padding give up the difference, so the card fits without any scroll bar at 1280x600. Below
   about 450px of available height (a phone on its side) nothing short of removing content fits, and the page body
   scrolls once, from the top. */
@media (max-height: 860px) {
    body.auth-page .main-content {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    body.auth-page .card.card-scroll.auth-card {
        padding-top: 16px;
        padding-bottom: 16px;
    }

        body.auth-page .card.card-scroll.auth-card > .card-header {
            margin-bottom: 8px;
        }

        body.auth-page .card.card-scroll.auth-card > .card-footer {
            margin-top: 12px;
        }

    .auth-alt {
        margin-top: 8px;
        gap: 4px;
    }
}

/* The alternative sign-in block: the same left edge and the same right margin as the card footer above it. */
.auth-alt {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 15px 0 0;
    box-sizing: border-box;
    min-width: 0;
}

    .auth-alt,
    .auth-alt * {
        box-sizing: border-box;
    }

    .auth-alt > * {
        flex: 0 0 auto;           /* nothing in here may be squeezed: a squeezed button is what the thin passkey button was */
        min-width: 0;
    }

    /* Same height and padding as the primary Sign in button: both are .btn (40px, 0 14px). */
    .auth-alt .btn {
        width: 100%;
        height: 40px;
        padding: 0 14px;
    }

    .auth-alt .field-error:empty {
        display: none;
    }

/* "Lost your device?" is a tertiary action: smaller, muted, and it comes alive on hover and focus. */
.auth-recovery > summary {
    display: inline-block;
    cursor: pointer;
    font-size: .8125rem;
    color: var(--muted);
    opacity: .7;
    padding: 4px 0;
    transition: opacity 120ms ease;
}

    .auth-recovery > summary:hover,
    .auth-recovery > summary:focus-visible,
    .auth-recovery[open] > summary {
        opacity: 1;
    }

.auth-recovery-body {
    padding-top: 8px;
}

    .auth-recovery-body .input {
        width: 100%;
    }

    /* The shared .form-row (14px) plus .field-note (12px of its own padding) stack to 26px; in this small form that is
       what pushed the expanded section past a 390x844 phone. */
    .auth-recovery-body .form-row {
        margin-bottom: 8px;
    }

    .auth-recovery-body .field-note {
        padding-bottom: 0;
        margin-top: 4px;
    }

/* ---------------------------------------------------------------- passkeys page */

.passkey-codes {
    list-style: none;
    margin: 12px 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
}

    .passkey-codes code {
        display: block;
        padding: 6px 8px;
        font-size: 14px;
        letter-spacing: .04em;
        word-break: break-all;
    }

@media (max-width: 480px) {
    .passkey-codes {
        grid-template-columns: 1fr;
    }
}

/* An empty message span takes no room (the shared .field-error carries padding). */
.field-error:empty {
    display: none;
}

/* ---------------------------------------------------------------- the Passkeys page: two cards and two dialogs (SEC-32) */

.passkey-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* A card header with its action at the trailing edge; it wraps under the text on a narrow screen. */
.passkey-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
}

.passkey-head-text {
    flex: 1 1 260px;
    min-width: 0;
}

    .passkey-head .btn {
        width: auto;           /* .btn-primary is width: 100% in theme.css; state it here */
        min-width: 96px;
        flex: 0 0 auto;
    }

/* "Action required": words and an icon, never colour alone. */
.passkey-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--ink);
    background: var(--surface-warning);
    border: 1px solid var(--warning);
}

    .passkey-badge[hidden] {
        display: none;
    }

    .passkey-badge .icon {
        color: var(--icon-warning);
        flex: 0 0 auto;
    }

/* One passkey: icon, name and dates, trash. Whitespace between rows, no dividers. */
.passkey-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 0;
}

.passkey-row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--icon-muted, var(--muted));
}

.passkey-row-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.passkey-trash {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.passkey-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

    .passkey-actions .btn {
        width: auto;
        min-width: 96px;
    }

/* A dialog footer with a hint at the left and the actions trailing, primary last (UI standard, 4.3). */
.passkey-footer {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

    .passkey-footer .microtext {
        margin-right: auto;
    }

    .passkey-footer .btn {
        width: auto;
        min-width: 96px;
    }

/* Print only the codes dialog (no popup window: the page adds body.passkeys-printing for the moment of printing). */
@media print {
    body.passkeys-printing * {
        visibility: hidden;
    }

    body.passkeys-printing #pkCodesModal,
    body.passkeys-printing #pkCodesModal * {
        visibility: visible;
    }

    body.passkeys-printing #pkCodesModal {
        position: absolute;
        inset: auto;
        left: 0;
        top: 0;
        width: 100%;
        background: none;
        display: block;
    }

    body.passkeys-printing #pkCodesModal .modal-content {
        max-height: none;
        box-shadow: none;
        border: 0;
    }

    body.passkeys-printing #pkCodesModal .modal-close,
    body.passkeys-printing #pkCodesModal .passkey-actions,
    body.passkeys-printing #pkCodesModal .modal-footer {
        display: none;
    }
}