/* Space Funding Radar — the public capture form.
 *
 * Its OWN stylesheet, not part of site.css, because the form ships on pages that
 * do not load site.css at all: the 17 hand-written blog-static articles link
 * blog.css only. Verified in a browser on 2026-07-30 — the injected form
 * rendered as a white input on a dark page with no card, functionally fine and
 * visibly broken. No test would have caught that.
 *
 * Linked by base.njk for rendered pages and injected by
 * scripts/postbuild-html.mjs for passthrough pages, next to radar.js.
 *
 * EVERY var() carries a fallback. The tokens live in site.css :root, which the
 * blog-static pages never load — without fallbacks this stylesheet would apply
 * and still render nothing, which is the same defect one layer down.
 */
.radar {
  background: var(--card-mist, rgba(15, 20, 35, 0.60));
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-card, 20px);
  padding: 26px 28px;

  /* The clamp is load-bearing, not styling. postbuild-html.mjs anchors the
     injection on </article>, and in blog-static pages <article class="section">
     wraps .container-narrow — so the form lands as a SIBLING of <article>,
     inside a .content that blog.css gives no max-width and no padding. Without
     this it ran edge to edge against 780px of centred article text on all 18
     posts, live, since 2026-07-30.

     min() does both jobs: 780px matches .container-narrow, and the percentage
     leg supplies a mobile gutter those pages have nowhere else to get. One rule
     in the one stylesheet that ships wherever the form ships — no injector
     branching, no second markup shape. Accepted side effect: on base.njk pages
     the card insets ~24px inside the already-padded .page. */
  max-width: min(780px, 100% - 48px);
  margin: 44px auto 8px;
}
.radar__heading { margin: 0 0 8px; font-size: 1.25rem; }
.radar__lead { margin: 0 0 18px; color: var(--text-dim, rgba(255, 255, 255, 0.62)); max-width: 62ch; }
.radar__label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255, 255, 255, 0.38));
  margin-bottom: 8px;
}
.radar__row { display: flex; flex-wrap: wrap; gap: 10px; }
.radar__input {
  flex: 1 1 16rem;
  min-width: 0;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-edge, rgba(255, 255, 255, 0.06));
  border-radius: var(--radius-cta, 14px);
  color: var(--text, rgba(255, 255, 255, 0.92));
  font: inherit;
  padding: 12px 14px;
}
.radar__input:focus-visible {
  outline: 2px solid var(--plasma-cyan, #6fd6f2);
  outline-offset: 1px;
}
.radar__submit {
  background: rgba(255, 255, 255, 0.92);
  color: #0A0F1A;
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-cta, 14px);
  padding: 12px 20px;
  cursor: pointer;
}
.radar__submit:disabled { opacity: 0.55; cursor: progress; }
.radar__submit:focus-visible { outline: 2px solid var(--plasma-cyan, #6fd6f2); outline-offset: 2px; }
/* Empty until the widget renders on first interaction, so it must not reserve
   vertical space before then. */
.radar__captcha:not([aria-hidden]) { margin-top: 14px; }
.radar__status { margin: 12px 0 0; font-size: 0.9rem; min-height: 1.2em; }
.radar__status[data-kind="ok"] { color: var(--vector-green, #4ade80); }
.radar__status[data-kind="error"] { color: var(--solar-amber, #FFB450); }
.radar__fineprint { margin: 14px 0 0; font-size: 0.8rem; color: var(--text-faint, rgba(255, 255, 255, 0.38)); max-width: 68ch; }