/*
 * Guest pages (each list on its own host) — design system per docs/design.md §3–5 and §9 (redesigned in 15.8).
 *
 * Plain CSS, mobile-first, no build step, no framework. Every color, size and duration is a token on :root (light,
 * the landing's paper and ink) and redefined for dark mode (green graphite) below; components only use tokens.
 * No CSS nesting and no :has(): guests arrive on older phones and in in-app browsers (WhatsApp, Instagram).
 * Everything must read and work without JS and without images.
 *
 * Fonts: Instrument Sans for everything (variable wght 400–700, wdth 75–100), Fraunces only in the wordmark (and the
 * landing's display lines). Self-hosted from app/assets/fonts (@fontsource-variable/* 5.3.0; SIL OFL 1.1, see
 * app/assets/fonts/OFL-*.txt), latin + latin-ext subsets; latin-ext only downloads when a page uses it (unicode-range).
 * landing.css loads after this file and reuses its base, tokens, .button, .icon and the cup.
 */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url("/assets/instrument-sans-latin-standard-normal-a8631a51.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  src: url("/assets/instrument-sans-latin-ext-standard-normal-328e2b6e.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fraunces-latin-wght-normal-0f433db6.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fraunces-latin-ext-wght-normal-25d26e47.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Arial resized to Instrument Sans' metrics (wdth 100), so the swap from the fallback barely moves the layout. */
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial");
  size-adjust: 102%;
  ascent-override: 95%;
  descent-override: 24.5%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  /* Color (docs/design.md §3, web). *-strong: the accent/gold as small text, where the base tone misses AA. */
  --bg: #fffcf7;            /* paper */
  --surface: #ffffff;       /* cards, sheets */
  --surface-muted: #f7f0e6; /* mist: inputs' prefixes, quiet fills */
  --border: #ebe2d5;        /* hairlines */
  --border-strong: #d6cabb; /* card edges */
  --border-input: #8f8274;  /* field and radio edges: ≥ 3:1 (WCAG 1.4.11) on paper and surface */
  --text: #1f2d25;          /* forest ink */
  --text-muted: #5a665e;    /* 5.9:1 on paper */
  --primary: #3f6b4e;       /* matcha */
  --primary-pressed: #325840;
  --on-primary: #ffffff;
  --primary-soft: #e6efe5;  /* leaf: selected states, the RSVP card */
  --accent: #c8664a;        /* terracotta: the heart, decorative */
  --accent-strong: #a34a30;
  --accent-soft: #f7e3db;
  --gold: #d9a441;          /* honey: progress */
  --gold-strong: #7a5a14;
  --gold-soft: #f6e7c4;
  --success: #2f7d4f;
  --danger: #b3261e;
  --danger-soft: #fbe4e2;

  /* Soft fills behind the invitation and the gifts without a photo (by position). */
  --tint-1: #e3ecdf; /* sage */
  --tint-2: #f6e4da; /* blush */
  --tint-3: #f6ead0; /* honey */
  --tint-4: #efe6d8; /* sand */
  --tint-icon: #6f6355;
  /* Behind photos and clay renders (their backgrounds are cream). */
  --media: #fbf7f1;
  /* Behind the Pix QR code: banking apps read dark modules on white, in both themes. */
  --qr-surface: #ffffff;

  /* Type (§4): one family; Fraunces only draws the wordmark (and the landing's display lines). */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Instrument Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --text-display: 2.125rem; /* 34 */
  --text-title: 1.75rem;    /* 28 */
  --text-heading: 1.25rem;  /* 20 */
  --text-body-lg: 1.0625rem;/* 17 */
  --text-body: 1rem;        /* 16 */
  --text-small: 0.9375rem;  /* 15 */
  --text-caption: 0.8125rem;/* 13 */

  /* Space (§5): 4 · 8 · 12 · 16 · 20 · 24 · 32 · 48 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --gutter: 1.25rem;

  /* Radius */
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  /* Elevation: borders + soft ink shadows, never hard black. */
  --shadow-1: 0 1px 2px rgba(31, 45, 37, 0.06), 0 6px 16px -10px rgba(31, 45, 37, 0.25);
  --shadow-sheet: 0 -12px 40px -16px rgba(31, 45, 37, 0.35);
  --shadow-button: 0 10px 20px -12px rgba(63, 107, 78, 0.7);
  --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary);

  /* Motion */
  --duration: 160ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --touch: 2.75rem;    /* 44px minimum target */
  --button-h: 3.25rem; /* 52px primary buttons */
  --page-max: 42rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #1c2420;
    --surface: #232d28;
    --surface-muted: #2a3730;
    --border: #34413a;
    --border-strong: #46554c;
    --border-input: #84928a;
    --text: #f3efe7;
    --text-muted: #bcc5be;
    --primary: #9fcfac;
    --primary-pressed: #b4dcbf;
    --on-primary: #13261c;
    --primary-soft: #2c3d33;
    --accent: #e08a70;
    --accent-strong: #eba58f;
    --accent-soft: #3d2a24;
    --gold: #e3b45e;
    --gold-strong: #e8c27a;
    --gold-soft: #3a3424;
    --success: #8fd0a2;
    --danger: #f2b8b5;
    --danger-soft: #3d2522;

    --tint-1: #2d3a32;
    --tint-2: #3a2f2a;
    --tint-3: #39342a;
    --tint-4: #33302a;
    --tint-icon: #bcc5be;
    --media: #2a3730;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sheet: 0 -12px 40px -16px rgba(0, 0, 0, 0.8);
    --shadow-button: none;
  }
}

