/* =============================================================================
   SPS2 Keycloak login theme
   -----------------------------------------------------------------------------
   The Specialist Pharmacy Service (sps2) design system, applied to the Keycloak
   sign-in / registration screens. Built on the NHS Design System, matching the
   live sps2.test site: NHS blue (#005eb8) for interactive chrome, the NHS green
   button (#007f3b) for primary actions, the NHS yellow focus state (#ffeb3b),
   square 2px inputs, and Frutiger/Arial type.

   Tokens are the authoritative NHS values pulled from nhsuk-frontend; edit the
   custom properties below to re-brand. This file is fully self-contained — no
   legacy "green theme" assets are referenced.
   ============================================================================= */

:root {
    /* Interactive / brand */
    --sps2-blue: #005eb8;          /* header, links, focus ring on inputs */
    --sps2-blue-dark: #003d78;     /* link hover */
    --sps2-blue-pale: #e8f1f8;     /* subtle info tints */

    /* Primary action (NHS green button) */
    --sps2-green: #007f3b;
    --sps2-green-hover: #00662f;
    --sps2-green-active: #00401e;  /* also the button drop-shadow */

    /* Ink & greys */
    --sps2-black: #212b32;         /* body text + focus underline bar */
    --sps2-grey: #4c6272;          /* secondary text, input border */
    --sps2-grey-mid: #768692;
    --sps2-grey-light: #f0f4f5;    /* page background */
    --sps2-grey-border: #d8dde0;
    --sps2-white: #ffffff;

    /* Status */
    --sps2-focus: #ffeb3b;         /* NHS yellow focus highlight */
    --sps2-error: #d5281b;
    --sps2-success: #007f3b;

    --sps2-font: "Frutiger W01", Frutiger, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --sps2-radius: 4px;
}

/* ==============================
   Fonts — Frutiger, hot-linked from the NHS assets CDN exactly as the
   estate apps do (parity spec §5.3). font-display: swap keeps Arial as
   the visible fallback until the files land.
   ============================== */

@font-face {
    font-display: swap;
    font-family: "Frutiger W01";
    font-style: normal;
    font-weight: 400;
    src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2") format("woff2"),
        url("https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff") format("woff");
}
@font-face {
    font-display: swap;
    font-family: "Frutiger W01";
    font-style: normal;
    font-weight: 600;
    src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"),
        url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff");
}

/* ==============================
   Reset & base
   ============================== */

*, *::before, *::after { box-sizing: border-box; }

body.sps2-login-page {
    margin: 0;
    padding: 0;
    background: var(--sps2-grey-light);
    font-family: var(--sps2-font);
    color: var(--sps2-black);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.sps2-u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

/* Skip link (estate chrome class): off-screen until it receives keyboard
   focus, then NHS yellow in the top-left so keyboard/screen-reader users
   can jump straight to the form. */
.nhsuk-skip-link {
    left: -9999px;
    padding: 8px;
    position: absolute;
    color: var(--sps2-black);
}

.nhsuk-skip-link:active,
.nhsuk-skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 100;
    background-color: var(--sps2-focus);
    box-shadow: 0 -2px var(--sps2-focus), 0 4px var(--sps2-black);
    color: var(--sps2-black);
    outline: 4px solid transparent;
}

/* Remove the focus ring the skip link gives the <main> when it is targeted. */
.sps2-main:focus { outline: none; }

/* ==============================
   Page layout
   ============================== */

.sps2-page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.sps2-main {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 48px 16px;
}

/* =============================================================================
   Header — estate SPS chrome (SPS2-THEME-PARITY-SPEC.md §4; ported from the
   ndo-laravel reference sps.css). Full-width NHS-blue bar: lockup of NHS mark
   │ white SPS wordmark │ service name on the left, utility links right.
   Static, not sticky — the NHS service manual warns sticky headers can
   obscure focused content.
   ============================================================================= */

.nhsuk-header,
.nhsuk-skip-link,
.nhs-theme-footer {
    font-family: var(--sps2-font);
    font-size: 16px;
    line-height: 1.5;
}

