/* Auth pages (allauth) — layout built on top of calex-uk.css tokens */

.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;
}

.auth-shell{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:var(--surface-sunken);
}

.auth-topbar{
    background:var(--calex-ink-900);
    color:#fff;
    padding:var(--space-5) var(--space-6);
}

.auth-brand{
    max-width:1240px;
    margin:0 auto;
    display:flex;
    align-items:baseline;
    gap:12px;
}

.auth-brand-name{
    font-weight:800;
    font-size:20px;
    letter-spacing:-0.03em;
    line-height:1;
}

.auth-brand-tag{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:rgba(255,255,255,.72);
}

.auth-main{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:var(--space-6);
}

.auth-card{
    width:100%;
    max-width:400px;
    background:var(--surface-card);
    border:var(--border-w) solid var(--border-subtle);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    padding:var(--space-8) var(--space-6);
}

.auth-h1{
    font-size:var(--size-heading-l);
    margin-bottom:var(--space-2);
}

.auth-h2{
    font-size:var(--size-heading-s);
    margin:var(--space-6) 0 var(--space-3);
    padding-top:var(--space-5);
    border-top:var(--border-w) solid var(--border-subtle);
}

.auth-p{
    color:var(--text-muted);
    font-size:var(--size-body-s);
    margin-bottom:var(--space-6);
}

.auth-p:last-child{ margin-bottom:0; }

.auth-hr{
    border:none;
    border-top:var(--border-w) solid var(--border-subtle);
    margin:var(--space-6) 0;
}

.auth-badge{
    display:inline-flex;
    align-items:center;
    font-size:11px;
    font-weight:var(--weight-bold);
    letter-spacing:.04em;
    text-transform:var(--transform-label);
    padding:2px var(--space-2);
    border-radius:var(--radius-pill);
    background:var(--surface-accent-soft);
    color:var(--accent);
    margin-left:var(--space-2);
}

.auth-alert{
    display:flex;
    gap:var(--space-3);
    align-items:flex-start;
    font-size:var(--size-body-s);
    padding:var(--space-4);
    border-radius:var(--radius-sm);
    background:var(--surface-sunken);
    border:var(--border-w) solid var(--border-subtle);
    color:var(--text-body);
    margin-bottom:var(--space-5);
}

.auth-button-group{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    margin:var(--space-5) 0;
}

.auth-button-group.horizontal{
    flex-direction:row;
}

.auth-details{
    margin:var(--space-4) 0;
    border:var(--border-w) solid var(--border-subtle);
    border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-4);
}

.auth-details > summary{
    cursor:pointer;
    font-weight:var(--weight-semibold);
    font-size:var(--size-body-s);
    color:var(--text-heading);
}

.auth-details-body{
    margin-top:var(--space-3);
    font-size:var(--size-body-s);
    color:var(--text-muted);
}

.auth-messages{
    list-style:none;
    margin:0 0 var(--space-5);
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
}

.auth-messages li{
    font-size:var(--size-body-s);
    padding:var(--space-3) var(--space-4);
    border-radius:var(--radius-sm);
    background:var(--status-success-soft);
    color:var(--status-success);
    border:var(--border-w) solid var(--status-success);
}

.auth-menu{
    list-style:none;
    display:flex;
    gap:var(--space-4);
    padding:0;
    margin:0 0 var(--space-6);
    font-size:var(--size-body-s);
}

.auth-provider-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    padding:0;
    margin:0 0 var(--space-6);
}

.auth-field{
    margin-bottom:var(--space-4);
}

.auth-field .errorlist{
    list-style:none;
    padding:0;
    margin:0 0 var(--space-2);
    font-size:var(--size-caption);
    color:var(--status-error);
}

.auth-help-text{
    display:block;
    font-size:var(--size-caption);
    color:var(--text-muted);
    margin-top:var(--space-1);
}

.auth-form label{
    display:block;
    font-size:var(--size-body-s);
    font-weight:var(--weight-medium);
    color:var(--text-heading);
    margin-bottom:var(--space-2);
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"]{
    width:100%;
    height:var(--control-h-md);
    padding:0 var(--space-4);
    margin-bottom:var(--space-4);
    font-family:var(--font-body);
    font-size:var(--size-body);
    color:var(--text-body);
    background:var(--surface-page);
    border:var(--border-w) solid var(--border-strong);
    border-radius:var(--radius-sm);
}

.auth-form input:focus-visible{
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
    border-color:var(--accent);
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:var(--control-h-md);
    padding:0 var(--space-5);
    font-family:var(--font-body);
    font-size:var(--size-button);
    font-weight:var(--weight-semibold);
    letter-spacing:var(--tracking-button);
    text-transform:var(--transform-label);
    border-radius:var(--radius-sm);
    border:var(--border-w) solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:background var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}

.btn:hover{ text-decoration:none; }
.btn:active{ transform:var(--press-scale); }

.btn-primary{
    background:var(--accent);
    color:var(--accent-on);
}
.btn-primary:hover{ background:var(--calex-ink-900); color:var(--accent-on); transform:var(--hover-lift); }
.btn-primary:active{ background:var(--accent-press); transform:none; }

.btn-secondary{
    background:var(--surface-page);
    color:var(--text-heading);
    border-color:var(--border-strong);
}
.btn-secondary:hover{ background:var(--surface-sunken); color:var(--text-heading); }

.btn-danger{
    background:var(--status-error-soft);
    color:var(--status-error);
    border-color:var(--status-error);
}
.btn-danger:hover{ background:var(--status-error); color:#fff; }

.auth-provider-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-3);
}

.auth-provider-icon{ flex:none; }

.auth-provider-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    margin-bottom:var(--space-5);
    background:var(--surface-sunken);
    border:var(--border-w) solid var(--border-subtle);
    border-radius:var(--radius-md);
}

.auth-provider-preview--ms{
    animation:ms-preview-in var(--duration-base,300ms) var(--ease-out,ease-out) both,
              ms-preview-glow 2.4s ease-in-out 900ms infinite;
}

.ms-tile{
    transform-origin:center;
    opacity:0;
    animation:ms-tile-in 420ms cubic-bezier(.2,.8,.2,1) both;
}

.ms-tile-1{ animation-delay:80ms; }
.ms-tile-2{ animation-delay:200ms; }
.ms-tile-3{ animation-delay:320ms; }
.ms-tile-4{ animation-delay:440ms; }

@keyframes ms-tile-in{
    0%{ opacity:0; transform:scale(.4) rotate(-8deg); }
    70%{ opacity:1; transform:scale(1.08) rotate(0deg); }
    100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

@keyframes ms-preview-in{
    from{ transform:scale(.85); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

@keyframes ms-preview-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(0,164,239,0); }
    50%{ box-shadow:0 0 0 6px rgba(0,164,239,.12); }
}

@media (prefers-reduced-motion: reduce){
    .auth-provider-preview--ms,
    .ms-tile{
        animation:none;
        opacity:1;
    }
}


/* Login-splash overlay (Microsoft sign-in only) moved to auth-splash.css,
   loaded only by socialaccount/login.html. */

.auth-footer{
    margin-top:var(--space-6);
    padding-top:var(--space-5);
    border-top:var(--border-w) solid var(--border-subtle);
    font-size:var(--size-body-s);
    color:var(--text-muted);
    text-align:center;
}