/* wasm-bridge browser demo — layout + components on top of tokens.css.
   2026-07-22 reskin (match Shane's real Cluster 1 design system,
   `_dev/shane-price/nfnitecluster1onboarding/`), scoped as a VISUAL RESKIN ONLY —
   Felipe's explicit choice (AskUserQuestion) over restructuring this page into an
   onboarding-shaped flow or building real ceremony/recovery semantics into
   wasm-bridge. This page stays exactly what it was: an engineering test harness
   proving the delivery plan's §7.5/§7.6 checklist (5 numbered steps, raw JSON
   output blocks) — only its colours/typography/components now come from Shane's
   real design system (tokens.css, shared verbatim with onboard-app/dist) instead
   of ad-hoc system-font styling. Every id/class app.js's event-wiring depends on
   (passphrase/plaintext/btn-*/out-*/step-put/step-sign/step-project/"disabled")
   is unchanged — app.js itself was not touched by this reskin. */

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100vh; }

/* CSP-safe sprite hide: the page's own style-src 'self' has no style-src-attr
   'unsafe-inline', so an inline style="display:none" on the sprite <svg> is
   silently dropped by the browser (confirmed via adversarial review) — this
   class does the same job without needing an inline-style CSP exception. */
.sprite-defs { display: none; }

body {
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.topmark { padding: 28px 28px 0; }

/* ── nfnite wordmark + eyebrow (component layer from onboard-app/dist/style.css,
   not tokens.css, hence copied rather than inherited via the shared tokens.css
   import). .eyebrow is verbatim; .mark's icon/label are deliberately sized down
   from onboard-app's 34px/21px (a full-width onboarding hero header) to fit this
   page's slim utility topmark — same wordmark, compact variant, not a straight
   verbatim port. ── */
.mark { display: inline-flex; align-items: center; gap: 10px; }
.mark svg.mk { width: 28px; display: block; color: #7CC177; flex: none; }
.mark .w { font-weight: 300; font-size: 18px; letter-spacing: -0.04em; color: var(--paper); line-height: 1; }
.mark .w .n { color: #7CC177; }
.mark .w .tm { font-size: 0.24em; font-weight: 500; vertical-align: super; color: var(--paper-mute); margin-left: 0.06em; }

.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--paper-mute); font-weight: 500; display: flex; align-items: center; gap: 9px; margin: 28px 0 0; }
.eyebrow .d { width: 6px; height: 6px; border-radius: 50%; background: var(--apple-blue); box-shadow: 0 0 10px rgba(0,122,255,0.5); flex: none; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 28px 64px;
}

h1 {
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  color: var(--paper);
}

.lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}

/* ── step cards ── */
.card.step, .card.status {
  padding: 20px 22px 22px;
  margin-bottom: 16px;
}

.step .pill { margin-bottom: 12px; }

.step h2, .status h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: var(--paper);
}

.step.disabled { opacity: 0.45; }

/* ── fields (ported verbatim from onboard-app/dist/style.css's .c1-field) ── */
.c1-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.c1-field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-mute); font-weight: 500; }
.c1-field input { height: 46px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 15px; font-size: 15px; font-family: inherit; color: var(--paper); letter-spacing: -0.01em; width: 100%; }
.c1-field input:focus { outline: 2px solid var(--apple-blue); outline-offset: 1px; border-color: var(--apple-blue); }

.c1-fine { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; color: var(--paper-mute); line-height: 1.6; margin: 0 0 16px; }

/* ── buttons (ported verbatim from onboard-app/dist/style.css's 5-button canon —
   only .care is used here: every action on this page is a neutral "run the next
   step" action, not an approve/destructive/defer moment) ── */
.b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 10px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #FFFFFF; flex: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: filter .15s; }
.b:not(:disabled):hover { filter: brightness(0.94); }
.b:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
.b:disabled { opacity: 0.45; cursor: not-allowed; }
/* .step.disabled already dims the whole card at 0.45 — without this, a disabled
   button inside a disabled card compounds to ~0.2 effective opacity (found via
   adversarial review). One dimming layer is enough. */
.step.disabled .b:disabled { opacity: 1; }
.b.care { background: var(--apple-blue); }

/* ── output blocks — a new component (this page's raw-JSON readouts have no
   equivalent in onboard-app's design catalogue, which never surfaces raw data),
   built from tokens.css primitives rather than copied from an ill-fitting
   existing class. ── */
.out {
  display: block;
  min-height: 1.3em;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-dim);
  white-space: pre-wrap;
  word-break: break-all;
}

@media (max-width: 520px) {
  main { padding: 20px 18px 48px; }
  h1 { font-size: 23px; }
}