.nhsuk-header {
    background-color: var(--sps2-blue);
    color: var(--sps2-white);
}

.nhsuk-width-container {
    margin: 0 16px;
    max-width: 960px;
}
@media (min-width: 48.0625em) {
    .nhsuk-width-container { margin: 0 32px; }
}
@media (min-width: 64.0625em) {
    .nhsuk-width-container { margin: 0 auto; }
}
/* sps2 widens the NHS width container beyond the 960px default */
@media (min-width: 1080px) {
    .nhsuk-width-container { max-width: 1120px; }
}

.nhsuk-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 16px 0;
}
.nhsuk-header__container:after { content: none; }

.nhsuk-header__service {
    display: flex;
    min-width: 0;
    margin-right: auto;
}

.nhsuk-header__service-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 0;
}
.nhsuk-header__service-logo:focus {
    outline: 4px solid var(--sps2-focus);
    outline-offset: 4px;
    background-color: transparent;
}

.nhsuk-header__service .nhsuk-header__logo {
    float: none;
    max-width: none;
    height: 40px;
    width: auto;
    flex-shrink: 0;
}

/* Tool title, shown after the SPS wordmark per the NHS design system's
   service-name pattern; separated by the same divider as the wordmark.
   Allowed to run multiple lines rather than force horizontal scroll. */
.nhsuk-header__service .nhsuk-header__service-name {
    display: block;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--sps2-white);
    font-size: 1.1875rem;
    line-height: 1.2;
    font-weight: 400;
    max-width: 54ch;
    text-wrap: balance;
}

.sps-header__logo-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.sps-header__logo {
    height: 30px;
    width: auto;
    display: block;
}

/* Utility links (About SPS). sps2 hides these below 768px inside its nav
   drawer; these pages have no drawer, so they stay visible and wrap.
   White-link rules target direct children only — never descendants. */
.nhs-header__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.nhs-header__utility > a,
.nhs-header__utility-link {
    display: inline-flex;
    align-items: center;
    color: var(--sps2-white);
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.nhs-header__utility > a:hover,
.nhs-header__utility-link:hover {
    text-decoration: underline;
}
.nhs-header__utility > a:focus,
.nhs-header__utility-link:focus {
    background-color: var(--sps2-focus);
    box-shadow: 0 0 0 4px var(--sps2-focus), 0 4px 0 4px var(--sps2-black);
    color: var(--sps2-black);
    outline: 4px solid transparent;
}

@media (max-width: 640px) {
    .nhsuk-header__service .nhsuk-header__logo {
        height: 32px;
        min-width: 80px;
        width: 80px;
    }
    .sps-header__logo { height: 24px; }
    .sps-header__logo-wrap {
        margin-left: 8px;
        padding-left: 12px;
    }
    .nhsuk-header__service .nhsuk-header__service-name {
        margin-left: 12px;
        padding-left: 12px;
        font-size: 1rem;
    }
    .nhs-header__utility { gap: 0.75rem; }
}

/* Centered chrome (sps2 parity): the blue header/footer bars run to the
   viewport edges, but their content stays inside the centered
   .nhsuk-width-container (max-width 1120px) like www.sps.nhs.uk. */

/* ==============================
   Card
   ============================== */

.sps2-card {
    background: var(--sps2-white);
    border: 1px solid var(--sps2-grey-border);
    border-radius: var(--sps2-radius);
    box-shadow: 0 2px 8px rgba(33, 43, 50, 0.06);
    padding: 40px;
    width: 100%;
    max-width: 460px;
}

.sps2-heading {
    margin: 0 0 24px;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--sps2-black);
}

.sps2-attempted-username {
    margin: 0 0 16px;
    font-weight: 600;
}

/* ==============================
   Alerts / flash messages
   ============================== */

.sps2-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 4px solid var(--sps2-grey);
    border-radius: var(--sps2-radius);
    background: var(--sps2-white);
    font-size: 1rem;
}

.sps2-alert__icon {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
    margin-top: 1px;
}

.sps2-alert__body { flex: 1 1 auto; }
.sps2-alert__body a { color: inherit; }

