/* Base element resets — the same visual treatment React's tokens.css gives these elements,
 * reusing the shared tokens generated above so a button, input or heading looks identical whether
 * it is rendered by a React app or by this Keycloak theme. */
*{box-sizing:border-box}body{margin:0;min-width:20rem;background:var(--page)}a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}button,input,select,textarea{font:inherit}button,a,input,select{touch-action:manipulation}button,[type=submit],.button{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;border:1px solid var(--accent);border-radius:var(--radius-md);background:var(--accent);color:var(--accent-ink);padding:.65rem 1rem;font-size:1rem;font-weight:var(--weight-ui);line-height:1.2;text-decoration:none}button:hover,.button:hover{filter:brightness(.97)}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:3px}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{width:100%;min-height:3rem;border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:.65rem .8rem;background:var(--surface);color:var(--ink);font-size:1rem}input:hover,select:hover,textarea:hover{border-color:var(--ink-soft)}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 20%,transparent)}input[type=checkbox],input[type=radio]{width:1.05rem;height:1.05rem;accent-color:var(--accent)}label{display:block;font-weight:var(--weight-ui);margin-bottom:.45rem}/* Every auth/action screen (login, register, password reset, email change, MFA setup...) is a
 * compact utility moment, not a marketing landing — so it shares the same restrained heading size
 * as the React apps' own action pages (`--step-2`, the same token `.title` uses in the account
 * app). Only the public marketing site earns the large `--step-display` hero treatment, and it
 * isn't part of this theme. */
h1,h2,h3{margin:0 0 var(--space-5);font-weight:var(--weight-heading);letter-spacing:-.045em;line-height:var(--leading-tight)}h1{font-size:var(--step-2)}p{line-height:1.5}:focus-visible{outline:3px solid var(--focus);outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:root{--icon-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");--icon-eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 10.6a2.5 2.5 0 0 0 3.5 3.5'/%3E%3Cpath d='M9.9 5.1C10.6 5 11.3 5 12 5c6.5 0 10 7 10 7a13.2 13.2 0 0 1-2.8 3.4M6.2 7.2C4 8.9 2 12 2 12s3.5 7 10 7c1.1 0 2.1-.2 3-.5'/%3E%3C/svg%3E")}
.brand{display:inline-flex;align-items:center;gap:.65rem;margin-bottom:2.5rem;font-size:1.3rem;font-weight:600;letter-spacing:-.06em;text-decoration:none}.brand-mark{width:1.3rem;height:1.3rem;border:2px solid currentColor;border-radius:.44rem;transform:rotate(-9deg)}.auth-shell{display:grid;place-items:center;min-height:100dvh;width:min(100%,32rem);margin:auto;padding:1.25rem}.auth-card{width:100%;padding:clamp(1.5rem,5vw,2.5rem);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-lg)}.form-group{margin:var(--space-5) 0}.form-options{margin:var(--space-3) 0 0;font-size:.875rem}hr{border:0;border-top:1px solid var(--line);margin:var(--space-5) 0}
/* Notices share one language with the React `Note` component: a bordered box with a tone-colored
 * left edge. `message.type` from Keycloak (success/warning/error/info) maps directly onto it, the
 * same tone vocabulary (ok/warn/stop/plain) React uses. Security-relevant messages keep
 * `role="alert"` from the template, and an error's own left-edge color plus box treatment carries
 * the same visual weight as everywhere else in the product. */
.alert{margin:var(--space-5) 0;padding:var(--space-4) var(--space-5);border:1px solid var(--line-strong);border-left:3px solid var(--ink);color:var(--ink-soft)}.alert-success{border-left-color:var(--positive)}.alert-warning{border-left-color:var(--notice)}.alert-error{border-left-color:var(--error)}.field-error{color:var(--error)}.field-error{display:block;margin-top:.4rem;font-size:.875rem}.muted{color:var(--muted)}.secondary{border-color:var(--line-strong);background:transparent;color:var(--ink)}.full-width{width:100%}.account-label{display:flex;gap:.5rem;flex-wrap:wrap;margin:var(--space-4) 0;color:var(--muted);font-size:.875rem}.account-label a{color:var(--ink);font-weight:550}.input-group{position:relative;display:flex}.input-group>input{min-width:0;flex:1 1 auto;padding-right:3rem}.password-toggle{position:absolute;right:.3rem;top:.3rem;display:grid;place-items:center;width:2.4rem;min-height:2.4rem;padding:0;border:0;background:transparent;color:var(--muted)}.password-toggle i{display:block;width:1.15rem;height:1.15rem;background:currentColor;-webkit-mask:center/contain no-repeat var(--icon-eye);mask:center/contain no-repeat var(--icon-eye)}.password-toggle i.hide-password{-webkit-mask-image:var(--icon-eye-off);mask-image:var(--icon-eye-off)}.method-card{margin:var(--space-3) 0;padding:var(--space-4) 0;border-top:1px solid var(--line)}.method-card button{width:100%}#kc-totp-settings{padding-left:1.3rem}#kc-totp-settings li{margin:var(--space-4) 0}#kc-totp-secret-qr-code{display:block;max-width:100%;margin:var(--space-5) auto;border-radius:var(--radius-sm)}#kc-totp-secret-key,code{overflow-wrap:anywhere}#kc-form-login input[type=submit]{margin-top:var(--space-5)}#kc-registration{margin-top:var(--space-5);text-align:center}#kc-registration a{font-weight:550}#kc-form-options .checkbox label{display:flex;gap:.6rem;align-items:center;font-weight:400}#kc-recovery-codes-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin:var(--space-4) 0;padding:var(--space-4) 0;list-style-position:inside;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}#kc-recovery-codes-list li{overflow-wrap:anywhere}/* The canonical action group: every action inside it is full-width and stacked, so a primary
 * submit and a secondary/cancel action are always the same size and weight — never a full-width
 * primary next to a shrunken text-sized cancel. Every button in this group must carry
 * kcButtonBlockClass explicitly; nothing here makes a bare <input type=submit> full-width by
 * element type the way the old, sloppier rule did. */
#kc-form-buttons{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0}.skip-link:focus{position:fixed;z-index:10;top:1rem;left:1rem;width:auto;height:auto;margin:0;padding:.7rem .85rem;clip:auto;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}ul{padding-left:1.2rem}a,button,label,p{overflow-wrap:anywhere}.required{color:var(--error)}.field-label{display:flex;align-items:baseline;gap:.3rem}.field-label label{margin-bottom:.45rem}@media(prefers-reduced-motion:no-preference){button,input,select,textarea{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease}}@media(max-width:30rem){.auth-shell{padding:var(--space-4)}.auth-card{padding:1.35rem}#kc-recovery-codes-list{grid-template-columns:1fr}}