/* The sign-in page takes its values from the tokens at the top of workspace.css: a brand panel on the left, the sign-in card on the right; on a phone the panel becomes a band above the card. */
body.login-page{margin:0;background:var(--canvas);color:var(--ink)}
.login-shell{display:grid;grid-template-columns:minmax(320px,5fr) 7fr;min-height:100vh;min-height:100dvh}
.login-brand{position:sticky;top:0;align-self:start;height:100vh;height:100dvh;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-4);padding:var(--space-12);background:linear-gradient(160deg,var(--primary) 0%,var(--primary-strong) 100%);color:var(--surface)}
.login-brand::after{content:"";position:absolute;inset:auto -120px -160px auto;width:420px;height:420px;border-radius:50%;background:var(--surface);opacity:.06;pointer-events:none}
.login-brand-marks{position:absolute;top:var(--space-12);left:var(--space-12);display:grid;grid-template-columns:repeat(4,22px);gap:14px;align-items:end}
.login-brand-marks span{width:22px;height:22px;background:var(--surface);opacity:.25}.login-brand-marks span.accent{opacity:1;transform:translateY(-16px)}
.login-brand p{margin:0;position:relative;z-index:1}
.login-brand-eyebrow{font-size:var(--text-sm);letter-spacing:1.5px;text-transform:uppercase;font-weight:var(--weight-semibold);opacity:.8}
.login-brand-title{font-size:64px;line-height:1;font-weight:var(--weight-bold);letter-spacing:2px}
.login-panel{display:flex;align-items:center;justify-content:center;padding:var(--space-10) var(--space-6)}
.login-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 18px 48px #231f2012;padding:var(--space-10)}
.login-card section{background:none;border:0;border-radius:0;padding:0;margin:0}
.login-card .brand-logo{display:block;width:150px;height:auto;margin:0 0 var(--space-8)}
.login-card h1{font-size:var(--text-2xl);letter-spacing:-1px;margin:0 0 var(--space-6)}
.login-button{display:flex;align-items:center;justify-content:center;gap:var(--space-3);width:100%;box-sizing:border-box;min-height:48px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--primary);color:var(--surface);font-weight:var(--weight-semibold);font-size:var(--text-md);text-decoration:none;transition:background .15s}
.login-button svg{flex:none;background:var(--surface);padding:3px;border-radius:3px}
.login-button:hover{background:var(--primary-strong)}.login-button:focus-visible{outline:3px solid var(--tint);outline-offset:2px}
#status:empty{display:none}
#status{margin:var(--space-6) 0 0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--tint-soft);border:1px solid var(--tint);color:var(--primary-strong);font-size:var(--text-sm);line-height:1.5}
.login-card .login-test{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--line)}
.login-test-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}
.login-test h2{margin:0;font-size:var(--text-lg)}
.login-badge{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--ink-2);background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap}

#personas{display:grid;gap:var(--space-2)}
#personas button{margin:0;text-align:left;display:grid;gap:var(--space-1);background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:var(--space-3) var(--space-10) var(--space-3) var(--space-4);border-radius:var(--radius-md);position:relative;min-height:0;cursor:pointer}
#personas button::after{content:"›";position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);font-size:var(--text-xl);color:var(--line-strong)}
#personas button:hover,#personas button:focus-visible{border-color:var(--primary);background:var(--tint-soft)}#personas button:hover::after{color:var(--primary)}
#personas button strong{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--primary)}
#personas button span{font-size:var(--text-sm);font-weight:var(--weight-regular);line-height:1.4;color:var(--ink-2)}
@media(max-width:860px){.login-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}.login-brand{position:relative;height:auto;padding:var(--space-8) var(--space-6) var(--space-6);gap:var(--space-2)}.login-brand-marks{display:none}.login-brand-title{font-size:var(--text-2xl)}.login-panel{align-items:flex-start;padding:var(--space-6) var(--space-4)}.login-card{padding:var(--space-6)}}