/* ===== Wallace experience layer — every rule gated on body.xp so that
   no-JS / no-WebGL / boot-failure renders the original site exactly ===== */

#field-canvas { display: none; }
.xp #field-canvas { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.xp .dc-card { position: relative; z-index: 1; }
.xp { scroll-behavior: auto; }

/* lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* page chrome becomes transparent so the field shows through (body is #081019) */
.xp .page__group-1, .xp .page__group-2, .xp .wa { background-color: transparent !important; }

/* light cards -> dark glass */
.xp .hero__group-6, .xp .benefits__group-4, .xp .implementation__group-3,
.xp .configure__group-2, .xp .faq__group-2 {
  background-color: rgba(11, 20, 33, 0.62) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(237, 241, 248, 0.09);
}

/* dark cards -> translucent glass */
.xp .benefits__group-8, .xp .benefits__group-12, .xp .platform__group-2, .xp .cta__group-2 {
  background-color: rgba(13, 24, 40, 0.55) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(237, 241, 248, 0.09);
}

/* dark text inside formerly-light cards flips to light. The export paints
   text with inherited -webkit-text-fill-color, so both properties must flip.
   Exclusions (not overrides) keep accent spans, muted labels, and the
   playground UI out of the flip entirely. */
.xp :is(.hero__group-6, .benefits__group-4, .implementation__group-3, .configure__group-2, .faq__group-2),
.xp :is(.hero__group-6, .benefits__group-4, .implementation__group-3, .configure__group-2, .faq__group-2)
    :is(div, span, p, h2, h3, a, summary):not(
      .text-3, .text-3 *,
      .xp-pg, .xp-pg *,
      .benefits__group-5, .benefits__group-5 *,
      .configure__group-15, .configure__group-15 *,
      .configure__group-9, .configure__group-9 *,
      .configure__text-1, .configure__text-7,
      .faq__text-1, .faq__text-1 *,
      .hero__group-7, .hero__group-7 *,
      .implementation__group-4, .implementation__group-4 *
    ) {
  color: #EDF1F8 !important;
  -webkit-text-fill-color: #EDF1F8 !important;
}
/* accent spans and footnote links brighten for dark glass */
.xp :is(.hero__group-6, .benefits__group-4, .implementation__group-3, .configure__group-2, .faq__group-2)
    :is(.text-3, .text-3 *, .benefits__link, .hero__link) {
  color: #7D93FF !important;
  -webkit-text-fill-color: #7D93FF !important;
}

/* the QR code must stay scannable */
.xp .cta__group-8 { background-color: #fff !important; }

/* harvest hud (populated by choreography) */
#xp-hud {
  position: fixed; left: 24px; bottom: 24px; z-index: 2;
  font: 600 13px/1.4 var(--wf-mono, ui-monospace, monospace);
  color: #7D93FF; letter-spacing: 0.04em;
  opacity: 0; transition: opacity 0.25s; pointer-events: none;
}

/* sma playground (injected by playground.js) */
.xp .configure__group-1, .xp .configure__group-2 { height: auto !important; block-size: auto !important; min-height: 0 !important; }
.xp .configure__group-2 { padding-bottom: 36px !important; }
#xp-playground { margin-top: 28px; display: grid; gap: 14px; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chip {
  font: 600 13px/1 var(--wf-mono, ui-monospace, monospace); color: #EDF1F8;
  background: rgba(53, 80, 230, 0.18); border: 1px solid rgba(125, 147, 255, 0.35);
  border-radius: 999px; padding: 9px 14px; cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.xp-chip:hover { background: rgba(53, 80, 230, 0.45); transform: translateY(-1px); }
