/*
 * The little pages' own rules, lifted verbatim out of poc5-pages.css.
 *
 * `joined.html` is 3 kB of HTML and `profile.html` is 2 kB — a QR code and a link.
 * Both were pulling the whole 929 kB console stylesheet for the handful of rules
 * below, because `.hs-page` and the `.hs-joined-*` family live nowhere else. On the
 * two pages a brand-new owner sees FIRST, that was the entire render-blocking budget
 * spent on rules for screens they have not reached yet.
 *
 * Copied, not re-authored: same declarations, same order, same media queries, so the
 * cascade lands where it did. `css-load-order.md` puts this in poc5-pages.css's slot
 * — after handshake.css, before the ds bridge.
 *
 * If a rule here needs changing, change it in poc5-pages.css too. The console still
 * serves that file and still owns these class names; `small-pages-css.test.ts` checks
 * the two copies still agree.
 */

/* Not a page rule, and the reason this file exists at all rather than being three
   selectors inline: `.hs-btn` sets `display: inline-flex` in handshake.css, which
   beats the UA's `[hidden] { display: none }`. Without this line joined.html's
   "Open Messages" button shows on desktop, where its own script has just hidden it. */
[hidden],
.hs-is-hidden {
  display: none !important;
}

.hs-page {
  min-height: 100vh;
  padding: var(--hs-space-5) var(--hs-space-4) var(--hs-space-8);
}

.hs-page-narrow {
  max-width: 420px;
  margin: 0 auto;
}

.hs-page.hs-page-lander {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

.hs-joined-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.hs-joined-card {
  text-align: center;
  width: 100%;
}

.hs-joined-card h1 {
  margin: 0 0 var(--hs-space-3);
  font-size: 1.5rem;
}

.hs-joined-card .num {
  margin: 0 0 var(--hs-space-4);
}

.hs-joined-qr {
  display: block;
  margin: 0 auto var(--hs-space-4);
  border-radius: var(--hs-radius);
}

.hs-joined-card .hs-btn {
  width: 100%;
  margin-bottom: var(--hs-space-3);
}

.hs-joined-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--hs-text-muted);
  line-height: 1.45;
}

.hs-joined-qr-wrap .num {
  margin-top: var(--hs-space-3);
  font-family: var(--hs-font-mono);
  font-size: 1rem;
  font-weight: 600;
}

.num { font-family: var(--hs-font-mono); font-size: 1.1rem; font-weight: 700; margin: var(--hs-space-4) 0; }

.hs-tilt-cta-qr .hs-joined-qr {
  margin-bottom: var(--hs-space-2);
}