/* ===========================================================================
   auth.css — focused auth / account-lifecycle layout for Earde.

   Same cool-grey / IBM Plex / sharp-bordered visual language as the in-app
   shell (shell.css), but with NO rail, sidebar, or command bar — a single
   centered card. Used by login / signup / forgot / reset and the auth-flow
   message panels (msg_page ~auth:true).

   Every rule is scoped under .auth-shell so it can never leak into the legacy
   `Site pages, which still style themselves with inline Tailwind utilities.
   =========================================================================== */

/* IBM Plex, loaded the same way shell.css / community-home.css load it. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

.auth-shell {
  /* cool-grey neutrals + accents, ported from shell.css .community-shell */
  --paper:      oklch(0.948 0.004 250);
  --panel:      oklch(0.995 0.002 250);
  --panel-2:    oklch(0.972 0.004 250);
  --ink:        oklch(0.255 0.012 262);
  --ink-2:      oklch(0.430 0.011 262);
  --ink-3:      oklch(0.580 0.009 262);
  --line:       oklch(0.866 0.006 255);
  --line-2:     oklch(0.800 0.007 255);
  --red:        oklch(0.555 0.155 27);
  --red-strong: oklch(0.490 0.165 27);
  --ok:         oklch(0.620 0.130 150);

  --cs-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --cs-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 18px;
  background-color: var(--paper);
  /* faint hairline grid — same idiom as the community-home body */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  font-family: var(--cs-sans);
  color: var(--ink);
  letter-spacing: normal;
}
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after { box-sizing: border-box; }

/* brand: image logo pair, links to /feed */
.auth-shell .app-brand,
.auth-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; min-width: 0; }
.auth-brand:hover { text-decoration: none; }
.auth-logo-mark {
  display: block;
  height: 36px;
  width: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}
.auth-logo-wordmark {
  display: block;
  height: 29px;
  width: auto;
  max-width: 136px;
  object-fit: contain;
  flex: 0 1 auto;
}

/* card */
.auth-card {
  width: 100%;
  max-width: 384px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 30px 28px;
}

.auth-title {
  font-family: var(--cs-mono); font-size: 20px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 4px;
}
.auth-sub { font-size: 13.5px; color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }

/* form fields */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-label {
  font-family: var(--cs-mono); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3);
}
.auth-input {
  width: 100%;
  font-family: var(--cs-sans); font-size: 14px; color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 9px 11px;
  transition: border-color .12s ease, background .12s ease;
}
.auth-input::placeholder { color: var(--ink-3); }
.auth-input:focus { outline: none; border-color: var(--red); background: var(--panel); }

/* primary button */
.auth-btn {
  width: 100%;
  font-family: var(--cs-mono); font-size: 14px; font-weight: 600;
  color: #fff; background: var(--red);
  border: 1px solid var(--red-strong);
  border-radius: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s ease;
}
.auth-btn:hover { background: var(--red-strong); }
.auth-btn--inline { width: auto; display: inline-block; text-decoration: none; }

/* footer line + links */
.auth-foot { margin-top: 20px; text-align: center; font-size: 13px; color: var(--ink-2); }
.auth-link { color: var(--red); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-inline-link { float: right; font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; }

/* privacy-consent row */
.auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.auth-check input { margin-top: 1px; width: 15px; height: 15px; accent-color: var(--red); flex-shrink: 0; }

/* inline alerts (error states re-rendered on the form) */
.auth-alert { font-size: 13px; border-radius: 2px; padding: 9px 11px; line-height: 1.45; border: 1px solid var(--line-2); }
.auth-alert--error { color: var(--red-strong); border-color: oklch(0.80 0.07 27); background: oklch(0.965 0.013 27); }

/* message-page panel (confirm-email / verify / reset success & failure states) */
.auth-msg { text-align: center; }
.auth-msg-icon {
  width: 46px; height: 46px; border-radius: 2px;
  display: grid; place-items: center; margin: 0 auto 16px;
  border: 1px solid var(--line-2);
}
.auth-msg-icon svg { width: 24px; height: 24px; }
.auth-msg-icon--success { color: var(--ok); border-color: oklch(0.82 0.07 150); }
.auth-msg-icon--info    { color: var(--ink-2); }
.auth-msg-icon--error   { color: var(--red); border-color: oklch(0.80 0.07 27); }
.auth-msg-text { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 22px; }