/* Zaghruta POC — brand tokens from docs/design/tokens.md */
:root{
  --henna:#8F3A1E; --henna-ink:#7A3018; --kohl:#221B1C; --plaster:#F5F3F0; --paper:#FFFFFF;
  --gold:#C99335; --gold-deep:#9A6E22; --candle:#E8B04B; --gem-line:#8C8180;
  --ink:#221B1C; --ink-2:#5E5452; --ink-3:#8A7F7C; --rule:#E2DDD8; --rule-2:#EDE9E5;
  --ok:#2F6B3A; --ok-bg:#E9F2EA; --no:#8F3A1E; --no-bg:#F6E9E4; --wait:#7A5A12; --wait-bg:#F7EFD9;
  --accent:var(--henna); --on-accent:#fff;
  --r:12px; --f-ui:"Readex Pro", system-ui, sans-serif; --f-mark:"Aref Ruqaa", serif;
  color-scheme:light;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--plaster); color:var(--ink); font:400 16px/1.6 var(--f-ui); min-height:100vh; }
a{ color:var(--henna-ink); text-underline-offset:3px; }
h1,h2,h3{ margin:0; line-height:1.25; font-weight:600; }
h1{ font-size:clamp(24px, 4.2vw, 32px); }
h2{ font-size:19px; }
p{ margin:0; }
button, input, select, textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--candle); outline-offset:2px; border-radius:6px; }

/* ---------- shell: sidebar ---------- */
@view-transition{ navigation:auto; }                    /* smooth page-to-page moves (Chrome, Edge, Safari 18) */
::view-transition-old(main){ animation:vt-out .18s ease both; }
::view-transition-new(main){ animation:vt-in .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px); } }

