/* Miracle v3 — join page styles. OWNER: MCL-V3-001-T16 (form) / T18 (referral attribution). Do not edit css/base.css.
   Tokens only — no literal hex outside the few state colours base.css does not define
   (field error, success accent), which mirror base.css's own input[aria-invalid] red. */

/* ---------- layout ---------------------------------------------------------- */

.join-section { padding-block:clamp(36px,5.5vw,80px); }

.join-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.join-grid > * { min-width:0; }

@media (min-width:851px) {
  .join-grid { grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:clamp(40px,4.4vw,72px); }
  .join-pitch { position:sticky; top:calc(var(--header-h) + var(--s5)); }
}

.join-pitch { gap:var(--s4); }
.join-pitch h1 { max-width:14ch; }

/* The founding-places card is css/counter.css (MCL-SITE-REFERRAL-001-T16). */

.join-stars-note {
  display:flex; flex-direction:column; gap:var(--s2);
  border-left:3px solid var(--gold);
  background:var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s4) var(--s5);
  max-width:56ch;
}
.join-stars-note strong { font-family:var(--heading); font-size:.9375rem; color:var(--ink); }
.join-stars-note span { font-size:.8125rem; line-height:1.7; color:var(--muted); }

/* Founding-member list (round 4): heading, one-line intro, title + one line per item. */
.join-benefits { display:flex; flex-direction:column; gap:var(--s3); }
.join-benefits__intro { font-size:.9375rem; line-height:1.6; color:var(--ink-2); max-width:56ch; }
.join-benefits__list > li { line-height:1.55; }
.join-benefits__list > li strong { display:block; font-family:var(--heading); color:var(--ink); }

/* ---------- the panel ------------------------------------------------------- */

.join-panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);
  padding:clamp(20px,3.4vw,34px);
  min-width:0;
}
.join-panel__sub { margin-top:var(--s2); margin-bottom:var(--s5); }
.join-panel .form { max-width:none; }

.join-referred {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2);
  background:var(--surface-3); border-radius:var(--r-sm);
  padding:var(--s4);
  margin-bottom:var(--s5);
  font-size:.8125rem; line-height:1.7; color:var(--ink-2);
}
.join-referred__tag {
  font-family:var(--heading); font-size:.6875rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:#12604F;
}

/* ---------- the three doors ------------------------------------------------- */

.join-doors { display:flex; flex-direction:column; gap:var(--s3); }

