:root{
  color-scheme: dark;
  --sky-top:#17122f; --sky-mid:#2c2160; --sky-low:#4a3685;
  --ink:#fff6fb; --muted:#cbc1ec; --faint:#9a8fc4;
  --pink:#ffaecf; --lav:#c8b4ff; --mint:#9ff0d0; --butter:#ffe394; --peach:#ffc2a3; --sky:#a9d8ff;
  --pillow:#ffffff14; --pillow-edge:#ffffff26; --pillow-hi:#ffffff33;
  --field:#130f2a; --field-edge:#5d4d9c;
  --good:#9ff0d0; --warn:#ffe394; --bad:#ff9bb0;
  --display:"Fredoka","Baloo 2","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
/* Classes below set display:grid/flex, which would otherwise beat the hidden attribute. */
[hidden]{display:none!important}
html{background:var(--sky-top);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* iOS Safari ignores background-attachment:fixed, which stretched the sky gradient over the whole
   long page. A fixed layer behind everything keeps the same sky on every screen. */
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;min-height:100%;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0;height:100lvh;z-index:-1;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 45%,var(--sky-low) 100%);pointer-events:none}
#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:max(20px,env(safe-area-inset-top,0px)) calc(80px + env(safe-area-inset-bottom,0px))}
button,a.btn,.choice,.chk,.tog{touch-action:manipulation}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0}
h2{font-size:clamp(26px,6vw,34px)}
h3{font-size:21px}
p{margin:0}
a{color:var(--sky)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--butter);outline-offset:3px;border-radius:12px}

