/* login.css — the sign-in portal. A warm panel of cream and honey holding
   the bear and the wordmark, and the sign-in card beside it on paper. */

.route-login { overflow: auto; }
.login {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(400px, 1fr);
  background: var(--sb-paper);
  color: var(--sb-ink);
}
:root[data-theme="dark"] .login { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .login-hero { background: linear-gradient(180deg, #16303A 0%, var(--bg) 100%); border-right-color: var(--outline); }
:root[data-theme="dark"] .login-sun { opacity: .55; }
:root[data-theme="dark"] .login-lines { color: var(--text); }
:root[data-theme="dark"] .login-lines .icon { background: var(--surface-2); border-color: var(--text); }

.login-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s6);
  padding: var(--s7) var(--s6);
  background: linear-gradient(180deg, var(--sb-orange-soft) 0%, var(--sb-paper) 100%);
  border-right: 3px solid var(--sb-ink);
}
/* A soft sun behind the bear, the "sun" in Sunbear. */
.login-sun {
  position: absolute; left: 50%; top: 42%;
  width: min(80vh, 760px); aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 184, 76, .6) 0%, rgba(253, 184, 76, .28) 36%, rgba(253, 184, 76, 0) 68%);
  pointer-events: none;
}
.login-hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.login-bear { width: clamp(180px, 22vw, 300px); filter: drop-shadow(0 12px 18px rgba(52, 28, 13, .18)); }
.login-hero .wordmark { font-size: clamp(3rem, 6vw, 5.2rem); text-align: center; align-items: center; }
.login-lines {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s3);
  color: var(--sb-ink);
  font-weight: 800; font-size: var(--fs-lg);
}
.login-lines li { display: flex; align-items: center; gap: var(--s3); }
.login-lines .icon { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: var(--sb-paper-hi); border: 2px solid var(--sb-ink); flex: none; }

.login-side {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: var(--s7) var(--gutter);
  gap: var(--s5);
}
.login-mobile-brand { display: none; }
.login-card {
  width: min(440px, 100%);
  background: var(--surface-2);
  border: 3px solid var(--sb-ink);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 0 var(--sb-ink), var(--shadow-2);
  padding: var(--s6) var(--s6) var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
}
:root[data-theme="dark"] .login-card { border-color: var(--outline); box-shadow: 0 8px 0 var(--outline), var(--shadow-2); }
.login-card h1 { font-size: var(--fs-2xl); }
.login-sub { margin: -6px 0 0; font-size: var(--fs-sm); }
.login-form { display: flex; flex-direction: column; gap: var(--s4); }
.login-form .btn-primary { margin-top: var(--s2); }
.login-or { display: flex; align-items: center; gap: var(--s3); color: var(--text-3); font-weight: 800; font-size: var(--fs-sm); }
.login-or::before, .login-or::after { content: ''; flex: 1; border-top: 1.5px solid var(--line); }

.login-faces { display: flex; flex-direction: column; gap: var(--s2); }
.login-face-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.login-face {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px; padding: var(--s2) 0;
  border: 2px solid transparent; border-radius: var(--r-md); background: none;
  font-weight: 800; font-size: var(--fs-sm);
}
.login-face span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-face[aria-current="true"] { border-color: var(--sb-ink); background: var(--accent-soft); }

.login-steps { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--text-2); }
.login-steps strong { color: var(--text); word-break: break-all; }
.login-code-wrap { display: flex; align-items: center; gap: var(--s5); padding: var(--s4); border-radius: var(--r-lg); background: var(--bg); border: 1.5px solid var(--line); }
.login-qr { width: 136px; height: 136px; flex: none; display: grid; place-items: center; background: #fff; border-radius: var(--r-sm); overflow: hidden; }
.login-qr svg { width: 100%; height: 100%; }
.login-code { font-family: var(--font-brand); font-weight: 600; font-size: clamp(2.2rem, 4.5vw, 3.2rem); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.login-code-status { margin: 0; font-weight: 700; }

/* Phone and small tablet: the brand sits above the card. */
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-side { justify-content: flex-start; padding-top: calc(var(--s6) + var(--safe-top)); }
  .login-mobile-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
  .login-bear-sm { width: 118px; }
  .login-mobile-brand .wordmark { font-size: 2.4rem; align-items: center; }
  .login-card { padding: var(--s5); box-shadow: 0 6px 0 var(--sb-ink), var(--shadow-1); }
}
@media (max-width: 420px) {
  .login-code-wrap { flex-direction: column; }
}

/* TV / projector: everything bigger, the phone code first. */
.tv .login-card { width: min(640px, 100%); font-size: 1.25rem; }
.tv .login-qr { width: 200px; height: 200px; }
.tv .login-code { font-size: 4rem; }