.sps2-alert--error   { border-color: var(--sps2-error);   color: var(--sps2-error); }
.sps2-alert--warning { border-color: #d4351c;             color: var(--sps2-black); }
.sps2-alert--success { border-color: var(--sps2-success); color: var(--sps2-success); }
.sps2-alert--info    { border-color: var(--sps2-blue);    color: var(--sps2-black); }

.sps2-alert--error .sps2-alert__body,
.sps2-alert--success .sps2-alert__body { color: var(--sps2-black); }

/* ==============================
   Form groups, labels, hints
   ============================== */

.sps2-form-group {
    margin-bottom: 24px;
}

/* Error state: the red input border and red error message carry the affordance;
   the field stays aligned with the rest of the form (no left-bar indent). */
.sps2-form-group--error {
    padding-left: 0;
    border-left: 0;
}

.sps2-label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 1rem;
    color: var(--sps2-black);
}

.sps2-required { color: var(--sps2-error); margin-left: 2px; }

.sps2-hint {
    display: block;
    margin-bottom: 8px;
    color: var(--sps2-grey);
    font-size: 1rem;
}

.sps2-error-message {
    display: block;
    margin-bottom: 12px;
    color: var(--sps2-error);
    font-weight: 600;
    font-size: 1rem;
}

/* ==============================
   Inputs — NHS square 2px field
   ============================== */

.sps2-input {
    display: block;
    width: 100%;
    height: 2.5rem;
    padding: 0.25rem 0.5rem;
    border: 2px solid var(--sps2-grey);
    border-radius: 0;
    background: var(--sps2-white);
    color: var(--sps2-black);
    font-family: var(--sps2-font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
}

.sps2-input:focus {
    outline: 4px solid var(--sps2-focus);
    outline-offset: 0;
    box-shadow: inset 0 0 0 2px var(--sps2-black);
}

.sps2-input--error { border-color: var(--sps2-error); }

.sps2-input:disabled {
    color: var(--sps2-grey-mid);
    background: var(--sps2-grey-light);
    cursor: not-allowed;
}

/* Password field with reveal toggle */
.sps2-input-wrapper { position: relative; }
.sps2-input-wrapper .sps2-input { padding-right: 44px; }

.sps2-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: none;
    border: none;
    color: var(--sps2-blue);
    line-height: 0;
    cursor: pointer;
}

.sps2-password-toggle svg { display: block; }
.sps2-password-toggle:hover { color: var(--sps2-blue-dark); }
.sps2-password-toggle:focus { outline: none; }

/* Keyboard focus only (:focus-visible) — a slim blue ring instead of the NHS
   yellow fill, which fights the input it sits inside. */
.sps2-password-toggle:focus-visible {
    outline: 2px solid var(--sps2-blue);
    outline-offset: -1px;
    border-radius: var(--sps2-radius);
    color: var(--sps2-blue-dark);
}

/* ==============================
   Checkbox — NHS style (terms / remember me)
   ============================== */

.sps2-checkbox {
    position: relative;
    min-height: 40px;
    padding: 0 0 0 40px;
    clear: left;
}

.sps2-checkbox__input {
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    margin: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
}

.sps2-checkbox__label {
    display: inline-block;
    padding: 8px 12px 4px 8px;
    cursor: pointer;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

/* The box */
.sps2-checkbox__label::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    border: 2px solid var(--sps2-black);
    background: var(--sps2-white);
}

/* The tick */
.sps2-checkbox__label::after {
    content: "";
    position: absolute;
    left: 9px; top: 11px;
    width: 22px; height: 11px;
    border: solid;
    border-width: 0 0 4px 4px;
    border-color: var(--sps2-black);
    background: transparent;
    transform: rotate(-45deg);
    opacity: 0;
}

.sps2-checkbox__input:focus + .sps2-checkbox__label::before {
    border-width: 4px;
    outline: 4px solid var(--sps2-focus);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--sps2-focus);
}

.sps2-checkbox__input:checked + .sps2-checkbox__label::after { opacity: 1; }

.sps2-checkbox__input:disabled + .sps2-checkbox__label,
.sps2-checkbox__input:disabled { cursor: not-allowed; opacity: 0.5; }

