/* ============================================================================
   Festably — standalone design system (no framework). Mobile-first.
   Palette "confetti on paper": warm paper ground, warm ink, coral brand accent.
   Each event page overrides --event / --accent with its own theme color.
   ========================================================================== */

:root{
  --ink:#23212c; --ink-soft:#4a4654; --paper:#f6f4ef; --card:#fffdfa;
  --muted:#847f8d; --line:#e7e2d8; --line-soft:#efeae0;
  --brand:#ff5a5f; --brand-ink:#c32f43;
  --good:#2f9e6b; --good-bg:#e7f5ee; --bad:#e5484d; --bad-bg:#fcebe9; --warn:#c98a00;
  /* event accent — overridden inline per-event; defaults to brand coral for chrome */
  --accent:var(--brand); --event:var(--brand); --on-accent:#fff;
  --r:16px; --r-sm:10px; --r-lg:24px;
  --shadow:0 1px 2px rgba(35,33,44,.06), 0 8px 24px -12px rgba(35,33,44,.18);
  --shadow-lg:0 2px 4px rgba(35,33,44,.06), 0 24px 48px -20px rgba(35,33,44,.28);
  --display: ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Phone is the primary target: never let the page scroll sideways. Wide
   content (poll options, grids, tables) scrolls inside its own container. */
html,body{max-width:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}

h1,h2,h3,h4{font-family:var(--display);font-weight:700;text-wrap:balance;letter-spacing:-.01em;margin:0 0 .4em}
h2{font-size:21px}h3{font-size:16px;margin:1.1em 0 .5em}
p{margin:0 0 .75em}
a{color:var(--brand-ink);text-underline-offset:2px}
small{font-size:13px;color:var(--muted)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  background:var(--line-soft);padding:.08em .4em;border-radius:6px}
hr{border:none;border-top:1px solid var(--line-soft);margin:1.1em 0}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- layout shell ---------- */
.container{max-width:760px;margin:0 auto;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right))}
.festably-footer{text-align:center;color:var(--muted);padding:34px 20px 48px}
.festably-footer a{color:var(--muted)}

/* ---------- forms ---------- */
input[type=text],input[type=password],input[type=number],input[type=date],
input[type=datetime-local],input[type=email],select,textarea{
  font-family:var(--body);font-size:16px;/* ≥16px: stops iOS zoom-on-focus */
  color:var(--ink);background:#fff;min-height:44px;/* comfortable touch target */
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.62em .8em;width:100%;
  transition:border-color .12s, box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);outline:none}
input::placeholder,textarea::placeholder{color:#b4afba}
input[type=color]{padding:.2em;height:2.7em;cursor:pointer}
textarea{resize:vertical}
label{display:block;font-weight:600;font-size:14.5px;margin:0 0 .9em}
label input,label select,label textarea{font-weight:400;margin-top:.3em}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);padding:.9em 1em;margin:0 0 1em}
legend{font-weight:650;font-size:14px;padding:0 .4em}
fieldset label{margin:.35em 0;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;align-items:end}
[role=group]{display:flex;gap:8px}
[role=group] > input,[role=group] > select{flex:1}

