/* Sign-in screen. A separate, chrome-free layout: there is no navigation to
   show to someone who is not signed in. */

.auth {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, var(--bg-selected), transparent 70%),
    var(--bg-canvas);
}

.auth__panel {
  width: min(400px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}
.auth__brand .sidebar__mark { width: 40px; height: 40px; }
.auth__brand-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }

.auth__card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
}

.auth__title { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.auth__subtitle { color: var(--text-secondary); font-size: var(--text-base); margin-bottom: var(--space-5); }

.auth__footer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Development-only credential hint. Rendered exclusively in the development
   environment - see the guard in the view. */
.auth__dev-hint {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.auth__dev-hint code { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Secondary routes out of the two-step verification screen. */
.auth__footnote {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.auth__footnote p { margin: 0 0 var(--space-2); }
.auth__footnote p:last-child { margin-bottom: 0; }