/* ── auth.css — auth pages (register, passkey-setup, passkeys,
   mobile-enroll) — PacketTrends v2 design system.
   Import AFTER main.css: every color here comes from the --v2-*
   tokens defined there (light default, dark via main.css's
   prefers-color-scheme override — no scheme media queries here).
   Sibling aesthetic of login_v2.css: calm token background,
   rounded card, Inter + JetBrains Mono.
   ────────────────────────────────────────────────────────────── */

/* ── Page shell (standalone pages: register, passkey-setup) ──── */
.auth-body {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      100vh;
  position:        relative;
  color:           var(--v2-text);
  background:
    radial-gradient(1100px 700px at 70% -10%,
      color-mix(in srgb, var(--v2-accent) 9%, transparent) 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 110%,
      color-mix(in srgb, var(--v2-accent-2) 7%, transparent) 0%, transparent 55%),
    var(--v2-bg);
}

/* ── Two-column layout ──────────────────────────────────────── */
.auth-layout {
  display:               grid;
  grid-template-columns: 1fr 440px;
  width:                 100%;
  max-width:             1020px;
  padding:               2rem 2.5rem;
  gap:                   4rem;
  align-items:           center;
  position:              relative;
  z-index:               1;
}

/* ── Left: branding ─────────────────────────────────────────── */
.brand-panel {
  animation: authFadeUp 0.7s ease both;
}

.brand-logo {
  display:       flex;
  align-items:   center;
  gap:           0.65rem;
  margin-bottom: 2.25rem;
  color:         var(--v2-accent);
}
.brand-logo svg { width: 38px; height: 38px; flex: none; }

.brand-wordmark {
  font-family:    var(--v2-font-mono);
  font-size:      1.15rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  color:          var(--v2-text);
}
.brand-wordmark em {
  font-style: normal;
  color:      var(--v2-accent);
}

.brand-headline {
  font-family:    var(--v2-font-ui);
  font-size:      clamp(1.8rem, 3vw, 2.4rem);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: -0.02em;
  color:          var(--v2-text);
  margin-bottom:  1.25rem;
}
.brand-headline em {
  font-style: normal;
  color:      var(--v2-accent);
}

.brand-sub {
  color:         var(--v2-text-dim);
  font-size:     0.88rem;
  line-height:   1.75;
  max-width:     380px;
}

/* ── Auth card ──────────────────────────────────────────────── */
.auth-card {
  background:    var(--v2-surface);
  border:        1px solid var(--v2-border);
  border-radius: 20px;
  padding:       2.25rem 2rem;
  position:      relative;
  box-shadow:    var(--v2-shadow);
  animation:     authFadeUp 0.6s ease both;
}

/* ── Card header ────────────────────────────────────────────── */
.auth-card-header { margin-bottom: 1.6rem; }

.auth-card-title {
  font-family:    var(--v2-font-ui);
  font-size:      1.45rem;
  font-weight:    700;
  margin-bottom:  0.3rem;
  letter-spacing: -0.01em;
  color:          var(--v2-text);
}
.auth-card-sub {
  color:     var(--v2-text-dim);
  font-size: 0.875rem;
}

/* ── Alerts ─────────────────────────────────────────────────── */
.alert-error {
  display:       flex;
  align-items:   center;
  gap:           0.6rem;
  background:    var(--v2-danger-tint);
  border:        1px solid var(--v2-danger);
  border-radius: 10px;
  color:         var(--v2-danger);
  padding:       0.65rem 0.85rem;
  font-size:     0.82rem;
  margin-bottom: 1.1rem;
}
.alert-icon { font-size: 0.85rem; flex-shrink: 0; }

/* Accent-toned variant (e.g. the "save your recovery code" notice) */
.alert-info {
  border-color: var(--v2-accent);
  background:   var(--v2-accent-tint);
  color:        var(--v2-accent);
}

/* ── Inputs ─────────────────────────────────────────────────── */
/* .form-group / .form-label / .form-input base styles live in
   main.css — only the icon offset is auth-specific. */
.input-wrap { position: relative; }

.input-icon {
  position:       absolute;
  left:           0.875rem;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--v2-text-faint);
  font-size:      0.8rem;
  pointer-events: none;
}

.input-wrap .form-input { padding-left: 2.5rem; }

.form-hint {
  font-size:   0.72rem;
  color:       var(--v2-text-faint);
  line-height: 1.5;
  margin-top:  0.3rem;
}