/* The same, chosen in Conta → Aparência (the studio's <html data-theme>). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1c2420;
  --surface: #232d28;
  --surface-muted: #2a3730;
  --border: #34413a;
  --border-strong: #46554c;
  --border-input: #84928a;
  --text: #f3efe7;
  --text-muted: #bcc5be;
  --primary: #9fcfac;
  --primary-pressed: #b4dcbf;
  --on-primary: #13261c;
  --primary-soft: #2c3d33;
  --accent: #e08a70;
  --accent-strong: #eba58f;
  --accent-soft: #3d2a24;
  --gold: #e3b45e;
  --gold-strong: #e8c27a;
  --gold-soft: #3a3424;
  --success: #8fd0a2;
  --danger: #f2b8b5;
  --danger-soft: #3d2522;

  --tint-1: #2d3a32;
  --tint-2: #3a2f2a;
  --tint-3: #39342a;
  --tint-4: #33302a;
  --tint-icon: #bcc5be;
  --media: #2a3730;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sheet: 0 -12px 40px -16px rgba(0, 0, 0, 0.8);
  --shadow-button: none;
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Room for the sticky pay area: a focused field never ends up hidden behind it. */
html {
  scroll-padding-bottom: 10rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.guest {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

a {
  color: var(--primary);
  text-underline-offset: 0.18em;
}

[hidden] {
  display: none !important;
}

/* Skip link: hidden until focused by keyboard, then a pill in the top-left corner. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
  transform: translate(0, -200%);
}

.skip-link:focus {
  transform: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus: always visible for keyboards. Old browsers without :focus-visible drop the second rule and keep the ring. */
a:focus,
button:focus,
input:focus,
textarea:focus,
summary:focus {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
summary:focus:not(:focus-visible) {
  outline: none;
}

/* Headings that only take focus from script (a sheet's title, a confirmation) never show a ring. */
[tabindex="-1"]:focus {
  outline: none;
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}

.nowrap {
  white-space: nowrap;
}

.money,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */

.site-header {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--page-max);
  min-height: 3.5rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--touch);
  color: var(--primary);
  line-height: 1;
}

.brand__word {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand__mark {
  width: 1.875rem;
  height: 1.875rem;
  fill: currentColor;
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-12);
}

.site-footer {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter) var(--space-8);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.brand--small {
  color: var(--text-muted);
}

.brand--small .brand__word {
  font-size: 1.0625rem;
}

.brand--small .brand__mark {
  width: 1.5rem;
  height: 1.5rem;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.site-footer__contact {
  margin-top: var(--space-3);
}

/* Quiet but a full target: the report link must always be easy to reach (trust-and-safety §3). */
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-link:hover {
  color: var(--text);
}

/* ---------- Buttons and links ---------- */

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--button-h);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font: inherit;
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none; /* links styled as buttons (the no-JS paths) */
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition: background-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
  touch-action: manipulation;
}

.button--block {
  width: 100%;
}

.button:hover {
  background: var(--primary-pressed);
}

.button:active {
  transform: scale(0.985);
}

.button:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

.button:focus:not(:focus-visible) {
  box-shadow: var(--shadow-button);
}

.button:disabled {
  cursor: not-allowed;
  transform: none;
  background: var(--surface-muted);
  color: var(--text-muted);
  box-shadow: none;
}

.button .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.button--small {
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-small);
}

.button--secondary,
.button--secondary:focus:not(:focus-visible) {
  background: var(--surface);
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}

.button--secondary:hover {
  background: var(--surface-muted);
}

.button--secondary:focus {
  box-shadow: inset 0 0 0 1.5px var(--border-strong), var(--focus-ring);
}

.button[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}

.link-button,
.text-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-muted);
  color: var(--text);
  cursor: pointer;
}

.icon-button:hover {
  background: var(--border);
}

.icon-button--plain {
  background: transparent;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: 0 var(--space-3);
  color: var(--text-muted);
  font-weight: 500;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem 0.375rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}

.chip .icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}

.chip--accent {
  background: var(--primary-soft);
  color: var(--primary);
}

.chip--accent .icon {
  color: var(--accent);
  fill: currentColor;
}

.badge {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold-strong);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Notices ---------- */

.notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  color: var(--text);
  font-size: var(--text-small);
}

.notice strong {
  font-weight: 600;
}

.notice .icon {
  margin-top: 0.1em;
  color: var(--text-muted);
}

/* Draft preview (UX review A3): only the creator sees it, through the app's signed preview link. */
.preview-ribbon {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--gold-strong);
  border-radius: var(--radius-card);
  background: var(--gold-soft);
  color: var(--text);
}

.preview-ribbon__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  color: var(--gold-strong);
}

.preview-ribbon__body {
  margin-top: var(--space-1);
  font-size: var(--text-caption);
}

.form-errors {
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--danger-soft);
  color: var(--text);
}

.form-errors p {
  font-weight: 600;
  color: var(--danger);
}

.form-errors ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

/* ---------- The invitation (list page header) ---------- */

.invite {
  padding-top: var(--space-1);
}

.invite__cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 9.25rem;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(120% 90% at 70% 100%, var(--tint-3), transparent 60%), var(--tint-1);
}

/* The event's clay scene, set right of center so the chip has room. */
.invite__scene {
  width: auto;
  height: 8.5rem;
  margin: 0 0 -0.25rem 6rem;
}

/* The creator's cover photo (1200×630). */
.list-cover {
  height: auto;
  aspect-ratio: 1200 / 630;
  background: var(--media);
}

.list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.invite__chip {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  box-shadow: var(--shadow-1);
}

.list-title {
  margin-top: 1.125rem;
  font-size: var(--text-display);
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.invite__host {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: var(--space-3);
}

.invite__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: var(--text-small);
  font-weight: 700;
}

.invite__avatar .icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
}

.list-note {
  min-width: 0;
}

.list-description {
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.list-description + .list-description {
  margin-top: var(--space-2);
}

.list-description strong {
  color: var(--text);
  font-weight: 600;
}

.facts {
  margin: 0.875rem 0 0;
  padding: var(--space-1) 0;
  list-style: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* A fact that wraps keeps its icon on the first line; a long address puts "Abrir no Maps" under it on a phone. */
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.625rem;
  min-height: var(--touch);
  padding: 0.625rem 0;
  font-size: var(--text-small);
}

.fact .icon {
  flex: none;
  margin-top: 0.125rem;
  color: var(--primary);
}

.fact__text {
  flex: 1 1 11rem;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.fact__link {
  flex: none;
  align-self: center;
  margin: -0.625rem 0 -0.625rem auto;
  padding: 0 0 0 var(--space-2);
}

/* ---------- RSVP card ("Você vai?") ---------- */

.rsvp-card {
  margin-top: var(--space-4);
  padding: 0.875rem;
  border-radius: var(--radius-panel);
  background: var(--primary-soft);
}

.rsvp-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-2);
  padding: 0 0.125rem;
}

.rsvp-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.rsvp-card__deadline {
  color: var(--text-muted);
  font-size: 0.875rem;
}

.rsvp-card__answers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: 0.625rem;
}

.rsvp-card__answer-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0 var(--space-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.rsvp-card__answer-link:hover {
  border-color: var(--primary);
}

.rsvp-card__answer-link:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.rsvp-card__answer-link[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.rsvp-card__answer-link .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

.rsvp-card__answer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0 0.125rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
}

.rsvp-card__answer .icon {
  color: var(--primary);
}

.rsvp-card__change {
  margin-left: calc(-1 * var(--space-3) + 0.125rem);
}

.rsvp-count {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.625rem;
  padding: 0 0.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.rsvp-count .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

/* F7's "Para a festa" (guest/lists/_notices, board F7-06): what her games ask of a guest who said Vou or Talvez, on the
   answer tiles' white inside the card; bordered in the RSVP confirmation. */
.rsvp-notices {
  margin-top: 0.625rem;
  padding: 0.75rem 0.875rem 0.8125rem;
  border-radius: 14px;
  background: var(--surface);
}

.rsvp-notices__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
}

.rsvp-notices__title .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

.rsvp-notices__list {
  margin: 0.375rem 0 0;
  padding: 0;
  list-style: none;
}

.rsvp-notices__list li {
  line-height: 1.4;
}

.rsvp-notices__list li + li {
  margin-top: 0.375rem;
  padding-top: 0.375rem;
  border-top: 1px solid var(--border);
}

.rsvp-done .rsvp-notices {
  margin-top: var(--space-4);
  border: 1px solid var(--border);
  text-align: left;
}

/* ---------- Gifts ---------- */

.gifts {
  padding-top: 1.75rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.gifts__intro {
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: var(--text-small);
  line-height: 1.45;
}

.list-recipient {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.625rem;
  font-size: 0.875rem;
}

.list-recipient .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

/* Sugeridos · Menor valor · Maior valor: quiet pills, the current one filled. */
.gift-sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 0.875rem;
}

.gift-sort__option {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.gift-sort__option[aria-current="true"] {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.gift-sort__option:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.gift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}

/* The whole card is one link (one tab stop); its ring follows the media's corners. */
.gift-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
}

.gift-card__link[aria-busy="true"] {
  cursor: progress;
}

.gift-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--media);
}

