/* Reservision public pages. Every colour and face comes from tokens.css (docs/design-tokens.md has the rules).
   Moods are classes on <body>: mood-dark (join, guest page, landing), mood-light (host page), mood-confirm (confirmation). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: 15px; line-height: 1.45; font-variant-numeric: var(--num);
  -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text);
}
body.mood-dark { background: var(--dark-bg); color: var(--dark-text); }
body.mood-light { background: var(--bg); color: var(--text); }
body.mood-confirm { background: var(--flood); color: var(--on-flood); }
/* The host page boots with body.mood-dark until app.js runs; with a theme set (host page only) paint the theme's colours from the start. */
:root[data-theme] body.mood-dark { background: var(--bg); color: var(--text); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.app { flex: 1; width: 100%; max-width: var(--column); margin: 0 auto; display: flex; flex-direction: column; }
.boot { flex: 1; min-height: 60vh; }
.foot { width: 100%; max-width: var(--column); margin: 0 auto; padding: var(--s5) var(--s4) var(--s5); font-size: 11px; letter-spacing: 0.04em; color: var(--muted); }
.mood-dark .foot { color: var(--dark-muted); }
.foot .build { opacity: 0.8; }
.noscript { padding: var(--s4); }

/* ---------- the header lockup: mascot left of the wordmark ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); height: 64px; padding: 0 var(--s4); }
.top.center { justify-content: center; }
.lockup { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; min-height: var(--tap); }
.lockup img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.wordmark { font-family: var(--font-wordmark); font-size: 24px; line-height: 1; letter-spacing: var(--headline-tracking); text-transform: uppercase; white-space: nowrap; }
.wordmark small { font-family: var(--font-body); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; margin-left: 6px; vertical-align: 4px; }
.top .meta { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-end { display: flex; align-items: center; gap: var(--s2); min-width: 0; }

/* ---------- light/dark (host page only; tokens.css section 5) ---------- */
.theme-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; padding: 0; border-radius: 50%; border: var(--rule-width) solid var(--rule); background: transparent; color: var(--text); cursor: pointer; }
.theme-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-btn .ico { width: 20px; height: 20px; }
.theme-btn .sun, :root[data-theme="dark"] .theme-btn .moon { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
.mood-dark .top .meta { color: var(--dark-muted); }

/* ---------- type ---------- */
.headline { font-family: var(--font-headline); font-weight: 400; text-transform: uppercase; letter-spacing: var(--headline-tracking); line-height: 0.94; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s3); }
.mood-dark .eyebrow { color: var(--dark-muted); }
.muted { color: var(--muted); }
.mood-dark .muted { color: var(--dark-muted); }
.lede { font-size: 16px; line-height: 1.5; }
.small { font-size: 13px; }