/* Card body copy: dim paragraph + faint fine print */
.auth-note {
  color:         var(--v2-text-dim);
  font-size:     0.85rem;
  line-height:   1.55;
  margin-bottom: 1.25rem;
}
.auth-finehint {
  color:       var(--v2-text-faint);
  font-size:   0.72rem;
  line-height: 1.5;
  margin:      0.6rem 0 0;
}

.checkbox-wrap {
  display:     flex;
  align-items: center;
  gap:         0.45rem;
  color:       var(--v2-text-dim);
  font-size:   0.82rem;
  cursor:      pointer;
  user-select: none;
}
.checkbox-wrap input[type="checkbox"] {
  appearance:    none;
  width:         15px; height: 15px;
  border:        1px solid var(--v2-border-strong);
  border-radius: 4px;
  background:    var(--v2-surface-2);
  cursor:        pointer;
  position:      relative;
  flex-shrink:   0;
  transition:    background 0.15s, border-color 0.15s;
}
.checkbox-wrap input[type="checkbox"]:checked {
  background:   var(--v2-accent);
  border-color: var(--v2-accent);
}
.checkbox-wrap input[type="checkbox"]:checked::after {
  content:     '✓';
  position:    absolute;
  top: -1px; left: 2px;
  font-size:   10px;
  color:       var(--v2-accent-contrast);
  font-weight: 700;
}

/* ── One-time recovery code ─────────────────────────────────── */
.recovery-code {
  background:     var(--v2-surface-2);
  border:         1px solid var(--v2-border-strong);
  border-radius:  12px;
  padding:        1rem;
  margin:         0 0 1rem;
  color:          var(--v2-accent);
  font-family:    var(--v2-font-mono);
  font-size:      1.1rem;
  font-weight:    600;
  text-align:     center;
  letter-spacing: 2px;
  user-select:    all;
  white-space:    pre-wrap;
  word-break:     break-all;
}

/* ── Submit button ──────────────────────────────────────────── */
.btn-submit {
  display:        block;
  width:          100%;
  background:     var(--v2-btn-grad);
  color:          var(--v2-accent-contrast);
  border:         none;
  border-radius:  12px;
  font-family:    var(--v2-font-ui);
  font-size:      0.9rem;
  font-weight:    600;
  padding:        0.8rem 1rem;
  cursor:         pointer;
  text-align:     center;
  text-decoration: none;
  letter-spacing: 0.02em;
  box-shadow:     0 10px 26px -14px var(--v2-focus-ring);
  transition:     transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  margin-bottom:  1.25rem;
}
.btn-submit:hover:not(:disabled) {
  transform:  translateY(-1px);
  box-shadow: 0 14px 30px -12px var(--v2-focus-ring);
}
.btn-submit:active:not(:disabled) { transform: translateY(0); }
.btn-submit:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
  pointer-events: none;
}
.btn-submit:focus-visible {
  outline: 2px solid var(--v2-focus-ring);
  outline-offset: 2px;
}

/* ── Divider ────────────────────────────────────────────────── */
.auth-divider {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  margin-bottom: 1.25rem;
  color:         var(--v2-text-faint);
  font-size:     0.72rem;
}
.auth-divider::before, .auth-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--v2-border);
}

/* ── Footer link ────────────────────────────────────────────── */
.auth-footer-link {
  text-align: center;
  font-size:  0.82rem;
  color:      var(--v2-text-dim);
}
.auth-footer-link a {
  color:       var(--v2-accent);
  font-weight: 600;
  text-decoration: none;
}
.auth-footer-link a:hover { text-decoration: underline; }

/* ── Passkey management page (passkeys.html) ────────────────── */
.pk-wrap {
  max-width:   860px;
  margin:      3rem auto;
  padding:     0 1.5rem;
  font-family: var(--v2-font-ui);
  color:       var(--v2-text-dim);
  font-size:   0.875rem;
}
.pk-wrap h1 {
  color:          var(--v2-text);
  font-family:    var(--v2-font-ui);
  font-size:      1.6rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  margin-bottom:  0.5rem;
}
.pk-h2 {
  color:       var(--v2-text);
  font-family: var(--v2-font-ui);
  font-size:   1rem;
  font-weight: 700;
  margin:      1.75rem 0 0.4rem;
}
.pk-wrap strong { color: var(--v2-text); }
.pk-wrap a { color: var(--v2-accent); }

.pk-msg   { color: var(--v2-ok);     font-size: 0.82rem; }
.pk-error { color: var(--v2-danger); font-size: 0.82rem; }

