/* Hope You Join Us — mobile-first styles */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Jost";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/jost-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pacifico-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Pinyon Script";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pinyon-script-latin-400-normal.woff2) format("woff2")}

:root{
  color-scheme:only light;
  --navy:#0A1F44; --navy-2:#173163; --navy-soft:#E8ECF4;
  --gold:#B8832A; --gold-ink:#86601A; --gold-soft:#F5EAD3; --gold-light:#E2BE7A;
  --cream:#FBF8F2; --paper:#FFFFFF; --ink:#1B2333; --muted:#5B6475; --line:#E7E1D4;
  --yes:#1F7A55; --yes-bg:#E3F3EB; --maybe:#9A5B00; --maybe-bg:#FCF0D9; --no:#A63A2B; --no-bg:#FBE6E2; --pending:#4B5563; --pending-bg:#EEF0F3;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(10,31,68,.06),0 6px 24px rgba(10,31,68,.06);
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{min-height:100vh;display:flex;flex-direction:column;margin:0;font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
body.signed-in{padding-bottom:calc(var(--tabbar-h) + var(--safe-b))}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--gold-ink)}
h1,h2,h3,.stat b,.how-num,.event-card-art span,.inv-date{font-variant-numeric:lining-nums}
h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.15;margin:0 0 .4em}
p{margin:0 0 .8em}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px;top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.tiny{font-size:.82rem}
.prewrap{white-space:pre-line}
:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px;border-radius:6px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy)}
.brand img{width:46px;height:auto}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-hope{font-family:var(--serif);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.95rem;color:var(--navy)}
.brand-join{font-family:var(--script);font-size:1.45rem;color:var(--navy);margin-top:-2px;margin-left:10px}
.topnav{display:flex;align-items:center;gap:6px}
.topnav a:not(.btn){display:none;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:500;color:var(--ink)}
.topnav a.active{background:var(--navy-soft);color:var(--navy)}
body:not(.signed-in) .topnav a:not(.btn){display:inline-flex}
body.signed-in .topnav .btn{display:none}
@media (min-width:760px){
  .topnav a:not(.btn){display:inline-flex}
  body.signed-in .topnav .btn{display:inline-flex}
}