/* ---------- buttons: pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5); border-radius: var(--radius-pill);
  border: var(--outline-width) solid var(--text); background: var(--text); color: var(--on-text);
  font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap; transition: transform 0.08s ease, opacity 0.15s ease;
}
.pill:active { transform: scale(0.98); }
.pill[disabled] { opacity: 0.55; cursor: default; }
.pill.outline { background: transparent; color: var(--text); }
.pill.wide { width: 100%; }
.pill.sm { min-height: var(--tap); padding: 0 var(--s4); font-size: 11px; letter-spacing: 0.1em; }
.pill .ico { width: 18px; height: 18px; }
.mood-dark .pill { background: var(--dark-text); color: var(--black); border-color: var(--dark-text); }
.mood-dark .pill.outline { background: transparent; color: var(--dark-text); }
.iconbtn { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius); border: var(--outline-width) solid var(--text); background: transparent; color: var(--text); cursor: pointer; }
.iconbtn.sm { width: var(--tap); height: var(--tap); border-width: var(--rule-width); border-color: var(--rule); }
.ico { width: 20px; height: 20px; flex: none; }
.textlink { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- fields: squared 6px ---------- */
.field { display: block; margin: 0 0 var(--s3); }
.field > span { display: block; font-size: 13px; font-weight: 600; margin: 0 0 6px 2px; }
.field > span i { font-style: normal; font-weight: 400; color: var(--muted); }
.field input {
  display: block; width: 100%; height: 52px; padding: 0 var(--s4); font-size: 16px;
  background: var(--white); border: var(--rule-width) solid var(--rule); border-radius: var(--radius); outline: none;
}
.field input::placeholder { color: var(--muted); opacity: 0.8; }
.field input:focus { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.field .at { position: relative; display: block; margin: 0; font-size: 16px; font-weight: 400; }
.field .at b { position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%); font-weight: 600; pointer-events: none; }
.field .at input { padding-left: 32px; }
.field .err { display: block; font-style: normal; font-size: 13px; font-weight: 600; margin: 6px 0 0 2px; }
.field.bad input { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.mood-dark .field > span i { color: var(--dark-muted); }
.mood-dark .field input { background: var(--dark-surface); color: var(--dark-text); border-color: var(--dark-rule); }
.mood-dark .field input::placeholder { color: var(--dark-muted); }
.mood-dark .field input:focus { border-color: var(--dark-text); box-shadow: inset 0 0 0 1px var(--dark-text); }
.mood-dark .field.bad input { border-color: var(--dark-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formerr { border: var(--outline-width) solid currentColor; border-radius: var(--radius); padding: var(--s3) var(--s4); font-weight: 600; margin: 0 0 var(--s3); }
.formerr:empty { display: none; }

.check { display: flex; align-items: center; gap: var(--s3); min-height: var(--tap); margin: 0 0 var(--s4) 2px; font-size: 15px; font-weight: 500; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; margin: 0; flex: none; border: var(--outline-width) solid currentColor; border-radius: var(--radius); background: transparent; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: currentColor; }
.check input:checked::after { content: ""; width: 11px; height: 6px; border: 2.5px solid var(--black); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.mood-light .check input:checked::after, .mood-confirm .check input:checked::after { border-color: var(--white); }

/* ---------- the door-list box: the signature ---------- */
.doorbox { display: block; border: var(--box-width) solid currentColor; text-align: left; }
.doorbox .lbl { display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: var(--rule-width) solid currentColor; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.doorbox .nm { display: block; font-family: var(--font-name); letter-spacing: var(--display-tracking); text-transform: uppercase; line-height: 1; padding: var(--s4) var(--s3) var(--s2); white-space: nowrap; overflow: hidden; }
.doorbox .nm.lower { text-transform: none; }
.doorbox .row { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s3) var(--s3); font-size: 13px; font-weight: 600; }
.doorbox .row span:last-child { text-align: right; }

.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s2); border: var(--outline-width) solid currentColor; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* ---------- landing + join + guest: After Hours ---------- */
.hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.hero .shot { display: block; width: 100%; height: auto; min-height: 420px; max-height: 620px; object-fit: cover; }
.hero .over { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--s5) var(--s4); background: linear-gradient(180deg, rgba(0,0,0,0) 30%, var(--overlay) 72%, var(--black) 100%); }
.hero.plain .over { position: static; background: none; padding-top: var(--s5); }
.hero .over .top { position: absolute; top: 0; left: 0; right: 0; }
.hero.plain .over .top { position: static; margin: calc(-1 * var(--s5)) calc(-1 * var(--s4)) var(--s5); }

.join-hero { padding: var(--s3) var(--s4) var(--s5); }
/* CP4 (10-14): Baca in the old mascot slot above the hook (layout A). The svg is sized by height (JOIN_BACA_H, 150px; his ink is
   ~136px of it, the rest is the 50-unit headroom of JOIN_BOX); his feet are the svg's bottom edge. He jumps in from off-left, so
   the svg overflows to the left; overflow past the viewport's left edge never scrolls. pointer-events off: he never takes a tap. */
.join-hero .baca { display: block; margin: var(--s2) 0 var(--s4); pointer-events: none; }   /* Khalil 10-14: the back of his cap on the headline's left edge; JOIN_BOX starts at his extent */
.join-hero .baca svg { display: block; height: 150px; width: auto; overflow: visible; }
.join-hero h1 { font-size: 68px; margin: 0 0 var(--s4); }
.join-hero .lede { color: var(--dark-text); opacity: 0.9; max-width: 34ch; }
.invited { display: inline-flex; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: 6px var(--s3); border: var(--rule-width) solid var(--dark-rule); border-radius: var(--radius); font-size: 13px; font-weight: 600; }
.join-form { padding: var(--s2) var(--s4) var(--s5); }
.join-form .pill { margin-top: var(--s2); }
.rule-text { font-size: 13px; line-height: 1.55; margin-top: var(--s4); color: var(--muted); }
.mood-dark .rule-text { color: var(--dark-muted); }
.rule-steps { margin: var(--s4) 0 0; padding-left: 20px; font-size: 15px; line-height: 1.45; }
.rule-steps li { margin-bottom: var(--s2); }
.rule-steps li::marker { font-weight: 700; }
.rule-items { list-style: disc; margin: var(--s1, 4px) 0 0; padding-left: 18px; }
.rule-items li { margin-bottom: 2px; }
.rule-items li::marker { font-weight: 400; }
.rule-example { margin-top: var(--s3); padding: var(--s2) var(--s3); border-left: var(--rule-width) solid currentColor; font-size: 14px; line-height: 1.45; }
.rule-example span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.6; }
.rule-steps + .rule-example + .rule-text, .rule-steps + .rule-text { margin-top: var(--s2); }
/* Khalil 10-13: the referral line sits beside the example: same size, bold lead, the qualifier muted on its own line */
.referral-line { margin-top: var(--s3); font-size: 14px; line-height: 1.45; font-weight: 700; }
.referral-line span { display: block; font-weight: 400; color: var(--muted); }
.mood-dark .referral-line span { color: var(--dark-muted); }

/* the join walk (0.2.0): hook → how you get paid → sign up, a back arrow on the last two */
.top-start { display: flex; align-items: center; gap: var(--s1); min-width: 0; }
.back-btn { display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; margin-left: calc(-1 * var(--s2)); border: 0; border-radius: 50%; background: none; color: currentColor; text-decoration: none; }
.back-btn .ico { width: 22px; height: 22px; }
.back-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.join-hero h1.hook { font-size: clamp(30px, 9.6vw, 52px); line-height: 0.98; }   /* three questions, one line each, down to 320px */
.join-hero .join-next { margin-top: var(--s5); }
.join-hero.short { padding-bottom: var(--s3); }
.join-hero.short h1 { font-size: 56px; margin-top: var(--s3); }
.join-pay h1 { font-size: 56px; margin: var(--s3) 0 var(--s5); }
/* CP5 (10-14): Baca on /join/pay, the /join stage rule (the .join-hero .baca rules above apply: block, 150px tall, overflow
   visible) above "How you get paid". PAY_BOX (app.js) starts at his extent, so the five hand's thumb sits on the content's
   left edge with nothing cut; beside the h1 leaves 13 px at 320 and 15 px at 430 (measured), so above it is. The fan's
   wave and the flying bills draw past the svg's right and top edges, which never scrolls. */
.join-pay .baca { margin-bottom: var(--s2); }
/* CP6 (10-14): Baca on /join/details, the /join/pay stage rule above "Get your link." (the .join-hero .baca rules apply).
   DETAILS_BOX (app.js) starts at his extent, so the fist holding the link sits on the content's left edge with nothing
   cut; the link's swing, the glints and celebrate's hop and accents draw past the svg's edges, which never scrolls. */
.join-details .baca { margin-bottom: var(--s2); }
/* The kit's five-finger hand is drawn over the face and the body (pointFive): a stroke in the page colour cuts the
   outline the sheet draws around a hand in front, so the fingers never merge into the white face. */
.baca use[href$="-handFiveUp"] { stroke: var(--dark-bg); stroke-width: 6; stroke-linejoin: round; paint-order: stroke; }
.pay-box { min-height: 1px; }
.pay-box .rule-text { margin-top: var(--s3); }
.mood-dark .ladder li { border-color: var(--dark-rule); }
.mood-dark .ladder .tier { color: var(--dark-muted); }

.landing { padding: var(--s3) var(--s4) var(--s6); }
/* Baca beside the headline (K1: he scales to the free space, the headline never wraps). Khalil 10-13 23:2x: he stands to the RIGHT of the headline, his back on the text. */
.landing .stage { display: flex; align-items: flex-end; margin: var(--s6) 0 var(--s4); }
.landing h1 { font-size: 72px; margin-bottom: 0; flex: none; white-space: nowrap; }
.landing .baca { flex: none; margin-bottom: 2px; pointer-events: none; max-width: calc(100vw - 32px - 212px); }   /* 2px (measured 10-13 on the live page at 320-430; 4px left the feet 2px above): feet on the headline baseline */
/* Sized by WIDTH (two-line block height x LANDING_BOX aspect 298.7/487) so a capped width scales both and the feet stay on the baseline. */
.landing .baca svg { display: block; width: calc(2 * 72px * 0.94 * 298.7 / 487); height: auto; max-width: 100%; overflow: visible; }
/* Contact: Baca's back and cap brim toward the text without moving the headline (target 0-2px, never over the glyphs). */
.landing .baca { margin-left: -1px; }
@media (min-width: 520px) { .landing .baca { max-width: none; } }
.baca .ink { fill: currentColor; }
.baca .gold { fill: var(--gold); }
.landing .pill { margin-top: var(--s5); }

.event-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: var(--s3); }
.bigdate { font-size: 112px; line-height: 0.86; }
.bigdate span { display: block; }
.event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s3); margin-top: var(--s4); font-size: 15px; font-weight: 700; }
.event-meta i { font-style: normal; opacity: 0.6; }
.event-area { font-size: 13px; color: var(--dark-muted); margin-top: 2px; }
.picker { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s4) var(--s4) 0; }
.picker button { min-height: var(--tap); padding: 0 var(--s4); border-radius: var(--radius-pill); border: var(--outline-width) solid var(--dark-rule); background: transparent; color: var(--dark-text); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; }
.picker button[aria-pressed="true"] { background: var(--dark-text); color: var(--black); border-color: var(--dark-text); }
.guest-body { padding: var(--s5) var(--s4) var(--s4); }
.guest-box { margin-bottom: var(--s5); color: var(--dark-text); }
.guest-box .nm { font-size: 88px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 var(--s5); border-top: var(--rule-width) solid var(--dark-rule); }
.facts > div { padding: var(--s3) 0; border-bottom: var(--rule-width) solid var(--dark-rule); min-width: 0; }
.facts > div:nth-child(even) { padding-left: var(--s4); border-left: var(--rule-width) solid var(--dark-rule); }
.facts .wide { grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: 2px; }
.facts dd { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.facts a { display: inline-flex; min-height: var(--tap); align-items: center; }
.quiet { font-size: 14px; color: var(--dark-muted); margin-top: var(--s5); }
.quiet a { color: var(--dark-text); }
/* Khalil 10-13: the sign-out line on the host and guest pages; follows the page's mood */
.signout { font-size: 14px; color: var(--muted); margin: var(--s5) 0 var(--s6); text-align: center; }
.signout.top { margin: 0 0 var(--s3); text-align: right; }
.signout.top.center { text-align: center; }

/* ---------- host page: People's Club ---------- */
.host-head { border-bottom: var(--rule-width) solid var(--rule); }
.jump { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3) var(--s4); border-bottom: var(--rule-width) solid var(--rule); }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s3); border: var(--rule-width) solid var(--rule); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; text-decoration: none; background: var(--card); }
.section { padding: var(--s5) var(--s4); border-bottom: var(--rule-width) solid var(--rule); scroll-margin-top: var(--s2); }
.section.flash { animation: section-flash 1.2s ease-out both; }
@keyframes section-flash {
  0%   { box-shadow: inset 0 0 0 2px var(--glow), inset 0 0 28px var(--glow-soft); }
  35%  { box-shadow: inset 0 0 0 2px var(--glow), inset 0 0 28px var(--glow-soft); }
  100% { box-shadow: inset 0 0 0 2px transparent, inset 0 0 28px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .section.flash { animation: none; outline: 2px solid var(--glow); outline-offset: -2px; }
}
.section h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 var(--s3); }
.linkcard { background: var(--card); }
.linkcard .nm { font-size: 64px; padding-top: var(--s3); }
.linkcard .row { align-items: center; padding-top: 0; }
.linkcard .row .url { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.link-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.link-actions .pill { flex: 1; }
.hint { font-size: 13px; color: var(--muted); margin-top: var(--s3); }
.message { background: var(--surface); border: var(--rule-width) solid var(--rule); border-radius: var(--radius); padding: var(--s3) var(--s4); font-size: 14px; line-height: 1.5; margin-top: var(--s4); overflow-wrap: anywhere; }
.message .eyebrow { margin-bottom: var(--s1); }
/* the host's own message (migration 0002): Edit text → a squared field, a live count, Save / Cancel, Reset */
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.msg-head .eyebrow { margin: 0; }
.msg-edit { min-height: 32px; font-size: 13px; color: var(--text); flex: none; }
.msg-text { margin: var(--s1) 0 0; white-space: pre-wrap; }
.message.editing .msg-text, .message.editing .msg-edit { display: none; }
.msg-form[hidden] { display: none; }
.msg-form { margin-top: var(--s2); }
.msg-field { margin: 0; }
.msg-field textarea {
  display: block; width: 100%; min-height: 128px; padding: var(--s3) var(--s4); font: inherit; font-size: 16px; line-height: 1.45;
  background: var(--card); color: var(--text); border: var(--rule-width) solid var(--rule); border-radius: var(--radius);
  outline: none; resize: vertical;
}
:root[data-theme="dark"] .msg-field textarea { background: var(--bg); }   /* the box is --surface = --card in dark: inset the field */
.msg-field textarea:focus { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.msg-meta { display: flex; justify-content: flex-end; margin-top: var(--s1); }
.msg-count { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: var(--num); }
.msg-count.over { color: var(--alert); }
.msg-err { margin: var(--s1) 0 0; font-size: 13px; font-weight: 600; color: var(--alert); }
.msg-err:empty { display: none; }
.msg-actions { display: flex; gap: var(--s2); margin-top: var(--s2); }
.msg-actions .pill { flex: 1; }
/* Khalil 10-11: Reset sits beside Edit text, visible without opening the editor (only when a custom message exists). */
.msg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s2); }
.message.editing .msg-tools { display: none; }
.msg-reset { min-height: 32px; font-size: 13px; color: var(--muted); flex: none; }
.msg-hint { margin-top: var(--s2); }