/* mode switch */
.modebar{display:flex;justify-content:center;margin-bottom:8px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20}
.seg{display:inline-flex;background:#1d1640ee;border:1px solid var(--pillow-edge);border-radius:999px;padding:4px;gap:4px;box-shadow:0 8px 20px #0007}
.seg button{border:0;background:transparent;padding:8px 18px;border-radius:999px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--lav);color:#241a4d}

/* hero */
.hero{position:relative;text-align:center}
.lights{position:relative;height:46px;margin:-8px -16px 0;display:flex;justify-content:space-between;padding-inline:8px}
.lights::before{content:"";position:absolute;left:0;right:0;top:-30px;height:52px;border-bottom:2px solid #6c5aa8;border-radius:0 0 50% 50%}
.bulb{position:relative;width:10px;height:15px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%;background:var(--b);top:calc(var(--y)*1px);box-shadow:0 0 12px 3px var(--b);animation:twinkle 2.4s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes twinkle{50%{opacity:.35;box-shadow:0 0 4px 1px var(--b)}}
.moon{position:absolute;right:4%;top:50px;width:60px;height:60px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#ffe394 60%,#f5c86a);box-shadow:0 0 40px 10px #ffe39455;animation:glow 5s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 60px 18px #ffe39466}}
.eyebrow{position:relative;font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--butter);margin-top:10px}
/* Phones: keep the moon from sitting on top of the "You're invited" line. */
@media (max-width:520px){.moon{width:46px;height:46px;top:44px;right:2%}.eyebrow{padding-inline:50px}}
.title{font-size:clamp(40px,11vw,76px);margin-top:10px}
.title .w{display:inline-block;white-space:nowrap}
.title .ch{display:inline-block;animation:drop .9s cubic-bezier(.3,1.6,.5,1) both}
.title .l1{color:var(--pink)} .title .l2{color:var(--mint)} .title .l3{color:var(--lav)}
@keyframes drop{0%{transform:translateY(-60px) scale(.6,1.3);opacity:0}60%{transform:translateY(6px) scale(1.15,.8);opacity:1}100%{transform:none}}
.ten{position:relative;display:inline-flex;align-items:center;justify-content:center;margin:18px auto 4px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff 0 6%,transparent 7%),radial-gradient(circle at 40% 35%,#ffd0e3,#ff9cc6 70%);
  box-shadow:inset -10px -14px 0 #f57fb1,0 18px 40px #ff9cc644;animation:bounce 2.6s ease-in-out infinite .9s;cursor:pointer;border:0}
.ten span{font-family:var(--display);font-weight:700;font-size:78px;color:#fff;text-shadow:0 4px 0 #e5609b}
.ten small{position:absolute;bottom:-14px;background:var(--butter);color:#4b2f00;font-family:var(--display);font-weight:600;font-size:13px;padding:4px 12px;border-radius:999px;letter-spacing:.06em;white-space:nowrap}
@keyframes bounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-12px) scale(.97,1.04)}55%{transform:translateY(0) scale(1.08,.92)}70%{transform:translateY(-3px) scale(.98,1.02)}}
.lede{max-width:36ch;margin:22px auto 0;color:var(--muted);font-size:18px}
.lede b{color:var(--ink)}
.herocta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* squish characters */
.squad{display:flex;justify-content:center;align-items:flex-end;gap:clamp(6px,3vw,22px);margin-top:30px;flex-wrap:wrap}
.sq{--c:#ffaecf;--d:#f58bb8;--s:84px;position:relative;display:inline-block;flex:none;width:var(--s);height:calc(var(--s)*.9);border:0;padding:0;background:none;cursor:pointer;animation:float 3.4s ease-in-out infinite;animation-delay:var(--delay,0s)}
.sq.still{animation:none;cursor:inherit}
.sq .body{position:absolute;inset:0;border-radius:50% 50% 46% 46%/56% 56% 44% 44%;background:radial-gradient(circle at 32% 28%,#ffffffaa 0 8%,transparent 9%),var(--c);box-shadow:inset calc(var(--s)*-.09) calc(var(--s)*-.11) 0 var(--d);transform-origin:50% 100%}
.sq .belly{position:absolute;left:28%;right:28%;bottom:10%;height:34%;border-radius:50%;background:#ffffff55}
.sq .eye{position:absolute;top:40%;width:9%;height:11%;border-radius:50%;background:#2a1d3a}
.sq .eye.l{left:31%} .sq .eye.r{right:31%}
.sq .eye::after{content:"";position:absolute;width:40%;height:40%;left:20%;top:15%;border-radius:50%;background:#fff}
.sq .blush{position:absolute;top:52%;width:15%;height:8%;border-radius:50%;background:#ff6f9f88}
.sq .blush.l{left:17%} .sq .blush.r{right:17%}
.sq .mouth{position:absolute;top:52%;left:45%;width:10%;height:6%;border:max(2px,calc(var(--s)*.035)) solid #2a1d3a;border-top:0;border-radius:0 0 999px 999px}
.sq .ear{position:absolute;background:var(--c)}
.sq.cat .ear{top:-10%;width:26%;height:30%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.sq.cat .ear.l{left:10%;transform:rotate(-14deg)} .sq.cat .ear.r{right:10%;transform:rotate(14deg)}
.sq.bunny .ear{top:-46%;width:18%;height:58%;border-radius:999px;box-shadow:inset -3px -3px 0 var(--d)}
.sq.bunny .ear.l{left:22%;transform:rotate(-10deg)} .sq.bunny .ear.r{right:22%;transform:rotate(12deg)}
.sq.bear .ear{top:-6%;width:24%;height:26%;border-radius:50%;box-shadow:inset -3px -3px 0 var(--d)}
.sq.bear .ear.l{left:8%} .sq.bear .ear.r{right:8%}
.sq.frog .ear{top:-12%;width:28%;height:30%;border-radius:50%}
.sq.frog .ear.l{left:14%} .sq.frog .ear.r{right:14%}
.sq.frog .eye{top:-4%;width:11%;height:13%} .sq.frog .eye.l{left:23%} .sq.frog .eye.r{right:23%}
.sq.uni .horn{position:absolute;top:-28%;left:42%;width:16%;height:36%;background:linear-gradient(#fff4b0,#ffd36b);clip-path:polygon(50% 0,100% 100%,0 100%)}
.sq .zz{position:absolute;right:-8px;top:-18px;font-family:var(--display);font-weight:700;color:var(--sky);font-size:16px;opacity:0;animation:zz 4s ease-in-out infinite;animation-delay:var(--delay,0s)}
.sq.still .zz{display:none}
@keyframes zz{0%,60%{opacity:0;transform:translate(0,0)}75%{opacity:1}100%{opacity:0;transform:translate(10px,-18px)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.sq.boop .body{animation:squish .55s cubic-bezier(.3,1.7,.5,1)}
@keyframes squish{0%{transform:scale(1)}25%{transform:scale(1.25,.7)}55%{transform:scale(.9,1.12)}80%{transform:scale(1.04,.96)}100%{transform:scale(1)}}
.squad .sq{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sq-hint{font-size:13px;color:var(--faint);margin-top:8px}

/* RSVP mascot: peeks over the top edge of the RSVP card and reacts to the answers. */
#rsvp > .mascot{position:absolute;right:22px;top:-40px;height:60px;display:flex;align-items:flex-end;pointer-events:none}
.mascot .sq{transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.mascot .sq .mouth,.mascot .sq .eye{transition:all .3s}
.mascot[data-mood=yay] .sq{transform:translateY(-6px) rotate(-5deg)}
.mascot[data-mood=sad] .sq{transform:translateY(6px) scale(1.05,.92)}
.mascot[data-mood=sad] .sq .mouth{top:58%;border-top:max(2px,calc(var(--s)*.035)) solid #2a1d3a;border-bottom:0;border-radius:999px 999px 0 0}
.mascot[data-mood=sad] .sq .eye{top:44%}
.mascot[data-mood=sleepy] .sq .eye{height:3%;top:45%;border-radius:2px}
.mascot[data-mood=sleepy] .sq .eye::after{display:none}
.mascot[data-mood=sleepy] .sq .zz{display:block}
.heart{position:fixed;pointer-events:none;z-index:60;font-family:var(--display);font-weight:700;animation:rise 1.1s ease-out forwards}
@keyframes rise{to{transform:translate(var(--dx),-90px) scale(1.3);opacity:0}}

/* pillow panels */
section{margin-top:40px}
.pillow{position:relative;background:var(--pillow);border:1px solid var(--pillow-edge);border-radius:30px;padding:22px;box-shadow:inset 0 2px 0 var(--pillow-hi),inset 0 -10px 24px #0000002a,0 14px 30px #0b081c55}
.pillow::before{content:"";position:absolute;inset:10px;border:2px dashed #ffffff1c;border-radius:22px;pointer-events:none}
.pillow > *{position:relative}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;margin-bottom:14px}
.sec-head p{color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fact{display:grid;gap:2px;align-content:start}
.fact .k{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--butter)}
.fact .v{font-size:18px;font-weight:800}
.fact .v small{display:block;font-weight:600;font-size:14px;color:var(--muted)}
.fact .links{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cbox{text-align:center;background:#00000026;border-radius:22px;padding:14px 4px;box-shadow:inset 0 -6px 0 #00000022}
.cbox b{display:block;font-family:var(--display);font-size:clamp(30px,8vw,46px);line-height:1;font-variant-numeric:tabular-nums}
.cbox span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cbox:nth-child(1) b{color:var(--pink)} .cbox:nth-child(2) b{color:var(--butter)} .cbox:nth-child(3) b{color:var(--mint)} .cbox:nth-child(4) b{color:var(--lav)}
.plan{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plan li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.plan .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;color:#241a4d}
.plan li:nth-child(6n+1) .dot{background:var(--pink)} .plan li:nth-child(6n+2) .dot{background:var(--butter)} .plan li:nth-child(6n+3) .dot{background:var(--mint)}
.plan li:nth-child(6n+4) .dot{background:var(--lav)} .plan li:nth-child(6n+5) .dot{background:var(--sky)} .plan li:nth-child(6n+6) .dot{background:var(--peach)}
.plan b{font-family:var(--display);font-weight:600;font-size:18px;display:block}
.plan span{color:var(--muted);font-size:15px}
.pack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:520px){.pack{grid-template-columns:1fr}}
.chk{position:relative;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:#00000022;cursor:pointer;user-select:none}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{flex:none;width:26px;height:26px;border-radius:9px;border:2px solid var(--lav);display:grid;place-items:center;transition:all .25s cubic-bezier(.3,1.7,.5,1)}
.chk .box svg{width:16px;height:16px;opacity:0;transform:scale(.3);transition:all .25s cubic-bezier(.3,1.7,.5,1)}
.chk input:checked + .box{background:var(--mint);border-color:var(--mint)}
.chk input:checked + .box svg{opacity:1;transform:none}
.chk input:checked ~ .lbl{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--mint)}
.chk input:focus-visible + .box{outline:3px solid var(--butter);outline-offset:2px}
.chk.star{background:#ffaecf26;border:1px dashed var(--pink)}

/* forms */
form{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
label.f{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:baseline;font-weight:800;font-size:15px}
label.f > :is(input,textarea,select,.ferr){grid-column:1/-1}
.opt{font-weight:600;color:var(--faint);font-size:14px}
input[type=text],input[type=tel],textarea,select{width:100%;background:var(--field);border:2px solid var(--field-edge);border-radius:16px;padding:12px 14px;font-size:16px;color:var(--ink)}
textarea{min-height:84px;resize:vertical}
input::placeholder,textarea::placeholder{color:#8578b8}
input:focus,textarea:focus,select:focus{border-color:var(--lav)}
[aria-invalid="true"]{border-color:var(--bad)!important}
.ferr{color:var(--bad);font-weight:700;font-size:14px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
legend{font-weight:800;font-size:15px;margin-bottom:6px;padding:0}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0;z-index:1}
.choice > span{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;background:var(--field);border:2px solid var(--field-edge);font-weight:800;transition:all .2s cubic-bezier(.3,1.6,.5,1)}
.choice input:checked + span{background:var(--lav);border-color:var(--lav);color:#241a4d;transform:scale(1.04)}
.choice input:focus-visible + span{outline:3px solid var(--butter);outline-offset:2px}
.sw{width:16px;height:16px;border-radius:50%;background:var(--sw);box-shadow:0 0 10px 2px var(--sw)}
.sw.rainbow{background:conic-gradient(#ffaecf,#ffe394,#9ff0d0,#a9d8ff,#c8b4ff,#ffaecf);--sw:#fff8}
.buddies .choice > span{flex-direction:column;border-radius:22px;padding:14px 10px 8px;gap:4px;font-size:13px;min-width:92px}
.buddies .sq{--s:50px}
/* Optional extras fold away so the RSVP stays one short screen. */
details.more{padding:4px 16px;border-radius:20px;background:#00000024}
details.more summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::after{content:"＋";margin-left:auto;color:var(--butter);font-size:18px}
details.more[open] summary::after{content:"－"}
details.more:not(.notebox) summary{color:var(--butter);font-family:var(--display);font-weight:600;font-size:18px}
.more-in{display:grid;gap:18px;padding:4px 0 16px}
/* The first, biggest question: can they come? */
.bigq legend{font-family:var(--display);font-weight:700;font-size:22px;margin-bottom:10px}
.choices.big{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices.big .choice > span{width:100%;height:100%;min-height:66px;justify-content:center;text-align:center;border-radius:22px;padding:14px 10px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2}
.choices.big .choice.yes input:checked + span{background:var(--mint);border-color:var(--mint);color:#0d3a2c}
.choices.big .choice.no input:checked + span{background:var(--pink);border-color:var(--pink);color:#3a1430}
.bigq.bad .choice > span{border-color:var(--bad)}
@media (max-width:340px){.choices.big{grid-template-columns:1fr}}
.who-line{font-size:17px;color:var(--muted)}
.who-line b{color:var(--ink);font-family:var(--display);font-size:20px}
.linkbtn{all:unset;cursor:pointer;color:var(--sky);font-weight:800;text-decoration:underline;text-underline-offset:3px;padding:8px 2px;margin:-8px 0}
.linkbtn:focus-visible{outline:3px solid var(--butter);border-radius:6px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font-family:var(--display);font-weight:600;font-size:17px;padding:13px 22px;border-radius:999px;background:var(--pink);color:#3a1430;box-shadow:inset 0 -5px 0 #00000026,0 8px 18px #ff9cc633;transition:transform .15s}
.btn:active{transform:scale(.95,.92)}
.btn.big{font-size:20px;padding:16px 28px;width:100%}
.btn.mint{background:var(--mint);color:#0d3a2c}
.btn.lav{background:var(--lav);color:#241a4d}
.btn.butter{background:var(--butter);color:#4b2f00}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--pillow-edge)}
.btn.sm{font-size:14px;padding:8px 14px;min-height:40px}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

.sent{display:grid;gap:14px;text-align:center;justify-items:center}
.msg{white-space:pre-wrap;text-align:left;background:var(--field);border:2px solid var(--field-edge);border-radius:18px;padding:14px;font-size:15px;width:100%}
.phone{font-family:var(--display);font-weight:700;font-size:24px;color:var(--butter);user-select:all}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.note{font-size:14px;color:var(--muted)}
.foot{text-align:center;color:var(--faint);font-size:14px;margin-top:48px}

/* tent pass */
.pass{position:relative;width:min(100%,360px);border-radius:28px;padding:20px;background:linear-gradient(160deg,#3a2c78,#21194a);border:2px dashed var(--butter);display:grid;gap:10px;justify-items:center;overflow:hidden;animation:pop .6s cubic-bezier(.3,1.7,.5,1) both}
.pass .k{font-family:var(--display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--butter)}
.pass .nm{font-family:var(--display);font-weight:700;font-size:28px}
.pass .meta{color:var(--muted);font-size:14px}
/* Tent pass reveal: card pops, the buddy hops into the tent, then the lights flicker on one by one. */
.pass .tentwrap{animation-delay:.15s}
.pass .tentwrap .sq{animation:hopin .6s cubic-bezier(.3,1.6,.5,1) .55s both}
.pass .tl{animation:lighton .9s ease-out both,twinkle 2s ease-in-out infinite;animation-delay:calc(.9s + var(--i,0)*.16s),calc(2.2s + var(--i,0)*.3s)}
.pass .tentglow{animation:glowon .8s ease-out 1.9s both,breathe 3s ease-in-out 2.7s infinite}
.pass .nm{animation:pop .5s cubic-bezier(.3,1.7,.5,1) .35s both}
.pass.miss .sq{margin-top:34px;animation:sway 3s ease-in-out infinite}
#rsvp{scroll-margin-top:56px}
@keyframes hopin{0%{transform:translateY(-46px) scale(.7);opacity:0}60%{transform:translateY(3px) scale(1.12,.88);opacity:1}100%{transform:none}}
@keyframes lighton{0%{opacity:0;box-shadow:none}25%{opacity:1}35%{opacity:.15}50%{opacity:1}60%{opacity:.4}100%{opacity:1}}
@keyframes glowon{from{opacity:0}}
@keyframes sway{50%{transform:rotate(-4deg) translateY(3px)}}

/* tents */
.tentwrap{position:relative;width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;animation:pop .5s cubic-bezier(.3,1.7,.5,1) both}
.tent{position:relative;width:96px;height:80px;background:linear-gradient(90deg,var(--t1) 0 50%,var(--t2) 50%);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 0 transparent)}
.tentglow{position:absolute;left:8px;right:8px;top:30px;height:56px;border-radius:50%;background:var(--glow);filter:blur(16px);opacity:.55;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.3}}
.tent .door{position:absolute;left:50%;bottom:0;width:34px;height:44px;transform:translateX(-50%);background:#17122f;clip-path:polygon(50% 0,100% 100%,0 100%)}
.tl{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lc);box-shadow:0 0 8px 2px var(--lc);animation:twinkle 2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.3s)}
.tentwrap .sq{position:absolute;top:50px;--s:30px}
.tentwrap em{font-style:normal;font-family:var(--display);font-weight:700;font-size:14px;color:#241a4d;background:#ffffffcc;border-radius:999px;padding:2px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.roster{display:flex;flex-wrap:wrap;gap:14px}
.empty{color:var(--muted);padding:8px 0}

/* HOST HQ */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
@media (max-width:600px){.stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat{border-radius:22px;padding:12px 8px;text-align:center;background:#00000026}
.stat b{display:block;font-family:var(--display);font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12px;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat.s1 b{color:var(--lav)} .stat.s2 b{color:var(--mint)} .stat.s3 b{color:var(--sky)} .stat.s4 b{color:var(--butter)} .stat.s5 b{color:var(--bad)}
.today{display:grid;gap:10px;margin-top:18px}
.todo-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:18px;background:#ffe39418;border:1px solid #ffe39444}
.todo-item .t{flex:1 1 200px;font-weight:800}
.todo-item .t small{display:block;font-weight:600;color:var(--muted)}
.todo-item.calm{background:#00000022;border-color:transparent}
/* Tabs stick to the top as one swipeable row, so switching never means scrolling back up. */
.tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:22px -16px 14px;padding:max(8px,env(safe-area-inset-top,0px)) 16px 10px;background:linear-gradient(180deg,#17122ff5 75%,#17122f00);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;position:relative;border:0;cursor:pointer;min-height:44px;padding:10px 16px;border-radius:999px;background:#2a2155;color:var(--muted);font-family:var(--display);font-weight:600;font-size:15px;white-space:nowrap;transition:background .2s,color .2s}
.tabs button[aria-selected="true"]{background:var(--butter);color:#4b2f00}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--pink);color:#3a1430;font-family:var(--body);font-weight:800;font-size:12px;line-height:1;vertical-align:1px}
[role="tabpanel"]:focus-visible{outline-offset:6px}
/* Add friends: contact import + check-before-adding list */
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.filebtn:focus-within{outline:3px solid var(--butter);outline-offset:3px}
#bulkCard.drop{box-shadow:0 0 0 3px var(--mint),inset 0 2px 0 var(--pillow-hi)}
#bulkMsg:empty{display:none}
#bulkMsg{margin-top:8px;font-weight:700;color:var(--mint)}
.tip{margin-top:10px;color:var(--faint)}
.review{display:grid;gap:10px;margin-top:16px;padding-top:16px;border-top:2px dashed #ffffff22}
.review h4{font-family:var(--display);font-size:19px;margin:0}
.rv-list{display:grid;gap:10px}
.rv-row{display:grid;grid-template-columns:44px 1fr 1fr;gap:6px 8px;align-items:center;padding:10px;border-radius:18px;background:#00000026;border:1px solid transparent}
.rv-row.warn{border-color:#ffe39466}
.rv-row.off{opacity:.55}
.rv-row .rv-on{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;cursor:pointer}
.rv-row .rv-on input{width:24px;height:24px;accent-color:var(--mint)}
.rv-row .rv-kid{grid-column:2/-1;font-weight:800}
.rv-row input[type=text],.rv-row input:not([type]),.rv-row input[type=tel]{width:100%;min-width:0;background:var(--field);border:2px solid var(--field-edge);border-radius:12px;padding:9px 10px;font-size:16px;color:var(--ink)}
.rv-msg{grid-column:2/-1;font-size:13.5px;font-weight:700;color:var(--muted)}
.rv-row.warn .rv-msg{color:var(--warn)}
.more-acts{display:contents}
/* Tap-to-fix fields on guest cards */
.qe{all:unset;cursor:pointer;border-radius:8px;padding:4px;margin:-4px;border-bottom:2px dotted #ffffff33;-webkit-tap-highlight-color:transparent}
.qe:hover{background:#ffffff14}
.qe:focus-visible{outline:3px solid var(--butter);outline-offset:1px}
.qe i{font-style:normal;color:var(--sky)}
.qe-in{font:inherit;color:var(--ink);background:var(--field);border:2px solid var(--lav);border-radius:10px;padding:4px 8px;min-width:0;width:min(100%,230px);font-size:16px}
.guest .nm .qe-in{font-size:18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.guest.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%,30%{box-shadow:0 0 0 3px var(--butter),0 0 24px #ffe39466}}
.glist{display:grid;gap:12px}
.guest{display:grid;gap:10px;padding:16px;border-radius:22px;background:#00000026;border:1px solid var(--pillow-edge)}
.guest .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.guest .nm{font-family:var(--display);font-weight:700;font-size:20px;flex:1 1 auto;display:flex;align-items:center;gap:10px}
.guest .nm .sq{--s:34px}
.guest .meta{color:var(--muted);font-size:14px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-weight:800;font-size:13px;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.p-yes{background:#9ff0d026;color:var(--good)} .p-no{background:#ff9bb026;color:var(--bad)}
.p-maybe,.p-waiting{background:#ffe39426;color:var(--warn)} .p-notsent{background:#ffffff14;color:var(--faint)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12.5px;font-weight:800;background:#ffffff14;color:var(--ink)}
.chip.al{background:#ffc2a333;color:var(--peach)} .chip.sl{background:#a9d8ff26;color:var(--sky)} .chip.ok{background:#9ff0d01f;color:var(--mint)}
.chip .sw{width:10px;height:10px}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline-confirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-weight:700;color:var(--bad)}
details.pillow summary{cursor:pointer;font-family:var(--display);font-weight:700;font-size:20px;list-style:none}
details.pillow summary::after{content:"＋";float:right;color:var(--butter)}
details.pillow[open] summary::after{content:"－"}
details.pillow[open] summary{margin-bottom:14px}
.tpl{display:grid;gap:12px}
.queue{display:grid;gap:10px;padding:14px;border-radius:20px;background:#9ff0d014;border:1px solid #9ff0d040}
.queue .who-next{font-weight:800}
.queue .who-next small{display:block;font-weight:600;color:var(--muted)}
.who{display:grid;gap:8px}
.whorow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:16px;background:#00000022}
.whorow .n{flex:1 1 150px;font-weight:800}
.whorow .n small{display:block;font-weight:600;color:var(--muted)}
.when-tag{font-size:13px;font-weight:800;color:var(--butter)}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:minmax(90px,140px) 1fr 28px;gap:10px;align-items:center;font-weight:700;font-size:14px}
.bar .track{height:14px;border-radius:999px;background:#00000033;overflow:hidden}
.bar .fill{display:block;min-width:0;height:100%;border-radius:999px;background:var(--bc,var(--lav));transition:width .6s cubic-bezier(.3,1.4,.5,1)}
.bar b{text-align:right;font-variant-numeric:tabular-nums}
.alert{padding:14px 16px;border-radius:18px;background:#ffc2a326;border:2px solid var(--peach);color:var(--ink)}
.alert b{color:var(--peach)}
.nightrow{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;padding:12px 14px;border-radius:18px;background:#00000026;transition:opacity .3s}
.nightrow .n{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;min-width:0}
.nightrow .n .sq{--s:30px;flex:none}
.nightrow .n small{display:block;font-weight:600;font-size:14px;color:var(--muted)}
@media (max-width:520px){
  .pillow{padding:18px 14px;border-radius:26px} .pillow::before{inset:6px;border-radius:20px}
  .nightrow{padding:12px 10px} .tog{padding-inline:8px;font-size:14.5px}
}
.nightrow .n .who{flex:1;min-width:0}
.nightrow .n .al{color:var(--peach)}
.nightrow .n .btn{flex:none;padding-inline:10px}
.nightrow .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nightrow.s1{background:#9ff0d012;box-shadow:inset 3px 0 0 var(--mint)}
.nightrow.s2{opacity:.6}
.tog{border:0;cursor:pointer;min-height:48px;padding:10px 12px;border-radius:16px;font-weight:800;font-size:15px;background:#ffffff14;color:var(--ink);box-shadow:inset 0 0 0 2px #ffffff22}
.tog[aria-pressed="true"]{background:var(--mint);color:#0d3a2c;box-shadow:none}
.tog.out[aria-pressed="true"]{background:var(--lav);color:#241a4d}
.tog:disabled{opacity:.35;cursor:default}
.todo{display:flex;align-items:center;gap:10px}
.todo .chk{flex:1}
.x{border:0;background:transparent;color:var(--faint);cursor:pointer;font-size:22px;min-width:44px;min-height:44px;border-radius:12px}
.x:hover{color:var(--bad)}
.addrow{display:flex;gap:8px;margin-top:12px}
.addrow input{flex:1;min-width:0}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,40px);opacity:0;z-index:70;background:var(--butter);color:#4b2f00;font-weight:800;padding:12px 20px;border-radius:999px;transition:all .35s cubic-bezier(.3,1.6,.5,1);max-width:calc(100% - 32px);text-align:center;display:flex;gap:12px;align-items:center;pointer-events:none}
.toast.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.toast button{border:0;background:#4b2f00;color:var(--butter);font-weight:800;border-radius:999px;padding:6px 14px;min-height:36px;cursor:pointer;flex:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- site additions ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:var(--bad);font-weight:800}
.yesonly{display:grid;gap:18px}
.coming{margin-top:14px;font-family:var(--display);font-weight:600;color:var(--mint);font-size:17px;animation:pop .6s cubic-bezier(.3,1.7,.5,1) both .8s}
.sel{user-select:all}
.login{max-width:420px;margin:60px auto 0;text-align:center;display:grid;gap:12px;justify-items:center}
.login form{width:100%;text-align:left}
.login input[type=password]{width:100%;background:var(--field);border:2px solid var(--field-edge);border-radius:16px;padding:12px 14px;font-size:16px;color:var(--ink)}
.login-sq{height:100px;display:flex;align-items:flex-end}
.hq-top{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sync{order:-1;margin-right:auto;font-size:13px;font-weight:800;color:var(--mint);display:inline-flex;align-items:center;gap:6px}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:twinkle 2s infinite}
.sync.off{color:var(--warn)}
.today-h{font-size:18px}
.tplwrap{display:grid;gap:22px;margin-top:22px}
.tplwrap details{margin:0}
.nightalerts{display:grid;gap:10px;margin-bottom:14px}
.alert.lav{border-color:var(--lav);background:#c8b4ff22}
.alert.lav b{color:var(--lav)}

[hidden]{display:none!important}

/* ---------- invite-only: locked until a personal link (or host) unlocks it ---------- */
body.locked #invite > *:not(.hero):not(#gate):not(.foot),
body.locked .herocta, body.locked #comingCount { display:none !important; }
.gate{text-align:center;display:grid;gap:12px;justify-items:center}
.gate p{max-width:34ch;color:var(--muted)}
.gate-sq{font-size:44px;animation:float 3.4s ease-in-out infinite}

.chk.remind{margin-top:4px;background:#9ff0d014}

.views{font-size:13.5px;color:var(--sky)}
.views summary{cursor:pointer;font-weight:800;list-style:none;padding:4px 0;min-height:32px;display:flex;align-items:center}
.views summary::-webkit-details-marker{display:none}
.views ol{margin:4px 0 0;padding-left:20px;color:var(--muted);display:grid;gap:2px;font-variant-numeric:tabular-nums}

.resend{width:100%;max-width:420px;text-align:left;gap:10px;margin-top:6px}
.resend .f{font-weight:700;color:var(--ink)}
.resend-row{display:flex;gap:8px;flex-wrap:wrap}
.resend-row input{flex:1 1 180px;min-width:0}
.resend-row .btn{flex:1 1 auto}

/* ---------- Party HQ as a phone app ---------- */
.a2hs{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 6px 6px 14px;border-radius:18px;background:#a9d8ff1f;border:1px solid #a9d8ff55;font-size:15px;line-height:1.4}
.a2hs span{flex:1;min-width:0}
.a2hs svg{width:18px;height:18px;vertical-align:-3px;color:var(--sky)}
.a2hs .x{flex:none}

/* Phones (and any touch screen): every tap target at least 44px, comfortable one-handed. */
@media (max-width:600px),(pointer:coarse){
  .btn.sm{min-height:44px;padding-inline:16px}
  details.pillow summary{display:flex;align-items:center;gap:8px;min-height:44px}
  details.pillow summary::after{float:none;margin-left:auto}
  details.pillow summary::-webkit-details-marker{display:none}
  .linkbtn{padding:12px 2px;margin:-12px 0}
  /* Tap-to-fix fields on guest cards: a taller hit area without moving the text. */
  .qe{padding:10px 4px;margin:-10px -4px}
  .guest .nm .qe{display:inline-block;min-width:44px}
  .toast button{min-height:44px;padding-inline:16px}
  .fun-switch{min-height:44px}
}
@media (max-width:520px){
  /* Top bar: Live on its own line, the three buttons share the next one evenly. */
  .hq-top .sync{flex-basis:100%}
  .hq-top .btn{flex:1 1 0;padding-inline:8px}
  .stat{padding:10px 4px}
  .stat b{font-size:30px}
  /* Guest cards: actions fill the row so they're easy to hit with a thumb. */
  .guest{padding:14px 12px}
  .guest .acts .btn{flex:1 1 auto}
  /* Party night: name + details get the full width; Call / Text sit on their own row below. */
  .nightrow .n{flex-wrap:wrap;align-items:flex-start}
  .nightrow .n .who{flex:1 1 calc(100% - 44px)}
  .nightrow .n .btn{flex:1 1 0}
  .more-acts{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
  /* Texts: the date sits on its own line above what's going out. */
  #auCard .au-when .d{flex-basis:100%;min-width:0}
  #auCard .au-link{padding:12px 4px;margin:-8px -4px}
  #auCard #auTest{flex-wrap:wrap}
  #auCard #auTest input{flex:1 1 100%}
  #auCard #auTest .btn{flex:1 1 100%}
  .bar{grid-template-columns:minmax(80px,38%) 1fr 24px;gap:8px}
  .addrow .btn{min-width:64px}
  .fun-hq-row > .btn,.fun-hq-row > .fun-switch{flex:1 1 100%;justify-content:center}
  .fun-wish-row .acts{display:flex;gap:8px;flex-wrap:wrap}
  .fun-wish-row .acts .btn{flex:1 1 auto}
}
/* Anything Party HQ scrolls to (a flashed guest card, an opened section) clears the sticky tab bar. */
#hq .guest,#hq details,#hq section,#hq [role="tabpanel"]{scroll-margin-top:calc(72px + env(safe-area-inset-top,0px))}
.lo-bottom input[type=range]{height:44px}

/* Select to delete */
.selbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:18px;background:#ff9bb01a;border:1px solid #ff9bb055;position:sticky;top:calc(64px + env(safe-area-inset-top,0px));z-index:5}
.selbar #selCount{flex:1 1 100%;font-weight:800}
.selbar #selDelete{background:var(--bad);color:#3a0d18}
#glist.selecting .guest{cursor:pointer;position:relative;padding-left:52px}
#glist.selecting .guest::before{content:"";position:absolute;left:16px;top:18px;width:24px;height:24px;border-radius:8px;border:2px solid var(--lav)}
#glist.selecting .guest.picked{border-color:var(--bad);background:#ff9bb01f}
#glist.selecting .guest.picked::before{background:var(--bad);border-color:var(--bad)}
#glist.selecting .guest .acts,#glist.selecting .guest .views{pointer-events:none;opacity:.5}

.preview-note{padding:12px 14px;border-radius:16px;background:#a9d8ff1f;border:1px dashed var(--sky);color:var(--ink);font-weight:700;font-size:14.5px}