/* v1.2: layout owns spacing; content never shares space with decoration. */
:root {
  --page-gutter: clamp(20px, 4vw, 40px);
  --surface-padding: clamp(20px, 3vw, 32px);
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --shadow: 0 0 0 1px rgb(30 58 52 / 5%), 0 4px 16px rgb(30 58 52 / 4%);
}
html { scroll-padding-block: 24px 112px; }
body { line-height: 1.6; }
button, a, [role='button'] { touch-action: manipulation; }
button, .btn, .nav a { -webkit-tap-highlight-color: transparent; user-select: none; }
button, input, select, textarea { max-width: 100%; }
button, .btn, .icon-btn { flex-shrink: 0; }
button, .btn { overflow-wrap: anywhere; }
h1, h2, h3, p, .about, .wish-link, .list-name, .list-meta { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.22; }
.main-col { min-width: 0; container-type: inline-size; }
.screen, .topbar { max-width: 1060px; }
.topbar { gap: 20px; padding: calc(20px + env(safe-area-inset-top, 0px)) var(--page-gutter) 20px; }
.topbar-title { min-width: 0; overflow-wrap: anywhere; font-size: 1rem; }
.screen { display: grid; gap: 28px; padding: 12px var(--page-gutter) calc(6rem + 24px + env(safe-area-inset-bottom, 0px)); }
.screen > * { min-width: 0; margin-block: 0; }
.screen > .btn, .screen > .link-btn { justify-self: start; }
.screen-head { align-items: center; gap: 20px; }
.screen-head > div { flex: 1 1 14rem; min-width: 0; }
.screen-head p { margin-top: 8px; }
.section, .stack, .stack-lg, .empty { display: grid; gap: 16px; }
.stack-lg { gap: 24px; }
.section > *, .stack > *, .stack-lg > *, .empty > * { min-width: 0; margin-block: 0; }
.row { gap: 12px; }
.row > * { min-width: 0; max-width: 100%; }
.section-head { gap: 20px; align-items: center; }
.card, .notice { padding: var(--surface-padding); }
.card { border-radius: 22px; }
.notice { border-radius: 16px; }

/* A calm hero. Removing the clipped tag also preserves keyboard focus outlines. */
.tag { clip-path: none; border-radius: 24px; padding: var(--surface-padding); display: grid; gap: 24px; }
.tag::before { display: none; }
.tag > * { min-width: 0; margin-block: 0; }
.tag-title { line-height: 1.22; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.eyebrow { font: 600 .75rem/1.6 var(--font-ui); letter-spacing: .15em; text-transform: uppercase; color: var(--ink-soft); }
.tag .eyebrow { color: var(--tag-soft); }
.hero-heading { display: grid; gap: 8px; }
.countdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 4.25rem), 1fr)); gap: 16px; margin: 0; }
.countdown-unit { display: grid; align-content: center; justify-items: center; gap: 8px; min-width: 0; padding: 16px 8px; border-radius: 14px; background: rgb(255 255 255 / 7%); }
.countdown-value { font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.15; }
.countdown-label { font-size: .75rem; line-height: 1.5; margin: 0; }
.countdown-message { margin: 0; line-height: 1.3; }
.event-facts { gap: 16px; }
.event-facts p { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; gap: 16px; }
.event-facts p > span { min-width: 0; overflow-wrap: anywhere; }
.event-facts .fact-label { min-width: 0; }
.event-facts a { display: inline-block; padding-block: 8px; }
.tag .event-facts { padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 15%); }

