/* Auth pages — login, signup, reset (editorial B&W register) */
.auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 2rem 1rem;
  position: relative;
}

/* Hairline frame around the page — editorial monograph treatment */
.auth-page::before,
.auth-page::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  height: 1px;
  background: var(--color-border);
}
.auth-page::before { top: 1.25rem; }
.auth-page::after  { bottom: 1.25rem; }

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  padding: 2.75rem 2.25rem 2.25rem;
  position: relative;
  box-shadow: 0 32px 80px -32px rgba(0, 0, 0, 0.18);
}

.auth-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-card__logo img {
  width: 48px;
  height: 48px;
}

.auth-card__title {
  text-align: center;
  color: #0a0a0a;
  font-family: var(--font-family-heading);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.auth-card__title em {
  font-style: italic;
  font-weight: 800;
}

.auth-card__sub {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.75rem;
}

/* Hairline rule between sub and form */
.auth-card__sub::after {
  content: "";
  display: block;
  margin: 1.25rem auto 0;
  width: 32px;
  height: 1px;
  background: #0a0a0a;
}

.auth-card__error {
  background: #fafafa;
  border: 1px dashed #0a0a0a;
  border-left-width: 3px;
  border-left-style: solid;
  color: #0a0a0a;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.auth-card__success {
  background: #fafafa;
  border: 1px solid #0a0a0a;
  border-left-width: 3px;
  color: #0a0a0a;
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-form__field label {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.auth-form__field input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: #0a0a0a;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.auth-form__field input:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

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

.auth-form__btn {
  width: 100%;
  padding: 0.85rem 1rem;
  background: #0a0a0a;
  color: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  margin-top: 0.75rem;
}

.auth-form__btn:hover {
  background: #ffffff;
  color: #0a0a0a;
}

.auth-form__btn:active {
  transform: translateY(1px);
}

.auth-form__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #0a0a0a;
  color: #ffffff;
}

.auth-card__links {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.auth-card__links a {
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: border-color 0.15s ease;
}

.auth-card__links a:hover {
  border-color: #0a0a0a;
}

.auth-card__divider {
  color: var(--color-text-dim);
  margin: 0 0.6rem;
}

/* "Need help?" line — sits quietly at the bottom of every auth card */
.auth-card__help {
  text-align: center;
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.auth-card__help a {
  color: #0a0a0a;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.auth-card__help a:hover { border-color: #0a0a0a; }

@media (max-width: 480px) {
  .auth-card {
    padding: 2.25rem 1.4rem 1.75rem;
  }

  .auth-form__field input {
    font-size: 16px;
  }
}

/* ========================
   RESTRICTED ACCOUNT (/suspended/)
   Where a suspended or banned user lands. They can still sign in on purpose —
   the block itself is enforced in RLS and in the functions, not here.
   ======================== */

.susp-card { max-width: 520px; }

.susp-badge {
  /* block + fit-content + auto margins, NOT inline-block. `margin: 0 auto` does
     nothing to an inline-block, so the pill sat against the left edge while the
     heading below it centred normally. This centres regardless of whatever
     text-align the card happens to have. */
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1rem;
  text-align: center;
  padding: 0.3rem 0.7rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 999px;
  color: #b91c1c;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.susp-panel {
  margin: 1.5rem 0 0;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  background: #fafafa;
  text-align: left;
}

.susp-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border, #e5e5e5);
}
.susp-row:last-child { border-bottom: 0; }

.susp-row__label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #737373;
}

.susp-row__value {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #0a0a0a;
  overflow-wrap: anywhere;   /* an admin-written reason can be one long string */
}

.susp-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.susp-foot {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: #737373;
  line-height: 1.5;
}

/* Appeal dialog */
.susp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.susp-modal[hidden] { display: none; }

.susp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
}

.susp-modal__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 6px;
  padding: 1.5rem;
  box-shadow: 0 28px 80px -20px rgba(0, 0, 0, 0.45);
}

.susp-modal__title {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0a0a0a;
}

.susp-modal__sub {
  margin: 0 0 1rem;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #525252;
}

.susp-modal__textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 4px;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
  background: #ffffff;
  color: #0a0a0a;
}
.susp-modal__textarea:focus {
  outline: none;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.susp-modal__count {
  margin-top: 0.35rem;
  text-align: right;
  font-size: 0.68rem;
  color: #a3a3a3;
  font-variant-numeric: tabular-nums;
}

.susp-modal__actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

@media (max-width: 480px) {
  .susp-modal__actions,
  .susp-actions { flex-direction: column-reverse; }
  .susp-modal__actions .btn,
  .susp-actions .btn { width: 100%; }
}

/* ==========================================================================
   SIGNUP REFUSED — the lock state
   --------------------------------------------------------------------------
   A blocked domain is a decision, not a validation hint. Shown inline above
   the form it reads as something to correct, and the person whose whole
   pattern is "change one character and resubmit" does exactly that.

   So the form stays visible but goes inert underneath, and the refusal sits
   over it. Seeing your own details sitting there greyed out says "this was
   received and refused" in a way an error strip cannot. Reloading is the only
   way back, which is the friction working as intended.

   No red anywhere. A refusal delivered calmly is harder to argue with than one
   that shouts, and the rest of this page has no colour either.
   ========================================================================== */

/* The frozen form. Still readable — that is the point — but plainly inert. */
.auth-form.is-locked {
  opacity: 0.55;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
  transition: opacity 220ms ease, filter 220ms ease;
}
.auth-form.is-locked input,
.auth-form.is-locked button {
  cursor: not-allowed;
}

/* Belongs to the card, not the viewport — .auth-card is already positioned. */
.auth-lock {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  animation: authLockIn 200ms ease-out;
}
.auth-lock[hidden] { display: none; }

/* One entrance, nothing after. A refusal that keeps moving looks nervous. */
@keyframes authLockIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-lock { animation: none; }
  .auth-form.is-locked { transition: none; }
}

