/* The user's folder-card reference, in the existing TaskBoard palette. */
.login-view{grid-template-columns:58% 42%}
.login-panel{background:var(--bg);border:0;padding:76px 52px 76px 36px}
.login-card{position:relative;isolation:isolate;width:100%;max-width:420px;padding-top:54px;animation:login-file-arrive .55s var(--ease) both}
.login-card:before{content:'';position:absolute;z-index:-1;top:100px;right:-16px;bottom:20px;left:25px;border-radius:14px;background:#e8d4c2;transform:rotate(2deg);box-shadow:0 16px 34px rgb(90 57 28 / 9%)}
.login-card .login-form{position:relative;max-width:none;width:100%;border-radius:0 14px 14px 14px;background:var(--panel);filter:drop-shadow(0 24px 28px rgb(90 57 28 / 13%))}
.login-tab{position:absolute;inset:-54px auto auto 0;display:flex;align-items:center;gap:12px;width:52%;height:55px;padding:0 30px;isolation:isolate}
.login-tab:before{content:'';position:absolute;inset:0;z-index:-1;background:var(--panel);border-radius:14px 0 0 0;clip-path:polygon(0 0,calc(100% - 25px) 0,100% 100%,0 100%)}
.login-tab svg{width:24px;height:24px;color:var(--accent-strong);stroke-width:1.7}
.login-tab h2{margin:0;font-size:24px;font-weight:550;line-height:1;letter-spacing:-.025em}
.login-punches{position:absolute;right:28px;top:25px;display:flex;gap:6px}
.login-punches i{display:block;width:5px;height:5px;border:1.5px solid #b9773d;border-radius:50%}
.login-fields{padding:60px 30px 22px}
.login-fields label{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5;font-weight:570;letter-spacing:.045em;text-transform:uppercase}
.login-fields input{height:56px;min-height:56px;padding:15px 17px;border:1px solid transparent;border-radius:7px;background:var(--bg);font-size:16px;transition:background .16s,border-color .16s}
.login-fields input::placeholder{color:var(--muted);font-size:14px}
.login-fields input:hover{border-color:#c9beb2;background:var(--raised)}
.login-fields input:focus{border-color:var(--accent-strong);background:var(--panel)}
.login-fields .password-label{align-items:center;min-height:32px;margin-top:22px;margin-bottom:4px}
.login-fields .password-label label{margin:0}
.login-fields .password-label .text-button{min-height:32px;padding:5px 0;font-size:12px;color:var(--accent-strong)}
.login-fields .password-label .text-button:hover{text-decoration:underline}
.login-fields .form-error{display:block;min-height:21px;margin:18px 0 0;line-height:1.5;font-size:13px}
.login-fields .form-error:empty{display:block}
.login-card .login-submit{position:relative;display:flex;justify-content:center;gap:14px;width:100%;min-height:72px;padding:20px 54px;margin:0;border-radius:0 0 14px 14px;font-size:17px;font-weight:570;letter-spacing:-.015em}
.login-card .login-submit svg{position:absolute;right:30px;width:22px;height:22px}
.login-card .login-submit:hover:not(:disabled),.login-card .login-submit:active:not(:disabled){transform:none}
.login-card .login-submit:focus-visible{outline-offset:5px}
@keyframes login-file-arrive{from{transform:translateY(9px)}to{transform:translateY(0)}}
@media(max-width:1100px) and (min-width:801px){
 .login-view{grid-template-columns:52% 48%}
 .login-panel{padding:72px 38px 72px 24px}
 .login-fields{padding-left:26px;padding-right:26px}
 .login-tab{padding-left:26px;width:56%}
}
@media(max-width:800px), (max-width:980px) and (max-height:500px){
 .login-view{position:relative;display:grid;grid-template-columns:1fr;align-items:center;min-height:100svh;padding:56px 24px 40px;isolation:isolate}
 .login-view .letter-room{position:absolute;inset:0;z-index:-1;width:100%;height:100%;min-height:100%;max-height:none;opacity:.68}
 .login-panel{padding:0;border:0;background:transparent;align-items:center}
 .login-card{max-width:390px;width:calc(100% - 10px);padding-top:50px}
 .login-card:before{right:-10px;left:20px;top:88px;bottom:18px;transform:rotate(1.6deg)}
 .login-tab{top:-50px;height:51px;width:60%;padding:0 24px;gap:11px}
 .login-tab h2{font-size:23px}
 .login-tab svg{width:22px;height:22px}
 .login-fields{padding:52px 24px 18px}
 .login-fields .password-label{margin-top:20px}
 .login-fields .password-label .text-button{min-height:40px;padding:9px 0}
 .login-punches{right:24px;top:23px}
 .login-card .login-submit{min-height:68px}
 .login-card .login-submit svg{right:24px}
}
@media(max-width:360px){
 .login-view{padding-left:18px;padding-right:18px}
 .login-fields{padding-left:22px;padding-right:22px}
 .login-tab{padding-left:22px}
}
@media(prefers-reduced-motion:reduce){.login-card{animation:none}}