.nudge { display: flex; gap: var(--s3); align-items: flex-start; margin: var(--s4) var(--s4) 0; padding: var(--s3) var(--s2) var(--s3) var(--s4); border: var(--rule-width) solid var(--rule); border-radius: var(--radius); background: var(--card); }
.nudge .ico { margin-top: 2px; }
.nudge div { flex: 1; }
.nudge b { display: block; font-size: 14px; font-weight: 700; }
.nudge span { display: block; color: var(--muted); font-size: 13px; }
.nudge .x { width: var(--tap); height: var(--tap); margin: -10px 0 -10px 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }

.sheet { border: var(--rule-width) solid var(--rule); border-radius: var(--radius); background: var(--card); }
.sheet-row { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 52px; padding: 0 var(--s4); background: none; border: 0; border-bottom: var(--rule-width) solid var(--rule); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.people { padding: var(--s2) var(--s4); }
.people .eyebrow { margin: var(--s2) 0 var(--s1); }
.person { display: flex; align-items: center; gap: var(--s3); min-height: 60px; }
.person + .person { border-top: var(--rule-width) solid var(--rule); }
.avatar { width: 40px; height: 40px; flex: none; border: var(--outline-width) solid var(--text); border-radius: var(--radius); display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface); }
.person .who { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .pill { min-width: 92px; }
.empty { color: var(--muted); font-size: 14px; padding: var(--s3) 0; }
.sheet .empty { padding: var(--s3) var(--s4) var(--s4); }

.event-card + .event-card { margin-top: var(--s5); padding-top: var(--s5); border-top: var(--rule-width) solid var(--rule); }
.event-line { display: flex; align-items: center; gap: var(--s3); }
.datechip { flex: none; width: 64px; text-align: center; border: var(--outline-width) solid var(--text); border-radius: var(--radius); padding: 6px 0 4px; background: var(--card); }
.datechip b { display: block; font-family: var(--font-headline); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; }
.datechip span { display: block; font-family: var(--font-headline); font-size: 24px; line-height: 1; }
.event-line .what b { display: block; font-weight: 700; font-size: 16px; }
.event-line .what span { font-size: 13px; color: var(--muted); }
.count-line { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s4) 0 var(--s2); }
.count-line .headline { font-size: 56px; line-height: 0.9; }
.count-line span:last-child { font-size: 15px; font-weight: 600; }
.names { list-style: none; margin: 0; padding: 0; }
.names li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); min-height: var(--tap); border-top: var(--rule-width) solid var(--rule); font-size: 15px; font-weight: 500; }
.names li:last-child { border-bottom: var(--rule-width) solid var(--rule); }

