/* waddly — waitlist sheet, two-step. Shared by every page with a
   [data-waitlist] trigger; markup injected by js/waitlist.js.
   Self-contained tokens, and all classes wl-prefixed so host-page CSS
   (which also uses .foot, .cta, .top, .back) can never leak in. */

.sheet{
  --wl-bg:#ECE4D3; --wl-card:#FCF7EE; --wl-white:#FFFDF8;
  --wl-ink:#221B13; --wl-ink-2:#5C5040; --wl-ink-3:#94866F; --wl-ink-4:#B6A98E;
  --wl-line:#E1D6C1; --wl-beak:#E8923A; --wl-beak-d:#7C4F0C;
  --wl-social:#EDA52C; --wl-social-d:#7C4F0C; --wl-social-2:#F8E6C2;
  --wl-active:#54B97A; --wl-active-d:#1C6A41; --wl-active-2:#D5EBDB;
  --wl-city:#3CA7DA;   --wl-city-d:#1C6E96;   --wl-city-2:#D0E9F6;
  --wl-hobby:#A488DE;  --wl-hobby-d:#51389A;  --wl-hobby-2:#E7DEF7;
  --wl-gab:'Gabarito',system-ui,sans-serif;
  --wl-sans:'Hanken Grotesk',system-ui,sans-serif;
  --wl-mono:'Space Mono',monospace;
}

/* Base rules carry the exit transition (quick, ease-in); [data-open="true"]
   carries the entry (springy ease-out). The visibility delay keeps the sheet
   rendered while the exit plays — without it, closing snaps to hidden. */
.sheet{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:22px; visibility:hidden; pointer-events:none; font-family:var(--wl-sans); transition:visibility 0s .52s; }
.sheet[data-open="true"]{ visibility:visible; pointer-events:auto; transition:visibility 0s; }
.sheet-bg{ position:absolute; inset:0; background:color-mix(in srgb,var(--wl-ink) 42%, transparent); backdrop-filter:blur(4px); opacity:0; transition:opacity .5s ease; cursor:pointer; }
.sheet[data-open="true"] .sheet-bg{ opacity:1; transition:opacity .35s ease; }

.sheet-card{ position:relative; width:100%; max-width:380px; background:var(--wl-card); border-radius:24px; padding:14px 24px 22px; box-shadow:0 40px 80px -30px rgba(34,27,19,.5), inset 0 0 0 1px rgba(34,27,19,.06); max-height:min(88dvh, 700px); overflow-y:auto; overscroll-behavior:contain; opacity:0; transform:translateY(20px) scale(.98); transition:opacity .42s ease, transform .5s cubic-bezier(.55,.06,.68,.19); }
.sheet[data-open="true"] .sheet-card{ opacity:1; transform:none; transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1); }

.sheet .wl-grab{ display:none; width:38px; height:4px; border-radius:2px; background:var(--wl-line); margin:0 auto 8px; }

/* header row: band left, dots + close right */
.sheet .wl-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:30px; }
.sheet .wl-band{ font-family:var(--wl-mono); font-weight:700; font-size:9.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--wl-ink-3); display:inline-flex; align-items:center; gap:6px; min-width:0; }
.sheet .wl-band svg{ width:13px; height:13px; color:var(--wl-beak); flex-shrink:0; }
.sheet .wl-back{ border:0; background:transparent; color:var(--wl-ink-3); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px; margin-left:-6px; font-family:var(--wl-sans); }
.sheet .wl-back:hover{ color:var(--wl-ink); }
.sheet .wl-top-r{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.sheet .wl-dots{ display:flex; gap:5px; align-items:center; }
.sheet .wl-dots i{ width:7px; height:7px; border-radius:50%; background:var(--wl-line); transition:.3s; }
.sheet .wl-dots i.on{ background:var(--wl-social); width:16px; border-radius:4px; }
.sheet .sheet-close{ width:30px; height:30px; border:0; background:transparent; border-radius:50%; cursor:pointer; color:var(--wl-ink-3); display:grid; place-items:center; }
.sheet .sheet-close:hover{ background:color-mix(in srgb,var(--wl-ink) 6%,transparent); color:var(--wl-ink); }

/* step screens */
.sheet .wl-step{ display:none; }
.sheet .wl-step.on{ display:block; animation:wlIn .34s cubic-bezier(.16,1,.3,1) both; }
@keyframes wlIn{ from{ opacity:0; transform:translateY(9px) } to{ opacity:1; transform:none } }

.sheet .wl-hook{ font-family:var(--wl-gab); font-weight:800; font-size:26px; letter-spacing:-.5px; line-height:1.04; margin-top:6px; color:var(--wl-ink); }
.sheet .wl-hook.s1{ margin-top:14px; }
/* V1: headline stays ink; the colour lives in the hero's wavy underline */
.sheet .wl-hook em{ font-style:normal; color:var(--wl-ink); }
.sheet .wl-uw{ position:relative; display:inline-block; }
.sheet .wl-uw svg{ position:absolute; left:-2%; width:104%; bottom:-.1em; height:.28em; overflow:visible; pointer-events:none; }
.sheet .wl-uw svg path{ fill:none; stroke:var(--wl-social); stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.sheet .wl-lede{ font-size:13.5px; color:var(--wl-ink-2); line-height:1.5; margin-top:8px; }

.sheet .wl-lbl{ display:block; font-family:var(--wl-mono); font-weight:700; font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--wl-ink-3); margin:18px 0 8px; }
.sheet .wl-lbl .opt{ color:var(--wl-ink-4); }
.sheet .wl-field{ display:flex; border-bottom:1.8px solid var(--wl-line); padding-bottom:3px; transition:border-color .2s; }
.sheet .wl-field:focus-within{ border-color:var(--wl-ink); }
.sheet .wl-field input{ flex:1; min-width:0; border:0; background:transparent; padding:11px 0; font-family:var(--wl-sans); font-size:16px; color:var(--wl-ink); outline:none; }
.sheet .wl-field input::placeholder{ color:var(--wl-ink-3); }

.sheet .wl-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; opacity:0; }

