/* screens/login.css — access-key login (#/login). Prefix .login-
   Shell treatment mirrors #/welcome: no sidebar, topbar keeps the brand and
   the language toggle (a visitor must be able to switch language before
   signing in). */

body[data-route="login"] .sh-side{display:none}
body[data-route="login"] .sh-top,body[data-route="login"] #view{margin-left:0}
body[data-route="login"] #shLive{display:none}
body[data-route="login"] .sh-top__brand{display:flex}
body[data-route="login"] #shBiz{display:none}
body[data-route="login"] #shLogout{display:none}

.login-wrap{
  min-height:calc(100dvh - var(--topbar-h) - 120px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-16);
  padding:var(--sp-32) 0 var(--sp-48);
}
.login-card{
  width:100%;max-width:420px;
  padding:var(--sp-40) clamp(24px,4vw,40px);
  box-shadow:var(--e2);
  display:flex;flex-direction:column;gap:var(--sp-12);
}
.login-mark{width:42px;height:39px;color:var(--ink);margin-bottom:var(--sp-8)}
.login-mark svg{width:100%;height:100%;display:block}
.login-title{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.01em;line-height:var(--lh-tight);margin:0}
.login-sub{font-size:var(--fs-base);color:var(--muted);line-height:var(--lh-body);margin:0 0 var(--sp-8)}
.login-form{display:flex;flex-direction:column;gap:var(--sp-16)}
.login-form input{width:100%}
.login-submit{width:100%;height:var(--btn-h)}

/* quiet exit into the seeded demo — a link, not a competing button */
.login-demo{
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--fs-sm);font-weight:600;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);
  padding:var(--sp-8) var(--sp-12);border-radius:var(--r-md);
  transition:color var(--t);
}
.login-demo:hover{color:var(--ink);text-decoration-color:var(--ink)}
.login-demo:focus-visible{outline:none;box-shadow:var(--focus)}

/* #shLogout styling lives in shell.css (shell owns the topbar control) */