/* 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; }

/* ===== Crayon look for the creator pages (Diego 2026-11-04: "same as the model form") =====
   Turned on by <body class="crayon"> (apply, landing, learn, TikTok portal). Text is bold Arimo through
   the #pc-crayon SVG filter (the JJK site's crayon edge, gentle enough to read); boxes, cards and buttons
   are rounded; checkboxes are circles that fill white with a black check. The filter element is
   injected by each page's own script (crayonDefs), since a new public file would need an auth change. */
body.crayon { font-family: 'Arimo', system-ui, Arial, sans-serif; }
body.crayon :is(h1, h2, h3, h4, label, legend, button, .btn, a.btn, input, select, textarea, p, li, small,
  .apply-section-meta, .apply-label-text, .apply-section-lead, .track-card-desc, .apply-file-hint, .apply-check span,
  .apply-submit, .nav-link, .eyebrow, .kicker, .stat-label, .mono, code) {
  font-family: 'Arimo', system-ui, Arial, sans-serif !important; font-style: normal !important;
}
body.crayon :is(h1, h2, h3, h4, label, legend, button, .btn, input, select, textarea, p, li, small,
  .apply-section-meta, .apply-label-text, .apply-section-lead, .track-card-desc, .apply-file-hint,
  .apply-submit, .nav-link) { filter: url(#pc-crayon); }
body.crayon :is(h1, h2, h3, label, button, .btn, .apply-label-text, .apply-section-meta, .apply-submit, .nav-link, .track-card-desc) { font-weight: 700 !important; }
body.crayon em { font-family: inherit !important; font-style: normal !important; }
/* images, videos and anything holding one stay sharp (their own filters, like a logo's invert, are left alone) */
body.crayon :is(label, button, p, li):has(img, video, iframe, canvas) { filter: none; }

/* rounded fields */
body.crayon :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select) {
  border: 1px solid var(--line, rgba(232,230,226,.16)) !important; border-radius: 999px !important;
  padding: 12px 18px !important; background-color: transparent; min-height: 46px;
}
body.crayon textarea { border: 1px solid var(--line, rgba(232,230,226,.16)) !important; border-radius: 20px !important; padding: 12px 16px !important; background: transparent; }
body.crayon :is(input, select, textarea):focus { border-color: var(--ink, #E8E6E2) !important; outline: none; }
body.crayon input[type=file] { border: 1px dashed var(--line, rgba(232,230,226,.3)); border-radius: 20px; padding: 12px; width: 100%; }
body.crayon input[type=file]::file-selector-button { border-radius: 999px; border: 0; padding: 8px 14px; margin-right: 10px; font: 700 12px 'Arimo', sans-serif; letter-spacing: .06em; cursor: pointer; }

/* rounded cards, buttons and chips */
body.crayon :is(.track-card, .card, .panel, .box, .tile, .apply-success, .flow-hello, .invite-banner) { border-radius: 22px !important; }
body.crayon :is(button:not([role=tab]), .btn, a.btn, .apply-submit, .cta, .pill, .chip) { border-radius: 999px !important; }
body.crayon :is([role=tab], .tab, [class*="tab-"], nav button) { border-radius: 0 !important; }

/* circle checkboxes with a big check */
body.crayon input[type=checkbox] {
  -webkit-appearance: none; appearance: none; width: 28px !important; height: 28px !important; flex: 0 0 28px;
  border: 2px solid var(--ink-2, #C9C6C0); border-radius: 50%; background: transparent; cursor: pointer; margin: 0; filter: none;
}
body.crayon input[type=checkbox]:checked {
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: #fff;
}
/* the apply page's two path cards: picked one goes white */
body.crayon .track-card input[type=radio] { position: absolute; opacity: 0; }
body.crayon .track-card { position: relative; cursor: pointer; }
body.crayon .track-card:has(input:checked) { background: var(--ink, #E8E6E2) !important; color: #000 !important; border-color: var(--ink, #E8E6E2) !important; }
body.crayon .track-card:has(input:checked) * { color: #000 !important; }
body.crayon .apply-check { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
/* Crayon look v2: every bit of text in Arimo (the old typewriter labels too), full-weight second lines,
   crayon edge on links and text-only spans/divs/cells, rounded CTAs and cards. */
body.crayon *:not(svg):not(svg *):not(.material-icons):not([class*="icon"]) { font-family: 'Arimo', system-ui, Arial, sans-serif !important; }
body.crayon :is(h1, h2, h3) em, body.crayon :is(h1, h2, h3) span { font-weight: 700 !important; }
body.crayon :is(a, span, div, td, th, dt, dd, strong, b, figcaption):not(:has(*)) { filter: url(#pc-crayon); }
body.crayon :is([class*="cta"], [class*="btn"], [class*="button"]) { border-radius: 999px !important; }
body.crayon :is([class*="card"], [class*="rubric"], [class*="tile"], [class*="panel"]):not(a):not(button) { border-radius: 22px; }

/* long codes / handles in the bolder font must wrap, never push the page sideways */
body.crayon :is(h1, h2, h3, h4, p, li, td, span, b, strong, code, div:not(:has(*))) { overflow-wrap: anywhere; }
/* /apply photos laid out like the model form (Diego 2026-11-04): two tall rounded tap-to-upload boxes,
   the chosen photo fills the box. apply.js sets .has-photo + the preview. */
body.crayon .apply-file { position: relative; aspect-ratio: 3 / 4; border: 1px dashed var(--line, rgba(232,230,226,.3)) !important; border-radius: 26px !important;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 12px; overflow: hidden; background: #0b0b0b; cursor: pointer; }
body.crayon .apply-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; z-index: 2; }
body.crayon .apply-file .apply-label-text { font-size: 14px; letter-spacing: .1em; color: #fff; }
body.crayon .apply-file .apply-file-hint { font-size: 11px; opacity: .7; }
body.crayon .apply-file::before { content: "+"; font: 700 34px 'Arimo', sans-serif; color: var(--ink-3, #A29F99); line-height: 1; }
body.crayon .apply-file .af-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; filter: none; }
body.crayon .apply-file.has-photo::before, body.crayon .apply-file.has-photo .apply-label-text, body.crayon .apply-file.has-photo .apply-file-hint { visibility: hidden; }
body.crayon .apply-file.has-photo { border-style: solid !important; }

/* Landing wall drifts right in an endless loop (Diego 2026-11-04). .wallpaper keeps its blur; its grid
   moves into .wp-grid, two copies inside .wp-track that slides from -50% to 0. */
body.crayon .wallpaper { display: block; overflow: hidden; }
body.crayon .wp-track { display: flex; width: 200%; height: 100%; animation: wp-drift 90s linear infinite; will-change: transform; }
body.crayon .wp-grid { width: 50%; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; align-content: start; }
@keyframes wp-drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { body.crayon .wp-track { animation: none; } }
/* Hero melts into "Videos like these": no hard line, the dark backdrop fades in over 260px. */
body.crayon #works { border-top: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(180deg, rgba(14,14,14,0) 0, rgba(14,14,14,.65) 140px, rgba(14,14,14,.92) 260px) !important; }

/* Creator wall on the invite page (2026-11-04): real creator TikToks, most viewed first. */
/* Body is a flex column, so the hero sizes to its content: the wall must carry its own width. */
/* Full bleed, screen edge to screen edge on every width (Diego 2026-11-04). The hero is centred,
   so 50% - 50vw lands on the viewport's left edge; the head text keeps its own readable width. */
.cwall { margin: 18px 0 6px calc(50% - 50vw); width: 100vw; text-align: left; box-sizing: border-box; overflow: hidden; }
body.invite-mode { overflow-x: clip; }
.cwall-head { font-size: 14px; line-height: 1.5; color: #C9C6C0; margin: 0 auto 12px; padding: 0 20px; max-width: 680px; text-align: center; box-sizing: border-box; }
.cwall-head b { color: #F4F1EA; }
.cwall-row { max-width: 100%; overflow: hidden; padding-bottom: 6px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.cwall-track { display: flex; gap: 10px; width: max-content; animation: cwall-loop var(--cwall-dur, 90s) linear infinite; will-change: transform; }
.cwall-row:hover .cwall-track, .cwall-row.hold .cwall-track { animation-play-state: paused; }
@keyframes cwall-loop { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 5px)); } }
@media (prefers-reduced-motion: reduce) { .cwall-track { animation: none; } .cwall-row { overflow-x: auto; } }
.cwall-tile { flex: 0 0 auto; width: 138px; margin: 0; cursor: pointer; }
.cwall-tile video { width: 138px; height: 245px; object-fit: cover; border-radius: 14px; background: #111; display: block; border: 1px solid rgba(232, 230, 226, 0.14); }
.cwall-tile figcaption { display: flex; flex-direction: column; gap: 1px; padding: 6px 2px 0; font-size: 11px; line-height: 1.3; }
.cwall-tile figcaption span:first-child { color: #E8E6E2; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cwall-tile figcaption span:last-child { color: #8A8884; }
.cwall-hint { font-size: 11px; color: #6E6C68; text-align: center; margin-top: 6px; }
@media (min-width: 700px) { .cwall-tile, .cwall-tile video { width: 160px; } .cwall-tile video { height: 284px; } }