/* 100vh is taller than the visible area on mobile browsers (URL bar), forcing a scroll on login/register/code screens; dvh tracks the visible viewport, vh stays as fallback. */
.brick.brick-login-1 .brick-content {
    height: 100vh;
    height: 100dvh;
}

.sc-auth-switch {
    margin-bottom: 1.5em;
}
.sc-auth-switch a,
.sc-auth-terms-link {
    text-decoration: underline;
    cursor: pointer;
}

.sc-auth-divider {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1.5em;
    color: var(--sc-color-text-subtle);
}
.sc-auth-divider::before,
.sc-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--sc-auth-line);
}
.sc-auth-provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    margin-bottom: 0.75em;
}
.siteclick-container .siteclick-buttons .button.sc-auth-provider {
    display: flex;
}
.sc-auth-provider img {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
}

/* Round 28 (r.389): auth stays dark in both themes — a black box with a 1px frame,
   fields on the regular dark fill (text-soft-bg is the same dark grey in both themes). */
.siteclick-container .brick-login-1 .bg-blue-4 {
    background-color: var(--sc-color-black) !important;
    border: 1px solid var(--sc-color-hairline);
}
.siteclick-container .brick-login-1 .siteclick-form-component-variant-dark {
    --sc-input-bg: var(--sc-color-text-soft-bg);
}
/* Login CLS (M0 P5 0.071 on div.container-5): the logo has no intrinsic size in the markup,
   so the vertically centred box jumped when it loaded; reserve its box (948x141). */
.brick-login-1 .container-5 .component > img.mw-200 {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 948 / 141;
}

/* Auth pages: the notification stack never exceeds the viewport minus 32px (V12). `body.` outranks the later-loaded sc-chrome-items.css rule. */
body.siteclick-container .siteclick-notifications {
    width: min(var(--sc-ntf-w), calc(100vw - 32px));
    grid-template-columns: minmax(0, 1fr);
}
body.siteclick-container .siteclick-notifications .notification-body {
    min-width: 0;
}

/* Run fix31 (A12/A13, B1): the auth block stays black in both themes, so the text on it keeps a light
   ink in light too. The text scale is redeclared on the block (white is theme-independent) so every token
   reader inside it (labels, links, neutral buttons) resolves light ink; secondary copy steps back with
   opacity (60 % white on black = the dark-theme subtle grey) because colour literals/color-mix are ratcheted. */
.siteclick-container .sc-auth {
    background-color: var(--sc-color-black);
    --sc-color-text-strong: var(--sc-color-white);
    --sc-color-text: var(--sc-color-white);
    --sc-color-text-soft: var(--sc-color-white);
    --sc-color-text-muted: var(--sc-color-white);
    --sc-color-text-subtle: var(--sc-color-white);
    --sc-button-neutral-text: var(--sc-color-white);
    --sc-button-neutral-text-hover: var(--sc-color-white);
}
.sc-auth .sc-auth-ink {
    color: var(--sc-color-text-strong);
}
.sc-auth .sc-auth-soft {
    color: var(--sc-color-text-subtle);
    opacity: .6;
}

/* A14: two-up and code rows without the -5px gutter of siteclick-components-inline-justified
   (it pushed form-body 5px wider than its box). */
.sc-auth-row,
.sc-auth-code {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sc-auth-code {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sc-auth-code .siteclick-components-placeholder {
    padding: 0;
}