.xp-label {
  font: 700 12px/1 var(--wf-mono, ui-monospace, monospace);
  color: #7D93FF; letter-spacing: 0.14em; text-transform: uppercase;
}
.xp-form { display: flex; gap: 10px; }
.xp-inputwrap { position: relative; flex: 1; }
.xp-prompt {
  position: absolute; left: 16px; top: 50%; transform: translateY(-54%);
  font: 700 18px/1 var(--wf-mono, ui-monospace, monospace); color: #4A63F0;
  pointer-events: none;
}
.xp-input {
  width: 100%; box-sizing: border-box;
  font: 500 16px/1.4 var(--wf-mono, ui-monospace, monospace); color: #EDF1F8;
  caret-color: #7D93FF;
  background: rgba(8, 16, 25, 0.82); border: 1px solid rgba(125, 147, 255, 0.4);
  border-radius: 12px; padding: 16px 16px 16px 38px; outline: none;
  box-shadow: 0 0 22px rgba(53, 80, 230, 0.18), inset 0 0 0 1px rgba(53, 80, 230, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.xp-input::placeholder { color: #8B94A1; opacity: 1; }
.xp-input:focus {
  border-color: #4A63F0;
  box-shadow: 0 0 30px rgba(53, 80, 230, 0.35), 0 0 0 3px rgba(53, 80, 230, 0.22);
}
.xp-attn { animation: xp-attn 1.5s ease-in-out 2; }
@keyframes xp-attn {
  50% { transform: scale(1.012); filter: drop-shadow(0 0 18px rgba(74, 99, 240, 0.55)); }
}
@media (prefers-reduced-motion: reduce) { .xp-attn { animation: none; } }
.xp-go {
  font: 700 13px/1 var(--wf-mono, ui-monospace, monospace); color: #fff;
  background: #3550E6; border: 0; border-radius: 10px; padding: 0 18px; cursor: pointer;
}
.xp-go:hover { background: #4A63F0; }
.xp-summary { font: 600 13px/1.5 var(--wf-mono, ui-monospace, monospace); color: #9AA6B6; letter-spacing: 0.03em; }

/* mandate rules resolve in as the field reshapes */
.xp-mandate { display: grid; gap: 8px; }
.xp-mandate:empty { display: none; }
.xp-rule {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: rgba(8, 16, 25, 0.55); border: 1px solid rgba(237, 241, 248, 0.10);
  border-radius: 10px; opacity: 0; transform: translateY(7px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.xp-rule.xp-in { opacity: 1; transform: none; }
.xp-rule-badge {
  font: 700 10px/1 var(--wf-mono, ui-monospace, monospace);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap;
}
.xp-rule--exclusion .xp-rule-badge { color: #F0A48A; background: rgba(224, 112, 58, 0.14); border: 1px solid rgba(224, 112, 58, 0.35); }
.xp-rule--cap .xp-rule-badge { color: #7D93FF; background: rgba(53, 80, 230, 0.18); border: 1px solid rgba(125, 147, 255, 0.35); }
.xp-rule--tilt .xp-rule-badge { color: #B49AFF; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(139, 92, 246, 0.4); }
.xp-rule-detail { flex: 1; font: 600 13px/1.3 var(--wf-mono, ui-monospace, monospace); color: #EDF1F8; }
.xp-rule-status { font: 600 12px/1 var(--wf-mono, ui-monospace, monospace); color: #8B94A1; transition: color 0.3s; }
.xp-rule:not(.xp-done) .xp-rule-status { animation: xp-pulse 1.1s ease-in-out infinite; }
.xp-rule.xp-done .xp-rule-status { color: #7DD6A0; animation: none; }
@keyframes xp-pulse { 50% { opacity: 0.4; } }
.xp-flash { animation: xp-flash 0.8s ease; }
@keyframes xp-flash { from { color: #7D93FF; } to { color: #9AA6B6; } }

/* the old static configure mock is superseded by the live playground
   (delete this rule if the mock should stay) */
.xp .configure__group-7 { display: none; }

@media (prefers-reduced-motion: reduce) { #xp-hud { display: none; } }
@media (max-width: 820px) {
  #xp-hud { left: 14px; bottom: 14px; font-size: 11px; }
  /* 16px input font stops iOS from auto-zooming on focus */
  .xp-input { font-size: 16px; }
  .xp-form { flex-direction: column; }
  .xp-go { padding: 12px 18px; }
  .xp-chip { padding: 11px 15px; } /* comfortable touch targets */
}