/* FillMyList — DARK FACE, PASS 3 (trickle-down, 2026-10-27; renamed from Tester Hub 2026-10-28).
   The Hub's public face carried into the shipped anchor system: the
   site dark field (body.page-dark, dark.css tokens) and the home
   header (homeFace), with the Hub's own decided palette on top —
   violet ink + casino gold + bone, three key colors, gold as the
   single accent (the "names in lights" system this page always had,
   now seated in the family instead of floating on the cream face).
   Loaded ONLY when the route sets thFace; every other page is
   untouched. Structure per the studies: first viewport = the focal
   thing (the headline) with the ONE job (the pool signup) startable
   in the same viewport; the board below is the living surface —
   real fill events only, rendered from the same books the Hub app
   reads, never seeded. */

@keyframes thGlow { 0%,100% { box-shadow: 0 0 0 rgba(245,197,66,0); } 50% { box-shadow: 0 0 26px rgba(245,197,66,.55); } }
@keyframes thBarShine { 0% { background-position: 0 0; } 100% { background-position: 56px 0; } }
@media (prefers-reduced-motion: reduce) {
  .th-pill, .th-join-btn, .th-bar-fill { animation: none !important; }
}

/* ============================ HERO + THE ONE JOB ============================ */
.th-hero {
  position: relative; overflow: hidden; border-radius: 18px; color: #efe9ff;
  background: radial-gradient(120% 160% at 15% 0%, #3b1185 0%, #1d0650 52%, #12032f 100%);
  border: 1px solid #463a75;
  padding: 2.4rem 1.5rem 2.2rem; text-align: center; margin: 1rem 0 1.5rem;
}
.th-hero h1 {
  color: #fff; font-size: clamp(1.7rem, 6vw, 2.9rem); line-height: 1.15; margin: .3rem auto .6rem;
  max-width: 46rem; text-shadow: 0 2px 22px rgba(245,197,66,.35);
}
.th-hero h1 .th-gold { color: #f5c542; }
.th-eyebrow { letter-spacing: .28em; font-size: .78rem; color: #d9c8ff; margin: 0; font-family: Arial, sans-serif; }
.th-sub { color: #efe9ff; max-width: 40rem; margin: 0 auto; font-size: 1.08rem; }
.th-pill {
  display: inline-block; margin-top: 1.2rem; padding: .55rem 1.2rem; border-radius: 999px;
  background: rgba(245,197,66,.14); border: 1px solid #f5c542; color: #ffe9a8;
  font-family: Arial, sans-serif; font-weight: 700; animation: thGlow 2.6s ease-in-out infinite;
}
/* The signup rides INSIDE the hero: arrival and the one job share the
   first viewport — zero screens between arrival and value. */
.th-join { max-width: 460px; margin: 1.6rem auto 0; text-align: left; }
.th-join label { color: #f5efe4; }
.th-input { width: 100%; padding: .75rem .8rem; font-size: 1.05rem; border-radius: 8px; margin-top: .25rem; }
.th-join-btn {
  background: linear-gradient(180deg, #ffd968, #f5a623); color: #241300 !important; font-weight: 800;
  font-family: 'Arial Black', Arial, sans-serif; letter-spacing: .02em; border: none; cursor: pointer;
  padding: 1rem 1.8rem; border-radius: 10px; font-size: 1.12rem; min-height: 52px; width: 100%;
  animation: thGlow 2.6s ease-in-out infinite;
}
.th-join-btn:hover, .th-join-btn:focus { background: linear-gradient(180deg, #ffe082, #f7b733); }
.th-deal { color: #d9c8ff; font-size: .92rem; margin: .9rem 0 0; text-align: center; }
.th-joined {
  background: #14532d; color: #eafff2; border-radius: 12px; padding: 1.25rem 1.5rem;
  border: 1px solid #2e7d32; margin-bottom: 1rem; text-align: left;
}
.th-error {
  background: #3d1618; color: #f6c9c9; border: 1px solid #7c2d2d; border-radius: 12px;
  padding: 1rem 1.25rem; margin-bottom: 1rem; text-align: left;
}

/* ============================ THE BOARD (LIVE) ============================ */
.th-board {
  background: #17102e; color: #f3efff; border-radius: 14px; padding: 1.5rem; margin: 1.5rem 0;
  border: 1px solid #463a75;
}
.th-board h2 { color: #f5c542; margin-top: 0; }
.th-bar-track { background: #2c2154; border-radius: 999px; height: 16px; overflow: hidden; margin: .35rem 0 .9rem; }
.th-bar-fill {
  height: 100%; border-radius: 999px;
  background: repeating-linear-gradient(45deg, #f5c542 0 14px, #ffd968 14px 28px);
  background-size: 56px 100%; animation: thBarShine 1.2s linear infinite;
}

/* ============================ APPS IN THE HUB ============================ */
.th-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.th-app {
  background: #171310; border: 1px solid #2b241c; border-top: 4px solid #7c3aed;
  border-radius: 10px; padding: 1.1rem 1.2rem; color: #e9e1cf;
}
.th-badge {
  display: inline-block; background: #2c2154; color: #d9c8ff; border-radius: 999px;
  padding: .12rem .6rem; font-size: .78rem; font-family: Arial, sans-serif; font-weight: 700;
}

/* ============================ DOWNLOAD ============================ */
.th-download {
  background: linear-gradient(135deg, #241047, #3b1185); color: #fff; border-radius: 14px;
  border: 1px solid #463a75; padding: 1.5rem; margin: 1.5rem 0; text-align: center;
}
.th-download h2 { color: #fff; margin-top: 0; }
.th-download p { color: #e6defc; max-width: 38rem; margin-left: auto; margin-right: auto; }
.th-download a { color: #f5c542; }
.th-dl-btn {
  display: inline-block; background: #f5c542; color: #241300 !important; font-weight: 800;
  padding: 1rem 1.8rem; border-radius: 10px; text-decoration: none; font-size: 1.1rem; min-height: 52px;
  font-family: 'Arial Black', Arial, sans-serif;
}
.th-dl-btn:hover, .th-dl-btn:focus { background: #ffd968; }

/* ============================ DEVELOPERS (SECOND CROWD) ============================ */
.th-dev {
  background: #171310; border: 2px solid #f5c542; border-radius: 14px;
  padding: 1.5rem; margin: 1.5rem 0; color: #e9e1cf;
}
.th-dev h2 { color: #f5c542; margin-top: 0; }
.th-dev-btn {
  display: inline-block; background: linear-gradient(180deg, #ffd968, #f5a623); color: #241300 !important;
  font-weight: 800; font-family: 'Arial Black', Arial, sans-serif; text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 10px; min-height: 52px;
}
.th-dev-btn:hover, .th-dev-btn:focus { background: linear-gradient(180deg, #ffe082, #f7b733); }

/* ============================ PENNY SWEEPER STACK ============================ */
/* The shared partials (house-ad / sponsor-slot / tip-jar) dressed in
   the Hub's palette, the way the standalone doors dress them in
   theirs (door-tac / door-toolbox pattern). */
.th-sweep .house-ad {
  text-align: left; border: 1px solid #463a75; border-radius: 12px; background: #17102e;
  padding: .9rem 1.1rem 1rem; margin: 1.5rem 0;
}
.th-sweep .house-ad-label { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #d9c8ff; border: 1px solid #463a75; border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.th-sweep .house-ad-body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.th-sweep .house-ad-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.th-sweep .house-ad-headline { font-size: 17px; color: #f5efe4; }
.th-sweep .house-ad-pitch { color: #e6defc; font-size: 14px; }
.th-sweep .house-ad-disclosure { font-size: 12px; color: #b3a8d8; }
.th-sweep a.house-ad-cta { background: #f5c542; color: #241300; text-decoration: none; font-weight: 800; padding: 10px 22px; border-radius: 999px; white-space: nowrap; }
.th-sweep .ad-house { background: #171310; }

@media (min-width: 900px) {
  .th-hero { padding: 3.8rem 2rem 3.2rem; }
  .th-hero h1 { font-size: 3.35rem; }
  .th-sub { font-size: 1.2rem; }
}