/* Carried from Design Studio's design record (design/your-page/page.css, #398, 25 Oct 2026) for the live page and the
   in-chat card. Design Studio owns the look: change design/your-page/page.css first, then bring it here. */
/* Your page (Rick, 25 Oct 2026, issue #396; Target: STAGING). Design Studio's hand-off for HQ.
   One template, the night look, nothing to configure: no themes, no colours, no fonts to pick.
   The same markup and classes draw (a) the preview card in the chat thread and (b) the public page at /p/<handle>,
   so what the person approves is exactly what goes live. The public page is static HTML the server builds: no scripts,
   no AI call. Everything here works without JavaScript.

   Order (Rick): photo or monogram, name, the one line · Reach me · Now (with "Updated {date}") · the human part ·
   Share (QR, the link) · footer (Rick's line, from config) and a small report link.

   Tokens are BRAND.md §3's. Fonts: Instrument Serif 400 for the name (the page's one headline), Figtree 400/600 for
   everything else; the live page loads them from /fonts/ as public/styles.css does. */

.yp { --yp-bg: #080B17; --yp-panel: #10142A; --yp-text: #F2F0FA; --yp-soft: #CDD0E4; --yp-muted: #B7BAD2; --yp-faint: #8C90A8;
  --yp-line: rgba(242,240,250,.16); --yp-quiet: rgba(242,240,250,.08); --yp-violet: #B9A9FF; --yp-mint: #9FD8C8;
  --yp-ink: #17122F; --yp-starlight: #F2F0FA;
  width: 100%; max-width: 440px; margin: 0 auto; padding: 40px 20px 28px; color: var(--yp-text);
  font: 400 16px/1.5 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* The public page's sky: Night sky with one soft violet light above the photo. */
.yp-html { background: #080B17; }
.yp, .yp *, .yp *::before, .yp *::after, .ypc, .ypc * { box-sizing: border-box; }   /* on <html>, so the sky never ends in white below a long page */
.yp-sky { min-height: 100dvh; margin: 0;
  background: radial-gradient(70% 38% at 50% 0%, rgba(110,92,230,.30), rgba(110,92,230,0) 72%), var(--yp-bg); }

/* ── Who: photo or monogram, name, the one line ── */
.yp-who { display: flex; flex-direction: column; align-items: center; text-align: center; }
.yp-face { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 1px rgba(185,169,255,.45), 0 0 0 6px rgba(185,169,255,.08); }
.yp-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No photo: the first letters of the name (one or two), Instrument Serif on a soft violet disc. */
.yp-mono { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #2A2560, #141838 75%);
  font: 400 44px/1 'Instrument Serif', serif; letter-spacing: .02em; color: var(--yp-text); }
.yp-name { margin: 18px 0 0; font: 400 clamp(36px, 10vw, 44px)/1.05 'Instrument Serif', serif; letter-spacing: -.01em; text-wrap: balance; }
.yp-line { margin: 10px 0 0; max-width: 30em; font-size: 18px; line-height: 1.45; color: var(--yp-soft); text-wrap: balance; }

/* ── Sections: a small spaced-capitals label, then the content ── */
.yp-sec { margin-top: 32px; }
.yp-label { margin: 0 0 10px; font: 600 12px/1 Figtree; letter-spacing: .14em; text-transform: uppercase; color: var(--yp-faint); }

/* Reach me: the buttons the person chose, as full-width rows (two to a row when there are four or more). Plain links:
   mailto:, tel:, sms:, https://. Line icons of our own (no company logos). Equal weight: no gold here. */
.yp-reach { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yp-reach.few { grid-template-columns: 1fr; }
.yp-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 16px;
  border: 1px solid var(--yp-line); background: rgba(16,20,42,.72); color: var(--yp-text); text-decoration: none;
  font-weight: 600; font-size: 16px; transition: background .15s ease, border-color .15s ease; }
.yp-btn:hover { background: rgba(185,169,255,.08); border-color: rgba(185,169,255,.42); }
.yp-btn svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--yp-violet); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yp-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A last, odd button takes the full row. */
.yp-reach:not(.few) .yp-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Now: the one thing, on a Panel card with a mint edge on the left, and when it was last updated. */
.yp-now { padding: 16px 18px; border-radius: 18px; background: var(--yp-panel); border: 1px solid var(--yp-quiet);
  border-left: 3px solid var(--yp-mint); }
.yp-now p { margin: 0; font-size: 17px; line-height: 1.5; }
.yp-now time { display: block; margin-top: 8px; font-size: 13px; color: var(--yp-faint); }

/* The human part: a short paragraph in the person's own words. */
.yp-human p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--yp-soft); }