.gift-card__media--tint-1 { background: var(--tint-1); }
.gift-card__media--tint-2 { background: var(--tint-2); }
.gift-card__media--tint-3 { background: var(--tint-3); }
.gift-card__media--tint-4 { background: var(--tint-4); }

/* A photo covers the tint (its own background is cream). */
.gift-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--media);
}

.gift-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--tint-icon);
}

.gift-card__placeholder .icon {
  width: 38%;
  height: 38%;
  stroke-width: 1.25;
}

.gift-card__add {
  position: absolute;
  right: var(--space-2);
  bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-button);
  transition: background-color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.gift-card__add .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 2.25;
}

.gift-card__link:hover .gift-card__add {
  background: var(--primary-pressed);
  transform: scale(1.06);
}

.gift-card__link[aria-busy="true"] .gift-card__add {
  animation: pulse 1.2s ease-in-out infinite;
}

.gift-card__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0.625rem var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary);
  font-size: var(--text-caption);
  font-weight: 600;
  line-height: 1.2;
}

.gift-card__badge .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--accent);
  stroke-width: 2.25;
}

.gift-card__badge--reserved .icon { color: inherit; }

.gift-card__badge--reserved {
  background: var(--gold-soft);
  color: var(--gold-strong);
}

.gift-card__name {
  display: -webkit-box;
  min-height: 2.6em;
  margin-top: 0.625rem;
  overflow: hidden;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gift-card__price {
  margin-top: 0.125rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gift-card__meter {
  margin-top: 0.375rem;
}

.gift-card__amounts {
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.gift-card--funded .gift-card__image,
.gift-card--funded .gift-card__placeholder {
  opacity: 0.55;
}

/* "Outro valor": a dashed card under the gifts. */
.free-contribution {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding: 1.125rem var(--space-4);
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-panel);
}

.free-contribution__title {
  font-size: 1.125rem;
  font-weight: 600;
}

.free-contribution__body {
  color: var(--text-muted);
  font-size: var(--text-small);
}

.free-contribution .button {
  margin-top: var(--space-3);
}

/* ---------- The mural (F3: the list page's "Recados" and /recados) ---------- */

.wall {
  padding-top: 1.75rem;
}

.wall__posts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}

/* The gift card's surface, hairline and radius; the host's note inside (avatar + .list-note). */
.wall-post {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.wall-post__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  font-size: var(--text-small);
  line-height: 1.45;
}

.wall-post__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.wall-post__day {
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.wall-post .list-description {
  margin-top: 0.125rem;
  white-space: pre-line;
}

.wall-post--clamp .list-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.wall__more {
  margin-top: var(--space-4);
}

/* ---------- Cup progress (docs/design.md §2 motif; the disputed thank-you and the landing) ---------- */

.cup {
  display: flex;
  align-items: center;
  flex: none;
}

.cup svg {
  width: 2.5rem;
  height: 2.5rem;
  overflow: visible;
}

.cup__liquid {
  fill: var(--gold);
}

.cup__body {
  fill: var(--surface-muted);
}

.cup__outline {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cup__steam {
  fill: none;
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linecap: round;
}

.cup--full .cup__outline {
  stroke: var(--accent);
}

/* The liquid rises on load: a small reward (skipped with reduced motion). */
.cup__rise {
  animation: cup-rise 900ms var(--ease-spring) both;
}

.cup__steam {
  animation: cup-steam 2.4s ease-in-out infinite;
}

.cup__steam + .cup__steam {
  animation-delay: 0.6s;
}

@keyframes cup-rise {
  from { transform: translate(0, 100px); }
  to { transform: none; }
}

@keyframes cup-steam {
  0%, 100% { opacity: 0.35; transform: translate(0, 2px); }
  50% { opacity: 1; transform: translate(0, -3px); }
}

/* A gift's progress: a thin bar. */
.meter {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gold);
}

/* ---------- Sheets: a bottom sheet on phones, a centered card on wider screens ---------- */

.sheet {
  width: 100%;
  max-width: 32rem;
  max-height: 92vh;
  margin: auto auto 0;
  padding: var(--space-5) var(--gutter) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: 8rem; /* keeps focused fields clear of the sticky foot */
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow-sheet);
}

.sheet[open] {
  animation: sheet-up 260ms var(--ease-out);
}

/* Grab handle: a visual cue that this is a sheet. */
.sheet::before {
  content: "";
  position: absolute;
  top: var(--space-2);
  left: 50%;
  width: 2.5rem;
  height: 5px;
  margin-left: -1.25rem;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.sheet::backdrop {
  /* Literal on purpose: ::backdrop doesn't inherit :root custom properties before Chrome 122 / Safari 17.4. */
  background: rgba(31, 45, 37, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sheet::backdrop {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* The same, chosen in Conta → Aparência (the studio's <html data-theme>). */
:root[data-theme="dark"] .sheet::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.sheet__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-3);
  z-index: 2;
}

@media (min-width: 40rem) {
  .sheet {
    margin: auto;
    border-radius: var(--radius-sheet);
  }

  .sheet[open] {
    animation-name: dialog-in;
  }

  .sheet::before {
    display: none;
  }
}

@keyframes sheet-up {
  from { transform: translate(0, 40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes dialog-in {
  from { transform: translate(0, 12px) scale(0.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* A sheet's header: the right column is the close button's (it sits on the dialog), so a long title wraps under
   itself. Centered by default; with a lead (a thumbnail), left-aligned next to it. */
.sheet-head {
  display: grid;
  grid-template-columns: var(--touch) minmax(0, 1fr) var(--touch);
  align-items: center;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
}

.sheet-head__title {
  grid-column: 2;
  min-height: var(--touch);
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

.sheet-head__sub {
  display: block;
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
}

.sheet-head--lead {
  grid-template-columns: 3.5rem minmax(0, 1fr) var(--touch);
  align-items: start;
  gap: var(--space-3);
  padding-bottom: 0.875rem;
}

.sheet-head--lead .sheet-head__title {
  font-size: 1.1875rem;
  text-align: left;
}

.sheet-head__lead {
  grid-column: 1;
}

.thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 14px;
  background: var(--tint-1);
  color: var(--tint-icon);
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--media);
}

.thumb__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.thumb--free {
  background: var(--accent-soft);
  color: var(--accent);
}

.thumb--free .icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

/* The sticky foot of a sheet (and of the no-JS form page): full-bleed over the gutter. */
.sheet-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: var(--space-6) calc(-1 * var(--gutter)) 0;
  padding: var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ---------- Choose amount (sheet fragment + its no-JS page) ---------- */

.contribution-page {
  max-width: 32rem;
  margin: 0 auto;
}

.contribution-page__top {
  margin: 0 0 var(--space-2) calc(-1 * var(--space-3));
}

/* Without JS both steps show on the page, the second under a rule; with JS (--steps) one at a time. */
.contribution-step[data-step="details"] {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.contribution-form--steps .contribution-step[data-step="details"] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legend {
  display: block;
  margin: var(--space-6) 0 0.625rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
}

.contribution-form__options .legend {
  margin-top: var(--space-2);
}

/* Choice cards (native radios): a dot, the title and caption, the amount on the right. */
.choices {
  display: grid;
  gap: var(--space-2);
}

.choice {
  position: relative;
}

.choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none; /* the label takes the tap */
}

.choice__card {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.choice__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--border-input);
  border-radius: 50%;
}

.choice__dot::after {
  content: "";
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform var(--duration) var(--ease-out);
}

.choice__text {
  min-width: 0;
}

.choice__title {
  display: block;
  font-weight: 600;
  line-height: 1.3;
}

.choice__caption {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}

.choice__amount {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.choice__input:checked + .choice__card {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.choice__input:checked + .choice__card .choice__dot {
  border-color: var(--primary);
}

.choice__input:checked + .choice__card .choice__dot::after {
  transform: scale(1);
}

.choice__input:focus + .choice__card {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.choice__input:focus:not(:focus-visible) + .choice__card {
  outline: none;
}

.choice__input:disabled + .choice__card {
  cursor: not-allowed;
  border-style: dashed;
  background: transparent;
  color: var(--text-muted);
}

.choice__reason {
  margin: var(--space-1) var(--space-4) 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
}

/* The method cards: two side by side, Pix first; the totals come with JS from the live quote. */
.methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.choice--method .choice__card {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 0.125rem;
  padding: 0.875rem;
}

.method__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1) 0.375rem;
}

.method__name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-weight: 600;
}

.method__name .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

.method__total {
  margin-top: var(--space-2);
  font-size: var(--text-heading);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.method__fee {
  color: var(--text-muted);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* The amount field: big, with the R$ inside. */
.contribution-form__amount {
  margin-top: 0.625rem;
}

.contribution-form__methods {
  margin-top: 1.25rem;
}

.contribution-form__amount--free {
  margin-top: var(--space-2);
}

.contribution-form__amount .field__hint {
  margin-bottom: var(--space-2);
}

.money-input {
  position: relative;
}

.money-input__prefix {
  position: absolute;
  top: 50%;
  left: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-heading);
  font-weight: 600;
  transform: translate(0, -50%);
  pointer-events: none;
}

.input.money-input__input {
  min-height: 3.5rem;
  margin-top: 0;
  padding-left: 3.25rem;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The quote: without JS (or without Pix) the server's lines and "Ver valores"; with the method cards it's only
   announced (visually hidden by contribution_controller.js). */
.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
  font-size: var(--text-small);
  text-align: center;
}

.quote__body {
  width: 100%;
}

.quote__lines {
  display: grid;
  gap: var(--space-1);
}

.quote__money {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.quote__prompt {
  color: var(--text-muted);
}

.quote__refusal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--danger);
  font-weight: 600;
}

.quote__refusal .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Disclosures ("O que é a taxa?", the recado, the QR): a quiet text action. */
.more {
  margin-top: var(--space-3);
}

.more__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--touch);
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}

.more__summary::-webkit-details-marker {
  display: none;
}

.more__summary .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.more__icon {
  transition: transform var(--duration) var(--ease-out);
}

.more[open] .more__icon {
  transform: rotate(180deg);
}

.more__body {
  padding: var(--space-1) 0 0.375rem;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.more__body p + p {
  margin-top: var(--space-2);
}

.more__body strong {
  color: var(--text);
}

.message-toggle .field {
  margin-top: var(--space-1);
}

/* A consent checkbox after a form's field (F3: "Mostrar meu nome e recado no mural da lista"), never pre-ticked. */
.check {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-top: var(--space-3);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}

.check__input {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--primary);
}

.check__hint {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--text-caption);
}

.check[hidden] {
  display: none;
}

/* Step 2's header: a way back, then "Seus dados" (room on the right for the close button). */
.step-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch);
  padding-right: 3.5rem;
}

.step-head__back {
  margin-left: calc(-1 * var(--space-3));
}

.step-head__title {
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* The gift with the chosen share and amount, at the top of step 2. */
.gift-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.gift-line .thumb {
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--radius-input);
}

.gift-line__text {
  flex: 1;
  min-width: 0;
}

.gift-line__name {
  display: block;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.gift-line__share {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.gift-line__amount {
  flex: none;
  font-size: var(--text-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* What she pays, for the chosen method (JS only). */
.summary {
  margin-top: var(--space-6);
  padding: 0.875rem var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-muted);
}

.summary__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.375rem 0; /* no column gap: the total's rule runs across both cells */
  font-size: var(--text-small);
}

.summary__list dt {
  color: var(--text-muted);
}

.summary__list dd {
  padding-left: var(--space-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.summary__list .summary__total {
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-strong);
  color: var(--text);
  font-size: var(--text-body-lg);
  font-weight: 600;
}

/* The Asaas seal (AsaasSealHelper; docs/payments.md §1): Asaas's own images, never recolored: the positive one on
   light, Asaas's white negative one on dark. `.asaas-seal-row` centers it under a money block. */
.asaas-seal-row {
  display: flex;
  justify-content: center;
  margin-top: var(--space-3);
}

.asaas-seal {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: var(--radius-input);
  line-height: 0;
}

.asaas-seal img {
  display: block;
  width: auto;
  height: 2.5rem;
}

.asaas-seal img.asaas-seal__dark {
  display: none;
}

.asaas-seal:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .asaas-seal img.asaas-seal__light {
    display: none;
  }

  :root:not([data-theme="light"]) .asaas-seal img.asaas-seal__dark {
    display: block;
  }
}

:root[data-theme="dark"] .asaas-seal img.asaas-seal__light {
  display: none;
}

:root[data-theme="dark"] .asaas-seal img.asaas-seal__dark {
  display: block;
}

.trust-line {
  margin-top: 0.625rem;
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-align: center;
  text-wrap: balance;
}

.trust-line .icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: var(--space-1);
  vertical-align: -0.2em;
  color: var(--primary);
}

.contribution-form__soon {
  margin-top: 0.625rem;
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-align: center;
}

/* A closed form: never a dead end (W5). */
.contribution--closed .sheet-head--lead {
  padding-bottom: var(--space-4);
}

.contribution-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.contribution-closed .notice {
  margin: 0;
  text-align: left;
}

.contribution-closed__title {
  font-size: var(--text-heading);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

.contribution-closed__body {
  color: var(--text-muted);
}

.contribution-closed__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 20rem;
  margin-top: var(--space-3);
  padding-bottom: var(--space-6);
}

/* ---------- Fields ---------- */

.field {
  margin-top: 1.125rem;
}

.field label,
.field__label {
  display: block;
  font-weight: 600;
}

.field__hint {
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.4;
}

.input,
.report-form textarea {
  display: block;
  width: 100%;
  min-height: var(--button-h);
  margin-top: var(--space-2);
  padding: 0 0.875rem;
  border: 1.5px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-body-lg); /* ≥ 16px, so iOS doesn't zoom into the field */
  transition: border-color var(--duration) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

textarea.input,
.report-form textarea {
  min-height: 5.5rem;
  padding: var(--space-3) 0.875rem;
  line-height: 1.45;
  resize: vertical;
}

.input::placeholder,
.report-form textarea::placeholder {
  color: var(--text-muted);
}

.input:focus,
.report-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Errors tied to a field (W1 name, W14 amount): danger-soft, with an icon — never color alone. */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-input);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--text-small);
  font-weight: 600;
}

.field-error .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.1em;
}