/* conditional sections — fields stay mounted, rows animate open.
   visibility keeps collapsed fields out of the tab order; the delay lets
   the collapse animation finish before content disappears */
.sheet .wl-rev{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.sheet .wl-rev.on{ grid-template-rows:1fr; opacity:1; }
.sheet .wl-rev > div{ overflow:hidden; min-height:0; visibility:hidden; transition:visibility 0s .4s; }
.sheet .wl-rev.on > div{ visibility:visible; transition:visibility 0s; }
.sheet .wl-rev .wl-field{ margin-top:12px; }

/* selectable pills — cities (single, ink) and activities (multi, hued) */
.sheet .wl-cities, .sheet .wl-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.sheet .wl-city, .sheet .wl-chip{ position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sheet .wl-city input, .sheet .wl-chip input, .sheet .wl-choice input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; }
.sheet .wl-city span, .sheet .wl-chip span{ display:inline-block; font-weight:600; line-height:1; color:var(--wl-ink-2); border:1.5px solid var(--wl-line); border-radius:999px; transition:.16s; }
.sheet .wl-city span{ font-size:14px; padding:11px 15px; }
.sheet .wl-chip span{ font-size:13.5px; padding:10px 14px; }
.sheet .wl-city:hover span, .sheet .wl-chip:hover span{ border-color:var(--wl-ink-3); }
.sheet .wl-city:has(input:focus-visible) span, .sheet .wl-chip:has(input:focus-visible) span{ outline:1.5px dotted var(--wl-ink-3); outline-offset:3px; }
.sheet .wl-city:has(input:checked) span{ background:var(--wl-ink); border-color:var(--wl-ink); color:var(--wl-white); }
.sheet .wl-chip.soc:has(input:checked) span{ background:var(--wl-social-2); border-color:var(--wl-social); color:var(--wl-social-d); }
.sheet .wl-chip.act:has(input:checked) span{ background:var(--wl-active-2); border-color:var(--wl-active); color:var(--wl-active-d); }
.sheet .wl-chip.cit:has(input:checked) span{ background:var(--wl-city-2); border-color:var(--wl-city); color:var(--wl-city-d); }
.sheet .wl-chip.hob:has(input:checked) span{ background:var(--wl-hobby-2); border-color:var(--wl-hobby); color:var(--wl-hobby-d); }

/* the two balanced choice cards */
.sheet .wl-choices{ display:grid; gap:8px; margin-top:6px; }
.sheet .wl-choice{ position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sheet .wl-choice .c{ display:flex; gap:12px; align-items:flex-start; border:1.6px solid var(--wl-line); border-radius:14px; padding:13px 15px; transition:.16s; background:var(--wl-white); }
.sheet .wl-choice:hover .c{ border-color:var(--wl-ink-3); }
.sheet .wl-choice:has(input:checked) .c{ border-color:var(--wl-social); box-shadow:inset 0 0 0 1px var(--wl-social); background:rgba(237,165,44,.06); }
.sheet .wl-choice:has(input:focus-visible) .c{ outline:1.5px dotted var(--wl-ink-3); outline-offset:3px; }
.sheet .wl-choice .rd{ width:18px; height:18px; border-radius:50%; border:1.8px solid var(--wl-ink-3); flex-shrink:0; margin-top:1px; position:relative; transition:.16s; }
.sheet .wl-choice:has(input:checked) .rd{ border-color:var(--wl-social); }
.sheet .wl-choice:has(input:checked) .rd::after{ content:''; position:absolute; inset:3.5px; border-radius:50%; background:var(--wl-social); }
.sheet .wl-choice .ct{ font-family:var(--wl-gab); font-weight:700; font-size:16px; letter-spacing:-.2px; color:var(--wl-ink); }
.sheet .wl-choice .cd{ font-size:12px; color:var(--wl-ink-2); line-height:1.38; margin-top:2px; }

/* the waddle-over postcard */
.sheet .wl-postcard{ position:relative; margin-top:14px; border-radius:16px; padding:17px; background:linear-gradient(160deg, color-mix(in srgb,var(--wl-city) 14%, var(--wl-card)), var(--wl-card) 78%); box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--wl-city) 32%, var(--wl-line)); }
.sheet .wl-postcard .route{ font-family:var(--wl-mono); font-weight:700; font-size:10px; letter-spacing:1.6px; text-transform:uppercase; color:var(--wl-city-d); }
.sheet .wl-postcard .ph{ font-family:var(--wl-gab); font-weight:800; font-size:23px; letter-spacing:-.4px; line-height:1.06; margin-top:9px; color:var(--wl-ink); }
.sheet .wl-postcard .ph em{ font-style:normal; color:var(--wl-city-d); }
.sheet .wl-postcard .pp{ font-size:13px; color:var(--wl-ink-2); line-height:1.5; margin-top:8px; }
.sheet .wl-postcard .pp b{ color:var(--wl-ink); font-weight:600; }

