/* Sayso creators page — theysayso.online/creators/
   Reuses tokens/fonts declared in ../styles.css conventions, replicated
   here with corrected relative font paths (one level up from /creators/). */

/* ---- Self-hosted fonts (no CDN) ---- */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/fredoka-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

/* ---- Tokens (matches packages/site/styles.css) ---- */
:root {
  --paper: #FAF8F5;
  --ink: #1C1B1A;
  --ink-soft: #4A4642;
  --stone: #8A8580;
  --mist: #F0ECE7;
  --surface: #FAF8F5;  /* identical to --paper in light mode; see ../styles.css */
  --verified-teal: #2B6F6A;
  --teal-tint: #EAF2F1;

  --beauty-blush: #F0C7C0;
  --beauty-rose: #C98077;
  --beauty-rose-text: #B65548;  /* 4.52:1 on Paper; fills keep the exact brand pair */

  --sand: #DCD5C8;
  --sand-deep: #C9C0AE;

  --font-display: 'Fredoka', 'Trebuchet MS', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

/* ---- Dark mode ----
   Mirrors the block in ../styles.css. Without it a dark-mode visitor crossing
   from the landing page to /creators/ gets a full-brightness flash, which is
   the theme-lock problem the shared token names exist to prevent. Values are
   the same swap, contrast-checked against the same pairs. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141312;
    --ink: #F2EFEA;
    --ink-soft: #BDB6AE;
    --stone: #8A8580;
    --mist: #2A2724;
    --surface: #1E1C1A;
    --verified-teal: #5FB8B0;
    --teal-tint: #16302E;
    --beauty-rose-text: #E5A093;
    --sand: #3A3632;
    --sand-deep: #4A4642;
  }
}
/* Component-level dark overrides live at the BOTTOM of this file: they share
   specificity with the base rules below, so source order decides. */

/* ---- Base ---- */
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: var(--paper);
}
a { color: var(--verified-teal); }
a:hover { color: var(--ink); }
:focus-visible {
  outline: 3px solid var(--verified-teal);
  outline-offset: 2px;
  border-radius: 4px;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
button { font: inherit; }
* { box-sizing: border-box; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.topbar-wordmark {
  font: 600 22px var(--font-display);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.topbar-wordmark:hover { color: var(--ink); }
.topbar-links a {
  font: 600 14px var(--font-body);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
}
.topbar-links a:hover { color: var(--ink); background: var(--mist); }

/* ---- Hero ---- */
.creators-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  align-items: center;
}
.creators-hero h1 {
  font: 600 40px/1.2 var(--font-display);
  color: var(--ink);
  max-width: 620px;
}
.creators-hero p {
  font: 400 18px/1.6 var(--font-body);
  color: var(--ink-soft);
  max-width: 560px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 21px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
  font: 600 14px var(--font-body);
  text-decoration: none;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hero-cta:hover { color: var(--paper); }
.hero-cta:active { transform: scale(0.97); }

/* ---- Main two-column layout: showcase + signup ---- */
.creators-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.showcase-col { flex: 1 1 520px; min-width: 0; }
.signup-col { flex: 1 1 360px; min-width: 0; }

.section-eyebrow {
  font: 600 12px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.section-title {
  font: 600 24px var(--font-display);
  color: var(--ink);
  margin-bottom: 4px;
}
.section-lede {
  font: 400 15px/1.5 var(--font-body);
  color: var(--ink-soft);
  margin-bottom: 20px;
}

/* ---- Dashboard showcase card ---- */
.showcase-card {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 20px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.demo-caption {
  font: 500 11px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--mist);
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 20px;
}
.demo-week {
  font: 600 20px/1.2 var(--font-display);
  color: var(--ink);
}
.demo-range {
  font: 400 13px var(--font-body);
  color: var(--ink-soft);
  margin-top: 2px;
}

/* Stat tiles */
.stat-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.stat-tile {
  flex: 1;
  min-width: 150px;
  background: var(--mist);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-num {
  font: 600 28px var(--font-display);
  color: var(--ink);
}
.stat-num--accent { color: var(--beauty-rose-text); }
.stat-label {
  font: 500 12.5px var(--font-body);
  color: var(--ink-soft);
}

/* Callout with proof chip */
.callout {
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.callout-heading {
  font: 600 15px var(--font-body);
  color: var(--ink);
}
.proof-chip-demo {
  display: flex;
  gap: 10px;
  padding: 11px;
  border-radius: 14px;
  background: var(--surface);
  border: 1.5px solid var(--verified-teal);
  max-width: 440px;
}
.proof-thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, #E4DED6, #E4DED6 4px, #EFEAE3 4px, #EFEAE3 8px);
}
.proof-body-demo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.proof-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.proof-verified {
  font: 600 9px var(--font-body);
  color: var(--verified-teal);
  background: var(--teal-tint);
  padding: 2px 6px;
  border-radius: 20px;
  letter-spacing: .02em;
}
.proof-quote-demo {
  font: 500 13px/1.3 var(--font-body);
  color: var(--ink);
}
.proof-product-demo {
  font: 600 12px var(--font-body);
  color: var(--ink);
}

/* Content ideas list */
.ideas-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ideas-title {
  font: 600 17px var(--font-display);
  color: var(--ink);
}
.ideas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.idea-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--mist);
  flex-wrap: wrap;
}
.idea-text-col {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.idea-question {
  font: 500 14px var(--font-body);
  color: var(--ink);
}
.idea-count {
  font: 400 12px var(--font-body);
  color: var(--ink-soft);
}
.idea-label {
  flex: none;
  padding: 7px 12px;
  border-radius: 20px;
  font: 600 12px var(--font-body);
  /* Dusty Rose is a light fill and does not invert with the theme, so the label
     is the fixed Ink literal, not --paper (2.90:1) or --ink (light on light in
     dark mode). Matches --on-light-accent in ../styles.css. */
  color: #1C1B1A;
  background: var(--beauty-rose);
}

/* ---- Sign-up form ---- */
.signup-card {
  background: var(--mist);
  border-radius: 20px;
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field label {
  font: 600 13px var(--font-body);
  color: var(--ink);
}
.field input {
  font: 400 15px var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 10px;
  padding: 11px 13px;
}
.field input:focus-visible {
  outline: 3px solid var(--verified-teal);
  outline-offset: 1px;
}
/* Honeypot: off-screen rather than display:none, because some bots skip fields
   that are display:none. Never focusable, never announced (the wrapper carries
   aria-hidden), so no human can fill it by accident. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.signup-submit {
  margin-top: 4px;
  align-self: flex-start;
  text-decoration: none;
  font: 600 14px var(--font-body);
  color: var(--paper);
  background: var(--ink);
  border: none;
  padding: 13px 22px;
  border-radius: 24px;
  cursor: pointer;
  transition: background 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .signup-submit:hover { background: #000; }
}
.signup-submit:active { transform: scale(0.97); }
.signup-submit:disabled {
  opacity: .55;
  cursor: progress;
}
.signup-form[hidden] { display: none; }

/* ---- Success state (replaces the form once the API accepted the sign-up) ---- */
.signup-success {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.signup-success[hidden] { display: none; }
.success-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--verified-teal);
  font: 600 18px var(--font-body);
}
.success-title {
  margin: 2px 0 0;
  font: 600 20px var(--font-display);
  color: var(--ink);
}
.success-body {
  font: 400 14.5px/1.6 var(--font-body);
  color: var(--ink-soft);
}
.success-cta {
  margin-top: 6px;
  text-decoration: none;
  font: 600 14px var(--font-body);
  color: var(--paper);
  background: var(--ink);
  padding: 12px 20px;
  border-radius: 24px;
  transition: background 150ms ease, transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.success-cta:hover { color: var(--paper); background: #000; }
.success-cta:active { transform: scale(0.97); }
.privacy-note {
  font: 400 13px/1.5 var(--font-body);
  color: var(--ink-soft);
}
/* Only ever carries in-progress or something-went-wrong text now — the
   success message is the .signup-success panel — so it reads neutral, not
   the Verified teal that used to double as the "sent!" colour. */
.form-status {
  font: 500 13px var(--font-body);
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* Manual-send fallback: revealed only when POST /creator-signup fails, so a
   mail outage or an unconfigured deployment can't dead-end a sign-up. Offers
   both a mailto: link and copy-paste, because on machines without a
   configured mail client mailto: silently does nothing. */
.manual-send {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--mist);
  border: 1px solid rgba(0,0,0,.07);
}
.manual-send[hidden] { display: none; }
.manual-send-lede {
  font: 600 13px var(--font-body);
  color: var(--ink);
}
.manual-send-address {
  font: 500 14px var(--font-mono);
  color: var(--ink);
  user-select: all;
}
.manual-send-body {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  font: 400 12.5px/1.5 var(--font-mono);
  color: var(--ink-soft);
  white-space: pre-wrap;
  user-select: all;
}
.manual-mailto {
  align-self: flex-start;
  text-decoration: none;
  font: 600 12.5px var(--font-body);
  color: var(--paper);
  background: var(--ink);
  border-radius: 18px;
  padding: 8px 15px;
}
.manual-mailto:hover { color: var(--paper); background: #000; }
.manual-copy {
  align-self: flex-start;
  font: 600 12.5px var(--font-body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 18px;
  padding: 7px 14px;
  cursor: pointer;
}
.manual-copy:hover { background: var(--sand); }
.manual-copied {
  font: 500 12.5px var(--font-body);
  color: var(--verified-teal);
}

/* ---- Footer ---- */
.creators-footer {
  border-top: 1px solid rgba(0,0,0,.07);
  padding: 24px 32px 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  font: 400 14px var(--font-body);
  color: var(--ink-soft);
}
.creators-footer a { text-decoration: none; }
.creators-footer a:hover { text-decoration: underline; }

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .creators-main { flex-direction: column; }
  .signup-card { position: static; }
}
@media (max-width: 480px) {
  .creators-hero h1 { font-size: 30px; }
  .creators-hero { padding: 40px 20px 28px; }
  .stat-row { flex-direction: column; }
  .idea-row { flex-direction: column; align-items: flex-start; }
  .idea-label { align-self: flex-start; }
}

/* ---- Dark mode: component overrides ----
   Must stay last in the file; see the note under the :root dark block. */
@media (prefers-color-scheme: dark) {
  .signup-submit:hover,
  .success-cta:hover,
  .manual-mailto:hover { background: #FFFFFF; }
  /* Hairlines are black-on-light throughout; on a dark page they vanish and the
     card edges disappear with them. Same weights, inverted. */
  .topbar { border-bottom-color: rgba(255,255,255,.10); }
  .showcase-card,
  .callout,
  .manual-send-body { border-color: rgba(255,255,255,.10); }
  .field input,
  .manual-copy { border-color: rgba(255,255,255,.18); }
  /* Placeholder avatar: a light woven swatch reads as a bright dot on dark. */
  .proof-thumb {
    background: repeating-linear-gradient(45deg, #37332F, #37332F 4px, #2C2925 4px, #2C2925 8px);
  }
}