.phone-input {
  display: flex;
  align-items: stretch;
  margin-top: var(--space-2);
}

.phone-input__prefix {
  display: flex;
  align-items: center;
  padding: 0 0.875rem;
  border: 1.5px solid var(--border-input);
  border-right: 0;
  border-radius: var(--radius-input) 0 0 var(--radius-input);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.input.phone-input__input {
  min-width: 0;
  margin-top: 0;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}

/* "Quantas pessoas": a number field; with JS, − and + around it. */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.stepper__button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1.5px solid var(--border-input);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.stepper__button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.input.stepper__input {
  width: 5.5rem;
  margin-top: 0;
  padding: 0 var(--space-2);
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* ---------- RSVP form, confirmation and pages ---------- */

.rsvp-panel {
  padding-bottom: var(--space-6);
}

.rsvp-panel .notice,
.rsvp-panel__errors {
  margin: var(--space-2) 0 0;
}

.rsvp-page {
  max-width: 32rem;
}

.rsvp-form {
  margin-top: var(--space-2);
}

.rsvp-form__legend {
  display: block;
  margin-bottom: 0.625rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
}

/* Vou · Talvez · Não vou: three equal segments (native radios). */
.segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.segment {
  position: relative;
}

.segment__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none; /* the label takes the tap */
}

.segment__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 4.5rem;
  padding: 0.625rem 0.375rem;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out);
}

