/* login.html — one centred panel at every width */

body {
  min-height: 100vh;
  /* Fills the screen on a phone even with the browser chrome sliding about. */
  min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
}

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 36px) clamp(18px, 4.5vw, 32px);
  width: 100%; max-width: 440px;
}

h1 { font-size: clamp(19px, 4.4vw, 22px); margin: 0 0 6px; letter-spacing: -.02em; }
h3 { font-size: clamp(15px, 3.4vw, 17px); margin: 0 0 10px; font-weight: 600; }
.sub { color: var(--muted); font-size: 15px; margin: 0 0 26px; }

.signin { display: flex; justify-content: center; min-height: 44px; }

.note {
  color: var(--muted); font-size: 13px; margin-top: 26px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.error { color: var(--bad); font-size: 14px; margin-top: 18px; min-height: 20px; }

.setup { display: none; font-size: 14px; }
.setup ol { padding-left: 20px; margin: 12px 0; }
.setup li { margin-bottom: 10px; }

.spinner { color: var(--muted); font-size: 14px; }

.brand { text-align: center; margin-bottom: clamp(14px, 3vw, 22px); }
.brand img {
  /* Fixed at 260px this crowded a phone; now it scales with the panel. */
  width: clamp(132px, 42vw, 260px);
  height: auto; aspect-ratio: 1; object-fit: contain;
  border-radius: 18px;
}
@media (prefers-color-scheme: dark) {
  /* The artwork has a white ground; soften it into the card in dark mode. */
  .brand img { background: #fff; padding: 2px; }
}

/* Short phone in landscape: the panel should scroll, not centre off-screen. */
@media (max-height: 520px) {
  body { align-items: flex-start; }
  .brand img { width: clamp(96px, 22vw, 140px); }
}