/* ── Auth page ── */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
}

.auth-card {
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
}

.auth-brand .brand-icon {
  width: 44px;
  height: 44px;
  color: var(--brand);
}

.auth-brand .brand-name {
  font-family: var(--font-brand);
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 28px;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-subtle);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.auth-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.auth-field input {
  padding: 10px 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  outline: none;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s;
}

.auth-field input:focus {
  border-color: var(--accent);
}

.auth-error {
  color: var(--danger);
  font-size: 0.88rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0;
}

/* Not the user's mistake, so not danger-red: the form is telling them why
   it cannot act yet, and what would clear it. */
.auth-notice {
  color: var(--text-subtle);
  font-size: 0.88rem;
  background: var(--accent-soft);
  border: 1px solid var(--warning);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0;
}

/* ── Alternative sign-in (passkey / recovery code) ── */

.auth-passkey-section {
  margin-top: 20px;
}

/* "or" between two hairlines. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-subtle);
  font-size: 0.82rem;
  margin-bottom: 16px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border);
}

.auth-passkey-btn {
  width: 100%;
  padding: 11px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.auth-passkey-btn:hover:not(:disabled) {
  background: var(--surface-alt);
  border-color: var(--text-subtle);
}

.auth-passkey-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-recovery-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-family: inherit;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-recovery-link:hover {
  color: var(--text);
}

.auth-recovery-section {
  margin-top: 16px;
}

/* .auth-recovery-submit shares the submit styling but not the class:
   e2e locators target .auth-submit on the login page, and Playwright
   strict mode counts hidden elements. */
.auth-submit,
.auth-recovery-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.auth-submit:hover:not(:disabled),
.auth-recovery-submit:hover:not(:disabled) {
  background: var(--accent-hover);
}

.auth-submit:disabled,
.auth-recovery-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-recovery-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-submit.danger {
  background: var(--danger);
}

.auth-submit.danger:hover:not(:disabled) {
  background: var(--danger-hover);
}

/* ── The registration terms checkbox ───────────────────────────────────────
   A checkbox field, unlike every other field on this form, so it opts out of
   the column layout `.auth-field` imposes on its label and input. */
.auth-field-terms {
  gap: 4px;
}

.auth-terms-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

/* The column rule above styles `.auth-field label` as a field caption; this
   label is a sentence the reader has to read, so it takes the body weight and
   colour instead. */
.auth-field-terms label {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.45;
}

/* And the input is a checkbox, not a text field: none of `.auth-field
   input`'s padding, border or full-width sizing applies. */
.auth-field-terms input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 2px 0 0;
  padding: 0;
  border: none;
  accent-color: var(--brand);
  cursor: pointer;
}

/* An error about one field, shown under that field — distinct from
   `.auth-error`, which is the form's own and sits above the submit button. */
.auth-field-error {
  color: var(--danger);
  font-size: 0.82rem;
  margin: 0;
}

/* ── Policy documents (/terms, /privacy, /imprint) ───────────────────────── */
.policy-link {
  color: var(--brand);
  text-decoration: underline;
}

.policy-link:hover {
  color: var(--brand-hover);
}

/* Same look as .policy-link, kept as a separate class so
   ".landing-policies .policy-link" (terms.spec.ts) keeps counting exactly
   the three documents PublishedPolicies governs — /account-deletion is
   not one of them (specs/auth.allium's PolicyDocument comment says so). */
.account-deletion-link {
  color: var(--brand);
  text-decoration: underline;
}

.account-deletion-link:hover {
  color: var(--brand-hover);
}

.policy-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  background: var(--bg);
}

.policy-card {
  width: 100%;
  max-width: 40rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.policy-title {
  margin: 0;
  font-size: 1.4rem;
}

.policy-unpublished {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.55;
}

.policy-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9rem;
}

.policy-back {
  color: var(--brand);
  font-size: 0.9rem;
  align-self: flex-start;
}

/* The account-deletion page's sections (/account-deletion, /delete-account) —
   the one policy-style page that carries real prose from day one rather than
   the "not published yet" placeholder every other one shows. */
.policy-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.policy-section-title {
  margin: 0;
  font-size: 1.05rem;
}

.policy-section-subtitle {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--text-muted);
}

.policy-section-body {
  margin: 0;
  line-height: 1.55;
}

/* ── The terms gate ───────────────────────────────────────────────────────
   One panel, standing wherever a control that reaches another account would
   be — a whole screen on the Social tab, a block under a comment list, and a
   dropdown's width inside the activity menu. Bounded rather than sized, so
   it fits all three. */
.terms-gate {
  max-width: 32rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terms-gate-title {
  margin: 0;
  font-size: 1.1rem;
}

.terms-gate-changed {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-subtle);
}

.terms-gate-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.terms-gate-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  font-size: 0.9rem;
}

.terms-gate-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

.terms-gate-accept {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.terms-gate-accept:hover:not(:disabled) {
  background: var(--accent-hover);
}

.terms-gate-accept:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inside the activity menu the panel replaces one menu item, so it takes the
   menu's width rather than its own. */
.detail-menu .terms-gate {
  max-width: 18rem;
  border: none;
  padding: 12px;
}

/* And on the upcoming strip it replaces one card's sign-up control, so it
   takes the card's width rather than its own. */
.upcoming-card .terms-gate {
  max-width: 100%;
  border: none;
  padding: 8px 0 0;
  gap: 6px;
}