body.app{ display:grid; grid-template-columns:268px minmax(0, 1fr); min-height:100vh; }
.side{ position:sticky; top:0; height:100vh; background:var(--kohl); color:#F2EDEA; display:flex; flex-direction:column; gap:22px;
  padding:22px 16px; overflow-y:auto; view-transition-name:side; --gold:#E8B04B; --gold-deep:#B98528; z-index:10; }
.brand{ display:flex; align-items:center; gap:10px; color:#F2EDEA; text-decoration:none; --gold:#E8B04B; --gold-deep:#B98528; padding-inline:6px; }
.brand .wm{ font:700 26px/1 var(--f-mark); }
.couple{ display:flex; gap:12px; align-items:center; padding:10px; border-radius:12px; background:rgb(255 255 255 / .05);
  color:inherit; text-decoration:none; transition:background .2s; }
.couple:hover{ background:rgb(255 255 255 / .09); }
.couple img, .couple .ph{ width:44px; height:58px; border-radius:6px; object-fit:cover; flex:none; display:grid; place-items:center; background:rgb(255 255 255 / .06); }
.couple b{ display:block; font-weight:600; font-size:15px; line-height:1.3; }
.couple small{ color:var(--candle); font-size:13px; }
.side ul{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.side nav a{ position:relative; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; color:#CFC5C1;
  text-decoration:none; font-weight:500; font-size:15px; transition:color .2s, background .2s; }
.side nav a .ic{ transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.side nav a:hover{ color:#fff; background:rgb(255 255 255 / .05); }
.side nav a:hover .ic{ transform:scale(1.1); }
.side nav a[aria-current="page"]{ color:#fff; background:rgb(255 255 255 / .1); }
/* the active marker morphs from one item to the next across page loads */
.side nav a[aria-current="page"]::before{ content:""; position:absolute; inset-block:10px; inset-inline-start:-16px; width:4px;
  border-radius:0 4px 4px 0; background:var(--candle); view-transition-name:nav-mark; }
html[dir="rtl"] .side nav a[aria-current="page"]::before{ border-radius:4px 0 0 4px; }
.side nav{ display:grid; gap:14px; }
.side .grp{ margin:0 0 4px; padding-inline:12px; font-size:12.5px; color:#9C918E; }
.side-foot{ margin-top:auto; display:grid; gap:10px; }
.side-foot .set{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:10px; color:#CFC5C1; text-decoration:none; font-size:14px; font-weight:500; }
.side-foot .set:hover, .side-foot .set.on{ color:#fff; background:rgb(255 255 255 / .07); }
.lang{ display:inline-flex; align-items:center; gap:8px; background:none; border:1px solid rgb(255 255 255 / .2); color:#F2EDEA;
  border-radius:10px; padding:8px 12px; cursor:pointer; font-size:14px; justify-self:start; transition:background .2s; }
.lang:hover{ background:rgb(255 255 255 / .06); }
.proto{ font-size:12px; color:#9C918E; line-height:1.5; padding-inline:4px; }
.mbar, .scrim{ display:none; }

@media (max-width:900px){
  body.app{ display:block; }
  .mbar{ display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:9; background:var(--kohl); color:#F2EDEA; padding:10px 12px; }
  .icon-btn{ display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:0; background:none; color:inherit; cursor:pointer; }
  .icon-btn:hover{ background:rgb(255 255 255 / .08); }
  .side{ position:fixed; inset-block:0; inset-inline-start:0; width:min(84vw, 300px); height:100dvh; transform:translateX(-105%);
    transition:transform .36s cubic-bezier(.2,.8,.2,1); box-shadow:0 0 40px rgb(0 0 0 / .3); }
  html[dir="rtl"] .side{ transform:translateX(105%); }
  body.nav-open .side{ transform:none; }
  .scrim{ display:block; position:fixed; inset:0; background:rgb(34 27 28 / .45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:8; }
  body.nav-open .scrim{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }
}

main{ width:100%; max-width:1120px; margin:0 auto; padding:32px 28px 80px; display:grid; gap:24px; view-transition-name:main; }
@media (max-width:900px){ main{ padding:20px 16px 72px; } }

/* ---------- motion ---------- */
.rise{ animation:rise .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i, 0) * 60ms); }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }
.btn, .filters button, .choice button, .palette button, .stepper button{ transition:background .2s, color .2s, border-color .2s, transform .12s, box-shadow .2s; }
.btn:active, .filters button:active, .choice button:active, .stepper button:active{ transform:scale(.97); }
.stat, .panel{ transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.stat:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgb(34 27 28 / .08); }
.is-new{ animation:arrive .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes arrive{ from{ opacity:0; transform:translateY(-8px); background:color-mix(in oklab, var(--accent) 14%, #fff); } 60%{ background:color-mix(in oklab, var(--accent) 10%, #fff); } }
.leaving{ animation:leave .28s ease both; }
@keyframes leave{ to{ opacity:0; transform:translateX(24px); height:0; padding-block:0; } }
dialog[open]{ animation:pop .32s cubic-bezier(.34,1.4,.64,1) both; }
dialog[open]::backdrop{ animation:fade .25s ease both; }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.96); } }
@keyframes fade{ from{ opacity:0; } }
.steps .tick svg path{ stroke-dasharray:24; stroke-dashoffset:24; animation:draw .5s .35s cubic-bezier(.6,0,.2,1) forwards; }
.steps li.ok .tick{ animation:tickpop .45s .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes tickpop{ from{ transform:scale(.6); } }
.toast{ transition:opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.card-drop img{ animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
@media (prefers-reduced-motion: reduce){
  .rise, .is-new, .leaving, dialog[open], .steps li.ok .tick, .card-drop img{ animation:none; }
  .steps .tick svg path{ animation:none; stroke-dashoffset:0; }
  ::view-transition-old(main), ::view-transition-new(main){ animation:none; }
}
.page-head{ display:grid; gap:6px; }
.sub{ color:var(--ink-2); }
.muted{ color:var(--ink-3); font-size:14px; }

/* ---------- surfaces ---------- */
.panel{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:22px; display:grid; gap:16px; }
.panel > header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
@media (max-width:860px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.fields .full{ grid-column:1 / -1; }
@media (max-width:560px){ .fields{ grid-template-columns:1fr; } }
label.f{ display:grid; gap:6px; align-content:start; font-size:14px; font-weight:500; }
label.f small{ font-weight:400; color:var(--ink-3); font-size:13px; }
input[type=text], input[type=password], input[type=search], input[type=tel], input[type=url], input[type=date], input[type=time], input[type=number], select, textarea{
  width:100%; background:#fff; border:1px solid #D6CFCA; border-radius:10px; padding:10px 12px; min-height:44px; font-size:16px; }
/* one height for every single-line control, so fields side by side line up exactly */
input[type=text], input[type=password], input[type=search], input[type=tel], input[type=url], input[type=email], input[type=date], input[type=time], input[type=number], select{ height:48px; }
textarea{ min-height:120px; resize:vertical; line-height:1.6; }
/* one look for every dropdown: same height as the inputs, the chevron inside the padding */
select{ appearance:none; -webkit-appearance:none; padding-inline-end:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236E6055' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; }
html[dir="rtl"] select{ background-position:left 14px center; }
/* a number with its unit inside the field (e.g. 7 days) */
.unit{ position:relative; display:block; }
.unit input{ padding-inline-end:56px; }
.unit em{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); font-style:normal; font-weight:400; color:var(--ink-3); pointer-events:none; }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--henna); box-shadow:0 0 0 3px rgb(143 58 30 / .14); }
input[aria-invalid="true"]{ border-color:var(--no); }
.err{ color:var(--no); font-size:13.5px; min-height:1em; }
.ltr{ direction:ltr; unicode-bidi:isolate; }
html[dir="rtl"] input.ltr{ text-align:right; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:10px;
  border:1px solid transparent; background:var(--henna); color:#fff; font-weight:500; font-size:15px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn:hover{ background:var(--henna-ink); }
.btn.ghost{ background:#fff; color:var(--ink); border-color:#D6CFCA; }
.btn.ghost:hover{ background:var(--rule-2); }
.btn.wa{ background:#1F7A4D; } .btn.wa:hover{ background:#17603C; }
.btn.small{ min-height:36px; padding:6px 12px; font-size:14px; }
.btn.link{ background:none; color:var(--henna-ink); padding:6px 8px; min-height:36px; }
.btn.link:hover{ background:var(--rule-2); }
.btn[disabled], .btn.disabled{ opacity:.5; cursor:not-allowed; }
.row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---------- status: glyph + word, never colour alone ---------- */
.badge{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.badge::before{ font-size:12px; }
.badge.draft{ background:var(--rule-2); color:var(--ink-2); } .badge.draft::before{ content:"○"; }
.badge.sent{ background:var(--wait-bg); color:var(--wait); } .badge.sent::before{ content:"…"; }
.badge.yes{ background:var(--ok-bg); color:var(--ok); } .badge.yes::before{ content:"✓"; }
.badge.no{ background:var(--no-bg); color:var(--no); } .badge.no::before{ content:"✕"; }

/* ---------- home ---------- */
.hero{ background:var(--kohl); color:#F2EDEA; border-radius:var(--r); padding:28px; display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; --gold:#E8B04B; --gold-deep:#B98528; }
.hero .names{ font:700 clamp(30px, 5vw, 44px)/1.15 var(--f-mark); }
.hero .when{ color:#D9D0CC; }
.hero .count{ display:inline-block; margin-top:10px; background:rgb(232 176 75 / .14); color:var(--candle); padding:4px 12px; border-radius:999px; font-weight:500; font-size:14px; }
.hero .card-thumb{ width:120px; aspect-ratio:3/4; border-radius:8px; object-fit:cover; border:1px solid rgb(255 255 255 / .15); }
.hero .card-ph{ width:120px; aspect-ratio:3/4; border-radius:8px; border:1px dashed rgb(255 255 255 / .25); display:grid; place-items:center; color:#8A7F7C; font-size:13px; text-align:center; padding:8px; }
@media (max-width:560px){ .hero{ grid-template-columns:1fr; } .hero .card-thumb, .hero .card-ph{ width:96px; } }

.stats{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.stat{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--r); padding:16px; display:grid; gap:2px; }
.stat b{ font-size:28px; font-weight:600; line-height:1.1; }
.stat span{ color:var(--ink-2); font-size:14px; }
.stat.lead{ background:var(--henna); border-color:var(--henna); color:#fff; } .stat.lead span{ color:#F6DED4; }
@media (max-width:860px){ .stats{ grid-template-columns:repeat(2, 1fr); } .stat.lead{ grid-column:1 / -1; } }

.steps{ list-style:none; margin:0; padding:0; display:grid; }
.steps li{ display:grid; grid-template-columns:28px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--rule-2); }
.steps li:first-child{ border-top:0; }
.steps .tick{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:13px; border:1.5px solid #CFC7C2; color:var(--ink-3); }
.steps li.ok .tick{ background:var(--ok); border-color:var(--ok); color:#fff; }
.steps .what{ display:grid; } .steps .what small{ color:var(--ink-3); font-size:13px; }

.replies{ list-style:none; margin:0; padding:0; display:grid; }
.replies li{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--rule-2); align-items:center; }
.replies li:first-child{ border-top:0; }

/* ---------- wedding ---------- */
.card-drop{ border:1.5px dashed #CFC7C2; border-radius:var(--r); display:grid; place-items:center; gap:10px; padding:24px; text-align:center; min-height:220px; background:#FBFAF8; }
.card-drop.has{ border-style:solid; padding:12px; background:#fff; }
.card-drop img{ max-width:100%; max-height:420px; border-radius:8px; display:block; }
.swatch{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.swatch i{ width:18px; height:18px; border-radius:5px; display:inline-block; border:1px solid rgb(0 0 0 / .1); }
.wa-preview{ background:#E7DED5; border-radius:var(--r); padding:16px; }
.bubble{ background:#DCF5C6; color:#111; border-radius:10px; padding:10px 12px; white-space:pre-wrap; font-size:14.5px; line-height:1.55; max-width:420px; box-shadow:0 1px 0 rgb(0 0 0 / .08); overflow-wrap:anywhere; }
.bubble img{ display:block; width:100%; max-height:240px; object-fit:cover; border-radius:6px; margin-bottom:8px; }
html[dir="rtl"] .bubble{ margin-inline-start:auto; }

/* ---------- invitations ---------- */
.palette{ display:flex; gap:10px; }
.palette button{ width:44px; height:44px; border-radius:50%; border:2px solid transparent; background:#fff; padding:3px; cursor:pointer; }
.palette button i{ display:block; width:100%; height:100%; border-radius:50%; background:var(--c); }
.palette button[aria-checked="true"]{ border-color:var(--ink); }
.progress{ height:8px; background:var(--rule-2); border-radius:999px; overflow:hidden; }
.progress i{ display:block; height:100%; background:var(--henna); border-radius:999px; transition:width .3s; }
.sep{ border:0; border-top:1px solid var(--rule-2); margin:4px 0; width:100%; }

/* ---------- guests ---------- */
.add-form{ display:grid; grid-template-columns:2fr 2fr 1fr auto; gap:12px; align-items:end; }
@media (max-width:760px){ .add-form{ grid-template-columns:1fr 1fr; } .add-form .btn{ grid-column:1 / -1; } }
.filters{ display:flex; gap:6px; flex-wrap:wrap; }
.filters button{ border:1px solid var(--rule); background:#fff; border-radius:999px; padding:6px 14px; font-size:14px; cursor:pointer; min-height:36px; }
.filters button[aria-pressed="true"]{ background:var(--kohl); color:#fff; border-color:var(--kohl); }
.glist{ list-style:none; margin:0; padding:0; display:grid; }
.glist > li{ display:grid; grid-template-columns:1fr auto; gap:10px 16px; padding:16px 0; border-top:1px solid var(--rule-2); }
.glist > li:first-child{ border-top:0; }
.glist .who{ display:grid; gap:2px; }
.glist .who b{ font-weight:600; }
.glist .meta{ display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; color:var(--ink-3); font-size:13.5px; }
.glist .acts{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
@media (max-width:640px){ .glist > li{ grid-template-columns:1fr; } .glist .acts{ justify-content:flex-start; } }
.empty{ text-align:center; color:var(--ink-3); padding:28px 12px; }
dialog{ border:0; border-radius:var(--r); padding:0; width:min(560px, calc(100% - 32px)); box-shadow:0 20px 60px rgb(0 0 0 / .25); }
dialog::backdrop{ background:rgb(34 27 28 / .5); }
dialog form{ padding:22px; display:grid; gap:14px; }

/* ---------- toast ---------- */
.toast{ position:fixed; inset-inline:16px; bottom:20px; margin-inline:auto; max-width:440px; background:var(--kohl); color:#fff; padding:12px 16px;
  border-radius:10px; font-size:14.5px; opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; pointer-events:none; z-index:20; }
.toast.show{ opacity:1; transform:none; }
.toast[data-kind="err"]{ background:#7A2A12; }

/* ---------- guest RSVP page ---------- */
body.rsvp{ background:color-mix(in oklab, var(--accent) 7%, var(--plaster)); }
.rsvp main{ max-width:560px; padding-top:20px; gap:18px; }
.rsvp .lang-row{ display:flex; justify-content:flex-end; }
.rsvp .lang-row .lang{ color:var(--ink); border-color:#CFC7C2; }
.invite{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid var(--rule); }
.invite img{ display:block; width:100%; height:auto; }
.invite .no-card{ background:var(--accent); color:var(--on-accent); padding:48px 24px; text-align:center; }
.invite .no-card .names{ font:700 38px/1.2 var(--f-mark); }
.invite .body{ padding:22px; display:grid; gap:6px; text-align:center; }
.invite .dear{ color:var(--ink-2); }
.invite .names{ font:700 32px/1.25 var(--f-mark); color:var(--accent); }
.invite .when{ font-weight:500; }
.invite .where{ color:var(--ink-2); }
.answer{ background:#fff; border:1px solid var(--rule); border-radius:16px; padding:22px; display:grid; gap:16px; }
.answer h2{ text-align:center; }
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice button{ min-height:56px; border-radius:12px; border:1.5px solid #D6CFCA; background:#fff; font-weight:600; font-size:16px; cursor:pointer; padding:10px; }
.choice button[aria-pressed="true"].yes{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
.choice button[aria-pressed="true"].no{ background:var(--kohl); color:#fff; border-color:var(--kohl); }
@media (max-width:420px){ .choice{ grid-template-columns:1fr; } }
.stepper{ display:flex; align-items:center; justify-content:center; gap:14px; }
.stepper button{ width:48px; height:48px; border-radius:50%; border:1.5px solid #D6CFCA; background:#fff; font-size:22px; cursor:pointer; }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.stepper output{ font-size:34px; font-weight:600; min-width:2ch; text-align:center; }
.kids{ background:color-mix(in oklab, var(--accent) 8%, #fff); border-radius:12px; padding:16px; display:grid; gap:12px; }
.kids p{ color:var(--ink-2); line-height:1.7; }
.check{ display:flex; gap:10px; align-items:center; font-weight:500; cursor:pointer; }
.check input{ width:22px; height:22px; accent-color:var(--accent); }
.go{ background:var(--accent); color:var(--on-accent); width:100%; min-height:52px; font-size:16px; }
.go:hover{ background:color-mix(in oklab, var(--accent) 85%, black); }
.done{ text-align:center; display:grid; gap:14px; }
.done .big{ font-size:20px; font-weight:600; }
.done .row{ justify-content:center; }
.foot{ text-align:center; color:var(--ink-3); font-size:12.5px; display:flex; gap:6px; justify-content:center; align-items:center; }
.foot .mark{ color:var(--ink-2); }

/* ---------- envelope intro (guest page) ---------- */
.intro{ position:fixed; inset:0; z-index:30; display:grid; place-items:center; align-content:center; gap:28px; cursor:pointer;
  background:color-mix(in oklab, var(--accent) 12%, var(--plaster)); transition:opacity .55s ease .1s; }
.intro.gone{ opacity:0; pointer-events:none; }
.env{ position:relative; width:min(84vw, 360px); aspect-ratio:5 / 4; perspective:1200px; animation:float 3.2s ease-in-out infinite; }
.intro.open .env{ animation:none; }
.env > *{ position:absolute; inset:0; }
.env-back{ background:color-mix(in oklab, var(--accent) 78%, black); border-radius:10px; z-index:0; }
.env-card{ inset:auto 24% 5% 24%; width:52%; height:auto; aspect-ratio:3 / 4; object-fit:cover; border-radius:6px; z-index:2;
  box-shadow:0 10px 30px rgb(0 0 0 / .25); transform:translateY(0); transition:transform 1s cubic-bezier(.2,.85,.25,1) .55s; }
.env-pocket{ z-index:3; filter:drop-shadow(0 -3px 5px rgb(0 0 0 / .3)); }
.env-front{ position:absolute; inset:0; background:var(--accent); border-radius:0 0 10px 10px;
  clip-path:polygon(0 34%, 50% 66%, 100% 34%, 100% 100%, 0 100%); box-shadow:inset 0 1px 0 rgb(255 255 255 / .08); }
.env-front::after{ content:""; position:absolute; inset:0; background:linear-gradient(transparent 60%, rgb(0 0 0 / .12)); }
.env-flap{ background:color-mix(in oklab, var(--accent) 88%, white); z-index:4; transform-origin:50% 0; transform:rotateX(0deg);
  clip-path:polygon(0 0, 100% 0, 50% 62%); transition:transform .6s cubic-bezier(.5,0,.3,1), z-index 0s linear .3s, filter .6s; border-radius:10px 10px 0 0; }
.intro.open .env-flap{ filter:brightness(.82); }
.env-seal{ inset:auto; left:50%; top:62%; width:58px; height:58px; margin:-29px 0 0 -29px; z-index:5; border-radius:50%;
  display:grid; place-items:center; background:#7A1F12; color:#F2EDEA; --gold:#E8B04B; --gold-deep:#B98528;
  box-shadow:0 3px 8px rgb(0 0 0 / .3), inset 0 0 0 3px rgb(0 0 0 / .15); transition:opacity .25s, transform .35s; }
.intro-hint{ color:var(--ink-2); font-size:15px; animation:breathe 2s ease-in-out infinite; }
/* opening sequence: seal lifts → flap opens and drops behind → card rises → envelope sinks away */
.intro.open .env-seal{ opacity:0; transform:scale(1.3); }
.intro.open .env-flap{ transform:rotateX(180deg); z-index:1; }
.intro.open .env-card{ transform:translateY(-62%) scale(1.3); }
.intro.open .intro-hint{ opacity:0; animation:none; transition:opacity .2s; }
.intro.out .env-back, .intro.out .env-pocket, .intro.out .env-flap{ transition:transform .6s cubic-bezier(.5,0,.75,0), opacity .6s; transform:translateY(60%); opacity:0; }
.intro.out .env-flap{ transform:rotateX(180deg) translateY(-60%); }
.intro.out .env-card{ transition:transform .7s cubic-bezier(.2,.8,.2,1); transform:translateY(-45%) scale(1.55); }
@keyframes float{ 0%,100%{ transform:translateY(0) rotate(-1deg); } 50%{ transform:translateY(-8px) rotate(1deg); } }
@keyframes breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
/* the real card on the page eases in as the intro leaves */
.invite.reveal{ animation:settle .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes settle{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .intro{ display:none; } .invite.reveal{ animation:none; } }

/* ---------- one task per page: shared pieces ---------- */
.page-head h1{ font-size:clamp(26px, 4vw, 34px); }
.page-head .sub{ font-size:16px; max-width:56ch; }
.narrow{ max-width:640px; }

/* next step (home) */
.next{ background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:28px; display:grid; gap:10px; justify-items:start; }
.next small{ color:var(--ink-3); font-size:14px; }
.next h2{ font-size:24px; }
.next p{ color:var(--ink-2); }
.next .btn{ margin-top:8px; min-height:52px; padding-inline:22px; font-size:16px; }
.journey{ list-style:none; margin:0; padding:0; display:flex; gap:8px; flex-wrap:wrap; }
.journey a{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1px solid var(--rule); background:#fff;
  color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500; transition:background-color .15s, border-color .15s; }
.journey a.ok{ color:var(--ok); border-color:#CFE0D0; background:var(--ok-bg); }
.journey a.ok::before{ content:"✓"; font-size:12px; }
.journey a.now{ border-color:var(--henna); color:var(--henna-ink); }
.journey a:hover{ background:var(--rule-2); }

/* stat tiles */
.tiles{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.tile{ background:var(--paper); border:1px solid var(--rule); border-radius:14px; padding:18px; display:grid; gap:4px; align-content:start; }
.tile b{ font-size:32px; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.tile span{ color:var(--ink-2); font-size:14px; }
.tile small{ color:var(--ink-3); font-size:13px; }
.tile.lead{ grid-column:span 2; background:var(--henna); border-color:var(--henna); color:#fff; }
.tile.lead span, .tile.lead small{ color:rgb(255 255 255 / .82); }
.tile.lead b{ font-size:44px; }
.meter{ height:8px; border-radius:999px; background:var(--rule-2); overflow:hidden; display:flex; }
.meter i{ display:block; height:100%; }
.meter .m-yes{ background:var(--ok); } .meter .m-no{ background:var(--no); } .meter .m-wait{ background:var(--candle); }
.legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-2); }
.legend span::before{ content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px; vertical-align:middle; background:var(--c); }
@media (max-width:760px){ .tiles{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; } .tile{ padding:14px 12px; } .tile b{ font-size:26px; } .tile.lead{ grid-column:1 / -1; } }

/* segmented filter */
.seg{ display:flex; gap:4px; padding:4px; background:var(--rule-2); border-radius:12px; overflow-x:auto; scrollbar-width:none; }
.seg button{ flex:1 0 auto; border:0; background:none; border-radius:9px; padding:9px 14px; min-height:40px; font-size:14px; font-weight:500; color:var(--ink-2); cursor:pointer; white-space:nowrap; }
.seg button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgb(34 27 28 / .12); }
.search{ position:relative; }
.search input{ padding-inline-start:40px; }
.search svg{ position:absolute; inset-inline-start:12px; top:50%; translate:0 -50%; color:var(--ink-3); pointer-events:none; }

/* people list (replies, guests) */
.people{ list-style:none; margin:0; padding:0; }
.people li{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:4px 14px; align-items:center; padding:14px 2px; border-top:1px solid var(--rule-2); }
.people li:first-child{ border-top:0; }
.people b{ font-weight:600; overflow-wrap:anywhere; }
.people .meta{ grid-column:1; display:flex; gap:6px 14px; flex-wrap:wrap; color:var(--ink-3); font-size:13.5px; }
.people .side-val{ grid-row:1 / span 2; grid-column:2; text-align:end; display:grid; gap:4px; justify-items:end; }

/* the send card */
.queue{ background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:24px; display:grid; gap:18px; }
.queue .who{ display:grid; gap:2px; }
.queue .who small{ color:var(--ink-3); font-size:14px; }
.queue .who b{ font-size:26px; font-weight:600; line-height:1.25; }
.queue .acts{ display:flex; gap:10px; flex-wrap:wrap; }
.queue .acts .btn.wa{ flex:1 1 220px; min-height:54px; font-size:16px; }
.queue .count{ color:var(--ink-2); font-size:14px; font-variant-numeric:tabular-nums; }
.swap{ animation:swap .38s cubic-bezier(.32,.72,0,1) both; }
@keyframes swap{ from{ opacity:0; transform:translateX(-18px); } }
html[dir="rtl"] .swap{ animation-name:swap-rtl; }
@keyframes swap-rtl{ from{ opacity:0; transform:translateX(18px); } }

/* empty and finished states */
.state{ text-align:center; display:grid; gap:8px; justify-items:center; padding:40px 20px; background:var(--paper); border:1px dashed #D6CFCA; border-radius:16px; }
.state h2{ font-size:20px; }
.state p{ color:var(--ink-2); max-width:44ch; }
.state .btn{ margin-top:6px; }
.state.done{ border-style:solid; border-color:#CFE0D0; background:var(--ok-bg); }

/* row "more" menu */
.menu{ position:relative; }
.menu > button{ width:40px; height:40px; border-radius:10px; border:0; background:none; display:grid; place-items:center; color:var(--ink-2); cursor:pointer; }
.menu > button:hover{ background:var(--rule-2); }
.menu [role="menu"]{ position:absolute; inset-inline-end:0; top:calc(100% + 4px); min-width:190px; background:#fff; border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 12px 32px rgb(34 27 28 / .14); padding:6px; display:none; z-index:6; transform-origin:top right; }
html[dir="rtl"] .menu [role="menu"]{ transform-origin:top left; }
.menu.open [role="menu"]{ display:grid; animation:pop .16s cubic-bezier(.32,.72,0,1) both; }
.menu [role="menuitem"]{ text-align:start; border:0; background:none; padding:10px 12px; border-radius:8px; font-size:14.5px; cursor:pointer; color:var(--ink); text-decoration:none; display:block; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible{ background:var(--rule-2); }
.menu [role="menuitem"].danger{ color:var(--no); }
@media (prefers-reduced-motion: reduce){ .swap, .menu.open [role="menu"]{ animation:none; } }

/* the send bar on the guest list: the next step, one tap away */
.sendbar{ position:sticky; bottom:16px; z-index:4; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--kohl); color:#F2EDEA; border-radius:14px; padding:12px 12px 12px 16px; box-shadow:0 14px 34px rgb(34 27 28 / .28);
  animation:rise .4s cubic-bezier(.32,.72,0,1) both; }
html[dir="rtl"] .sendbar{ padding:12px 16px 12px 12px; }
.sendbar span{ font-weight:500; }
.sendbar .btn{ background:var(--candle); color:var(--kohl); }
.sendbar .btn:hover{ background:#F0BE5F; }
@media (prefers-reduced-motion: reduce){ .sendbar{ animation:none; } }