/* static/magic_link.css
   Magic link modal styles (inherits tokens from static/colors.css)
   ------------------------------------------------------------- */

.auth-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  /* Dim + slight blur like the reference */
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(2px);

  z-index: 9999;
}

.auth-modal {
  position: relative;
  width: min(460px, 92vw);

  background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 90px rgba(0,0,0,.65);

  padding: var(--space-8);
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.auth-title {
  margin: 0 0 var(--space-2);
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
  color: var(--heading);
}

.auth-sub {
  margin: 0 0 var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: .95rem;
}

.auth-input {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent) 30%);
  border-radius: var(--radius-sm);
  padding: .75rem .9rem;
}

.auth-input::placeholder {
  color: var(--text-muted);
}

.auth-primary {
  width: 100%;
  margin-top: var(--space-3);

  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: calc(var(--radius-sm) + 2px);

  background: color-mix(in srgb, var(--accent) 18%, var(--accent-contrast));
  color: var(--heading);

  padding: .75rem 1rem;
  font-weight: 700;
  cursor: pointer;

  transition: transform .06s ease, background .15s ease, filter .15s ease;
}

.auth-primary:hover {
  background: var(--accent-600);
  color: #fff;
}

.auth-primary:active {
  background: var(--accent-700);
  transform: translateY(1px);
}

.auth-primary:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.auth-note {
  margin: var(--space-4) 0 0;
  text-align: center;
  color: var(--text-muted);
  font-size: .95rem;
  min-height: 1.2em; /* prevents layout jump when message changes */
}

.auth-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);

  width: 34px;
  height: 34px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--text);

  cursor: pointer;
}

.auth-close:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

@media (max-width: 420px) {
  .auth-modal { padding: var(--space-6); }
}