.segment__icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--primary);
}

.segment__input:checked + .segment__label {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.segment__input:focus + .segment__label {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.segment__input:focus:not(:focus-visible) + .segment__label {
  outline: none;
}

.rsvp-form .button {
  margin-top: var(--space-6);
}

/* The confirmation: a check (the cup means money), the event and the hand-off to the gifts. */
.rsvp-done {
  margin-bottom: var(--space-4);
  padding: var(--space-6) var(--space-4) var(--space-5);
  border-radius: var(--radius-panel);
  background: var(--primary-soft);
  text-align: center;
}

.rsvp-dialog .rsvp-done,
.rsvp-page .rsvp-done {
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
  background: transparent;
}

.rsvp-done__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.rsvp-done__art .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 2.25;
}

.rsvp-done__title {
  font-size: var(--text-title);
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.rsvp-done__body,
.rsvp-done__note {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.rsvp-event {
  margin-top: var(--space-4);
}

.rsvp-event__line {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.rsvp-event__line .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--primary);
}

.rsvp-event__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rsvp-event__hint {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-align: left;
}

.rsvp-event__hint .icon {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1em;
}

.rsvp-handoff {
  max-width: 22rem;
  margin: var(--space-5) auto 0;
}

.rsvp-handoff__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.rsvp-handoff__title .icon {
  color: var(--accent);
}

/* ---------- Palpites (F4, docs/product-spec.md §4.1): the list page's section, /palpites, /palpites/todos ----------
   Built from the page's own parts: the invite cover's shape around a clay scene, the gift card's words and honey bar
   for the teams, the RSVP card and its confirmation, the host avatar's initial for the people. */

.guesses {
  padding-top: 2.25rem;
}

.guess-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 9.25rem;
  margin-top: 1.125rem;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(120% 90% at 70% 100%, var(--tint-3), transparent 60%), var(--tint-2);
}

.guess-cover--sage {
  background: radial-gradient(120% 90% at 70% 100%, var(--tint-3), transparent 60%), var(--tint-1);
}

.guess-cover__art {
  width: auto;
  height: 7.75rem;
  margin: 0 0 0.625rem 6rem;
}

.guess-cover__art--wide {
  height: 6.5rem;
  margin-bottom: 0.875rem;
}

.guess-cover .chip {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  box-shadow: var(--shadow-1);
}

/* The two teams (and the bolão's counts) in two columns. */
.teams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-3);
  margin: 1.125rem 0 0;
  padding: 0;
  list-style: none;
}

.team {
  min-width: 0;
}

.team__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.3;
}

.team__name .icon {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  stroke-width: 2.5;
}