/* ---------- bottom tab bar (mobile app feel) ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--line);padding-bottom:var(--safe-b);height:calc(var(--tabbar-h) + var(--safe-b))}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.74rem;font-weight:500;min-height:44px}
.tabbar svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar a.active{color:var(--navy)}
.tab-create .tab-plus{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--navy);margin-top:-18px;box-shadow:0 6px 16px rgba(10,31,68,.3)}
.tab-create .tab-plus svg{stroke:#fff;stroke-width:2.4}
.tab-create{color:var(--navy)!important}
@media (min-width:760px){.tabbar{display:none}body.signed-in{padding-bottom:0}}

/* ---------- layout ---------- */
.page{width:100%;max-width:1080px;margin:0 auto;padding:20px 16px 40px}
.page.narrow{max-width:520px}
.page.medium{max-width:720px}
.page.wide{max-width:1280px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.page-title{font-size:2rem}
.eyebrow{margin:0;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.back{display:inline-block;margin-bottom:8px;font-size:.9rem;text-decoration:none;color:inherit;opacity:.85}
.section-label{font-family:var(--sans);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:24px 0 10px}
.section-title{text-align:center;font-size:2rem}
.hide-mobile,.btn.hide-mobile{display:none}
@media (min-width:760px){.hide-mobile,.btn.hide-mobile{display:inline-flex}.page{padding:32px 24px 56px}.page-title{font-size:2.4rem}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow)}
.card-title{font-size:1.45rem;margin-bottom:12px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.link-sm{font-size:.88rem;background:none;border:0;padding:0;color:var(--navy);text-decoration:underline;cursor:pointer;font-family:inherit}
.link-sm.danger{color:var(--no)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid transparent;font:600 1rem/1.1 var(--sans);text-decoration:none;cursor:pointer;transition:transform .08s ease,background .15s ease,box-shadow .15s ease;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-sm{min-height:38px;padding:7px 14px;font-size:.9rem}
.btn-lg{min-height:52px;padding:14px 26px;font-size:1.06rem}
.btn-block{width:100%}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);color:#fff}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:#A57422;color:#fff}
.btn-ghost{background:#fff;color:var(--navy);border-color:#CBD2DF}
.btn-ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4)}
.btn-light:hover{background:rgba(255,255,255,.24);color:#fff}
.btn-text-danger{background:none;color:var(--no);border-color:#E9C4BD}
.btn[disabled],fieldset[disabled] .btn{opacity:.55;cursor:not-allowed}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.icon-btn:hover{background:var(--navy-soft);color:var(--navy)}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:6px;margin:0;border:0;padding:0;min-width:0}
.field>span,.field>legend{font-weight:500;font-size:.95rem;color:var(--ink);padding:0}
.field em{font-style:normal;color:var(--muted);font-weight:400}
.field small{color:var(--muted);font-size:.84rem}
.field .static{margin:0;padding:10px 0;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],input[type=number],input:not([type]),select,textarea{
  width:100%;min-height:48px;padding:11px 14px;border:1.5px solid #D5D9E2;border-radius:var(--radius-sm);background:#fff;font:400 16px/1.4 var(--sans);color:var(--ink);-webkit-appearance:none;appearance:none}
textarea{min-height:auto;resize:vertical}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6475' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(10,31,68,.12)}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;padding:6px 0}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--navy);flex:none}
.check small{color:var(--muted)}
.inline-form{flex-direction:row;align-items:flex-end;gap:10px}
.inline-form .grow{flex:1}
.form-actions{margin-top:4px}
.sticky-actions{position:sticky;bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px);z-index:5}
@media (min-width:760px){.sticky-actions{bottom:16px}}
.notify-box{padding:14px 18px}
.auth-card{margin-top:12px}
.auth-alt{text-align:center;margin:14px 0 0;font-size:.95rem}
.logout-form{margin-top:8px}

/* ---------- flashes ---------- */
.flashes{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.flash{padding:12px 16px;border-radius:12px;font-weight:500;border:1px solid transparent}
.flash-success{background:var(--yes-bg);color:#145238;border-color:#BFE3D0}
.flash-info{background:var(--navy-soft);color:var(--navy);border-color:#D2D9E7}
.flash-error{background:var(--no-bg);color:#7D2A1F;border-color:#F0C6BE}

/* ---------- pills & stats ---------- */
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:.8rem;font-weight:600;white-space:nowrap}
.pill-yes{background:var(--yes-bg);color:var(--yes)}
.pill-maybe{background:var(--maybe-bg);color:var(--maybe)}
.pill-no{background:var(--no-bg);color:var(--no)}
.pill-pending{background:var(--pending-bg);color:var(--pending)}
.pill-red{background:var(--no-bg);color:var(--no)}
.pill-host{background:var(--gold-soft);color:var(--gold-ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 6px;text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:2rem;line-height:1;color:var(--navy)}
.stat span{font-size:.78rem;color:var(--muted)}
.stat-yes b{color:var(--yes)}.stat-maybe b{color:var(--maybe)}.stat-no b{color:var(--no)}

/* ---------- landing ---------- */
.landing{padding:0}
.hero{background:radial-gradient(1200px 500px at 50% -10%,#fff 0%,var(--cream) 60%);padding:28px 16px 40px}
.hero-inner{max-width:1080px;margin:0 auto;display:grid;gap:12px;align-items:center}
.hero-logo{width:min(340px,82vw);margin:0 auto;display:block}
.hero-copy{text-align:center}
.hero-copy h1{font-size:2.5rem;margin-top:8px}
.lede{font-size:1.1rem;color:#3C4558;max-width:34em;margin:0 auto 20px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.fine{font-size:.88rem;color:var(--muted);margin-top:14px}
@media (min-width:900px){.hero{padding:56px 24px 72px}.hero-inner{grid-template-columns:1fr 1.1fr;gap:48px}.hero-logo{width:420px}.hero-copy{text-align:left}.hero-copy h1{font-size:3.4rem}.lede{margin-left:0}.hero-ctas{justify-content:flex-start}}
.band{padding:40px 16px;text-align:center}
.band-navy{background:var(--navy);color:#E9ECF3}
.band-navy h2{color:#fff;font-size:2rem}
.occasion-chips{list-style:none;padding:0;margin:0 auto;max-width:760px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.occasion-chips a,.chip{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;text-decoration:none;color:var(--navy);font-weight:500}
.occasion-chips a:hover,.chip:hover{border-color:var(--gold);color:var(--gold-ink)}
.how{max-width:1080px;margin:0 auto;padding:24px 16px 40px}
.how-steps{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.how-steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.how-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold-soft);color:var(--gold-ink);font-family:var(--serif);font-size:1.4rem;font-weight:600;margin-bottom:8px}
.how-steps h3{font-size:1.5rem}
@media (min-width:760px){.how-steps{grid-template-columns:repeat(3,1fr)}}
.features{max-width:1080px;margin:0 auto;padding:0 16px 48px;display:grid;gap:14px}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.feature h3{font-size:1.7rem}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--gold-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386601A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8'/%3E%3C/svg%3E") center/14px no-repeat}
@media (min-width:760px){.features{grid-template-columns:1fr 1fr}}

/* ---------- footer ---------- */
.footer{margin-top:auto;text-align:center;padding:28px 16px 36px;color:var(--muted);font-size:.88rem;border-top:1px solid var(--line);background:#fff}
.footer p{margin:4px 0}
.footer-links a{color:var(--muted)}

/* ---------- dashboard ---------- */
.event-list{display:grid;gap:12px}
@media (min-width:760px){.event-list{grid-template-columns:1fr 1fr}}
.event-card{display:flex;gap:14px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease}
.event-card:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(10,31,68,.1);color:inherit}
.event-card-art{flex:none;width:76px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--t-bg,var(--navy));color:var(--t-fg,#fff);text-align:center;padding:8px 4px}
.event-card-art span{font-family:var(--serif);font-size:1.3rem;font-weight:600;line-height:1.05}
.event-card-art small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.event-card-body{min-width:0;padding:2px 0}
.event-card-body h3{font-size:1.35rem;margin:0 0 2px;overflow-wrap:anywhere}
.event-card-body p{margin:0 0 8px;font-size:.92rem}
.event-card.is-past{opacity:.75}
.counts{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.88rem;color:var(--muted)}
.counts b{font-weight:600}
.count-yes b{color:var(--yes)}.count-maybe b{color:var(--maybe)}
.empty{text-align:center;padding:32px 20px}
.empty img{margin:0 auto 10px;display:block}
.quick-occasions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
details.past{margin-top:24px}
details.past summary{cursor:pointer;font-weight:600;color:var(--muted);padding:8px 0}
.install-banner{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:16px;box-shadow:var(--shadow)}
.install-banner[hidden]{display:none}
.install-banner img{border-radius:10px}
.install-banner div{flex:1;display:flex;flex-direction:column;font-size:.9rem;line-height:1.3}
.install-banner span{color:var(--muted)}

/* ---------- themes (invitation styles) ---------- */
.theme-classic{--t-bg:#0A1F44;--t-fg:#FFFFFF;--t-accent:#E2BE7A;--t-sub:#C9D1E3;--t-pattern:radial-gradient(circle at 20% 15%,rgba(226,190,122,.18) 0 2px,transparent 3px),radial-gradient(circle at 80% 70%,rgba(226,190,122,.14) 0 2px,transparent 3px)}
.theme-blush{--t-bg:#F7E3E0;--t-fg:#5A2633;--t-accent:#B4566B;--t-sub:#7E4A55;--t-pattern:radial-gradient(circle at 15% 20%,rgba(180,86,107,.16) 0 3px,transparent 4px),radial-gradient(circle at 85% 75%,rgba(180,86,107,.12) 0 3px,transparent 4px)}
.theme-sage{--t-bg:#E3EBDD;--t-fg:#22392B;--t-accent:#4F7A55;--t-sub:#4A5E4F;--t-pattern:radial-gradient(circle at 10% 30%,rgba(79,122,85,.16) 0 3px,transparent 4px),radial-gradient(circle at 90% 80%,rgba(79,122,85,.12) 0 3px,transparent 4px)}
.theme-confetti{--t-bg:#FFF8EC;--t-fg:#1F2A5A;--t-accent:#E2457A;--t-sub:#4A4F6E;--t-pattern:radial-gradient(circle at 12% 18%,#F7B731 0 4px,transparent 5px),radial-gradient(circle at 86% 14%,#3BB0A0 0 4px,transparent 5px),radial-gradient(circle at 78% 82%,#E2457A 0 4px,transparent 5px),radial-gradient(circle at 20% 86%,#5B6CF0 0 4px,transparent 5px),radial-gradient(circle at 50% 8%,#E2457A 0 3px,transparent 4px)}
.theme-harvest{--t-bg:#7A3B1D;--t-fg:#FFF4E6;--t-accent:#F1B25C;--t-sub:#F2D6BA;--t-pattern:radial-gradient(circle at 15% 20%,rgba(241,178,92,.25) 0 3px,transparent 4px),radial-gradient(circle at 85% 80%,rgba(241,178,92,.2) 0 3px,transparent 4px)}
.theme-midnight{--t-bg:#14122B;--t-fg:#FFFFFF;--t-accent:#B9A3FF;--t-sub:#CFC8EE;--t-pattern:radial-gradient(circle at 20% 20%,rgba(255,255,255,.5) 0 1px,transparent 2px),radial-gradient(circle at 70% 30%,rgba(255,255,255,.4) 0 1px,transparent 2px),radial-gradient(circle at 40% 80%,rgba(185,163,255,.5) 0 1.5px,transparent 2.5px)}
.theme-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:560px){.theme-picker{grid-template-columns:repeat(6,1fr)}}
.theme-swatch{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.theme-swatch input{position:absolute;opacity:0;pointer-events:none}
.swatch-art{width:100%;aspect-ratio:4/5;border-radius:12px;background:var(--t-pattern),var(--t-bg);border:2px solid var(--line);position:relative}
.swatch-art::after{content:"";position:absolute;left:22%;right:22%;top:44%;height:3px;border-radius:2px;background:var(--t-accent)}
.swatch-name{font-size:.82rem;font-weight:500;text-align:center}
.theme-swatch input:checked+.swatch-art{border-color:var(--navy);box-shadow:0 0 0 3px var(--gold-light)}
.theme-swatch input:focus-visible+.swatch-art{outline:3px solid var(--gold-light);outline-offset:2px}

/* ---------- manage page ---------- */
.manage-hero{background:var(--t-pattern),var(--t-bg);background-size:220px 220px,auto;color:var(--t-fg);border-radius:0 0 24px 24px;margin:-20px -16px 0;padding:20px 20px 24px}
.manage-hero h1{color:var(--t-fg);font-family:var(--f-title,var(--serif));font-weight:var(--f-title-w,600);font-size:calc(2.2rem * var(--f-title-scale,1));margin:4px 0 6px;overflow-wrap:anywhere}
.manage-hero .eyebrow{color:var(--t-accent)}
.manage-hero .back{color:var(--t-fg)}
.manage-hero .manage-when,.manage-hero .manage-where{margin:0;color:var(--t-sub)}
.manage-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.theme-blush .btn-light,.theme-sage .btn-light,.theme-confetti .btn-light{color:var(--t-fg);border-color:rgba(0,0,0,.18);background:rgba(255,255,255,.6)}
@media (min-width:760px){.manage-hero{margin:-32px 0 0;border-radius:0 0 24px 24px;padding:28px 32px 32px}}
.subnav{position:sticky;top:61px;z-index:20;display:flex;gap:6px;overflow-x:auto;padding:10px 0;margin:8px 0 0;background:var(--cream);scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);text-decoration:none;font-size:.9rem;font-weight:500;color:var(--navy)}
.share-card .copy-row,.copy-row{display:flex;gap:8px}
.copy-input{flex:1;min-width:0;font-size:.9rem!important;background:var(--cream)!important}
.share-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.share-row form{margin:0}
.send-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--gold-soft);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.add-guests{margin-bottom:12px}
.add-guests>summary{list-style:none;margin-bottom:12px}
.add-guests>summary::-webkit-details-marker{display:none}
.guest-list{list-style:none;margin:0;padding:0}
.guest{border-top:1px solid var(--line);padding:12px 0}
.guest-main{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.guest-name{display:flex;flex-direction:column;min-width:0;flex:1}
.guest-name .muted{font-size:.85rem;overflow-wrap:anywhere}
.guest-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.guest-note{margin:6px 0 0;font-style:italic;color:#3C4558;font-size:.92rem}
.guest-manage summary{cursor:pointer;font-size:.88rem;color:var(--navy);font-weight:500;margin-top:6px;display:inline-block;min-height:32px;padding-top:4px}
.guest-tools{display:flex;flex-direction:column;gap:10px;padding:10px 0 4px}
.guest-edit .row{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.reminder-box{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
.reminder-box h3{font-size:1.25rem}
.bring-list{list-style:none;margin:0 0 12px;padding:0}
.bring-list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.bring-list li:first-child{border-top:0}
.bring-list li.is-mine strong{color:var(--yes)}
.bring-list form{margin:0}
.comments{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.comments li{background:var(--cream);border-radius:12px;padding:10px 14px}
.comments li.from-host{background:var(--gold-soft)}
.comments p{margin:2px 0 0;white-space:pre-line}
.comment-head{display:flex;align-items:center;gap:8px}
.comment-head form{margin-left:auto}
.more-grid{display:grid;gap:18px}
.more-grid h3{font-size:1.2rem;margin:0}
.more-grid .form{gap:8px}
@media (min-width:760px){.more-grid{grid-template-columns:repeat(3,1fr)}}

/* ---------- invitation page ---------- */
.invite-page main.page{padding-top:0}
.preview-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:0 0 14px 14px;margin:0 -16px 0;font-size:.92rem}
.invitation{margin:0 -16px;padding:20px 16px 28px;background:var(--t-pattern),var(--t-bg);background-size:240px 240px,auto}
.invitation-card{max-width:560px;margin:0 auto;text-align:center;color:var(--t-fg);padding:28px 18px;border:1px solid color-mix(in srgb,var(--t-accent) 55%,transparent);border-radius:20px;position:relative}
.invitation-card::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--t-accent) 30%,transparent);border-radius:16px;pointer-events:none}
.inv-ornament{width:120px;height:16px;margin:0 auto 10px;background:radial-gradient(circle,var(--t-accent) 0 3px,transparent 4px) center/16px 16px no-repeat,linear-gradient(var(--t-accent),var(--t-accent)) left center/46px 1px no-repeat,linear-gradient(var(--t-accent),var(--t-accent)) right center/46px 1px no-repeat}
.inv-kicker{font-family:var(--f-kicker,var(--script));font-size:var(--f-kicker-size,2.3rem);font-weight:400;letter-spacing:var(--f-kicker-ls,0);text-transform:var(--f-kicker-tt,none);line-height:1.15;color:var(--t-accent);margin:0 0 6px}
.inv-title{font-family:var(--f-title,var(--serif));font-weight:var(--f-title-w,600);letter-spacing:var(--f-title-ls,0);font-size:calc(2.6rem * var(--f-title-scale,1));line-height:1.08;color:var(--t-fg);margin:0 0 8px;overflow-wrap:anywhere}
.inv-host{letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;color:var(--t-sub);margin:0}
.inv-divider{display:flex;justify-content:center;margin:16px 0}
.inv-divider span{width:60px;height:1px;background:var(--t-accent)}
.inv-date{font-family:var(--f-date,var(--serif));font-size:var(--f-date-size,1.6rem);font-weight:600;margin:0;color:var(--t-fg)}
.inv-time{margin:2px 0 10px;color:var(--t-sub);font-size:1.02rem}
.inv-place{margin:10px 0 0;color:var(--t-fg);font-size:1rem;line-height:1.4}
.inv-place strong{font-weight:600}
.inv-deadline{margin:14px 0 0;font-size:.88rem;letter-spacing:.06em;color:var(--t-sub)}
.inv-cancelled{display:inline-block;background:#fff;color:var(--no);font-weight:600;padding:4px 12px;border-radius:999px;font-size:.85rem}
@media (min-width:760px){.invitation{margin:0;border-radius:0 0 28px 28px;padding:40px 24px 48px}.invitation-card{padding:44px 40px}.inv-title{font-size:calc(3.2rem * var(--f-title-scale,1))}.preview-bar{margin:0}}
.invite-body{max-width:620px;margin:0 auto;padding-top:14px}
.quick-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:4px 0 16px}
.menu{position:relative}
.menu>summary{list-style:none}
.menu>summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;z-index:15;top:calc(100% + 6px);left:50%;transform:translateX(-50%);min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(10,31,68,.15);padding:6px;display:flex;flex-direction:column}
.menu-list a{padding:12px 14px;border-radius:8px;text-decoration:none;font-weight:500}
.menu-list a:hover{background:var(--cream)}
.rsvp-card{border-color:var(--gold-light);box-shadow:0 10px 30px rgba(184,131,42,.12)}
.current-reply{background:var(--cream);border-radius:12px;padding:10px 14px}
.rsvp-form fieldset{border:0;margin:0;padding:0;min-width:0}
.rsvp-more{display:flex;flex-direction:column;gap:14px}
.rsvp-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.choice{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 6px;border:2px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;transition:all .12s ease;text-align:center;min-height:96px;justify-content:center}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pending-bg);color:var(--pending)}
.choice-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.choice-label{font-weight:600}
.choice:has(input:checked){border-color:currentColor}
.choice-yes:has(input:checked){color:var(--yes);background:var(--yes-bg)}
.choice-maybe:has(input:checked){color:var(--maybe);background:var(--maybe-bg)}
.choice-no:has(input:checked){color:var(--no);background:var(--no-bg)}
.choice:has(input:checked) .choice-ico{color:inherit;background:currentColor}
.choice:has(input:checked) .choice-ico svg{stroke:#fff}
.choice:has(input:focus-visible){outline:3px solid var(--gold-light);outline-offset:2px}
.choice.is-checked{border-color:var(--navy)}
.party-row:empty{display:none}
.who{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.who li{display:flex;align-items:center;gap:10px}
.avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--navy-soft);color:var(--navy);font-weight:600;flex:none}
.who .pill{margin-left:auto}
.guest-footer{text-align:center;padding:4px 0 12px}
.cta-card{text-align:center;margin-top:16px}

/* ---------- install sheet ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(10,31,68,.45);display:flex;align-items:flex-end;justify-content:center;padding:12px}
.sheet[hidden]{display:none}
.sheet-card{background:#fff;border-radius:20px;padding:24px;max-width:420px;width:100%;text-align:center;margin-bottom:var(--safe-b);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.sheet-icon{border-radius:14px;margin:0 auto 8px;display:block}
.steps{text-align:left;padding-left:22px;margin:12px 0 18px;display:grid;gap:8px}
.inline-ico{width:20px;height:20px;vertical-align:-4px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.install-page{text-align:center}
.install-page .steps{max-width:360px;margin-left:auto;margin-right:auto}
.install-icon{border-radius:20px;margin:0 auto 10px;display:block}
@media (min-width:760px){.sheet{align-items:center}}

/* ---------- admin ---------- */
.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 16px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.88rem}
.table th,.table td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}


/* ================= additions: more backgrounds ================= */
.theme-noir{--t-bg:#121212;--t-fg:#F7F1E3;--t-accent:#D4AF37;--t-sub:#D3C9B4;--t-pattern:repeating-linear-gradient(45deg,rgba(212,175,55,.07) 0 1px,transparent 1px 16px)}
.theme-garden{--t-bg:#FBEFF1;--t-fg:#3E2A35;--t-accent:#B84C70;--t-sub:#6A4F5B;--t-pattern:radial-gradient(circle at 14% 18%,rgba(184,76,112,.22) 0 5px,transparent 6px),radial-gradient(circle at 20% 24%,rgba(95,140,90,.25) 0 3px,transparent 4px),radial-gradient(circle at 84% 78%,rgba(184,76,112,.2) 0 5px,transparent 6px),radial-gradient(circle at 78% 72%,rgba(95,140,90,.22) 0 3px,transparent 4px)}
.theme-lavender{--t-bg:#ECE6F7;--t-fg:#2F2552;--t-accent:#6B4FC4;--t-sub:#554A75;--t-pattern:radial-gradient(circle at 18% 22%,rgba(107,79,196,.18) 0 3px,transparent 4px),radial-gradient(circle at 82% 70%,rgba(107,79,196,.14) 0 4px,transparent 5px)}
.theme-sunshine{--t-bg:#FFE680;--t-fg:#3A2A00;--t-accent:#D64A16;--t-sub:#5E4A06;--t-pattern:radial-gradient(circle at 12% 20%,#FF9F1C 0 5px,transparent 6px),radial-gradient(circle at 88% 16%,#2EC4B6 0 4px,transparent 5px),radial-gradient(circle at 80% 84%,#E2457A 0 5px,transparent 6px),radial-gradient(circle at 18% 82%,#3D5AFE 0 4px,transparent 5px)}
.theme-citrus{--t-bg:#FFF4D9;--t-fg:#2C3A12;--t-accent:#E2671B;--t-sub:#55642B;--t-pattern:radial-gradient(circle at 14% 18%,rgba(226,103,27,.35) 0 6px,transparent 7px),radial-gradient(circle at 86% 80%,rgba(140,190,40,.4) 0 6px,transparent 7px),radial-gradient(circle at 82% 16%,rgba(250,200,30,.5) 0 4px,transparent 5px)}
.theme-ocean{--t-bg:#0D5A78;--t-fg:#FFFFFF;--t-accent:#8FE3DE;--t-sub:#D3EEF4;--t-pattern:radial-gradient(circle at 20% 20%,rgba(143,227,222,.25) 0 2px,transparent 3px),radial-gradient(circle at 75% 70%,rgba(255,255,255,.18) 0 3px,transparent 4px)}
.theme-frost{--t-bg:#E9F2FA;--t-fg:#16314C;--t-accent:#3F7FB8;--t-sub:#435E78;--t-pattern:radial-gradient(circle at 15% 20%,#fff 0 3px,transparent 4px),radial-gradient(circle at 70% 30%,#fff 0 2px,transparent 3px),radial-gradient(circle at 40% 80%,rgba(63,127,184,.2) 0 3px,transparent 4px)}
.theme-slate{--t-bg:#F3F5F8;--t-fg:#1C2330;--t-accent:#2F63D8;--t-sub:#535C6B;--t-pattern:repeating-linear-gradient(0deg,rgba(28,35,48,.045) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(28,35,48,.045) 0 1px,transparent 1px 24px)}
.theme-picker{grid-template-columns:repeat(4,1fr)}
@media (min-width:560px){.theme-picker{grid-template-columns:repeat(7,1fr)}}

/* ================= lettering styles ================= */
.font-elegant{--f-title:"Cormorant Garamond",Georgia,serif;--f-title-w:600;--f-kicker:"Pinyon Script",cursive;--f-kicker-size:2.3rem;--f-date:"Cormorant Garamond",Georgia,serif}
.font-party{--f-title:"Fredoka","Jost",system-ui,sans-serif;--f-title-w:600;--f-title-scale:.9;--f-kicker:"Pacifico",cursive;--f-kicker-size:1.65rem;--f-date:"Fredoka","Jost",sans-serif;--f-date-size:1.35rem}
.font-corporate{--f-title:"Montserrat","Jost",system-ui,sans-serif;--f-title-w:700;--f-title-scale:.78;--f-title-ls:-.01em;--f-kicker:"Montserrat","Jost",sans-serif;--f-kicker-size:.82rem;--f-kicker-ls:.24em;--f-kicker-tt:uppercase;--f-date:"Montserrat","Jost",sans-serif;--f-date-size:1.2rem}
.font-corporate .inv-kicker{font-weight:500;margin-bottom:12px}
.font-corporate .inv-ornament{background:linear-gradient(var(--t-accent),var(--t-accent)) center/56px 3px no-repeat}
.font-party .inv-ornament{background:radial-gradient(circle,var(--t-accent) 0 4px,transparent 5px) left center/20px 16px repeat-x;width:100px}
.font-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.font-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:14px 8px;border:2px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;min-height:44px}
.font-card input{position:absolute;opacity:0;pointer-events:none}
.font-sample{font-size:2rem;line-height:1.1;color:var(--navy)}
.font-elegant .font-sample{font-family:"Pinyon Script",cursive;font-size:2.3rem}
.font-party .font-sample{font-family:"Pacifico",cursive}
.font-corporate .font-sample{font-family:"Montserrat",sans-serif;font-weight:700}
.font-name{font-weight:600}
.font-hint{font-size:.76rem;color:var(--muted);line-height:1.25}
.font-card:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px var(--gold-light)}
.font-card:has(input:focus-visible){outline:3px solid var(--gold-light);outline-offset:2px}

/* ================= cover photo + host photo on the invitation ================= */
.inv-cover{max-width:560px;margin:0 auto 16px;border-radius:18px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 10px 30px rgba(0,0,0,.18);background:rgba(0,0,0,.06)}
.inv-cover img{width:100%;height:100%;object-fit:cover;display:block}
.inv-host-row{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.inv-host-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--t-accent);flex:none}
.inv-address{display:block}
.inv-place strong:empty{display:none}

/* ================= avatars ================= */
img.avatar{object-fit:cover;padding:0;border:0}
.avatar-sm{width:28px!important;height:28px!important;font-size:.8rem}
.guest-main .avatar{margin-top:2px}
.comment-head{gap:8px}
.event-card-art.has-cover{background-size:cover;background-position:center;position:relative;color:#fff}
.event-card-art.has-cover::before{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.55))}
.event-card-art.has-cover span,.event-card-art.has-cover small{position:relative}
.manage-cover{display:block;width:100%;max-width:560px;max-height:220px;object-fit:cover;border-radius:16px;margin:0 0 10px}

/* ================= photo picker ================= */
.photo-field{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.photo-preview{position:relative;flex:none;display:grid;place-items:center;overflow:hidden;background:var(--cream);border:1.5px dashed #CDD3DE}
.photo-circle .photo-preview{width:88px;height:88px;border-radius:50%}
.photo-wide{flex-direction:column;align-items:stretch}
.photo-wide .photo-preview{width:100%;aspect-ratio:16/10;border-radius:14px}
.photo-preview img{width:100%;height:100%;object-fit:cover}
.photo-empty svg{width:34px;height:34px;fill:none;stroke:#9AA3B2;stroke-width:1.6;stroke-linejoin:round}
.photo-actions{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.photo-pick{position:relative;overflow:hidden}
.photo-pick input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.photo-pick:focus-within{outline:3px solid var(--gold-light);outline-offset:2px}
.photo-remove{padding:0}
.inline-delete{margin-top:8px}
.cta-alt{margin:10px 0 0}

/* ================= builder with live preview ================= */
.builder{display:block}
.builder-preview{display:none}
.sticky-actions{display:flex;gap:10px}
.sticky-actions .btn{flex:1}
.preview-toggle{flex:0 0 auto!important;background:#fff}
body.preview-open{overflow:hidden}
body.preview-open .builder-preview{display:flex;flex-direction:column;position:fixed;inset:0;z-index:70;background:var(--cream);padding:calc(env(safe-area-inset-top,0px) + 12px) 12px calc(var(--safe-b) + 12px);overflow-y:auto}
.builder-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.builder-preview-frame{border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.builder-preview .invitation{margin:0;border-radius:20px;padding:18px 14px 22px}
.builder-preview .inv-title{font-size:calc(2.1rem * var(--f-title-scale,1))}
.builder-preview .invitation-card{padding:24px 14px}
.builder-preview-note{text-align:center;margin-top:10px}
@media (min-width:1000px){
  .builder{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:28px;align-items:start}
  .builder-preview{display:block;position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;padding-bottom:8px}
  .preview-toggle,.preview-close{display:none!important}
  .sticky-actions{bottom:16px}
}

/* keep background dots from running through the invitation text */
.invitation-card{background:color-mix(in srgb,var(--t-bg) 88%,transparent)}
.photo-wide .photo-preview{max-height:280px}

/* ================= photo crop tool ================= */
.photo-buttons{display:flex;flex-wrap:wrap;gap:8px}
body.cropper-open{overflow:hidden}
.cropper{position:fixed;inset:0;z-index:90;background:rgba(10,31,68,.72);display:flex;align-items:flex-end;justify-content:center;padding:0}
.cropper[hidden]{display:none!important}
.cropper-card{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:20px 16px calc(var(--safe-b) + 16px);display:flex;flex-direction:column;align-items:center;gap:12px;max-height:100%;overflow:auto}
.cropper-title{font-size:1.6rem;margin:0}
.cropper-hint{margin:0;color:var(--muted);font-size:.9rem;text-align:center}
.cropper-frame{position:relative;overflow:hidden;border-radius:14px;background:#EEF0F3;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;box-shadow:0 0 0 1px var(--line)}
.cropper-frame:active{cursor:grabbing}
.cropper-frame:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
.cropper-canvas{display:block}
.cropper-mask{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 2px rgba(255,255,255,.9)}
.cropper-frame.is-round .cropper-mask{border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 999px rgba(10,31,68,.45)}
.cropper-zoom{display:flex;align-items:center;gap:10px;width:100%;max-width:460px}
.cropper-zoom svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.cropper-zoom input{flex:1;accent-color:var(--navy);height:44px}
.cropper-actions{display:flex;gap:10px;width:100%;max-width:460px}
.cropper-actions .btn{flex:1}
@media (min-width:760px){.cropper{align-items:center;padding:24px}.cropper-card{border-radius:22px;padding:24px}}