/* The sign-in screen and the small centered cards (messages, verification). Tokens only. */
.center {
  min-height: calc(100vh - var(--env-banner-h)); min-height: calc(100dvh - var(--env-banner-h)); display: grid; place-items: center; padding: var(--space-5);
  background:
    radial-gradient(60rem 36rem at 12% -10%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 60%),
    radial-gradient(48rem 30rem at 100% 110%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%),
    var(--color-bg);
}
.card {
  width: 100%; max-width: 27rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6) calc(var(--space-6) + var(--space-1));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent), 0 24px 48px -24px color-mix(in srgb, var(--color-text) 28%, transparent);
  animation: rise 420ms var(--ease) both;
}
.card .brand { margin-bottom: var(--space-5); }
.card h1 { font-size: 1.6rem; margin-bottom: var(--space-1); }
.card .lede { color: var(--color-text-muted); margin-bottom: var(--space-5); }
@keyframes rise { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* sign-in: the status line under the fields says what is about to happen (read out politely by screen readers) */
.signin-status { min-height: 1.5em; margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: .92em; color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }
.signin-status .icon { width: 1.1em; height: 1.1em; color: var(--color-accent); }
#login-form[data-state="staff"] .signin-status { color: var(--color-accent-text); }
#login-form[data-state="redirecting"] #password-field, #login-form[data-state="redirecting"] [data-submit] { opacity: .6; }
.card form + .hint { margin-top: var(--space-3); }          /* the base .hint pulls up under a field; under the button of a card it would overlap it, and the link below would be partly covered (axe: target-size, obscured) */
.card .hint a { font-weight: 600; display: inline-block; min-height: 24px; padding-block: .3em; }          /* a link under the main button (Start over, Cancel) is a target of its own: 24 px high, or axe's target-size finds it too close to the button above (WCAG 2.5.8) */
@media (max-width: 30rem) { .card { padding: var(--space-5); border-radius: var(--radius-lg); } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

/* ---- the old look's cards: sign-in, forgot and reset password, the small notices (2026-10-22). The old app's own page: the old logo, a light purple page under a white card, the heading and its subtitle, the label above each field with its
   placeholder inside, the error as plain red text, the link to reset the password above the button. Tokens only; the old look is light only. */
:root[data-look="old"] .center { background: color-mix(in srgb, var(--color-accent) 20%, var(--color-bg)); }
:root[data-look="old"] .card { max-width: 28rem; border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-card, 0 1px 2px color-mix(in srgb, var(--color-text) 8%, transparent)); animation: none; }
:root[data-look="old"] .card h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: 0; margin-bottom: var(--space-2); }
:root[data-look="old"] .card .lede { margin-bottom: var(--space-5); }
:root[data-look="old"] .old-card-logo { display: block; margin: 0 0 var(--space-3); }
:root[data-look="old"] .old-card-logo img { display: block; height: auto; width: 11.9rem; max-width: 100%; }
:root[data-look="old"] .old-card-logo-dark { display: none !important; }
:root[data-look="old"] .center .field.float { display: flex; flex-direction: column; }
:root[data-look="old"] .center .field.float > span,
:root[data-look="old"] .center .field.float input:focus ~ span,
:root[data-look="old"] .center .field.float input:not(:placeholder-shown) ~ span { order: -1; position: static; transform: none; margin: 0 0 var(--space-1); padding: 0; background: transparent; pointer-events: auto; font-size: .875rem; font-weight: 500; color: var(--color-text); }
:root[data-look="old"] .center .field.float input::placeholder { color: var(--color-text-muted); }
:root[data-look="old"] .center .field input { border-radius: var(--radius-md); padding: .6rem var(--space-3); }
:root[data-look="old"] .center .field input:focus-visible { box-shadow: 0 0 0 2px var(--color-focus); border-color: var(--color-focus); }
:root[data-look="old"] .center .field .reveal { top: auto; bottom: .1rem; }
:root[data-look="old"] .center .notice { background: transparent; padding: 0; border-radius: 0; font-size: .875rem; color: var(--color-danger-text); }
:root[data-look="old"] .center .notice.ok { color: var(--color-text); }
:root[data-look="old"] .center .btn { box-shadow: none; border-radius: var(--radius-md); }
:root[data-look="old"] .old-forgot { margin: 0 0 var(--space-2); text-align: right; }
:root[data-look="old"] .old-forgot a { color: var(--color-accent-text); }
:root[data-look="old"] .center .forgot { text-align: left; }
:root[data-look="old"] .old-notfound { text-align: center; padding: var(--space-6) 0; }
:root[data-look="old"] .old-notfound-code { font-size: 3rem; font-weight: 700; margin: 0 0 var(--space-2); }

/* ---- the authenticator pages (2026-10-23): the steps of the setup, and the page that explains why. Tokens only. */
.card .steps { margin: 0 0 var(--space-4); padding-left: 1.4rem; display: grid; gap: var(--space-2); }
.card .steps li { line-height: 1.45; }
.card .steps a { font-weight: 600; }
.card .steps .key { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; padding: .1rem .35rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 8%, transparent); font-size: .92em; letter-spacing: .04em; }
.card .about-q { font-size: 1rem; font-weight: 600; margin: var(--space-4) 0 var(--space-1); }
.card .about-q + p { margin: 0; color: var(--color-text); line-height: 1.5; }