.sps2-form-options { margin-bottom: 24px; }

/* ==============================
   Terms text
   ============================== */

.sps2-terms-text {
    margin-bottom: 16px;
    font-size: 1rem;
}

.sps2-terms-text a { color: var(--sps2-blue); }

/* ==============================
   Buttons
   ============================== */

.sps2-form-buttons {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sps2-button {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 2.75rem;
    margin: 0;
    padding: 0.625rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--sps2-radius);
    font-family: var(--sps2-font);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.1875;
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sps2-button--primary,
.sps2-button--primary:visited {
    background: var(--sps2-green);
    color: var(--sps2-white);
    box-shadow: 0 4px 0 var(--sps2-green-active);
}

.sps2-button--primary:hover { background: var(--sps2-green-hover); color: var(--sps2-white); }

.sps2-button--primary:active,
.sps2-button--primary:active:focus {
    top: 4px;
    background: var(--sps2-green-active);
    box-shadow: none;
}

/* Secondary — NHS grey button (Try another way) */
.sps2-button--secondary,
.sps2-button--secondary:visited {
    background: var(--sps2-grey-light);
    color: var(--sps2-black);
    box-shadow: 0 4px 0 #929fa5;
}

.sps2-button--secondary:hover { background: #dbe0e1; color: var(--sps2-black); }
.sps2-button--secondary:active { top: 4px; box-shadow: none; }

/* Shared NHS focus state for every button */
.sps2-button:focus:not(:active) {
    outline: 4px solid transparent;
    outline-offset: 4px;
    color: var(--sps2-black);
    background: var(--sps2-focus);
    box-shadow: 0 4px 0 0 var(--sps2-black);
}

.sps2-button:disabled { pointer-events: none; opacity: 0.5; }

/* ==============================
   Links & cross-links
   ============================== */

.sps2-link {
    color: var(--sps2-blue);
    text-decoration: none;
}

.sps2-link:hover { color: var(--sps2-blue-dark); text-decoration: underline; }

.sps2-link:focus {
    outline: 4px solid transparent;
    color: var(--sps2-black);
    background: var(--sps2-focus);
    box-shadow: 0 -2px var(--sps2-focus), 0 4px var(--sps2-black);
    text-decoration: none;
}

.sps2-form-footer {
    margin: 20px 0 0;
    font-size: 1rem;
}

.sps2-card-footer,
.sps2-cross-link {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--sps2-grey-border);
    font-size: 1rem;
}

/* Registration prompt inside the card footer. The footer already supplies the
   single divider and top spacing, so this block adds none of its own — it just
   lays out the "New to SPS?" line above the Create account button. */
.sps2-register {
    font-size: 1rem;
}

.sps2-register__prompt {
    margin: 0 0 12px;
}

/* ==============================
   Info message (post-submit / verify email)
   ============================== */

.sps2-info-message { font-size: 1rem; }
.sps2-info-message__text { margin: 0 0 8px; }

/* "Try another way" fallback form */
.sps2-try-another-way { margin-top: 16px; }

/* ==============================
   Social / identity providers
   ============================== */

.sps2-social-providers { margin-top: 24px; }

.sps2-divider {
    border: 0;
    border-top: 1px solid var(--sps2-grey-border);
    margin: 24px 0 16px;
}

.sps2-social-heading {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--sps2-grey);
    text-align: center;
}

.sps2-social-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sps2-social-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    border: 2px solid var(--sps2-grey);
    border-radius: var(--sps2-radius);
    background: var(--sps2-white);
    color: var(--sps2-black);
    text-decoration: none;
    font-weight: 600;
}

.sps2-social-button:hover { border-color: var(--sps2-blue); color: var(--sps2-blue); }
.sps2-social-button:focus {
    outline: 4px solid var(--sps2-focus);
    outline-offset: 0;
}

/* =============================================================================
   Footer — estate SPS chrome (SPS2-THEME-PARITY-SPEC.md §4.4; ported from
   the ndo-laravel reference sps.css): 3px SPS-green top border, brand
   lockup + social row, copyright + links row with the Cookies pill.
   ============================================================================= */

