/* second story — auth.css (Batch 3): login + signup */
.auth{display:grid;grid-template-columns:.9fr 1.1fr;min-height:calc(100vh - 110px)}
.auth__side{padding:clamp(2rem,5vw,5rem);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s4)}
.auth__side h1{max-width:12ch;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.auth__side ul{list-style:none;display:grid;gap:1rem;max-width:34ch;transition:opacity .35s var(--ease) .05s}
.auth__side li{padding-top:1rem;border-top:1px solid rgba(255,250,247,.25);opacity:.85}
.auth__side.swap h1{opacity:0;transform:translateY(12px)}.auth__side.swap ul{opacity:0}
.auth__main{display:grid;place-items:center;padding:clamp(2rem,5vw,4rem) var(--pad)}
.auth__box{width:100%;max-width:460px}
.auth__box>p{margin-top:.6rem}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin:1.8rem 0 1.4rem}
.role{position:relative;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.role input{position:absolute;opacity:0}
.role b{display:block;font:600 1.05rem var(--f-display);letter-spacing:-.02em}
.role span{font-size:.82rem;opacity:.65}
.role:has(input:checked){background:var(--ink);color:var(--cream);border-color:var(--ink)}
.role:has(input:focus-visible){outline:2px solid var(--rust);outline-offset:3px}
.field{margin-bottom:1.1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.4rem}
.field__in{position:relative}
.field input{width:100%;padding:.9rem 1rem;border:1px solid var(--line);border-radius:10px;background:var(--cream);transition:border-color .25s,box-shadow .25s}
.field input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.field input[aria-invalid=true]{border-color:var(--rust)}
.field .err{display:block;min-height:1.1rem;margin-top:.3rem;font-size:.8rem;color:var(--rust)}
.eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);padding:.5rem .7rem;font-size:.82rem;font-weight:600;opacity:.7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;margin:.4rem 0 .2rem}
.check input{margin-top:.25rem;accent-color:var(--rust)}
.auth__box .btn{width:100%;margin-top:1.2rem}
.formerr{color:var(--rust);font-size:.9rem;margin-top:1rem;min-height:1.3rem}
.alt{margin-top:1.4rem;font-size:.92rem}
.demo{margin-top:1.8rem;padding-top:1.4rem;border-top:1px dashed var(--line)}
.demo div{display:flex;gap:.7rem;margin-top:.7rem;flex-wrap:wrap}
.demo .btn{width:auto;margin:0;padding:.6rem 1.1rem;font-size:.88rem}
[hidden]{display:none!important}
@media (max-width:980px){.auth{grid-template-columns:1fr}.auth__side{padding-block:2.5rem}.auth__side ul{display:none}.auth__side h1{font-size:2.2rem}}