.ladder { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.ladder li { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--s2); min-height: 56px; border-top: var(--rule-width) solid var(--rule); }
.ladder li:last-child { border-bottom: var(--rule-width) solid var(--rule); }
.ladder li.single { grid-template-columns: 1fr auto; }   /* Khalil 10-13: flat pay's one rung has no .tier span */
.ladder .tier { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ladder .what { font-size: 15px; font-weight: 600; }
.ladder .pct { font-family: var(--font-headline); font-size: 30px; line-height: 1; }
.tier-line { font-size: 14px; font-weight: 700; margin-top: var(--s3); }
.payout-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: 14px; font-weight: 600; }
.payout-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--money); flex: none; }

/* Cash Club: money is the one place gold appears */
.result + .result { margin-top: var(--s4); }
.result { border: var(--rule-width) solid var(--rule); border-radius: var(--radius); background: var(--card); padding: var(--s4); }
.result .head { display: flex; justify-content: space-between; gap: var(--s2); font-size: 13px; font-weight: 700; }
.result .money { font-family: var(--font-headline); font-size: 64px; line-height: 0.95; color: var(--text); margin: var(--s3) 0 var(--s1); }
.result .money::first-letter { color: var(--money); }
.result .sub { font-size: 13px; color: var(--muted); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: var(--s3); border-top: var(--rule-width) solid var(--rule); }
.stats > div { padding: var(--s3) 0 0; }
.stats > div + div { padding-left: var(--s3); border-left: var(--rule-width) solid var(--rule); }
.stats .n { font-family: var(--font-headline); font-size: 28px; line-height: 1; }
.stats .l { color: var(--muted); font-size: 12px; font-weight: 600; }
.after-empty { display: flex; gap: var(--s3); align-items: center; padding: var(--s4); border: var(--rule-width) dashed var(--rule); border-radius: var(--radius); color: var(--muted); font-weight: 600; }
.after-empty img { width: 40px; height: 40px; object-fit: contain; flex: none; opacity: 0.85; }
.door-note, .referral-note { font-size: 13px; color: var(--muted); margin-top: var(--s3); }   /* .referral-note: Khalil 10-13 */