.nhs-theme-footer {
    flex-shrink: 0;
    border-top: 3px solid #008232;
    background: var(--sps2-grey-light);
    padding: 32px 0;
}

.nhs-theme-footer a {
    text-decoration: underline;
}
.nhs-theme-footer__social a {
    text-decoration: none;
}
.nhs-theme-footer a:focus {
    background-color: var(--sps2-focus);
    box-shadow: 0 -2px var(--sps2-focus), 0 4px var(--sps2-black);
    color: var(--sps2-black);
    outline: 4px solid transparent;
    text-decoration: none;
}

.nhs-theme-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
}
.nhs-theme-footer__row + .nhs-theme-footer__row {
    margin-top: 32px;
    font-size: 14px;
    align-items: baseline;
}

.nhs-theme-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nhs-theme-footer__brand img {
    max-width: 140px;
    height: auto;
    width: auto;
}
.nhs-theme-footer__brand svg {
    float: none;
    min-width: 0;
    max-width: none;
    height: 24px;
    width: auto;
}
.nhs-theme-footer__divider {
    align-self: stretch;
    width: 1px;
    background: #6a716f80;
}

.nhs-theme-footer__copyright {
    margin: 0;
    font-size: 14px;
    color: var(--sps2-black);
}

.nhs-theme-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__social li {
    display: flex;
    align-items: center;
    margin: 0;
}
.nhs-theme-footer__social a {
    display: flex;
    align-items: center;
    line-height: 0;
}
.nhs-theme-footer__social svg {
    display: block;
    width: 50px;
    height: 50px;
}

.nhs-theme-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__links li {
    margin: 0;
}
.nhs-theme-footer__links a {
    white-space: nowrap;
}
.nhs-theme-footer .nhsuk-footer__list {
    float: none;
    width: auto;
    padding-bottom: 0;
}
.nhs-theme-footer .nhsuk-footer__list-item-link {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:visited {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:hover {
    color: var(--sps2-black);
}
.nhs-theme-footer__row + .nhs-theme-footer__row .nhs-theme-footer__links a {
    font-size: 14px;
}

@media (max-width: 767px) {
    .nhs-theme-footer__row {
        justify-content: flex-start;
    }
    .nhs-theme-footer__row:first-child {
        justify-content: space-between;
    }
}
@media (max-width: 640px) {
    .nhs-theme-footer__brand {
        flex-wrap: wrap;
        gap: 12px;
    }
    .nhs-theme-footer__brand img {
        max-width: 120px;
    }
    .nhs-theme-footer__brand svg {
        height: 20px;
    }
}
@media (max-width: 500px) {
    .nhs-theme-footer__row:first-child {
        display: block;
    }
    .nhs-theme-footer__brand {
        margin-bottom: 32px;
    }
}

/* Cookies link, dressed as a small outlined button with a sliders icon
   so it reads as an action rather than another document (from
   sps2-cookies/assets/css/cookies.css) */
#sps2-cookie-footer-link {
    background-color: transparent;
    border: 1px solid var(--sps2-blue);
    border-radius: 24px;
    color: var(--sps2-blue);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.5;
    padding: 6px 18px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#sps2-cookie-footer-link::before {
    background-color: currentColor;
    content: '';
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
#sps2-cookie-footer-link:visited {
    color: var(--sps2-blue);
}
#sps2-cookie-footer-link:hover {
    background-color: var(--sps2-blue);
    color: var(--sps2-white);
    text-decoration: none;
}
#sps2-cookie-footer-link:focus,
#sps2-cookie-footer-link:focus-visible {
    background-color: var(--sps2-focus);
    border-color: transparent;
    box-shadow: 0 4px 0 var(--sps2-black);
    color: var(--sps2-black);
    outline: 4px solid transparent;
    text-decoration: none;
}

/* ==============================
   Identifier-first sign-in
   ============================== */

/* Attempted username shown in place of the page title on step 2 (password /
   email code), with a "start again" escape hatch back to the username form. */
