/* Dark signup flow (Diego 2026-10-17): invite signup (/apply?invite=…) and the kit
   agreement match pholoh.us and the pick page. Loaded after preview.css/apply.css;
   only takes effect on <body class="dark-flow">. */
body.dark-flow {
  --bg: #000000;
  --bg-tint: #0D0D0D;
  --ink: #E8E6E2;
  --ink-2: #C9C6C0;
  --ink-3: #A29F99;
  --ink-4: #7C7A76;
  --line: rgba(232, 230, 226, 0.16);
  --line-2: rgba(232, 230, 226, 0.07);
  --accent: #E8E6E2;
  --hover: #FFFFFF;
  background: #000 !important;
  color: var(--ink);
  font-family: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body.dark-flow::before, body.dark-flow::after { display: none !important; }
body.dark-flow * { border-color: var(--line); }
body.dark-flow h1, body.dark-flow h2, body.dark-flow h3,
body.dark-flow .apply-hero-title, body.dark-flow .auth-title, body.dark-flow .kit-title {
  font-family: 'Arimo', sans-serif !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.04em !important;
  color: var(--ink) !important;
}
body.dark-flow .apply-hero-title { font-size: clamp(34px, 8vw, 60px) !important; line-height: 1.05 !important; font-weight: 700 !important; }
body.dark-flow em { font-family: inherit !important; font-style: normal !important; }

/* top bar = the site's header: centered heart logo on black */
body.dark-flow .topbar {
  background: rgba(0, 0, 0, 0.92) !important;
  border-bottom: 1px solid var(--line) !important;
  justify-content: center !important;
}
body.dark-flow .topbar > *:not(.flow-logo) { display: none !important; }
body.dark-flow .flow-logo { height: 38px; width: auto; display: block !important; filter: brightness(0) invert(1); /* pure white logo (Diego 2026-10-17) */ }

/* inputs, selects, textareas */
body.dark-flow input:not([type=radio]):not([type=checkbox]):not([type=file]),
body.dark-flow select, body.dark-flow textarea {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: rgba(232, 230, 226, 0.4) !important;
}
body.dark-flow input::placeholder, body.dark-flow textarea::placeholder { color: var(--ink-4) !important; }
body.dark-flow select option { background: #000; color: var(--ink); }
body.dark-flow input:focus, body.dark-flow select:focus, body.dark-flow textarea:focus { border-color: var(--ink) !important; outline: none; }
body.dark-flow input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #000 inset !important; -webkit-text-fill-color: var(--ink) !important; }

/* panels that were cream / translucent white */
body.dark-flow [class*="card"], body.dark-flow [class*="panel"], body.dark-flow .kit-doc,
body.dark-flow fieldset, body.dark-flow section {
  background-color: transparent !important;
}
body.dark-flow .kit-doc { border: 1px solid var(--line) !important; }

/* buttons: off-white solid like the site's primary */
body.dark-flow button[type=submit], body.dark-flow .btn, body.dark-flow .btn-primary,
body.dark-flow .apply-submit, body.dark-flow .kit-btn {
  background: var(--ink) !important;
  color: #000 !important;
  border-color: var(--ink) !important;
  font-family: 'Arimo', sans-serif !important;
  letter-spacing: 0.14em;
}
body.dark-flow a { color: var(--ink); }
body.dark-flow .invite-banner { background: #0D0D0D !important; color: var(--ink) !important; border: 1px solid var(--line) !important; }

/* Personal header: their TikTok photo + name */
.flow-hello { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin: 8px auto 20px; }
.flow-hello img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(232, 230, 226, 0.5); background: #111; }
.flow-hello .flow-name { font-size: 15px; letter-spacing: 0.06em; color: #C9C6C0; }
.flow-hello .flow-name b { color: #E8E6E2; }

/* Invite signup: strip the program-recruiting bits, keep it short and personal. */
body.dark-flow .topbar { display: flex !important; padding: 14px 20px !important; }
body.dark-flow .topbar .flow-logo { margin: 0 auto; }
body.dark-flow .hero-meta, body.dark-flow .apply-stats, body.dark-flow .apply-cta-arrow,
body.dark-flow .apply-section-meta, body.dark-flow .grid-bg { display: none !important; }
body.dark-flow .apply-hero { padding: 28px 20px 8px !important; text-align: center; }
body.dark-flow .apply-hero-lead { margin: 0 auto !important; max-width: 440px; font-size: 15px !important; color: var(--ink-2) !important; }
body.dark-flow .apply-section-title { font-size: 18px !important; }

body.dark-flow .invite-banner:not(.invite-banner--off) { display: none !important; }