.pk-table {
  width:           100%;
  border-collapse: collapse;
  margin:          1.25rem 0;
  background:      var(--v2-surface);
  border:          1px solid var(--v2-border);
  border-radius:   12px;
  overflow:        hidden;
  box-shadow:      var(--v2-shadow);
}
.pk-table th, .pk-table td {
  text-align:    left;
  padding:       0.6rem 0.75rem;
  border-bottom: 1px solid var(--v2-border);
  font-size:     0.8rem;
  color:         var(--v2-text);
}
.pk-table th {
  color:          var(--v2-text-dim);
  background:     var(--v2-surface-2);
  text-transform: uppercase;
  font-family:    var(--v2-font-ui);
  font-weight:    600;
  font-size:      0.7rem;
  letter-spacing: 0.05em;
  border-bottom:  1px solid var(--v2-border-strong);
}
.pk-table tbody tr:last-child td { border-bottom: none; }
.pk-table td { font-family: var(--v2-font-mono); }

.pk-inline { display: inline; }

.pk-input {
  background:    var(--v2-surface-2);
  border:        1px solid var(--v2-border-strong);
  border-radius: 8px;
  color:         var(--v2-text);
  padding:       0.35rem 0.55rem;
  font-family:   var(--v2-font-ui);
  font-size:     0.8rem;
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
}
.pk-input::placeholder { color: var(--v2-text-faint); }
.pk-input:focus {
  border-color: var(--v2-accent);
  box-shadow:   0 0 0 3px color-mix(in srgb, var(--v2-focus-ring) 40%, transparent);
}

.pk-btn {
  background:    transparent;
  border:        1px solid var(--v2-border-strong);
  border-radius: 8px;
  color:         var(--v2-accent);
  padding:       0.35rem 0.7rem;
  cursor:        pointer;
  font-family:   var(--v2-font-ui);
  font-weight:   600;
  font-size:     0.75rem;
  transition:    border-color 0.15s, background 0.15s;
}
.pk-btn:hover { border-color: var(--v2-accent); background: var(--v2-accent-tint); }
.pk-btn.danger { border-color: var(--v2-danger); color: var(--v2-danger); }
.pk-btn.danger:hover { background: var(--v2-danger-tint); }

.pk-note { font-size: 0.78rem; color: var(--v2-text-faint); line-height: 1.6; }

.pk-callout {
  background:    var(--v2-surface);
  border:        1px solid var(--v2-border);
  border-radius: 12px;
  padding:       0.9rem 1.1rem;
  margin:        1.25rem 0;
  box-shadow:    var(--v2-shadow);
}

/* ── Mobile enrollment code page (mobile_enroll.html) ───────── */
.en-wrap {
  max-width:   640px;
  margin:      3rem auto;
  padding:     0 1.5rem;
  font-family: var(--v2-font-ui);
  color:       var(--v2-text-dim);
}
.en-wrap h1 {
  color:          var(--v2-text);
  font-family:    var(--v2-font-ui);
  font-size:      1.6rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  margin-bottom:  0.75rem;
}
.en-wrap a { color: var(--v2-accent); }

.en-code {
  display:       block;
  margin:        1.25rem 0;
  padding:       1rem 1.25rem;
  background:    var(--v2-surface-2);
  border:        1px solid var(--v2-accent);
  border-radius: 12px;
  color:         var(--v2-text);
  font-family:   var(--v2-font-mono);
  font-size:     1.1rem;
  font-weight:   600;
  letter-spacing: 1px;
  word-break:    break-all;
  user-select:   all;
}

.en-note { font-size: 0.8rem; color: var(--v2-text-faint); line-height: 1.6; }
.en-note strong, .en-note em { color: var(--v2-text-dim); }
.en-warn { color: var(--v2-warn); }

.en-btn {
  background:    transparent;
  border:        1px solid var(--v2-border-strong);
  border-radius: 8px;
  color:         var(--v2-accent);
  padding:       0.4rem 0.8rem;
  cursor:        pointer;
  font-family:   var(--v2-font-ui);
  font-weight:   600;
  font-size:     0.8rem;
  transition:    border-color 0.15s, background 0.15s;
}
.en-btn:hover { border-color: var(--v2-accent); background: var(--v2-accent-tint); }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes authFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-panel, .auth-card { animation: none; }
  .btn-submit { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 820px) {
  .auth-layout {
    grid-template-columns: 1fr;
    padding:     2rem 1.25rem 3rem;
    gap:         2rem;
    align-items: start;
    min-height:  100vh;
  }
  .brand-panel { text-align: center; }
  .brand-logo  { justify-content: center; }
  .brand-sub   { margin-left: auto; margin-right: auto; }
  .brand-headline { font-size: 1.8rem; }
}