/* Share: the QR (built by the server as an SVG) on a Starlight tile, so every phone camera reads it (dark squares on
   light), and the page's address. With no script there is no copy button: the address is one tap to select
   (user-select: all), then the phone's own Copy. */
.yp-share { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.yp-qr { width: 132px; height: 132px; padding: 10px; border-radius: 16px; background: var(--yp-starlight); }
.yp-qr svg { display: block; width: 100%; height: 100%; }
.yp-addr { display: block; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--yp-line); background: rgba(8,11,23,.5);
  font-size: 15px; font-weight: 600; color: var(--yp-text); word-break: break-all; user-select: all; -webkit-user-select: all; cursor: text; }
.yp-hint { margin: 8px 0 0; font-size: 13px; color: var(--yp-faint); }

/* Footer: one quiet line, "Build yours." links to the maker's referral; then the report link, smallest and last. */
.yp-foot { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--yp-quiet); text-align: center; }
.yp-foot p { margin: 0; font-size: 13.5px; color: var(--yp-muted); }
.yp-foot a { color: var(--yp-mint); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.yp-report { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; font-size: 12.5px; color: var(--yp-faint); text-decoration: underline; text-underline-offset: 3px; }
.yp-report:hover { color: var(--yp-muted); }

.yp a:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .yp-btn { transition: none; } }

/* ── (a) The preview card in the chat thread ──
   The same page, inside a framed card under the coach's message: a small address bar on top (the link it will have), the
   page itself (Share and footer left out: they mean nothing until it is live), a soft fade at the bottom, then the
   card's actions. The card is never a link and its buttons are inert (tabindex -1), so nothing in the preview can be
   tapped by mistake. */
.ypc { margin: 14px 0 0; border-radius: 24px; background: var(--yp-bg, #080B17); border: 1px solid rgba(185,169,255,.4);
  overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.ypc-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #10142A;
  border-bottom: 1px solid rgba(242,240,250,.08); font: 600 13px/1 Figtree; color: #B7BAD2; }
.ypc-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #8C90A8; }
.ypc-bar .tag { margin-left: 6px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(242,240,250,.16);
  font: 600 12px/1 Figtree; letter-spacing: .08em; text-transform: uppercase; color: #B7BAD2; }
.ypc-view { position: relative; max-height: 640px; overflow: hidden;
  background: radial-gradient(80% 40% at 50% 0%, rgba(110,92,230,.26), rgba(110,92,230,0) 72%), #080B17; }
.ypc-view .yp { padding: 28px 18px 24px; pointer-events: none; }
.ypc-view::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px;
  background: linear-gradient(rgba(8,11,23,0), #080B17); }
.ypc-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-top: 12px; }
/* "Want it live?": the screen's one gold primary. */
.ypc-go { min-height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #D4B06A; color: #17122F;
  font: 600 16px Figtree; cursor: pointer; transition: background .18s ease; }
.ypc-go:hover { background: #DDBC7A; }
.ypc-change { min-height: 44px; padding: 0 4px; border: 0; background: none; color: #F2F0FA; font: 600 15px Figtree;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ypc-go:focus-visible, .ypc-change:focus-visible { outline: 2px solid #F3F1FF; outline-offset: 3px; }