/* ---------- confirmation: off-white ---------- */
.confirm { flex: 1; display: flex; flex-direction: column; padding: 0 var(--s4) var(--s4); }
.confirm .mascot { display: block; width: 104px; height: 104px; object-fit: contain; margin: var(--s4) auto var(--s3); }
.confirm h1 { font-family: var(--font-name); font-weight: 400; font-size: 30px; line-height: 1.1; letter-spacing: var(--display-tracking); margin-bottom: var(--s4); }
.confirm .doorbox .nm { font-size: clamp(64px, 18vh, 120px); padding-top: var(--s4); padding-bottom: var(--s3); }
.confirm .say { font-size: 20px; font-weight: 800; margin-top: var(--s4); }
.confirm .bday { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: 14px; }
.confirm .actions { display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin-top: auto; padding-top: var(--s5); }
.confirm .actions .pill { width: 100%; }

/* ---------- errors, the QR sheet, the toast ---------- */
.error { flex: 1; display: flex; flex-direction: column; padding: 0 var(--s4); }
.error .msg { margin: 18vh 0 var(--s5); font-family: var(--font-name); font-size: 28px; line-height: 1.15; letter-spacing: var(--display-tracking); }

.scrim { position: fixed; inset: 0; z-index: 20; background: var(--overlay); display: flex; align-items: flex-end; justify-content: center; }
.qrsheet { width: 100%; max-width: var(--column); background: var(--bg); color: var(--text); border-radius: 14px 14px 0 0; padding: var(--s5) var(--s4) var(--s5); text-align: center; }
.qrsheet h2 { font-family: var(--font-headline); font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; margin-bottom: var(--s1); }
.qrsheet .sub { color: var(--muted); font-size: 14px; margin-bottom: var(--s4); }
.qrsheet canvas { display: block; width: min(280px, 72vw); height: auto; margin: 0 auto; image-rendering: pixelated; border-radius: var(--radius); background: var(--white); }
.qrsheet .url { font-size: 13px; font-weight: 600; margin: var(--s3) 0 var(--s4); overflow-wrap: anywhere; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: var(--s3) var(--s4); border-radius: var(--radius-pill); background: var(--black); color: var(--white); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mood-dark .toast { background: var(--white); color: var(--black); }
.mood-light .toast { background: var(--text); color: var(--on-text); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 520px) {
  .app { border-left: var(--rule-width) solid var(--rule); border-right: var(--rule-width) solid var(--rule); }
  .mood-dark .app { border-color: var(--dark-rule); }
  .mood-confirm .app { border-color: transparent; }
}

/* Khalil 10-13: the pay-can-change note under the rule on /join/pay */
.pay-note { font-size: 13px; line-height: 1.45; opacity: .72; margin: var(--s3) 0 0; }

/* Khalil 10-13: the be-there-to-get-paid line in every pay block (join pay screen + host page) */
.show-up-line { font-size: 14px; line-height: 1.45; font-weight: 600; margin: var(--s3) 0 0; }