.steps { gap: 16px; }
.step { padding: 24px; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 16px; }
.step .btn { margin-top: 16px; }
.step h3 { padding-top: 4px; }
.list { overflow: visible; }
.list-item { padding: 20px 24px; gap: 20px; border-radius: inherit; }
.list-item .grow { display: grid; gap: 8px; }
.list-item .chips { flex: 0 1 40%; }
.list-name { line-height: 1.4; }
.list-meta { line-height: 1.6; }
.search { display: block; }
.search .input { min-height: 52px; padding-left: 46px; }
.search svg { left: 16px; pointer-events: none; }
.chips-wrap, .pair-notes { gap: 8px; }
.chip { white-space: normal; overflow-wrap: anywhere; max-width: 100%; padding: 6px 12px; line-height: 1.5; }
.pairs { gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pair-wrap, .pair-wrap.warn { min-width: 0; filter: none; }
.tag.pair { padding: 24px; border-radius: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.pair-wrap.warn .tag.pair { border-color: var(--warn-ink); }
.pair-line { display: grid; grid-template-columns: 2.8em minmax(0, 1fr); gap: 12px; align-items: start; }
.pair-line + .pair-line { margin-top: 12px; }
.pair-name { white-space: normal; overflow: visible; overflow-wrap: anywhere; line-height: 1.45; }
.pair-notes { margin-top: 16px; }
.wrapped { max-width: 100%; }
.swap-bar { gap: 16px; padding: 20px; }
.swap-bar p { min-width: 0; flex-basis: 12rem; }
.pair-edit { gap: 16px; }
.pair-edit + .pair-edit { margin-top: 16px; }
.danger-zone { padding-top: 24px; }

/* Responsive people rows: minmax(0, ...) lets long text wrap inside its cell. */
.people-filters { gap: 12px; margin: 0; }
.people-heading, .person-row { grid-template-columns: minmax(0,1.2fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); gap: 24px; }
.people-heading { padding: 0 24px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.people-table { margin-top: -12px; }
.person-row { padding: 24px; border-bottom: 0; }
.person-row > * { min-width: 0; }
.person-name { gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.person-name strong { text-decoration: none; font-weight: 650; }
.person-contact { gap: 8px; font-size: .875rem; }
.status-badge { max-width: 100%; line-height: 1.5; padding: 8px 12px; text-align: left; }
button.status-badge { min-height: 44px; text-decoration: none; }
.email-entry { padding: 24px; gap: 12px; }

/* Fields and dialogs size to their contents; only the body scrolls. */
.field { gap: 10px; }
.field > span { line-height: 1.5; }
.field .hint { margin-top: 4px; }
.input, select.input, textarea.input { min-width: 0; font-size: 1rem; padding: 12px 14px; }
.fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.check { align-items: flex-start; padding-block: 8px; }
.check input { margin: 2px 0 0; }
.wish-rows { gap: 16px; }
.wish-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; padding: 16px; }
.wish-fields, .wish-fields label { min-width: 0; }
.wish-row .wish-fields { gap: 12px; }
.wish-list { gap: 16px; }
.wish-list li { padding: 20px; overflow-wrap: anywhere; }
dialog.sheet { width: min(620px, calc(100% - 32px)); max-height: min(90dvh, 900px); border-radius: 24px; }
.sheet-inner { min-height: 0; max-height: min(90dvh, 900px); }
.sheet-head, .sheet-foot { flex-shrink: 0; padding: 20px 24px; gap: 16px; }
.sheet-head h2 { min-width: 0; line-height: 1.3; }
.sheet-body { min-height: 0; padding: 24px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.sheet-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.icon-btn { flex: 0 0 44px; }
.btn { line-height: 1.4; max-width: 100%; padding: 12px 20px; }
.btn.small { min-height: 44px; padding: 10px 14px; font-size: .875rem; }
.link-btn { min-height: 44px; padding-block: 10px; }
.btn, .icon-btn, button.status-badge { transition: transform 140ms var(--ease-out), background-color 140ms ease, opacity 140ms ease; }
.btn:active:not(:disabled), .icon-btn:active, button.status-badge:active { transform: scale(.98); }
.person-name:active, .nav a:active, .list-item:active { opacity: .72; }
.nav a { overflow-wrap: anywhere; text-align: center; }
.nav a span { max-width: 100%; }
.toasts { width: min(calc(100% - 40px), 460px); bottom: calc(5rem + 16px + env(safe-area-inset-bottom, 0px)); }
.toast { padding: 16px 20px; overflow-wrap: anywhere; }

.gift { max-width: 760px; padding: calc(32px + env(safe-area-inset-top, 0px)) var(--page-gutter) calc(64px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 32px; }
.gift > * { margin-block: 0; min-width: 0; }
.gift header { display: grid; gap: 12px; }
.gift-kicker { margin: 0; font: 600 .75rem/1.6 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
.reveal { min-height: 180px; gap: 16px; perspective: none; }
.reveal-name { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.25; margin: 0; }
.reveal-name .wrapped { width: min(8ch, 100%); }
.reveal.is-revealed .reveal-name { animation: none; }
.reveal:active { opacity: .9; }
.signin { max-width: 500px; display: grid; gap: 28px; padding: calc(56px + env(safe-area-inset-top, 0px)) 24px 48px; }
.signin > * { margin-block: 0; }

@media (min-width: 900px) {
  .shell { grid-template-columns: 248px minmax(0, 1fr); }
  .nav { padding: 32px 16px; gap: 8px; }
  .nav-brand { font-size: 1.8rem; line-height: 1.2; padding: 0 16px 28px; }
  .nav a { min-height: 52px; padding: 12px 16px; text-align: left; }
  .screen { padding-bottom: 64px; }
  .topbar { padding-block: 28px; }
  .toasts { bottom: 24px; }
}
@container (max-width: 760px) {
  .people-heading { display: none; }
  .person-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .person-name, .person-contact { grid-column: 1 / -1; }
  .people-table { margin-top: 0; }
}
@media (max-width: 600px) {
  .screen { gap: 24px; }
  .pairs, .fields-2, .pair-edit { grid-template-columns: minmax(0,1fr); }
  .step { padding: 20px; }
  .list-item { padding: 20px; flex-wrap: wrap; }
  .list-item .chips { flex-basis: 100%; justify-content: flex-start; }
  .person-row { padding: 20px; }
  dialog.sheet { width: 100%; margin: auto 0 0; border-radius: 24px 24px 0 0; }
  .sheet-head, .sheet-body, .sheet-foot { padding-inline: 20px; }
  .sheet-foot .btn { flex: 1 1 8rem; }
  .nav { padding-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .nav a { min-width: 0; min-height: 72px; padding: 10px 0; font-size: .6875rem; gap: 6px; }
}
@media (max-width: 360px) {
  .event-facts p { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .person-row { grid-template-columns: minmax(0,1fr); }
  .screen-head .btn { width: 100%; }
}
@media (prefers-color-scheme: dark) { :root { --shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 4px 16px rgb(0 0 0 / 10%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.brand-note { display:block; margin-top:12px; font:400 .75rem/1.6 var(--font-ui); color:var(--ink-soft); }