/* The home page's top band, in light AND dark (618; Josh, 2026-11-01: "rework
   the hero section with its own background also ... we need to develop this
   page for dark and light"). The new hero and its "why are you here" box
   (js/whyBox.js), the number picker's section under it, the channel bar and
   the landing header: one set of colours, each with a light and a dark value,
   so both modes are designed rather than one inverted. Loaded by the
   [why-box] widget, so it only reaches the page that holds the box; the
   band rules are scoped to that page with body:has(). */

/* ── The colours ──────────────────────────────────────────────────── */
body {
  --lx-ink: #0f172a;
  --lx-soft: #475569;
  --lx-faint: #64748b;
  --lx-eyebrow: #6d28d9;
  --lx-hero-bg:
    radial-gradient(48% 70% at 12% 18%, rgba(99, 102, 241, 0.20), transparent 62%),
    radial-gradient(42% 60% at 88% 26%, rgba(217, 70, 239, 0.16), transparent 62%),
    radial-gradient(60% 50% at 55% 110%, rgba(139, 92, 246, 0.14), transparent 70%),
    linear-gradient(180deg, rgba(245, 243, 255, 0.92) 0%, rgba(253, 244, 255, 0.78) 55%, rgba(248, 250, 252, 0.4) 100%);
  --lx-band-bg: linear-gradient(180deg, rgba(248, 250, 252, 0.4) 0%, rgba(241, 245, 249, 0.85) 100%);
  --lx-card: rgba(255, 255, 255, 0.86);
  --lx-card-line: rgba(15, 23, 42, 0.09);
  --lx-card-shadow: 0 24px 60px rgba(76, 29, 149, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --lx-line: rgba(15, 23, 42, 0.08);
  --lx-msg: #f1f0fb;
  --lx-msg-line: rgba(99, 102, 241, 0.12);
  --lx-chip: #ffffff;
  --lx-chip-line: rgba(99, 102, 241, 0.28);
  --lx-chip-hover: rgba(139, 92, 246, 0.12);
  --lx-field: #ffffff;
  --lx-field-line: rgba(15, 23, 42, 0.16);
  --lx-pill: rgba(255, 255, 255, 0.7);
  --lx-pill-line: rgba(99, 102, 241, 0.22);
  --lx-bar: #eef2ff;
  --lx-bar-ink: #3730a3;
  --lx-head: rgba(255, 255, 255, 0.82);
  --lx-head-line: rgba(15, 23, 42, 0.08);
}
:root[data-theme="dark"] body {
  --lx-ink: #ffffff;
  --lx-soft: rgba(255, 255, 255, 0.78);
  --lx-faint: rgba(255, 255, 255, 0.6);
  --lx-eyebrow: #c4b5fd;
  --lx-hero-bg:
    radial-gradient(48% 70% at 12% 18%, rgba(99, 102, 241, 0.32), transparent 62%),
    radial-gradient(42% 60% at 88% 26%, rgba(217, 70, 239, 0.24), transparent 62%),
    radial-gradient(60% 50% at 55% 110%, rgba(139, 92, 246, 0.22), transparent 70%),
    linear-gradient(180deg, #0b1022 0%, #111733 60%, #131a2e 100%);
  --lx-band-bg: linear-gradient(180deg, #131a2e 0%, #0f172a 100%);
  --lx-card: rgba(17, 24, 39, 0.72);
  --lx-card-line: rgba(255, 255, 255, 0.12);
  --lx-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(139, 92, 246, 0.08);
  --lx-line: rgba(255, 255, 255, 0.08);
  --lx-msg: rgba(255, 255, 255, 0.08);
  --lx-msg-line: rgba(255, 255, 255, 0.08);
  --lx-chip: rgba(255, 255, 255, 0.06);
  --lx-chip-line: rgba(255, 255, 255, 0.18);
  --lx-chip-hover: rgba(139, 92, 246, 0.25);
  --lx-field: rgba(255, 255, 255, 0.08);
  --lx-field-line: rgba(255, 255, 255, 0.16);
  --lx-pill: rgba(255, 255, 255, 0.06);
  --lx-pill-line: rgba(255, 255, 255, 0.12);
  --lx-bar: #1e293b;
  --lx-bar-ink: #cbd5e1;
  --lx-head: #0f172a;
  --lx-head-line: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    --lx-ink: #ffffff;
    --lx-soft: rgba(255, 255, 255, 0.78);
    --lx-faint: rgba(255, 255, 255, 0.6);
    --lx-eyebrow: #c4b5fd;
    --lx-hero-bg:
      radial-gradient(48% 70% at 12% 18%, rgba(99, 102, 241, 0.32), transparent 62%),
      radial-gradient(42% 60% at 88% 26%, rgba(217, 70, 239, 0.24), transparent 62%),
      radial-gradient(60% 50% at 55% 110%, rgba(139, 92, 246, 0.22), transparent 70%),
      linear-gradient(180deg, #0b1022 0%, #111733 60%, #131a2e 100%);
    --lx-band-bg: linear-gradient(180deg, #131a2e 0%, #0f172a 100%);
    --lx-card: rgba(17, 24, 39, 0.72);
    --lx-card-line: rgba(255, 255, 255, 0.12);
    --lx-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(139, 92, 246, 0.08);
    --lx-line: rgba(255, 255, 255, 0.08);
    --lx-msg: rgba(255, 255, 255, 0.08);
    --lx-msg-line: rgba(255, 255, 255, 0.08);
    --lx-chip: rgba(255, 255, 255, 0.06);
    --lx-chip-line: rgba(255, 255, 255, 0.18);
    --lx-chip-hover: rgba(139, 92, 246, 0.25);
    --lx-field: rgba(255, 255, 255, 0.08);
    --lx-field-line: rgba(255, 255, 255, 0.16);
    --lx-pill: rgba(255, 255, 255, 0.06);
    --lx-pill-line: rgba(255, 255, 255, 0.12);
    --lx-bar: #1e293b;
    --lx-bar-ink: #cbd5e1;
    --lx-head: #0f172a;
    --lx-head-line: rgba(255, 255, 255, 0.06);
  }
}

/* ── The hero: its own background ─────────────────────────────────── */
.lx-why-hero {
  position: relative;
  isolation: isolate;
  padding: 3.5rem 1rem 3rem;
  background: var(--lx-hero-bg);
  color: var(--lx-ink);
  border-bottom: 1px solid var(--lx-line);
  overflow: hidden;
}
.lx-why-hero-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.lx-why-eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-eyebrow);
}
.lx-why-copy h1 { margin: 0 0 1rem; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; font-weight: 800; color: var(--lx-ink); letter-spacing: -0.01em; }
.lx-why-lede { margin: 0 0 1.5rem; font-size: 1.12rem; line-height: 1.6; color: var(--lx-soft); max-width: 34rem; }
.lx-why-login { margin: 0.9rem 0 0; font-size: 0.92rem; color: var(--lx-faint); }
.lx-why-login a { color: var(--lx-eyebrow); font-weight: 600; }
.lx-why-points { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lx-why-points li {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--lx-soft);
  background: var(--lx-pill);
  border: 1px solid var(--lx-pill-line);
}

/* ── The box: a chat card in the page's own style (Josh, 2026-11-01: "lets
   make that chat box have the normal page style and not be like the linxi
   terminal"). Light and dark from the band's colours above. */
.lx-why {
  display: flex;
  flex-direction: column;
  min-height: 24rem;
  border-radius: 24px;
  background: var(--lx-card);
  border: 1px solid var(--lx-card-line);
  box-shadow: var(--lx-card-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow: hidden;
  color: var(--lx-ink);
}
.lx-why-head { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--lx-line); }
.lx-why-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #d946ef);
  box-shadow: 0 0 0 4px color-mix(in srgb, #8b5cf6 18%, transparent), 0 8px 20px -6px rgba(217, 70, 239, 0.55);
}
.lx-why-who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.lx-why-who strong { font-size: 1.02rem; font-weight: 800; }
.lx-why-sub { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--lx-faint); }
.lx-why-sub::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.lx-why-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.1rem;
  max-height: 30rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.lx-why-msg {
  max-width: 88%;
  padding: 0.7rem 0.95rem;
  border-radius: 18px 18px 18px 6px;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--lx-ink);
  background: var(--lx-msg);
  border: 1px solid var(--lx-msg-line);
  animation: lx-why-in 0.25s ease-out;
}
.lx-why-msg.is-guess { font-size: 1.04rem; font-weight: 600; border-color: color-mix(in srgb, #8b5cf6 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, #6366f1 10%, var(--lx-msg)), color-mix(in srgb, #d946ef 8%, var(--lx-msg))); }
.lx-why-msg.is-soft { font-size: 0.92rem; color: var(--lx-soft); }
.lx-why-msg.is-me {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-color: transparent;
}
.lx-why-msg.is-typing { display: inline-flex; gap: 0.3rem; width: max-content; padding: 0.85rem 0.95rem; }
.lx-why-msg.is-typing span { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--lx-faint); animation: lx-why-dot 1s infinite ease-in-out; }
.lx-why-msg.is-typing span:nth-child(2) { animation-delay: 0.15s; }
.lx-why-msg.is-typing span:nth-child(3) { animation-delay: 0.3s; }
.lx-why-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; animation: lx-why-in 0.25s ease-out; }
.lx-why-chip {
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  color: var(--lx-ink);
  background: var(--lx-chip);
  border: 1px solid var(--lx-chip-line);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.lx-why-chip:hover, .lx-why-chip:focus-visible { background: var(--lx-chip-hover); border-color: #a78bfa; }
.lx-why-chip:active { transform: scale(0.97); }
.lx-why-chip.is-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #6366f1, #d946ef); font-weight: 700; }
.lx-why-chip.is-primary:hover { filter: brightness(1.08); }
.lx-why-chip.is-quiet { background: none; border-style: dashed; color: var(--lx-eyebrow); }
.lx-why-fine { margin: 0; font-size: 0.78rem; color: var(--lx-faint); }
.lx-why-fine a { color: var(--lx-eyebrow); }
.lx-why-form { display: flex; gap: 0.5rem; padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--lx-line); }
.lx-why .lx-why-form input, .lx-why .lx-why-form input:focus {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  color: var(--lx-ink);
  background: var(--lx-field);
  border: 1px solid var(--lx-field-line);
}
.lx-why .lx-why-form input::placeholder { color: var(--lx-faint); }
.lx-why .lx-why-form input:focus { outline: none; border-color: #a78bfa; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25); }
.lx-why-form button { font: inherit; font-weight: 700; padding: 0 1.15rem; border: 0; border-radius: 999px; color: #fff; cursor: pointer; background: linear-gradient(135deg, #6366f1, #d946ef); }
@keyframes lx-why-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lx-why-dot { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .lx-why-msg, .lx-why-actions { animation: none; } .lx-why-msg.is-typing span { animation: none; } }

/* ── The rest of the band, on this page: the header, the number picker's
   section and its card, the figures and the channel bar follow the mode. */
body:has(.lx-why-hero) .landing-header { background: var(--lx-head); color: var(--lx-ink); border-bottom: 1px solid var(--lx-head-line); backdrop-filter: blur(10px); }
body:has(.lx-why-hero) .landing-header-tagline { color: var(--lx-faint); }
body:has(.lx-why-hero) .lx-hero-home { background: var(--lx-band-bg); color: var(--lx-ink); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker { background: var(--lx-card); border-color: var(--lx-card-line); box-shadow: var(--lx-card-shadow); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-head h2 { color: var(--lx-ink); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-head p,
body:has(.lx-why-hero) .lx-hero-home .landing-picker-field label,
body:has(.lx-why-hero) .lx-hero-home .landing-picker-note,
body:has(.lx-why-hero) .lx-hero-home .landing-picker-foot { color: var(--lx-faint); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-form input { background: var(--lx-field); border-color: var(--lx-field-line); color: var(--lx-ink); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-form input::placeholder { color: var(--lx-faint); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-num { background: var(--lx-chip); border-color: var(--lx-chip-line); color: var(--lx-ink); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-num:hover { background: var(--lx-chip-hover); }
body:has(.lx-why-hero) .lx-hero-home .landing-picker-num span { color: var(--lx-faint); }
body:has(.lx-why-hero) .lx-hero-home .landing-hero-floater { opacity: 0.08; }
body:has(.lx-why-hero) .lx-figure { background: var(--lx-card); border-color: var(--lx-card-line); box-shadow: var(--lx-card-shadow); }
body:has(.lx-why-hero) .lx-figure span { color: var(--lx-soft); }
body:has(.lx-why-hero) .landing-channel-bar { background: var(--lx-bar); color: var(--lx-bar-ink); }

@media (max-width: 860px) {
  .lx-why-hero { padding: 2.25rem 1rem 2rem; }
  .lx-why-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .lx-why { min-height: 0; }
  .lx-why-thread { max-height: 28rem; }
}