/* Kindly — paper, sage and gold foil, taken from the host's own invitation.
   Layout: a quiet host workspace (header + wide column) and a guest page where the design is the hero. */
:root {
  --paper: #fbfaf6;
  --card: #ffffff;
  --ink: #2c2b27;
  --ink-soft: #6b6a63;
  --line: #e6e1d5;
  --sage: #5f7360;
  --sage-deep: #44564a;
  --sage-wash: #e9eee6;
  --gold: #b88a4a;
  --gold-soft: #efe2cb;
  --bronze: #95602f;
  --yes: #4f7a52;
  --yes-wash: #e6efe3;
  --maybe: #a5772e;
  --maybe-wash: #f6ecd9;
  --no: #9a4f45;
  --no-wash: #f4e4e0;
  --pending: #75736b;
  --pending-wash: #efede7;
  --focus: #b88a4a;

  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-ui: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --r-sm: 6px;
  --r-md: 10px;
  --shadow-paper: 0 1px 2px rgba(60, 50, 30, .06), 0 12px 32px -12px rgba(60, 50, 30, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--sage-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0; text-wrap: balance; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-script { font-family: var(--font-script); font-size: 34px; line-height: 1; color: var(--bronze); }
.brand-caps { font-size: 11px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.topbar-right .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Buttons & fields ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font-size: 14px; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { border-color: var(--sage); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--sage-deep); border-color: var(--sage-deep); color: #fff; }
.btn-primary:hover { background: var(--sage); border-color: var(--sage); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--bronze); border-color: var(--bronze); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn-ghost:hover { color: var(--ink); border-color: var(--line); }
.btn-danger { color: var(--no); }
.btn-danger:hover { border-color: var(--no); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-icon { padding: 6px 10px; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
}
.input, .field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 15px; transition: border-color .15s;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.hint { font-size: 13px; color: var(--ink-soft); }
.error { color: var(--no); font-size: 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.check input { margin-top: 3px; accent-color: var(--sage-deep); width: 16px; height: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.panel-pad { padding: 24px; }
@media (max-width: 640px) { .panel-pad { padding: 18px; } }

.eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- Auth ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding-block: 40px; }
.auth-card { width: 100%; max-width: 420px; text-align: center; display: flex; flex-direction: column; gap: 22px; }
.auth-card .brand { justify-content: center; flex-direction: column; align-items: center; gap: 4px; }
.auth-card .brand-script { font-size: 56px; }
.auth-card form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.foil-rule { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: 0; margin: 0; }

/* ---------- Page heads ---------- */
.page { padding-block: 32px 80px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(30px, 4vw, 42px); }
.back { font-size: 13px; color: var(--ink-soft); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.back:hover { color: var(--ink); }

/* ---------- Event cards (home) ---------- */
.events { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.event-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.event-card:hover { box-shadow: var(--shadow-paper); transform: translateY(-2px); }
.event-thumb { aspect-ratio: 4 / 5; background: var(--sage-wash); overflow: hidden; border-bottom: 1px solid var(--line); }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.event-card h3 { font-size: 23px; }
.mini-stats { display: flex; gap: 12px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
.mini-stats b { color: var(--ink); font-weight: 600; }
.empty { text-align: center; padding: 56px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.empty .script { font-family: var(--font-script); font-size: 44px; color: var(--bronze); line-height: 1; }

/* ---------- Manage page ---------- */
.manage-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.manage-top .design { border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-paper); background: var(--sage-wash); }
.manage-top .design img { width: 100%; }
.manage-meta { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.manage-meta h1 { font-size: clamp(30px, 4vw, 44px); }
.meta-line { margin: 0; color: var(--ink-soft); font-size: 15px; }
.meta-line b { color: var(--ink); font-weight: 500; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 700px) {
  .manage-top { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
}

.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.stat { padding: 16px 18px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; background: none; border-top: 0; border-bottom: 0; border-left: 0; text-align: left; cursor: pointer; }
.stat:last-child { border-right: 0; }
.stat:hover { background: var(--paper); }
.stat.active { background: var(--paper); box-shadow: inset 0 -2px 0 var(--gold); }
.stat .n { font-family: var(--font-display); font-size: 34px; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; }
.stat .l { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.stat.headline .n { color: var(--sage-deep); }
.stat .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat:nth-child(3n) { border-right: 0; } .stat:nth-child(-n+3) { border-bottom: 1px solid var(--line); } }

.link-box { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 14px 18px; }
.link-box code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--paper); border: 1px solid var(--line); padding: 6px 10px; border-radius: var(--r-sm); overflow-wrap: anywhere; min-width: 0; flex: 1 1 260px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.search { max-width: 260px; }

.table-wrap { overflow-x: auto; }
table.guests { width: 100%; border-collapse: collapse; min-width: 860px; }
table.guests th { text-align: left; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
table.guests td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
table.guests tr:last-child td { border-bottom: 0; }
table.guests tr:hover td { background: #fdfcf9; }
.g-name { font-weight: 500; }
.g-contact { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.g-note { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); max-width: 260px; }
.g-activity { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.yes { background: var(--yes-wash); color: var(--yes); }
.pill.maybe { background: var(--maybe-wash); color: var(--maybe); }
.pill.no { background: var(--no-wash); color: var(--no); }
.pill.pending { background: var(--pending-wash); color: var(--pending); }
.tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-soft); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }

/* ---------- Modal ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(40, 38, 30, .38); z-index: 50; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); animation: fade .15s ease-out; }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; background: var(--card); border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(30, 30, 20, .4); padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.modal.wide { max-width: 720px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.modal-head h2 { font-size: 28px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.mail-preview { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 14px 16px; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 260px; overflow: auto; }
.progress { height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--gold); transition: width .3s; }
@keyframes fade { from { opacity: 0; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; z-index: 80; box-shadow: 0 10px 30px rgba(0,0,0,.2); animation: fade .2s; max-width: calc(100vw - 32px); }

/* ---------- Editor ---------- */
.editor { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .editor { grid-template-columns: 1fr; } }
.drop { border: 1.5px dashed var(--gold); border-radius: var(--r-md); background: var(--card); aspect-ratio: 4 / 5; display: grid; place-items: center; text-align: center; padding: 20px; cursor: pointer; position: relative; overflow: hidden; transition: background .15s; }
.drop:hover, .drop.over { background: var(--gold-soft); }
.drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--paper); }
.drop .drop-msg { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.drop .drop-msg .script { font-family: var(--font-script); font-size: 36px; color: var(--bronze); }
.editor-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px; }
@media (max-width: 860px) { .editor-side { position: static; } .drop { max-width: 340px; } }
.form-stack { display: flex; flex-direction: column; gap: 22px; }
.section-title { font-family: var(--font-display); font-size: 24px; display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.placeholders { display: flex; flex-wrap: wrap; gap: 6px; }
.placeholders code { font-size: 12px; background: var(--paper); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px; }

/* ---------- Guest invitation ---------- */
.guest-body { background: radial-gradient(1200px 600px at 10% -10%, var(--sage-wash), transparent 60%), radial-gradient(900px 600px at 110% 110%, var(--gold-soft), transparent 55%), var(--paper); min-height: 100vh; }
.invite { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: start; padding-block: 48px 72px; }
@media (max-width: 900px) { .invite { grid-template-columns: 1fr; gap: 28px; padding-block: 20px 56px; } }
.invite-design { position: sticky; top: 32px; }
@media (max-width: 900px) { .invite-design { position: static; } }
.invite-design img { width: 100%; border-radius: 4px; box-shadow: var(--shadow-paper); animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }
.invite-design .no-image { aspect-ratio: 4/5; display: grid; place-items: center; background: var(--card); border: 1px solid var(--gold); border-radius: 4px; padding: 32px; text-align: center; }
.invite-side { display: flex; flex-direction: column; gap: 22px; animation: rise .7s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.greet { font-family: var(--font-script); font-size: clamp(40px, 5vw, 54px); color: var(--bronze); line-height: 1.1; }
.invite-title { font-size: clamp(28px, 3.4vw, 38px); }
.detail-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.detail { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.detail .k { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); padding-top: 3px; }
.detail .v { font-family: var(--font-display); font-size: 20px; line-height: 1.35; }
.detail .v small { display: block; font-family: var(--font-ui); font-size: 13px; color: var(--ink-soft); margin-top: 4px; }
.detail .v a { font-family: var(--font-ui); font-size: 13px; }
.host-message { font-family: var(--font-display); font-size: 20px; line-height: 1.5; font-style: italic; white-space: pre-wrap; }

.rsvp-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: var(--shadow-paper); position: relative; }
.rsvp-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold-soft); border-radius: 10px; pointer-events: none; }
.rsvp-card > * { position: relative; }
.rsvp-card h2 { font-family: var(--font-script); font-size: 46px; font-weight: 400; color: var(--bronze); line-height: 1; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.choices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice { border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-md); padding: 14px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all .15s; }
.choice .big { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.choice .small { font-size: 12px; color: var(--ink-soft); }
.choice:hover { border-color: var(--gold); }
.choice[aria-pressed="true"].c-yes { background: var(--yes-wash); border-color: var(--yes); color: var(--yes); }
.choice[aria-pressed="true"].c-maybe { background: var(--maybe-wash); border-color: var(--maybe); color: var(--maybe); }
.choice[aria-pressed="true"].c-no { background: var(--no-wash); border-color: var(--no); color: var(--no); }
.choice[aria-pressed="true"] .small { color: inherit; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--paper); }
.stepper button { border: 0; background: none; width: 42px; height: 40px; font-size: 20px; cursor: pointer; color: var(--sage-deep); }
.stepper button:disabled { color: var(--line); cursor: default; }
.stepper output { min-width: 40px; text-align: center; font-family: var(--font-display); font-size: 22px; font-variant-numeric: lining-nums; }
.confirm { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 8px; }
.confirm .script { font-family: var(--font-script); font-size: 52px; color: var(--bronze); line-height: 1.05; }
.cal-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.attending { display: flex; flex-wrap: wrap; gap: 6px; }
.attending span { background: var(--sage-wash); color: var(--sage-deep); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.preview-banner { background: var(--gold-soft); color: var(--bronze); font-size: 13px; text-align: center; padding: 8px 16px; }
.guest-foot { text-align: center; font-size: 12px; color: var(--ink-soft); padding-bottom: 32px; letter-spacing: .08em; }
.guest-foot .brand-script { font-size: 22px; }

.center-msg { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.center-msg .script { font-family: var(--font-script); font-size: 54px; color: var(--bronze); }
.spinner { width: 28px; height: 28px; border: 2px solid var(--gold-soft); border-top-color: var(--gold); border-radius: 50%; animation: spin .9s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Guest list helpers ---------- */
.design-empty { aspect-ratio: 4 / 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 12px; border: 1.5px dashed var(--gold); background: var(--card); color: var(--ink-soft); font-size: 13px; text-decoration: none; box-shadow: none; }
.design-empty .script { font-family: var(--font-script); font-size: 30px; color: var(--bronze); line-height: 1; }
.design-empty:hover { background: var(--gold-soft); }
.toolbar-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#send-all { order: 9; }
.filter-note { margin: -12px 0 0; font-size: 14px; color: var(--ink-soft); }
.linkish { background: none; border: 0; padding: 0; color: var(--sage-deep); text-decoration: underline; cursor: pointer; font: inherit; }
.party-m { display: none; }
.g-activity span { display: block; }

/* ---------- Send dialog ---------- */
.send-summary { display: flex; gap: 16px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 18px; }
.send-count { font-family: var(--font-display); font-size: 46px; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
.send-facts { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.send-facts:empty { display: none; }
.send-details summary { cursor: pointer; font-weight: 500; font-size: 14px; color: var(--sage-deep); }
.send-details p { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.modal-foot { align-items: center; }
.foot-gap { flex: 1; }
.confirm-q { margin: 0; flex: 1 1 240px; font-weight: 500; }

/* ---------- Phones ---------- */
@media (max-width: 720px) {
  /* 16px stops iOS Safari zooming into fields */
  input, select, textarea, .input, .field input, .field select, .field textarea { font-size: 16px; }
  .topbar-right .who { display: none; }
  .brand-script { font-size: 30px; }
  .page { padding-block: 20px 64px; gap: 20px; }
  .btn { min-height: 42px; }
  .btn-sm { min-height: 38px; padding: 7px 14px; }

  .manage-top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .manage-meta { gap: 6px; }
  .manage-meta h1 { font-size: 26px; }
  .meta-line { font-size: 14px; }
  .link-box { padding: 12px 14px; }
  .link-box code { flex-basis: 100%; }

  .stat { padding: 12px; }
  .stat .n { font-size: 28px; }
  .stat .l { font-size: 10px; letter-spacing: .1em; }

  .toolbar { flex-direction: column; align-items: stretch; }
  .search { max-width: none; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  #send-all { order: -1; grid-column: 1 / -1; }
  #export { grid-column: 1 / -1; }

  /* Guest list becomes stacked cards */
  .table-wrap { overflow: visible; }
  table.guests { min-width: 0; }
  table.guests thead { display: none; }
  table.guests, table.guests tbody { display: block; }
  table.guests tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px; border-bottom: 1px solid var(--line); }
  table.guests tr:last-child { border-bottom: 0; }
  table.guests td { display: block; padding: 0; border: 0; }
  table.guests tr:hover td { background: none; }
  .c-guest { grid-column: 1; }
  table.guests td.c-reply { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .party-m { display: block; font-size: 12px; color: var(--ink-soft); }
  table.guests td.c-party { display: none; }
  .c-note, .c-activity, .c-actions { grid-column: 1 / -1; }
  table.guests td.c-note:empty { display: none; }
  .g-note { max-width: none; }
  .g-activity { white-space: normal; }
  .g-activity span { display: inline; }
  .g-activity span + span::before { content: " · "; }
  .row-actions { justify-content: flex-start; flex-wrap: wrap; }
  .row-actions .btn { flex: 1 1 auto; }

  /* Dialogs open as bottom sheets */
  .modal-back { place-items: end stretch; padding: 0; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; max-height: 92dvh; overscroll-behavior: contain;
    padding: 22px max(18px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    animation: sheet .22s ease-out; }
  .modal.wide { max-width: none; }
  .modal-head h2 { font-size: 24px; }
  .modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .modal-foot .btn { width: 100%; margin: 0 !important; }
  .foot-gap { display: none; }
  .confirm-q { order: 9; flex: none; text-align: center; }
  .send-count { font-size: 38px; }
}
@keyframes sheet { from { transform: translateY(28px); opacity: 0; } }

/* Dialog buttons stay reachable while the dialog body scrolls */
.modal-foot { position: sticky; bottom: -26px; margin-bottom: -26px; padding: 14px 0 26px; background: var(--card); z-index: 1; }
/* Floating RSVP button for guests on phones */
.rsvp-jump { display: none; }
@media (max-width: 900px) {
  .rsvp-jump { display: block; position: fixed; z-index: 30; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)); text-align: center; padding: 15px; border-radius: 999px; background: var(--sage-deep); color: #fff;
    font-weight: 500; text-decoration: none; box-shadow: 0 10px 30px -8px rgba(40, 50, 40, .5); transition: opacity .2s, transform .2s; }
  .rsvp-jump.away { opacity: 0; transform: translateY(16px); pointer-events: none; }
  .guest-foot { padding-bottom: 96px; }
}
@media (max-width: 720px) {
  .modal-foot { bottom: calc(-22px - env(safe-area-inset-bottom, 0px)); margin-bottom: calc(-22px - env(safe-area-inset-bottom, 0px));
    padding: 12px 0 calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -1px 0 var(--line); }
}

.share-self { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 16px; }
.share-row { display: flex; gap: 8px; }
.share-row .input { flex: 1; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--paper); }
@media (max-width: 720px) { .share-row { flex-wrap: wrap; } .share-row .input { flex-basis: 100%; } .share-row .btn { flex: 1; } }

/* ---------- Accounts & co-hosts ---------- */
.auth-card .brand { text-decoration: none; }
.auth-title { font-size: 30px; text-align: center; }
.auth-note { margin: 0; padding: 12px 14px; background: var(--sage-wash); color: var(--sage-deep); border-radius: var(--r-sm); font-size: 14px; text-align: left; }
.auth-link { align-self: center; font-size: 14px; }
.join-head { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.cohosts { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.cohost-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cohost-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cohost-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cohost-list li:first-child { border-top: 0; }
.ch-name { flex: 1 1 200px; min-width: 0; font-weight: 500; }
.ch-email { display: block; font-weight: 400; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.ch-role { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.ch-actions { display: flex; gap: 6px; }
.cohost-badge { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sage-deep); background: var(--sage-wash); padding: 6px 12px; border-radius: 999px; align-self: center; }
.g-by { font-size: 12px; color: var(--gold); margin-top: 4px; }
.toolbar-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.who-select { width: auto; }
@media (max-width: 720px) {
  .toolbar-filters { display: grid; grid-template-columns: 1fr; }
  .who-select { width: 100%; }
  .ch-actions { width: 100%; }
  .ch-actions .btn { flex: 1; }
}

/* ---------- Questions, guestbook, QR, delivery ---------- */
.q-list { display: flex; flex-direction: column; gap: 12px; }
.q-item { border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.q-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.q-row .input { width: auto; min-width: 0; }
.q-flags { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 720px) { .q-row { grid-template-columns: 1fr 1fr; } .q-row .q-label { grid-column: 1 / -1; } }
.g-ans { font-size: 13px; color: var(--ink); margin-top: 4px; }
.g-ans span { color: var(--ink-soft); }
.g-activity .bad, .bad { color: var(--no); font-weight: 500; }
.answers { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; text-align: left; font-size: 14px; }
.answers dt { color: var(--ink-soft); }
.answers dd { margin: 0; }
.qr-box { display: grid; place-items: center; padding: 8px; }
.qr-box svg { width: min(280px, 70vw); height: auto; display: block; }
.guestbook { display: flex; flex-direction: column; gap: 14px; }
.gb-head { display: flex; align-items: baseline; gap: 10px; }
.gb-title { font-family: var(--font-script); font-weight: 400; font-size: 40px; color: var(--bronze); line-height: 1; }
.gb-form { display: flex; flex-direction: column; gap: 8px; }
.gb-form textarea { width: 100%; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px; resize: vertical; }
.gb-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.gb-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.gb-list li { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.gb-list li.is-hidden { opacity: .55; }
.gb-list li .btn { align-self: flex-start; }
.gb-msg { margin: 0; font-family: var(--font-display); font-size: 18px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.gb-by { font-size: 12px; color: var(--ink-soft); }
.gb-empty { background: none !important; border-style: dashed !important; font-size: 14px; }
.gb-admin { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 720px) { .gb-form textarea { font-size: 16px; } }

/* ---------- Envelope ---------- */
.envelope-overlay { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(900px 520px at 50% 8%, var(--sage-wash), transparent 70%), radial-gradient(700px 500px at 50% 110%, var(--gold-soft), transparent 65%), var(--paper);
  animation: envFadeIn .5s ease both; }
@keyframes envFadeIn { from { opacity: 0; } }
.env-stage { animation: envFloat 4.5s ease-in-out .8s infinite; }
.envelope-overlay.opening .env-stage { animation-play-state: paused; }
@keyframes envFloat { 50% { transform: translateY(-8px) rotate(-.6deg); } }
.envelope { position: relative; display: block; width: min(300px, 70vw, 44vh); aspect-ratio: .82; border: 0; padding: 0; background: none; cursor: pointer;
  perspective: 1100px; filter: drop-shadow(0 22px 28px rgba(60, 50, 30, .22)); animation: envDrop .9s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes envDrop { from { opacity: 0; transform: translateY(-40px) scale(.94) rotate(-3deg); } }
.envelope:focus-visible { outline-offset: 10px; border-radius: 8px; }
.envelope > span { position: absolute; display: block; }
.envelope > .env-seal, .envelope > .env-card { display: grid; place-items: center; }
.env-back { inset: 0; background: linear-gradient(180deg, #c3cfbc, #b7c4af); border-radius: 6px; z-index: 1; }
.env-card { left: 6%; right: 6%; top: 5%; height: 90%; background: #fff; border-radius: 3px; z-index: 2; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 2px 10px rgba(60, 50, 30, .15); }
.env-card img, .env-flying img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.env-card-text { font-family: var(--font-display); font-size: 20px; padding: 16px; text-align: center; color: var(--ink); }
.env-front { inset: 0; z-index: 3; border-radius: 6px; background: linear-gradient(165deg, #e6ede1 0%, #d9e2d3 100%);
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%); }
.env-flap { left: 0; right: 0; top: 0; height: 53%; z-index: 4; transform-origin: 50% 0; background: linear-gradient(180deg, #d5dece, #c8d3c1);
  clip-path: polygon(0 0, 100% 0, 50% 100%); }
.env-flap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #ead7b4, rgba(234, 215, 180, 0) 85%); clip-path: polygon(5% 0, 95% 0, 50% 90%);
  opacity: 0; transition: opacity .25s ease .3s; }
.envelope-overlay.opening .env-flap::after { opacity: 1; } /* the gold lining shows once the flap turns over */
.env-seal { left: 50%; top: 51%; z-index: 5; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 34% 30%, #a0612b 0%, #74401a 55%, #5a2f12 100%);
  box-shadow: 0 3px 8px rgba(60, 30, 10, .45), inset 0 0 0 4px rgba(255, 220, 170, .12), inset 0 -3px 6px rgba(0, 0, 0, .25);
  animation: sealGlow 2.6s ease-in-out 1s infinite; }
.env-seal span { font-family: var(--font-script); font-size: 27px; line-height: 1; color: #f6e2bd; text-shadow: 0 1px 1px rgba(0, 0, 0, .55), 0 0 1px rgba(0, 0, 0, .4); padding-top: 4px; }
@keyframes sealGlow { 50% { box-shadow: 0 3px 8px rgba(60, 30, 10, .45), 0 0 0 7px rgba(184, 138, 74, .16), inset 0 0 0 4px rgba(255, 220, 170, .12), inset 0 -3px 6px rgba(0, 0, 0, .25); } }
.env-to { margin: 18px 0 0; font-family: var(--font-display); font-size: 23px; color: var(--ink); text-align: center; animation: envFadeIn .8s ease .5s both; }
.env-hint { margin: 0; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-soft); animation: envFadeIn .8s ease .8s both, pulse 2.2s ease-in-out 1.6s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.env-flying { position: fixed; z-index: 101; overflow: hidden; background: #fff; border-radius: 3px; box-shadow: 0 1px 2px rgba(60, 50, 30, .06), 0 18px 40px -14px rgba(60, 50, 30, .3);
  display: grid; place-items: center; pointer-events: none; }
.pre-reveal .invite-side { animation: none; opacity: 0; }
body.env-active .rsvp-jump { opacity: 0; pointer-events: none; }
.rsvp-jump { transition: opacity .5s ease, transform .2s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}