/**
 * auth.css — /signin/, /auth/callback/, /account/ pages (Phase W1).
 * Pure design-system tokens; no new colors.
 */

.auth-wrap {
  min-height: calc(100vh - var(--nav-height) - 12rem);
  display: grid;
  place-items: center;
  padding-block: var(--space-12);
}

.auth-card {
  width: min(26rem, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: var(--space-2); }
.auth-card .auth-sub { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-6); }

.auth-card .btn { width: 100%; }
.auth-google svg { width: 1.125rem; height: 1.125rem; flex: none; }

.auth-divider {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-secondary); font-size: 0.8125rem; /* tertiary fails WCAG contrast on surface bg */
  margin-block: var(--space-5);
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border-color);
}

.auth-email { display: grid; gap: var(--space-3); }
.auth-email label { font-size: 0.875rem; color: var(--text-secondary); }
.auth-email input {
  width: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
}
.auth-email input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }

.auth-consent { margin-top: var(--space-5); font-size: 0.875rem; color: var(--text-secondary); }

.auth-note {
  margin-top: var(--space-5);
  font-size: 0.8125rem;
  color: var(--text-secondary); /* tertiary fails WCAG contrast on surface bg */
  text-align: center;
}

/* Status region (errors / magic-link-sent) — reserve no space until used */
.auth-status { margin-top: var(--space-4); font-size: 0.875rem; border-radius: var(--radius-lg); }
.auth-status:not(:empty) { padding: var(--space-3) var(--space-4); }
.auth-status.is-error { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.auth-status.is-ok { background: var(--primary-light); color: var(--primary); }

/* Callback page */
.auth-center { text-align: center; color: var(--text-secondary); }
.auth-center .spinner { margin-inline: auto; margin-bottom: var(--space-4); width: 1.5rem; height: 1.5rem; border-width: 3px; color: var(--primary); }

/* Account page (Phase W4) */
.account { max-width: 38rem; }
.account h1 { margin-bottom: var(--space-8); }

.account-block {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  background: var(--bg-surface);
}
.account-block h2 { font-size: 1.0625rem; margin-bottom: var(--space-4); }
.account-block__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.account-block__head h2 { margin-bottom: 0; }

.account-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
}
.account-row:last-of-type { border-bottom: none; }
.account-row dt { color: var(--text-secondary); font-size: 0.875rem; }
.account-row dd { margin: 0; }

.account-muted { color: var(--text-secondary); }
.account-small { font-size: 0.8125rem; }
.btn--sm { padding: 0.45em 1.1em; font-size: 0.875rem; border-radius: var(--radius-md); }

/* License */
.license-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--text-secondary); }
.license-badge {
  display: inline-block;
  border-radius: var(--radius-full);
  padding: 2px 12px;
  font-size: 0.8125rem; font-weight: 550;
}
.license-badge--active { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.license-badge--trial { background: var(--primary-light); color: var(--primary); }
.license-badge--expired { background: var(--bg-tertiary); color: var(--text-secondary); }
.license-actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Purchases */
.purchase-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.9375rem;
}
.purchase-row:last-child { border-bottom: none; }
.purchase-row.is-refunded { color: var(--text-tertiary); text-decoration: line-through; }
.purchase-row.is-refunded .purchase-badge { text-decoration: none; }
.purchase-badge {
  font-size: 0.75rem; font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 1px 8px;
  color: var(--text-secondary);
}
@media (max-width: 30rem) { .purchase-row { grid-template-columns: 1fr auto; } .purchase-row > :nth-child(2) { display: none; } }

/* Email preferences */
.consent-row {
  display: flex; gap: var(--space-3); align-items: flex-start;
  cursor: pointer;
  font-size: 0.9375rem;
}
.consent-row input { margin-top: 4px; accent-color: var(--primary); width: 1rem; height: 1rem; }

/* Danger zone */
.account-block--danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.danger-flow { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.danger-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.danger-controls input {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  padding: var(--space-2) var(--space-4);
  font-family: 'JetBrains Mono', monospace;
  width: 10rem;
}
.btn--danger { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border: 1px solid var(--danger); }
.btn--danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn--danger:disabled { opacity: 0.45; cursor: not-allowed; }