.sheet .wl-cta{ width:100%; margin-top:18px; display:flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer; background:var(--wl-ink); color:var(--wl-white); border-radius:999px; padding:16px 22px; font-family:var(--wl-sans); font-weight:700; font-size:16px; box-shadow:none; transition:transform .18s ease, opacity .2s, background .2s; -webkit-tap-highlight-color:transparent; }
.sheet .wl-cta .ar{ display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.sheet .wl-cta.ghost{ background:transparent; color:var(--wl-ink); border:1.7px solid var(--wl-ink); }
@media (hover:hover){
  .sheet .wl-cta:hover:not(:disabled):not(.ghost){ transform:translateY(-2px); }
  .sheet .wl-cta:hover:not(:disabled) .ar{ transform:translateX(4px); }
  .sheet .wl-cta.ghost:hover{ background:color-mix(in srgb,var(--wl-ink) 5%, transparent); }
}
.sheet .wl-cta:active{ transform:scale(.98); }
.sheet .wl-cta:disabled{ opacity:.55; cursor:default; transform:none; }

.sheet .wl-err{ font-size:13px; color:#B0483B; margin-top:12px; text-align:center; }
.sheet .wl-err[hidden]{ display:none; }
.sheet .wl-foot{ font-family:var(--wl-mono); font-size:9px; letter-spacing:.4px; color:var(--wl-ink-3); margin-top:12px; text-transform:uppercase; text-align:center; }
.sheet .wl-foot a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.2px; text-decoration-color:color-mix(in srgb,var(--wl-social) 55%, transparent); }
.sheet .wl-foot a:hover{ color:var(--wl-ink); }

/* done */
.sheet .wl-done{ text-align:center; padding:14px 0 4px; }
.sheet [data-step="2wait"] .wl-done{ padding-top:22px; }
.sheet [data-step="done"] .wl-done{ padding-top:28px; }
.sheet .wl-seal{ width:72px; height:72px; margin:0 auto 15px; border-radius:50%; border:2.5px solid var(--wl-beak); display:grid; place-items:center; transform:rotate(-8deg); }
.sheet .wl-step.on .wl-seal{ animation:wlPop .5s cubic-bezier(.3,1.5,.5,1) both; }
.sheet .wl-seal svg{ width:33px; height:33px; color:var(--wl-beak); }
@keyframes wlPop{ from{ transform:rotate(-8deg) scale(0); opacity:0 } to{ transform:rotate(-8deg) scale(1); opacity:1 } }
.sheet .wl-done-h{ font-family:var(--wl-gab); font-weight:800; font-size:26px; letter-spacing:-.5px; color:var(--wl-ink); }
.sheet .wl-done-p{ font-size:14px; color:var(--wl-ink-2); line-height:1.55; margin-top:9px; max-width:31ch; margin-inline:auto; }

@media (max-width:540px){
  .sheet{ align-items:flex-end; padding:0; }
  .sheet-bg{ transition:opacity .28s ease; }
  /* true bottom sheet: slide in from below the edge and back out, no fade */
  .sheet-card{ max-width:100%; border-radius:28px 28px 0 0; max-height:92dvh; padding:12px 22px 20px; opacity:1; transform:translateY(100%); transition:transform .26s cubic-bezier(.55,.06,.68,.19); }
  .sheet[data-open="true"] .sheet-card{ transform:none; transition:transform .45s cubic-bezier(.16,1,.3,1); }
  .sheet .wl-grab{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .sheet{ transition-delay:0s !important; }
  .sheet-bg, .sheet-card, .sheet .wl-rev, .sheet .wl-city span, .sheet .wl-chip span, .sheet .wl-choice .c{ transition-duration:.01s !important; }
  .sheet .wl-step.on, .sheet .wl-step.on .wl-seal{ animation-duration:.01s !important; }
}