.auth-lock__panel {
  width: 100%;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid #0a0a0a;
  border-radius: 4px;
  padding: 1.5rem 1.4rem 1.25rem;
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.4);
  text-align: left;
}

.auth-lock__eyebrow {
  display: block;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a3a3a3;
  margin-bottom: 0.45rem;
}

.auth-lock__title {
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #0a0a0a;
}

.auth-lock__body {
  margin: 0 0 1.15rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #525252;
}
/* The domain itself, set apart so it is obvious WHICH part was the problem. */
.auth-lock__body strong {
  font-weight: 700;
  color: #0a0a0a;
  /* break-all split this mid-syllable ("@zz-de / mo-blocked.com"), which reads
     as a rendering fault rather than as their address. This breaks only where
     it has to, and prefers the hyphens already in the domain. */
  overflow-wrap: break-word;
  word-break: normal;
}

.auth-lock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.auth-lock__btn {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: 0.62rem 0.9rem;
  border-radius: 0.5rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-lock__btn--ink {
  border: 1px solid #0a0a0a;
  background: #0a0a0a;
  color: #ffffff;
}
.auth-lock__btn--ink:hover { background: #2a2a2a; }
.auth-lock__btn--ghost {
  border: 1px solid #d4d4d4;
  background: #ffffff;
  color: #0a0a0a;
}
.auth-lock__btn--ghost:hover { border-color: #0a0a0a; background: #fafafa; }
.auth-lock__btn:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 2px;
}

/* Says plainly how to start over, so nobody hunts for a close button that
   would only put them back where they started. */
.auth-lock__foot {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid #e5e5e5;
  font-size: 0.7rem;
  line-height: 1.5;
  color: #a3a3a3;
}

@media (max-width: 420px) {
  .auth-lock { padding: 0.9rem; }
  .auth-lock__panel { padding: 1.25rem 1.1rem 1.1rem; }
  .auth-lock__btn { flex: 1 1 100%; }
}