.sps2-attempted-username {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 16px;
}

.sps2-attempted-username__restart {
    font-size: 0.9375rem;
    font-weight: 400;
    white-space: nowrap;
}

/* One-time email code: full-width like every other field, with spaced-out
   digits for readability */
.sps2-input--code {
    letter-spacing: 0.25em;
    font-size: 1.25rem;
}

/* ==============================
   Two-factor: OTP app setup, code entry, method chooser
   ============================== */

/* Numbered setup steps (scan QR etc.) */
.sps2-steps {
    margin: 0 0 24px;
    padding-left: 20px;
}

.sps2-steps > li { margin-bottom: 16px; }
.sps2-steps p { margin: 0 0 8px; }

.sps2-app-list {
    margin: 0;
    padding-left: 20px;
    color: var(--sps2-grey);
}

.sps2-totp-qr {
    display: inline-block;
    padding: 8px;
    border: 1px solid var(--sps2-grey-border);
    border-radius: var(--sps2-radius);
    background: var(--sps2-white);
    line-height: 0;
}

.sps2-totp-qr img { max-width: 100%; }

.sps2-totp-secret {
    display: inline-block;
    padding: 8px 12px;
    background: var(--sps2-grey-light);
    border: 1px solid var(--sps2-grey-border);
    border-radius: var(--sps2-radius);
    font-family: "Menlo", "Consolas", monospace;
    letter-spacing: 0.1em;
    word-break: break-all;
}

/* Radio (device picker when a user has several OTP devices) */
.sps2-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.sps2-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sps2-radio__input {
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--sps2-blue);
}

.sps2-radio__input:focus-visible {
    outline: 4px solid var(--sps2-focus);
    outline-offset: 1px;
}

/* "Try another way" method chooser */
.sps2-auth-selection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sps2-auth-selection__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 2px solid var(--sps2-grey);
    border-radius: var(--sps2-radius);
    background: var(--sps2-white);
    font-family: var(--sps2-font);
    text-align: left;
    cursor: pointer;
}

.sps2-auth-selection__item:hover {
    border-color: var(--sps2-blue);
    color: var(--sps2-blue);
}

.sps2-auth-selection__item:focus-visible {
    outline: 4px solid var(--sps2-focus);
    outline-offset: 0;
}

.sps2-auth-selection__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sps2-auth-selection__heading {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--sps2-black);
}

.sps2-auth-selection__item:hover .sps2-auth-selection__heading { color: var(--sps2-blue); }

.sps2-auth-selection__description {
    font-size: 0.9375rem;
    color: var(--sps2-grey);
}

.sps2-auth-selection__arrow {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--sps2-grey-mid);
    line-height: 0;
}

/* ==============================
   Recovery authentication codes
   ============================== */

.sps2-alert__title {
    display: block;
    margin-bottom: 4px;
}

.sps2-alert__text { margin: 0; }

.sps2-recovery-codes {
    list-style: none;
    margin: 0 0 16px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    background: var(--sps2-grey-light);
    border: 1px solid var(--sps2-grey-border);
    border-radius: var(--sps2-radius);
    font-family: "Menlo", "Consolas", monospace;
    font-size: 0.9375rem;
}

.sps2-recovery-codes li span {
    display: inline-block;
    min-width: 2.25em;
    color: var(--sps2-grey);
}

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

/* Print / Download / Copy — inline link-style buttons */
.sps2-recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin-bottom: 20px;
}

.sps2-button--link {
    display: inline-block;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--sps2-blue);
    font-family: var(--sps2-font);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.sps2-button--link:hover { color: var(--sps2-blue-dark); }

.sps2-button--link:focus {
    outline: 4px solid transparent;
    color: var(--sps2-black);
    background: var(--sps2-focus);
    box-shadow: 0 -2px var(--sps2-focus), 0 4px var(--sps2-black);
    text-decoration: none;
}

/* ==============================
   Responsive
   ============================== */

@media (max-width: 480px) {
    .sps2-main { padding: 24px 12px; }
    .sps2-card { padding: 28px 20px; }
    .sps2-heading { font-size: 1.5rem; }
}