/* scripts/join-page/join.css — the join page's own layer (Arise)
 * Implements US-6.7 (FR-001 rev. join QR, FR-004 rev.) — specimen
 * claude.ai/artifact/LMbWsD2tgi1XFxnZ9pW25i, cyan on void (Jan, 2026-10-14).
 *
 * NOTE: loads after the package and the portal's blackwall.css, which owns the aura,
 *       the ground, the column and the arise. This file holds only what the join page
 *       adds: the code and its caption. Same rules: `.nt-*` is the package's, never set
 *       background or border on it.
 * NOTE: no hand-join steps — a private home network; the host is in the room (Jan,
 *       2026-10-15, US-6.11).
 */

/* A smaller summon — the code is the page's figure, the glyph its signature. */
.join .bw-summon {
  width: 64px;
  height: 64px;
}

/* ─── THE CODE ──────────────────────────────────────────────────────────────
 * Cyan modules on the shell's floor. The PNG carries its own four-module quiet
 * zone and an OPAQUE background equal to --void-floor (wifi-qr.ts reads the
 * value from nt/css/variables.css), so it is invisible against the shell yet
 * still the opaque, inverted image that decoded on both test phones.
 * NOTE: no glow, no filter — a blurred module edge is a misread module.
 * ────────────────────────────────────────────────────────────────────────── */
.join-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
}

.join-qr__code {
  display: block;
  width: 216px;
  max-width: 100%;
  height: auto;
  image-rendering: pixelated;
  -webkit-touch-callout: default; /* the long-press menu is the point — never suppress it */
}

.join-cap {
  margin: 0;
  max-width: 30ch;
  font-size: var(--font-size-small);
  color: var(--text-secondary);
  text-align: center;
  text-wrap: balance;
}