/* nurture.email — public pages (login, subscription, opt-in, archive).
   Same tokens as the admin design system: paper canvas, white surface,
   hairline borders, brand green actions with ink text. Inter is self-hosted
   from /public/static/fonts so these pages render like the app. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/public/static/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/public/static/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/public/static/fonts/Inter-SemiBold.woff2") format("woff2"); }

:root {
  --nu-forest: #0B1A12;
  --nu-paper: #F5F8F3;
  --nu-surface: #FFFFFF;
  --nu-ink: #101820;
  --nu-moss: #55655B;
  --nu-mute: #8A96A0;
  --nu-hairline: #E2E9E1;
  --nu-hairline-2: #D3DDD2;
  --nu-green: #39BD68;
  --nu-green-400: #47C879;
  --nu-green-600: #2FA359;
  --nu-green-ink: #1B7A43;
  --nu-green-50: #EAF9F0;
  --nu-danger: #E5484D;
  --nu-danger-ink: #A32D32;
  --nu-radius: 8px;
}

* { box-sizing: border-box; }
html, body { padding: 0; margin: 0; min-width: 320px; }
body {
  background: var(--nu-paper);
  color: var(--nu-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--nu-green-ink); text-decoration: none; }
a:hover { color: var(--nu-ink); text-decoration: underline; text-decoration-color: var(--nu-hairline-2); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--nu-green); outline-offset: 2px; }

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
label { cursor: pointer; color: var(--nu-ink); font-weight: 500; font-size: 0.925rem; display: block; margin-bottom: 0.35rem; }

.section { margin-bottom: 40px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  padding: 0 12px;
  height: 40px;
  border: 1px solid var(--nu-hairline-2);
  border-radius: var(--nu-radius);
  background: var(--nu-surface);
  color: var(--nu-ink);
  font: inherit;
  font-size: 15px;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
textarea { height: auto; padding: 10px 12px; }
input:hover, select:hover { border-color: #B7C4B9; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nu-green);
  box-shadow: 0 0 0 3px rgba(57, 189, 104, 0.22);
}
input::placeholder { color: var(--nu-mute); }
input:focus::placeholder { color: transparent; }
input[disabled] { opacity: 0.5; background: var(--nu-paper); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--nu-green); width: 16px; height: 16px; vertical-align: -2px; margin-right: 8px; }

.center { text-align: center; }
.right { text-align: right; }
.small { font-size: 0.875em; color: var(--nu-moss); }
.error {
  display: block;
  background: #FDEBEC;
  color: var(--nu-danger-ink);
  border: 1px solid #F7C7C9;
  border-radius: var(--nu-radius);
  padding: 10px 12px;
  font-size: 0.925rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 150px;
  height: 42px;
  padding: 0 20px;
  border-radius: var(--nu-radius);
  border: 1px solid rgba(11, 26, 18, 0.12);
  background: var(--nu-green);
  color: var(--nu-forest);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: background 120ms ease, border-color 120ms ease;
}
.button:hover { background: var(--nu-green-400); color: var(--nu-forest); text-decoration: none; }
.button:active { background: var(--nu-green-600); box-shadow: none; }
.button.button-outline {
  background: var(--nu-surface);
  border-color: var(--nu-hairline-2);
  color: var(--nu-ink);
  box-shadow: none;
}
.button.button-outline:hover { border-color: #B7C4B9; background: var(--nu-paper); }

.container { margin: 56px auto 16px; max-width: 460px; padding: 0 16px; }

.wrap {
  background: var(--nu-surface);
  padding: 36px 40px 32px;
  border: 1px solid var(--nu-hairline);
  border-radius: 14px;
}

.header { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--nu-hairline); }
.header .logo img { width: auto; max-width: 132px; height: 32px; display: block; }

.unsub-all { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nu-hairline); }

.row { margin-bottom: 20px; }
.lists { list-style-type: none; padding: 0; margin: 0 0 8px; }
.lists li { margin: 0 0 10px; }
.lists li label { display: inline; font-weight: 500; }
.lists .description { margin: 2px 0 12px 24px; font-size: 0.875em; line-height: 1.45; color: var(--nu-moss); }
.form .nonce { display: none; }
.form .captcha { margin-top: 24px; }
.form p { margin-bottom: 16px; }

.archive { list-style-type: none; margin: 20px 0 0; padding: 0; }
.archive li { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--nu-hairline); }
.archive li:last-child { border-bottom: 0; }
.archive .date { display: block; color: var(--nu-moss); font-size: 0.85em; margin-top: 2px; }
.feed { margin-right: 15px; }

.home-options { margin-top: 24px; }
.home-options a { margin: 0 8px; }

.pagination { margin-top: 28px; text-align: center; }
.pg-page { display: inline-block; padding: 4px 10px; border-radius: 6px; text-decoration: none; color: var(--nu-moss); }
.pg-page:hover { background: var(--nu-paper); text-decoration: none; }
.pg-page.pg-selected { background: var(--nu-green-50); color: var(--nu-green-ink); font-weight: 600; }

.login h2 { margin-bottom: 20px; }
.login .submit { margin-top: 24px; }
.login button { width: 100%; }
.login button img { max-width: 22px; margin-right: 6px; }
.login input[name=totp_code] { font-size: 1.8em; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }
.login .center.small { margin: 18px 0 0; }

footer.container {
  margin: 24px auto 32px;
  text-align: center;
  color: var(--nu-mute);
  font-size: 0.8em;
}
footer a { color: var(--nu-moss); }
footer a:hover { color: var(--nu-ink); }

@media screen and (max-width: 650px) {
  .container { margin-top: 24px; }
  .wrap { padding: 28px 22px; }
}