.door {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:var(--s3);
  padding:14px var(--s4);
  border:1.5px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  cursor:pointer;
  min-width:0;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.door:hover { border-color:#A9CFC0; }
.door__input { position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.door__icon {
  display:grid; place-items:center;
  width:40px; height:40px; flex:none;
  border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--deep);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.door__icon svg { width:20px; height:20px; }
.door__text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.door__label { font-family:var(--heading); font-weight:700; font-size:.9375rem; color:var(--ink); line-height:1.3; }
.door__hint  { font-size:.75rem; line-height:1.5; color:var(--muted); }

.door:has(.door__input:checked) {
  border-color:var(--teal);
  background:var(--surface-2);
  box-shadow:0 0 0 1px var(--teal) inset;
}
.door:has(.door__input:checked) .door__icon { background:var(--deep); color:var(--cream); }
.door:has(.door__input:focus-visible) { box-shadow:0 0 0 3px rgba(8,126,145,.28); }

/* Fallback for engines without :has() — JS mirrors the state onto the label. */
.door[data-checked="true"] {
  border-color:var(--teal);
  background:var(--surface-2);
  box-shadow:0 0 0 1px var(--teal) inset;
}
.door[data-checked="true"] .door__icon { background:var(--deep); color:var(--cream); }

/* ---------- fields ---------------------------------------------------------- */

.join-phone { display:grid; grid-template-columns:1fr; gap:var(--s3); min-width:0; }
@media (min-width:621px) {
  .join-phone { grid-template-columns:minmax(0,11.5rem) minmax(0,1fr); }
}
.join-phone > * { min-width:0; }
.join-phone select { max-width:100%; }

/* MCL-SITE-REFERRAL-001-T02 — searchable country-code combobox (js/country-picker.js).
   The list is absolutely positioned inside .cc (position:relative); no ancestor of
   the join form sets overflow, so it is never clipped. */
.cc { position:relative; min-width:0; }
.cc .cc__input {
  padding-right:36px; text-overflow:ellipsis; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.cc .cc__input:focus { cursor:text; }
.cc__list {
  position:absolute; z-index:30; left:0; top:calc(100% + 4px); width:100%;
  max-height:min(18rem, 55vh); overflow-y:auto; overscroll-behavior:contain;
  margin:0; padding:4px; list-style:none;
  background:var(--surface); border:1px solid #BFDCD1; border-radius:var(--r-xs);
  box-shadow:var(--shadow-2);
}
.cc__option {
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3);
  min-height:44px; padding:10px 12px; border-radius:6px; cursor:pointer;
  font-size:.9375rem; line-height:1.35; color:var(--ink);
}
.cc__option[data-active] { background:var(--surface-3); }
.cc__option[aria-selected="true"] .cc__name { font-weight:700; }
.cc__name { min-width:0; overflow-wrap:anywhere; }
.cc__dial { flex:none; color:var(--muted); font-variant-numeric:tabular-nums; }
.cc__empty {
  position:absolute; z-index:30; left:0; top:calc(100% + 4px); width:100%; margin:0;
  padding:12px; font-size:.8125rem; color:var(--muted);
  background:var(--surface); border:1px solid #BFDCD1; border-radius:var(--r-xs);
}
@media (min-width:621px) {
  /* the code column is 11.5rem wide; let the open list use the row's width */
  .cc__list, .cc__empty { width:max(100%, 18rem); }
}

.join-hint { font-size:.75rem; line-height:1.6; color:var(--muted); margin-top:6px; }

/* base.css styles inputs and .form-status but ships no field-level error element. */
.field-error {
  font-size:.75rem; line-height:1.6; font-weight:600;
  color:#8C441A; margin-top:4px;
}
.field-error::before { content:"\26A0\FE0E"; margin-right:6px; }

.join-google-go { text-decoration:none; }

/* ---------- success --------------------------------------------------------- */

.join-success { display:flex; flex-direction:column; align-items:flex-start; gap:var(--s4); min-width:0; }
.join-success h2 { font-size:clamp(1.5rem,1.2rem + 1.4vw,2.125rem); letter-spacing:-.024em; }
.join-success h2:focus-visible { outline:2px solid var(--focus); outline-offset:4px; }
.join-success h3 { margin-top:var(--s3); }

.join-success__mark {
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:var(--r-pill);
  background:var(--mint); color:var(--on-mint);
  animation:join-pop 420ms var(--ease) both;
}
.join-success__mark svg { width:28px; height:28px; }
@keyframes join-pop { from { transform:scale(.72); opacity:0; } to { transform:scale(1); opacity:1; } }

.join-idcard {
  display:flex; flex-direction:column; gap:var(--s1);
  width:100%; min-width:0;
  background:linear-gradient(135deg,var(--deep),var(--deep2));
  color:var(--cream);
  border-radius:var(--r-md);
  padding:var(--s5);
}
.join-idcard__label {
  font-family:var(--heading); font-size:.6875rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.join-idcard__value {
  font-family:var(--heading); font-weight:800; color:#FFFFFF;
  font-size:clamp(1.75rem,1.3rem + 2vw,2.75rem); line-height:1.1; letter-spacing:.01em;
}

/* Round 3 (Amit 2026-10-28) item 3: tell people to keep the ID for the app. */
.join-idsave {
  width:100%; min-width:0; margin:0;
  border-left:3px solid var(--gold);
  background:var(--surface-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:var(--s3) var(--s4);
  font-family:var(--heading); font-weight:700; font-size:.9375rem; line-height:1.5; color:var(--ink);
}

.join-stars {
  display:flex; flex-direction:column; gap:var(--s1);
  width:100%; min-width:0;
  border:1px solid #EFD79B; background:#FDF4DE;
  border-radius:var(--r-sm); padding:var(--s4);
}
.join-stars strong { font-family:var(--heading); font-size:1rem; color:#6B4E08; }
.join-stars span { font-size:.8125rem; line-height:1.7; color:#7A5C1C; }

.join-link {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3);
  width:100%; min-width:0;
  border:1px dashed #A9CFC0; background:var(--surface-2);
  border-radius:var(--r-sm); padding:var(--s3) var(--s4);
}
.join-link__url {
  flex:1 1 12rem; min-width:0;
  font-family:var(--heading); font-weight:700; font-size:.9375rem;
  color:var(--deep); text-decoration:underline; text-underline-offset:3px;
}
.join-link__copy { flex:none; }
.join-link__copy[data-copied="true"] { background:var(--mint); }

.join-share { display:flex; flex-wrap:wrap; gap:var(--s2); width:100%; }
.join-share__item {
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:10px 14px; min-height:44px;
  border:1px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink);
  font-family:var(--heading); font-size:.8125rem; font-weight:700;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.join-share__item:hover { border-color:var(--teal); background:var(--surface-2); }
.join-share__icon { display:grid; place-items:center; width:18px; height:18px; color:var(--teal); flex:none; }
.join-share__icon svg { width:18px; height:18px; }

@media (prefers-reduced-motion:reduce) {
  .join-success__mark { animation:none; }
}

/* ---------- honeypot containment -------------------------------------------
   base.css ships `.form-trap` at `left:-10000px`, which is a real element
   1px wide at x = -10000 — and tests/overflow-check.mjs rule 2 counts any
   element whose box leaves the viewport, in EITHER direction, unless an
   ancestor clips it. So the chassis's own §6 honeypot fails the chassis's own
   gate on the first page that uses it (measured: 0/12 before this rule).
   A zero-size clipping parent satisfies the gate's documented exception
   without touching base.css and without display:none, which bots skip. */
.join-trap { position:relative; overflow:hidden; width:0; height:0; }

/* MCL-CONV-006 C1: post-registration notes. */
.join-notes { margin: var(--s4) 0; padding-left: 1.25rem; display: grid; gap: var(--s2); text-align: left; }

/* MCL-SITE-REFERRAL-001-T04 (spec W4/D8): "Coming live January 2027" badge, base .pill--gold. */
.launch-badge { align-self:flex-start; max-width:100%; white-space:normal; }

/* MCL-SITE-REFERRAL-001-T01: the consent label and controller small print carry links;
   base.css resets a{} to inherit, so make them visibly links (same as .prose a). */
.join-form .consent a, .join-form .fine-print a { color:var(--deep); text-decoration:underline; text-underline-offset:3px; }