/* ---------- buttons ---------- */
button,.btn,[role=button]{font-family:var(--body);cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;gap:.5em;border:none;border-radius:999px;
  min-height:44px;padding:.62em 1.2em;font-weight:650;font-size:15px;text-decoration:none;line-height:1.1;
  background:var(--accent);color:var(--on-accent,#fff);
  box-shadow:0 6px 16px -7px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s}
button:hover,.btn:hover,[role=button]:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
button.secondary{background:var(--ink);color:#fff;box-shadow:none}
button.outline,button.secondary.outline{background:transparent;color:var(--ink);
  border:1.5px solid var(--line);box-shadow:none}
button.outline:hover{border-color:var(--ink-soft)}
button.contrast{background:var(--bad);color:#fff;box-shadow:none}
button.contrast.outline{background:transparent;color:var(--bad);border:1.5px solid color-mix(in srgb,var(--bad) 40%,var(--line))}
.btn-sm,button.btn-sm{padding:.42em .85em;font-size:13.5px}

/* ---------- tables / article / details ---------- */
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:.5em .6em;border-bottom:1px solid var(--line-soft)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
article{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:18px 20px;margin:0 0 20px}
details{margin:.5em 0}
summary{cursor:pointer;font-weight:600}
summary:focus-visible{outline:2.5px solid var(--accent)}

/* ============================================================  LANDING */
.festably-landing{min-height:72vh;display:flex;flex-direction:column;align-items:center;
  background:radial-gradient(130% 70% at 50% -8%, color-mix(in srgb,var(--brand) 9%, var(--paper)) 0%, var(--paper) 58%)}
.festably-garland{display:block;width:100%;max-width:600px;margin:0 auto}
.festably-garland .flag{transform-origin:top center;animation:fest-sway 4.5s ease-in-out infinite}
.festably-garland .flag:nth-child(2n){animation-delay:-1.2s}
.festably-garland .flag:nth-child(3n){animation-delay:-2.4s}
.festably-garland .flag:nth-child(4n){animation-delay:-.6s}
@keyframes fest-sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
.festably-hero{width:100%;max-width:440px;padding:6px 22px 44px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.festably-wordmark{font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:1;
  font-size:clamp(46px,13vw,66px);margin-top:16px}
.festably-wordmark .dot{color:var(--brand)}
.festably-tagline{color:var(--ink-soft);font-size:clamp(16px,4.2vw,19px);max-width:26ch;margin:12px auto 0}
.festably-enter{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:22px;margin-top:30px;width:100%;text-align:left}
.festably-enter .eyebrow{display:block;margin-bottom:10px}
.festably-enter form{display:flex;gap:10px}
.festably-enter input{flex:1;min-width:0}
.festably-enter button{flex:0 0 auto;padding-left:1.15em;padding-right:1.15em}
.festably-does{width:100%;margin-top:34px}
.festably-does .does-h{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:12px}
.festably-feats{display:grid;gap:10px}
.festably-feat{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 15px;text-align:left;box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease}
.festably-feat:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.festably-feat .ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:22px}
.festably-feat:nth-child(1) .ic{background:color-mix(in srgb,#5d9cec 16%,#fff);border:1px solid color-mix(in srgb,#5d9cec 28%,#fff)}
.festably-feat:nth-child(2) .ic{background:color-mix(in srgb,#ff5a5f 15%,#fff);border:1px solid color-mix(in srgb,#ff5a5f 26%,#fff)}
.festably-feat:nth-child(3) .ic{background:color-mix(in srgb,#48cfad 18%,#fff);border:1px solid color-mix(in srgb,#48cfad 30%,#fff)}
.festably-feat b{font-weight:650;font-size:15.5px}
.festably-feat small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.festably-feat .chev{margin-left:auto;color:#cdc7be;font-size:18px}
.festably-combo{margin-top:16px;color:var(--muted);font-size:13.5px;line-height:1.5}
.festably-combo b{color:var(--ink-soft);font-weight:650}
.festably-owner{margin-top:26px;color:var(--muted);font-size:13.5px}
.festably-owner a{color:var(--muted);text-decoration:underline}
@media (prefers-reduced-motion: reduce){.festably-garland .flag{animation:none}}

/* ============================================================  EVENT HERO */
.festably-hero{position:relative;color:var(--on-accent,#fff);text-align:center;
  padding:50px max(20px,env(safe-area-inset-left)) 60px max(20px,env(safe-area-inset-right));overflow:hidden;
  background:radial-gradient(120% 120% at 50% -10%,
    color-mix(in srgb,var(--event) 72%,#fff) 0%, var(--event) 55%,
    color-mix(in srgb,var(--event) 80%,#000) 100%)}
.festably-hero h1{color:var(--on-accent,#fff);font-size:clamp(28px,6vw,44px);margin:.2em 0 0}
.festably-hero .festably-emoji{font-size:60px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.festably-hero .sub{color:color-mix(in srgb,var(--on-accent,#fff) 85%,transparent);margin-top:6px}
.festably-chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.festably-chip{display:inline-flex;align-items:center;gap:.45em;
  background:color-mix(in srgb,var(--on-accent,#fff) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--on-accent,#fff) 28%,transparent);
  color:var(--on-accent,#fff);border-radius:999px;padding:.38em .8em;font-size:13px;font-weight:600}
.festably-chip code{background:transparent;color:inherit;font-family:var(--body);font-weight:700;letter-spacing:.05em;padding:0}
.festably-wave{position:absolute;left:0;right:0;bottom:-1px;height:28px;background:var(--paper);
  -webkit-mask:radial-gradient(14px 20px at 14px 0,transparent 98%,#000) repeat-x;
  mask:radial-gradient(14px 20px at 14px 0,transparent 98%,#000) repeat-x;
  -webkit-mask-size:28px 28px;mask-size:28px 28px}

/* event body stack pulled up over the wave */
.festably-stack{display:flex;flex-direction:column;gap:20px;margin:-26px auto 48px;position:relative;z-index:2}

/* who-am-i bar */
.festably-identity{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:15px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}
.festably-identity .me{display:inline-flex;align-items:center;gap:.5em;font-weight:650}
.festably-avatar{width:30px;height:30px;border-radius:50%;background:var(--event);color:var(--on-accent,#fff);
  display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}
.festably-identity form{display:flex;gap:8px;margin:0;flex:1;min-width:210px;justify-content:flex-end;flex-wrap:wrap}
.festably-identity select{max-width:170px}
.festably-identity input{max-width:150px}

/* module card */
.festably-module{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;margin:0;padding:0}
.festably-mh{margin:0;padding:17px 20px 0;font-size:20px;
  border-top:3px solid color-mix(in srgb,var(--event) 55%,var(--line))}
.festably-mbody{padding:12px 20px 20px}

/* ============================================================  DATE POLL */
.festably-poll-opts{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px}
.festably-opt{flex:0 0 auto;min-width:116px;border:1.5px solid var(--line);border-radius:14px;
  padding:12px;text-align:center;position:relative;background:#fff}
.festably-opt.best{border-color:var(--event);box-shadow:0 0 0 3px color-mix(in srgb,var(--event) 16%,transparent)}
.festably-opt .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--event);
  color:var(--on-accent,#fff);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;white-space:nowrap}
.festably-opt .lbl{font-weight:650;font-size:14px;line-height:1.2}
.festably-opt .score{margin-top:8px;font-weight:700;font-size:15px}
.festably-opt .score small{color:var(--muted);font-weight:500}
.festably-counts{display:flex;gap:5px;justify-content:center;margin-top:7px;font-size:12px}
.festably-counts span{display:inline-flex;align-items:center;gap:2px;font-weight:700}
.festably-counts .c-y{color:var(--good)}.festably-counts .c-m{color:var(--warn)}.festably-counts .c-n{color:#b1aaa2}

/* your-availability rows + segmented control (festably-cell / festably-av from _cell.html) */
.festably-myvote{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0}
.festably-myvote + .festably-myvote{border-top:1px solid var(--line-soft)}
.festably-cell{display:inline-flex;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:3px;gap:0}
.festably-av{border:none;background:transparent;border-radius:999px;padding:.34em .72em;font-weight:700;
  font-size:14px;color:var(--ink-soft);box-shadow:none;min-width:48px;min-height:44px}
.festably-av:hover{transform:none;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.festably-av.is-active{color:#fff}
.festably-av-yes.is-active{background:var(--good)}
.festably-av-maybe.is-active{background:var(--warn)}
.festably-av-no.is-active{background:#b9b2a9}

/* everyone grid (compact, scrollable) */
.festably-gridwrap{overflow-x:auto;margin-top:6px}
.festably-grid{font-size:13px;min-width:min-content}
.festably-grid th.festably-best,.festably-grid td.festably-best{background:color-mix(in srgb,var(--event) 10%,#fff)}
.festably-av-cell{text-align:center;font-weight:700}
.festably-av-cell.festably-av-yes{color:var(--good)}
.festably-av-cell.festably-av-maybe{color:var(--warn)}
.festably-av-cell.festably-av-no{color:#c9c2b9}
.festably-av-cell.festably-av-none{color:#d8d2c9}
.festably-scorerow td{border-top:2px solid var(--line);font-weight:700}
.festably-besthint,.festably-finalhint{margin-top:10px;font-weight:600}
.festably-finalhint{color:var(--good)}
.festably-badge{display:inline-block;background:color-mix(in srgb,var(--event) 14%,#fff);
  color:var(--brand-ink);font-size:11px;font-weight:700;padding:.15em .55em;border-radius:999px;
  vertical-align:middle;margin-left:.3em}
.festably-final{background:color-mix(in srgb,var(--event) 8%,#fff)}

/* ============================================================  SECRET SANTA */
.festably-countdown{display:flex;gap:10px;justify-content:center;margin:8px 0}
.festably-countdown .u{background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:10px 4px;min-width:64px;text-align:center}
.festably-countdown .n{font-family:var(--display);font-weight:700;font-size:28px;line-height:1;font-variant-numeric:tabular-nums}
.festably-countdown .l{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.festably-giftbox{background:linear-gradient(135deg,color-mix(in srgb,var(--event) 8%,#fff),#fff);
  border:1.5px dashed color-mix(in srgb,var(--event) 45%,var(--line));border-radius:14px;padding:16px;text-align:center}
.festably-giftbox [role=group]{max-width:320px;margin:10px auto 0}
.festably-giftbox input{text-align:center;letter-spacing:.25em;font-weight:700;text-transform:uppercase}
.festably-reveal{margin-top:10px}
.festably-reveal-card{background:linear-gradient(135deg,color-mix(in srgb,var(--event) 10%,#fff),#fff);
  border:1px solid color-mix(in srgb,var(--event) 25%,var(--line));border-radius:14px;padding:16px;text-align:center;margin:0}
.festably-wishlist{margin-top:10px}
.festably-spoiler summary{color:var(--muted)}

/* ============================================================  TRICOUNT */
.festably-expense-form{margin:0 0 4px}
.festably-splitmode{display:flex;gap:16px;border:none;padding:0;margin:.5em 0}
.festably-splitmode label{margin:0;font-weight:500}
.festably-benef{display:flex;flex-direction:column;gap:2px}
.festably-benef-row{display:flex;align-items:center;gap:10px;margin:0;font-weight:500}
.festably-benef-row span{flex:1}
.festably-benef-row input[type=checkbox]{width:auto;margin:0}
.festably-exact-input{max-width:110px;display:none}
.is-exact .festably-exact-input{display:block}
.festably-exact-hint{display:none}
.is-exact .festably-exact-hint{display:block}

.festably-exp{display:flex;align-items:center;gap:12px;padding:11px 0;margin:0}
.festably-exp + .festably-exp{border-top:1px solid var(--line-soft)}
.festably-exp .ava{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-weight:700;font-size:13px;flex:0 0 auto;
  background:color-mix(in srgb,var(--event) 12%,#fff);color:var(--brand-ink)}
.festably-exp.pay .ava{background:var(--good-bg);color:var(--good)}
.festably-exp .meta{flex:1;min-width:0}
.festably-exp .meta b{font-weight:650}
.festably-exp .meta small{display:block;color:var(--muted);font-size:12.5px}
.festably-exp .amt{font-weight:700;font-variant-numeric:tabular-nums}
.festably-exp form{margin:0}
.festably-del{background:transparent;color:var(--muted);box-shadow:none;padding:.3em .55em;font-size:15px}
.festably-del:hover{background:var(--bad-bg);color:var(--bad);transform:none}
.festably-balances{display:flex;gap:8px;flex-wrap:wrap;list-style:none;padding:0;margin:.3em 0 0}
.festably-balances li{display:inline-flex;align-items:center;gap:.4em;border-radius:999px;
  padding:.38em .8em;font-weight:650;font-size:14px;font-variant-numeric:tabular-nums;background:var(--paper);color:var(--muted)}
.festably-balances li:has(.festably-pos){background:var(--good-bg);color:var(--good)}
.festably-balances li:has(.festably-neg){background:var(--bad-bg);color:var(--bad)}
.festably-settlement{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:.3em 0 0}
.festably-settlement li{display:flex;align-items:center;gap:8px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.festably-settlement .festably-amount{margin-left:auto}
.festably-amount{font-weight:700;font-variant-numeric:tabular-nums}
.festably-payment{margin-top:12px}
.festably-danger summary{color:var(--bad)}

/* ============================================================  MISC */
.festably-error{background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 30%,var(--line));
  color:#a3282c;border-radius:var(--r-sm);padding:.7em 1em;margin:0 0 14px;font-weight:500}
.festably-code-box{text-align:center}
.festably-code{font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:.14em;
  color:var(--event);background:color-mix(in srgb,var(--event) 8%,#fff);
  border:1.5px dashed color-mix(in srgb,var(--event) 40%,var(--line));border-radius:14px;
  padding:.3em .2em;margin:.3em 0}

/* horizontal-scroll wrapper for any wide table (admin rosters, history…) */
.festably-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- phone-first responsive (≤560px) ---------- */
@media (max-width:560px){
  /* never cram inputs side-by-side on a phone */
  .grid{grid-template-columns:1fr}
  /* who-am-i: stack the pick + add forms full width */
  .festably-identity{flex-direction:column;align-items:stretch}
  .festably-identity form{justify-content:stretch;min-width:0;flex-wrap:nowrap}
  .festably-identity select,.festably-identity input{max-width:none;flex:1}
  .festably-splitmode{flex-direction:column;gap:6px}
  .festably-hero{padding:44px 18px 56px}
  .festably-hero .festably-emoji{font-size:50px}
  .festably-stack{gap:16px}
  .festably-mbody{padding:12px 16px 18px}
  .festably-module > h2{padding:16px 16px 0}
  /* settlement + expense rows already wrap/stack; keep amounts aligned */
  .festably-exp{flex-wrap:wrap}
  .festably-exp .amt{margin-left:auto}
}

/* === Secret Santa admin: pool checklist · relay · add-person =============== */
.festably-muted{color:var(--muted)}
.festably-addperson{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.festably-addperson input{flex:1;min-width:180px}
.festably-ss-pool > label{display:block;margin:.35em 0}
.festably-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:6px 14px;margin:10px 0;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);max-height:240px;overflow-y:auto}
.festably-checklist label{display:flex;align-items:center;gap:.5em;margin:0;font-weight:500}
.festably-ss-relay{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:8px}
.festably-ss-relay li{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card)}
.festably-ss-relay-name{font-weight:650;min-width:80px}
.festably-ss-relay-out{flex:1 1 140px;min-width:140px}