.team__count {
  margin-top: 0.125rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.team--won .team__count {
  color: var(--primary);
}

.team .meter {
  margin-top: 0.375rem;
}

.team__names {
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.guesses .rsvp-card {
  margin-top: var(--space-6);
}

.guesses .rsvp-done {
  margin: 1.125rem 0 0;
  padding: var(--space-5) var(--space-4);
}

.guesses .rsvp-done__body,
.guesses-all .rsvp-done__body {
  text-wrap: balance;
}

.rsvp-card__answers--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rsvp-card__answers--one {
  grid-template-columns: 1fr;
}

.guess-ended {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.625rem;
  padding: 0 0.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.guess-ended .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--primary);
}

/* The podiums and every guess: rows of people (place, initial, name, what was guessed). */
.podiums {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.podium__title {
  font-size: var(--text-small);
  font-weight: 600;
}

.people {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-4);
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.person {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.5rem;
  padding: 0.625rem 0;
}

.person + .person {
  border-top: 1px solid var(--border);
}

.person__place {
  flex: none;
  width: 1.5rem;
  color: var(--text-muted);
  font-size: var(--text-small);
  font-variant-numeric: tabular-nums;
}

.person__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.person__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.person__name {
  font-weight: 500;
  line-height: 1.3;
}

.person__value {
  color: var(--text-muted);
  font-size: var(--text-caption);
  line-height: 1.4;
}

.person__value--win {
  color: var(--primary);
  font-weight: 600;
}

.guesses .button--secondary {
  margin-top: var(--space-5);
}

/* /palpites: the form in the RSVP page's shell, then "Palpite registrado!" and the board below. */
.segments--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guess-form .field + .field,
.guess-form fieldset + .field,
.guess-form .field + fieldset {
  margin-top: var(--space-5);
}

.guess-form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.guess-form .guess-form__pair .field {
  margin: 0;
}

.guess-form__intro {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.guess-form .trust-line .icon {
  color: var(--text-muted);
}

.guess-mine .rsvp-done__body strong {
  color: var(--text);
  font-weight: 600;
}

.guess-mine .text-link {
  display: inline-block;
  margin-top: var(--space-2);
}

.guess-page .guesses {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.guesses-all .rsvp-done {
  margin: var(--space-4) 0 0;
  padding: var(--space-5) var(--space-4);
}

.guesses-all .people {
  margin-top: var(--space-5);
}

.guesses-all .text-link {
  display: inline-block;
  margin-top: var(--space-4);
}

/* ---------- Fraldas (F6, docs/product-spec.md §4.3): the list page's section and /fraldas ----------
   F4's parts in other words: the cover with a clay pack and how many packs are promised, the sizes as F4's teams (a
   complete one: the check and "Completo 💛" in primary), the RSVP card for the ask; /fraldas in the RSVP page's shell,
   the sizes as segments with what's left, the RSVP stepper, and the confirmation with this browser's pledges. */

.diapers {
  padding-top: 2.25rem;
}

.diapers .guess-cover__art {
  height: 7.25rem;
  margin: 0 0 0.75rem 6rem;
}

.diapers .rsvp-card {
  margin-top: var(--space-6);
}

.team__count--full {
  color: var(--primary);
}

.segments--sizes {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.segments--sizes .segment__label {
  gap: 0.125rem;
}

.segment__hint {
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: 400;
}

.segment__input:checked + .segment__label .segment__hint {
  color: inherit;
  opacity: 0.85;
}

.segment__input:disabled + .segment__label {
  cursor: not-allowed;
  opacity: 0.5;
}

.diaper-form .field + .field,
.diaper-form fieldset + .field {
  margin-top: var(--space-5);
}

.diaper-mine .rsvp-done__body strong {
  color: var(--text);
  font-weight: 600;
}

.pledges {
  margin: var(--space-5) 0 0;
  text-align: left;
}

.pledges__title {
  font-size: var(--text-small);
  font-weight: 600;
}

.pledges .people {
  margin-top: var(--space-2);
}

.pledge__cancel {
  flex: none;
  margin-left: auto;
}

.pledge__cancel button {
  min-height: 2.75rem;
  padding: 0.375rem 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.diaper-mine .text-link {
  display: inline-block;
  margin-top: var(--space-4);
}

.diaper-page .diapers {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* ---------- Pix page (docs/payments.md §6 step 4): copy-and-paste first, the QR behind a disclosure ---------- */

.pix {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-1) 0 var(--space-4);
}

.pix__notice {
  margin-bottom: var(--space-4);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--gold-soft);
  color: var(--gold-strong);
  font-size: 0.875rem;
  font-weight: 600;
}

.status-pill__pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.pix__heading {
  margin-top: 1.125rem;
}

.pix__total {
  margin-top: 0.875rem;
  font-size: 2.75rem;
  font-weight: 600;
  font-stretch: 90%;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.pix__lead {
  margin-top: 0.375rem;
  color: var(--text-muted);
  font-size: var(--text-small);
}

.pix__gift {
  display: block;
}

.pix__validity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: 0.875rem;
  font-size: var(--text-small);
}

.pix__validity .icon {
  color: var(--primary);
}

.pix__code {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.pix__code-label {
  display: block;
  font-size: var(--text-small);
  font-weight: 600;
}

.pix__code-hint {
  margin-top: 0.125rem;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.pix__payload {
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  /* The vertical inset is a border, not padding: a textarea scrolls its text into its padding, which showed half of
     a third line under the two rows. */
  padding: 0 0.875rem;
  border: var(--space-3) solid var(--surface-muted);
  border-right-width: 0;
  border-left-width: 0;
  border-radius: var(--radius-input);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.4;
  word-break: break-all;
  resize: none;
}

.pix__payload:focus {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.pix__copy {
  margin-top: var(--space-3);
}

.pix__steps {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pix-step;
}

.pix__steps li {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  font-size: var(--text-small);
  line-height: 1.4;
  counter-increment: pix-step;
}

.pix__steps li::before {
  content: counter(pix-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 700;
}

.pix__qr-toggle {
  margin-top: var(--space-5);
  padding-top: var(--space-1);
  border-top: 1px solid var(--border);
}

.pix__qr-tile {
  width: 13.5rem;
  margin: var(--space-2) auto var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--qr-surface);
}

.pix__qr {
  width: 12rem;
  height: 12rem;
  image-rendering: pixelated;
}

.pix__waiting {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: 0.875rem;
  text-align: center;
}

.pix__actions {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.pix__cancel {
  display: contents;
}

/* ---------- Status pages (404, 429, sent, expired) ---------- */

.status {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-4);
  text-align: center;
}

.status__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  margin: 0 auto var(--space-6);
  border-radius: 50%;
  background: var(--tint-1);
  color: var(--primary);
}

.status__art .icon {
  width: 3rem;
  height: 3rem;
}

.status--success .status__art {
  background: var(--primary-soft);
}

.page-heading {
  font-size: 1.875rem;
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.status__body {
  margin: var(--space-3) auto 0;
  max-width: 34ch;
  color: var(--text-muted);
}

.status__body strong {
  color: var(--text);
}

.status__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  max-width: 20rem;
  margin: var(--space-8) auto 0;
}

/* ---------- Thank-you: the celebration, the receipt and the app invitation ---------- */

.celebration {
  max-width: 28rem;
  margin: 0 auto;
  padding: var(--space-2) 0 0;
  text-align: center;
}

/* Paid: the clay "gifts" scene (280×132) rises in, then the heart pops above it. Otherwise the full cup in a circle. */
.celebration__art {
  position: relative;
  width: 8.5rem;
  height: 8.5rem;
  margin: var(--space-4) auto var(--space-4);
  padding: 1.75rem;
  border-radius: 50%;
  background: var(--gold-soft);
}

.celebration__art .cup svg {
  width: 5rem;
  height: 5rem;
}

.celebration__art--scene {
  width: 17.5rem;
  max-width: 100%;
  height: 9.75rem;
  margin-top: 0;
  padding: 1.5rem 0 0;
  border-radius: 0;
  background: none;
}

.celebration__scene {
  width: 17.5rem;
  height: auto;
  animation: rise 520ms var(--ease-out) both;
}

.celebration__heart {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.625rem;
  height: 1.625rem;
  color: var(--accent);
  fill: currentColor;
  animation: heart-pop 420ms var(--ease-spring) 1100ms both;
}

.celebration__art--scene .celebration__heart {
  top: 0;
  right: auto;
  left: 71%;
}

@keyframes rise {
  from { transform: translate(0, 8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes heart-pop {
  from { transform: scale(0); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.celebration__title {
  font-size: 2rem;
}

.celebration .status__body em {
  font-style: italic;
}

.celebration .status__actions {
  margin-top: var(--space-6);
}

.receipt {
  max-width: 28rem;
  margin: var(--space-6) auto 0;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.receipt__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-small);
}

.receipt__row:last-child {
  border-bottom: 0;
}

.receipt__row dt {
  flex: none;
  color: var(--text-muted);
}

.receipt__row dd {
  min-width: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.receipt__linked {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 28rem;
  margin: var(--space-3) auto 0;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.receipt__linked .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.125rem;
  color: var(--primary);
}

.thank-you__actions {
  max-width: 28rem;
  margin-top: var(--space-6);
}

/* The creator invitation (thank-you page, a closed list; GR1): her turn, right after her gift. A quiet sand card, one
   left-aligned column: the question in the page heading's condensed voice, one line tied to what she just did, then a
   secondary button sized to its label (the page's one primary stays "Dar outro presente", docs/design.md §1) and the
   text links under it. Stacked at every width, so 320 px never squeezes the text beside the button. */
.app-cta {
  max-width: 28rem;
  margin: var(--space-8) auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-panel);
  background: var(--surface-muted);
  text-align: left;
}

.app-cta__title {
  font-size: var(--text-heading);
  font-weight: 600;
  font-stretch: 85%;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.app-cta__body {
  max-width: 36ch;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-small);
  text-wrap: pretty;
}

.app-cta__button {
  width: fit-content;
  margin-top: var(--space-4);
}

/* "Ou crie pela web" (the web studio) on its own line, under the button. */
.app-cta__web {
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  margin-top: var(--space-1);
  padding-inline: 0;
}

/* "Já tem o app?" (a bule:// link) on its own line. Phones only: on a desktop the scheme opens nothing (or an
   error), so it shows only on touch-first screens (no UA sniffing, no JS). */
.app-cta__open {
  display: none;
  justify-content: flex-start;
  width: fit-content;
  padding-inline: 0;
}

@media (hover: none) and (pointer: coarse) {
  .app-cta__open {
    display: flex;
  }
}

/* ---------- Report ---------- */

.report {
  max-width: 32rem;
  margin: 0 auto;
}

.report__list {
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.report__intro {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--primary-soft);
}

.report__intro .icon {
  color: var(--primary);
}

.report-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-6);
}

.report-form__reasons legend {
  margin-bottom: 0.625rem;
  font-size: var(--text-body-lg);
  font-weight: 600;
}

.report-form__reasons .choice + .choice {
  margin-top: var(--space-2);
}

.report-form .choice__card {
  min-height: var(--button-h);
}

.report-form .choice__title {
  font-weight: 500;
}

.report-form .field {
  margin-top: 0;
}

/* "Excluir conta" on the web (Guest::AccountDeletionsController): the report page's layout. */

.account-deletion__about p + p,
.account-deletion__about ul + p {
  margin-top: var(--space-2);
}

.account-deletion__list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

.account-deletion__heading {
  font-size: var(--text-body);
  font-weight: 600;
}

.account-deletion__resend {
  margin-top: var(--space-5);
  text-align: center;
}

/* Destructive, so outlined in the danger color (readable in light and dark). */
.button--danger,
.button--danger:focus:not(:focus-visible) {
  background: transparent;
  color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}

.button--danger:hover {
  background: var(--danger-soft);
}

/* ---------- Wider screens ---------- */

@media (min-width: 40rem) {
  :root {
    --gutter: 1.5rem;
    --text-display: 2.75rem;
  }

  .invite__cover {
    height: 12rem;
  }

  .invite__scene {
    height: 11rem;
    margin-left: 10rem;
  }

  .list-cover {
    height: auto;
  }

  .gift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
}

/* ---------- The web studio's stage (docs/architecture.md "Web studio") ----------
   Only under .is-studio-preview, the root class of the studio's preview layout (layouts/studio_preview): guests never
   get it. Sizes are the page's own (the stage shows it at ×0.774 on the phone). */

.is-studio-preview {
  --studio-sand: #f1eadf;
  scrollbar-width: none; /* a phone's overlay scrollbar, not the desktop's gutter, inside the stage's frame */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .is-studio-preview {
    --studio-sand: #2a3730;
  }
}

/* The same, chosen in Conta → Aparência (the studio's <html data-theme>). */
:root[data-theme="dark"] .is-studio-preview {
  --studio-sand: #2a3730;
}

/* The ring on what she is editing: the gift card (server-rendered for highlight=, or on hover of its row) and the
   element of a focused field (studio/stage_controller.js). It fades in; reduced motion turns it instant. */
.is-studio-preview [data-gift-id],
.is-studio-preview [data-preview-field] {
  outline: 2.5px solid transparent;
  outline-offset: 5px;
  transition: outline-color var(--duration) var(--ease-out);
}

.is-studio-preview [data-gift-id] {
  position: relative;
  border-radius: 18px;
  outline-offset: 4px;
}

.is-studio-preview .list-title,
.is-studio-preview .invite__host,
.is-studio-preview .fact,
.is-studio-preview .rsvp-card__deadline {
  border-radius: 13px;
}

.is-studio-preview .is-studio-highlight {
  outline-color: var(--primary);
}

.is-studio-preview .studio-editing {
  position: absolute;
  top: -1.0625rem;
  left: -0.1875rem;
  z-index: 2;
  display: none;
  align-items: center;
  height: 1.75rem;
  padding: 0 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
}

.is-studio-preview .is-studio-highlight > .studio-editing {
  display: inline-flex;
}

/* A new list's blanks (W11, W12): the title's pattern (large text: 3:1 is enough), the date's line, empty gift tiles. */
.is-studio-preview .studio-placeholder {
  color: var(--text-muted);
}

.is-studio-preview .list-title .studio-placeholder {
  color: var(--border-input);
}

.is-studio-preview .studio-gift-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.is-studio-preview .studio-gift-tile__media,
.is-studio-preview .studio-gift-tile__line {
  display: block;
  border-radius: 8px;
  background: var(--studio-sand);
}

.is-studio-preview .studio-gift-tile__media {
  aspect-ratio: 1;
  border-radius: 18px;
}

.is-studio-preview .studio-gift-tile__line {
  width: 70%;
  height: 0.8125rem;
}

.is-studio-preview .studio-gift-tile__line--short {
  width: 40%;
}

/* W05: the choose-amount sheet open over the page (studio/previews/_sheet), its first step as a guest sees it with JS:
   the choices and "Continuar", nothing to press. The fieldset that disables every input keeps the cards' own look. */
.is-studio-preview .studio-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(31, 45, 37, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .is-studio-preview .studio-sheet-backdrop {
    background: rgba(0, 0, 0, 0.6);
  }
}

/* The same, chosen in Conta → Aparência (the studio's <html data-theme>). */
:root[data-theme="dark"] .is-studio-preview .studio-sheet-backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.is-studio-preview .studio-sheet {
  position: fixed;
  inset: 0;
  z-index: 11;
  height: fit-content;
  outline: 2.5px solid var(--primary);
  outline-offset: -2.5px;
  animation: none;
}

.is-studio-preview .studio-sheet .contribution-step[data-step="details"],
.is-studio-preview .studio-sheet .contribution-form__amount,
.is-studio-preview .studio-sheet .quote,
.is-studio-preview .studio-sheet .more {
  display: none;
}

.is-studio-preview .studio-sheet .sheet-foot[hidden] {
  display: block !important;
}

.is-studio-preview .studio-sheet .choice__input:disabled:not([disabled]) + .choice__card {
  cursor: default;
  border-style: solid;
  background: var(--surface);
  color: inherit;
}

.is-studio-preview .studio-sheet .choice__input:checked:disabled:not([disabled]) + .choice__card {
  background: var(--primary-soft);
}

/* ---------- Motion preferences: every animation shows its final state at once ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  .sheet[open] {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- The page as steps (Guest::Steps; docs/design.md §9 "Steps") ---------- */

/* The cup bar: sticky on a phone, so the guest always sees where she is. */
.steps-bar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) calc(-1 * var(--gutter)) 0;
  padding: var(--space-2) var(--gutter);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.steps-bar .cup svg {
  width: 2.25rem;
  height: 2.25rem;
}

.steps-bar__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.steps-bar__count {
  color: var(--text-muted);
  font-size: var(--text-small);
  font-weight: 600;
}

.steps-bar__name {
  font-weight: 650;
}

.steps-bar__dots {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each dot is a 1.75rem link (a finger's target), its dot drawn inside. */
.steps-bar__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
}

.steps-bar__dot::before {
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  content: "";
}

.steps-bar__dot.is-done::before {
  border-color: var(--gold);
  background: var(--gold);
}

.steps-bar__dot.is-current::before {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary);
}

.steps-bar__dot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* "Voltar": the step before, an arrow at the bar's start (a full target; the word for a screen reader). */
.steps-bar__back {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  margin-left: calc(-1 * var(--space-3));
  margin-right: calc(-1 * var(--space-2));
  border-radius: 50%;
  color: var(--text);
}

.steps-bar__back .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.steps-bar__back:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* What the step before just did ("Palpite registrado."), under the bar. */
.steps-done {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--primary);
  font-size: var(--text-small);
  font-weight: 600;
}

.steps-done .icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* The Fraldas and Palpite pages as steps: the form at a reading width, its confirmation on the page. */
.step-page {
  max-width: 36rem;
  margin-top: var(--space-5);
}

/* The step's title starts the column, like the list page's section titles (no dialog close button to balance). */
.step-page .sheet-head {
  display: block;
}

.step-page .sheet-head__title {
  min-height: 0;
  font-size: 1.5rem;
  font-stretch: 85%;
  letter-spacing: -0.02em;
  text-align: left;
}

.step-page .sheet-head__sub {
  margin-top: var(--space-1);
  font-stretch: 100%;
  line-height: 1.4;
}

/* "Pular" right under the form's button, and what's below (the board) well apart from it. */
.step-page .steps-next {
  margin-top: var(--space-4);
}

.step-page .steps-next + section {
  margin-top: var(--space-8);
}

.step-page .rsvp-done {
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
  background: transparent;
}

/* The steps spelled out under the invitation: only on a wide screen (a phone has the bar's dots). */
.steps-list {
  display: none;
}

/* "Pular", "Agora não", "Continuar": the way on from a step. */
.steps-next {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.steps-next__skip {
  color: var(--primary);
  font-weight: 600;
}

/* The end: the cup, and a way back to each step left. */
.steps-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  text-align: center;
}

.steps-end .cup svg {
  width: 6rem;
  height: 6rem;
}

.steps-end__title {
  margin: 0;
  font-size: 1.5rem;
  text-wrap: balance;
}

.steps-end__body {
  margin: 0;
  color: var(--text-muted);
}

.steps-end__missing {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-end__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}

.steps-end .button {
  margin-top: var(--space-2);
}

/* A step after the first shows only the invitation's title on a phone, one quiet line: the guest saw the rest on the
   first step (and the time and address there, once she answered). */
@media (max-width: 63.99rem) {
  .invite--compact .invite__cover,
  .invite--compact .invite__host,
  .invite--compact .facts {
    display: none;
  }

  .invite--compact .list-title {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .invite--compact + .steps-bar {
    margin-top: var(--space-2);
  }
}

/* A wide screen: the invitation stays beside the step (item 4 of the user's 2026-10-28 round), as a card with the
   steps under it; the logo and the footer take the same width, so they line up with its two columns. */
@media (min-width: 64rem) {
  .page--steps,
  .guest--steps .site-header,
  .guest--steps .site-footer {
    max-width: 72rem;
  }

  .list-page--steps > .invite {
    padding: var(--space-3) var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--surface);
  }

  .list-page--steps > .invite .invite__cover {
    border-radius: var(--radius-card);
  }

  .list-page--steps > .invite .list-title,
  .list-page--steps > .invite .invite__host,
  .list-page--steps > .invite .facts,
  .list-page--steps > .invite .steps-list {
    margin-inline: var(--space-2);
  }

  .list-page--steps > .invite .list-title {
    font-size: 2.25rem;
  }

  .steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-top: var(--space-4);
    padding: 0;
    list-style: none;
  }

  .steps-list__step {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--touch);
    padding: 0 var(--space-3);
    border-radius: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
  }

  .steps-list__step:hover {
    background: var(--bg);
    color: var(--text);
  }

  .steps-list__step.is-current {
    background: var(--primary-soft);
    color: var(--text);
  }

  .steps-list__step:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
  }

  .steps-list__mark {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    color: var(--surface);
  }

  .steps-list__mark .icon {
    width: 0.875rem;
    height: 0.875rem;
  }

  .steps-list__step.is-done .steps-list__mark {
    border-color: var(--gold);
    background: var(--gold);
  }

  .steps-list__step.is-current .steps-list__mark {
    border-color: var(--primary);
  }

  .list-page--steps {
    display: grid;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr);
    column-gap: var(--space-12);
    align-items: start;
  }

  .list-page--steps > * {
    grid-column: 2;
  }

  .list-page--steps > .invite {
    position: sticky;
    top: var(--space-4);
    grid-row: 1 / span 20;
    grid-column: 1;
  }

  .list-page--steps .steps-bar {
    margin-inline: 0;
    padding-inline: 0;
  }

  .list-page--steps .gift-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 80rem) {
  .list-page--steps .gift-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}