/* XenChucks wave2-e — performance + forms reliability layer (IDEAS-2.md 337-367).
   Loaded after styles.css. Every rule is additive; removing this file restores
   the base look. Brand: #6ea8ff / #cfe2ff / #0b0c11, dark mode always. */

/* ---------- #338: metric-tuned fallback so Bungee -> system swap doesn't reflow.
   'Bungee' itself comes from Google Fonts (display=swap); this fallback only
   shows if the webfont fails (#349 graceful third-party failure). */
@font-face{
  font-family:"XC Bungee Fallback";
  src:local("Arial Black"),local("Arial Bold"),local("Arial"),local(sans-serif);
  size-adjust:94%;
  ascent-override:96%;
  descent-override:22%;
}
:root{
  --font-display:'Bungee','XC Bungee Fallback','Arial Black',sans-serif;
}

/* ---------- #348: skip rendering off-screen list content (with intrinsic size
   so scrollbars don't jump). Only where items are uniform-ish. */
.cards .card,
.faq-list > details,
.steps > li{
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}

/* ---------- #343: no-JS — hide JS-driven waitlist forms, show noscript ones.
   The .no-js class is swapped to .js by a tiny head script. */
.no-js form[data-waitlist]:not([onsubmit]){display:none}
/* Without JS the reveal-on-scroll never fires — content must stay readable. */
.no-js .reveal{opacity:1;transform:none;transition:none}
.noscript-note{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:1rem 1.25rem;
  margin:.75rem 0;
  font-size:.95rem;
}
.noscript-note strong{color:var(--blue2)}

/* ---------- #363: one required/optional convention — "*" + legend. */
.req-wrap{display:inline-flex;align-items:center;gap:.3rem;min-width:0}
form.signup-stacked .req-wrap{width:100%}
.req-star{color:var(--blue);font-weight:800;line-height:1;flex:none}
.req-legend{width:100%;text-align:center;color:var(--muted);font-size:.8rem;margin-top:.5rem}
.req-legend [aria-hidden="true"]{color:var(--blue);font-weight:800}

/* ---------- #358: "why we ask" microcopy on optional fields. */
.why-ask{
  display:block;
  width:100%;
  color:var(--muted);
  font-size:.8rem;
  margin-top:.3rem;
  line-height:1.45;
}

/* ---------- #357: field-level errors — icon + text + aria-invalid, never color alone. */
.signup input.xc-invalid,
.signup textarea.xc-invalid,
.signup select.xc-invalid{
  border-color:#ff8f8f;
  box-shadow:0 0 0 3px rgba(255,143,143,.16);
}
.xc-field-error{
  display:flex;align-items:flex-start;gap:.4rem;
  width:100%;
  color:#ffb3b3;
  font-size:.85rem;font-weight:600;
  margin-top:.35rem;line-height:1.4;
}
.xc-field-error [aria-hidden="true"]{flex:none}

/* ---------- #340: retry UI — real Retry button + "copy your email" fallback. */
.xc-retry-row{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;
  width:100%;margin-top:.6rem;
}
.xc-retry-row .btn-ghost{
  background:transparent;border:1px solid var(--line);color:var(--blue2);
  border-radius:999px;padding:.45rem 1rem;font-size:.85rem;font-weight:700;cursor:pointer;
  font-family:var(--font-body);min-height:44px;
}
.xc-retry-row .btn-ghost:hover{border-color:var(--blue);color:var(--ink)}
.xc-retry-row .btn-ghost:disabled{opacity:.6;cursor:wait}
.xc-copied{color:var(--ice2);font-size:.85rem;font-weight:600}

/* ---------- #359: stall state. */
.signup button.xc-stalled{border-style:dashed}

/* ---------- #356: draft restore note. */
.xc-draft-note{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;
  width:100%;
  background:rgba(110,168,255,.08);
  border:1px solid rgba(110,168,255,.35);
  border-radius:12px;
  padding:.55rem .9rem;
  font-size:.85rem;color:var(--blue2);
  margin-bottom:.75rem;
}
.xc-draft-note button{
  background:none;border:none;color:var(--blue);font-size:.85rem;font-weight:700;
  cursor:pointer;text-decoration:underline;padding:.25rem;min-height:44px;
}

/* ---------- #355: review-before-submit panel (beta). */
.xc-review{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--card);
  padding:1.25rem;
  width:100%;
}
.xc-review h3{font-family:var(--font-display);font-size:1.15rem;margin-bottom:.25rem}
.xc-review > p{color:var(--muted);font-size:.9rem;margin-bottom:1rem}
.xc-review-row{
  display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;
  padding:.6rem 0;border-top:1px solid var(--line);
}
.xc-review-row dt{color:var(--muted);font-size:.8rem;flex:none;width:7.5rem;padding-top:.15rem}
.xc-review-row dd{margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.xc-review-row .xc-edit{
  background:none;border:none;color:var(--blue);font-weight:700;font-size:.85rem;
  cursor:pointer;text-decoration:underline;flex:none;padding:.25rem;min-height:44px;
}
.xc-review-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* ---------- #361: one-tap email prefill (explicit consent). */
.xc-prefill{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  width:100%;
  font-size:.85rem;color:var(--muted);
  background:rgba(110,168,255,.07);
  border:1px dashed rgba(110,168,255,.4);
  border-radius:12px;padding:.55rem .9rem;margin-bottom:.6rem;
}
.xc-prefill button{
  border:1px solid var(--blue);background:rgba(110,168,255,.12);color:var(--blue2);
  border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:700;cursor:pointer;
  font-family:var(--font-body);min-height:44px;
}
.xc-prefill .xc-dismiss{background:none;border:none;color:var(--muted);text-decoration:underline;min-height:44px;cursor:pointer}
.xc-onlist-note{width:100%;text-align:center;color:var(--muted);font-size:.85rem;margin-bottom:.5rem}
.xc-onlist-note strong{color:var(--blue2)}

/* ---------- #346: offline queue badge. */
.xc-queue-chip{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex;gap:.6rem;align-items:center;
  background:var(--card);border:1px solid rgba(110,168,255,.5);border-radius:999px;
  padding:.55rem 1rem;font-size:.85rem;color:var(--blue2);
  box-shadow:0 8px 30px rgba(0,0,0,.5);
  max-width:min(92vw, 34rem);
}
.xc-queue-chip button{
  border:1px solid var(--blue);background:rgba(110,168,255,.12);color:var(--blue2);
  border-radius:999px;padding:.35rem .9rem;font-size:.85rem;font-weight:700;cursor:pointer;
  font-family:var(--font-body);white-space:nowrap;min-height:44px;
}

/* ---------- #350: "Updated {date}" stamp on cached/offline pages. */
.xc-cached-stamp{
  background:rgba(110,168,255,.08);
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:.8rem;text-align:center;
  padding:.45rem 1rem;margin:0;
}

/* ---------- #365: fieldset/legend grouping on long forms. */
.xc-fieldset{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.015);
  padding:1rem 1.1rem 1.15rem;
  margin:0 0 1rem;
  width:100%;
  min-width:0;
}
.xc-fieldset > legend{
  font-family:var(--font-body);
  font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue2);
  padding:0 .6rem;
  margin-left:.4rem;
}
.xc-fieldset .why-ask{margin-bottom:.2rem}

/* ---------- misc wave2-e */
.xc-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .xc-review{animation:none}
}