@font-face {
  font-family: "Fleur De Leah";
  src: url("fonts/FleurDeLeah-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f7f2fb;
  --text: #2c2036;
  --muted: #7c6b8f;
  --card-bg: #ffffff;
  --border: #e2d3ef;
  --accent: #7c3aed;
  --accent-text: #ffffff;
  --danger: #a4423a;
  --error-bg: #fbe9e7;
  --error-text: #7a2b23;
  --success-bg: #e9f3e6;
  --success-text: #345a2b;
  /* Sampled directly from the heart in photo-animation.webm (#c0acf0,
     hsl(258, 69%, 81%)) — same hue/saturation, darkened for contrast
     against the light background. */
  --video-accent: #491fad;
  /* Requested "white" for info-page body text — kept literal in dark
     mode (where it matches the video's white line art), but that would
     be unreadable against this light background, so it falls back to
     the normal text color here instead. */
  --info-text: var(--text);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1424;
    --text: #ece4f7;
    --muted: #ab9bc4;
    --card-bg: #241b32;
    --border: #3d2f52;
    --accent: #a78bfa;
    --accent-text: #1a1424;
    --danger: #e2837a;
    --error-bg: #3a221f;
    --error-text: #f3c6c1;
    --success-bg: #22301f;
    --success-text: #c3e0ba;
    /* Same sampled hue, kept close to its original light pastel value
       since it already has good contrast on this dark background. */
    --video-accent: #bda9ef;
    --info-text: #ffffff;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  font-family: "Fleur De Leah", cursive;
  font-weight: 400;
  font-size: 2rem;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.fancy-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
}

nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

nav a {
  color: var(--text);
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

main {
  padding: 2rem 1.25rem 4rem;
}

h1 {
  margin-top: 0;
}

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

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.card.narrow {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

.top-spaced-card {
  margin-top: 1.5rem;
}

label {
  display: block;
  font-weight: 600;
  margin-top: 0.9rem;
  margin-bottom: 0.3rem;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
}

textarea {
  resize: vertical;
}

button,
.link-button {
  margin-top: 1.1rem;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

button:hover,
.link-button:hover {
  opacity: 0.9;
}

button.small-button {
  margin-top: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
}

button.danger {
  background: var(--danger);
  color: #fff;
}

.link-button {
  background: none;
  color: var(--muted);
  text-decoration: underline;
  padding: 0;
  margin: 0;
  font-weight: 400;
}

.logout-form {
  display: inline;
}

.inline-form {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0.4rem 0 0;
}

/* Qualified with the element type (input.inline-input, not just
   .inline-input) so this ties the specificity of input[type="text"]'s
   width:100% rule above instead of losing to it outright — a bare class
   selector has lower specificity than an attribute+element selector, so
   it was silently never winning against text inputs (selects worked only
   because a bare `select` element selector is even less specific). */
input.inline-input,
select.inline-input {
  width: auto;
  min-width: 8rem;
}

.guest-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.guest-family {
  min-width: 8rem;
}

.search-form {
  display: flex;
  margin: 0 0 1.5rem;
}

.group-heading {
  margin-bottom: 0.3rem;
  margin-top: 1rem;
}

.family-heading {
  margin: 0.4rem 0 0.2rem 1rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.guest-row-indent {
  padding-left: 1rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 400;
  margin: 0.2rem 0 0.2rem 1rem;
}

.checkbox-label input {
  width: auto;
}

details {
  margin-top: 1rem;
}

details summary {
  cursor: pointer;
  color: var(--muted);
}

.flashes {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.flash {
  padding: 0.7rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}

.flash-error {
  background: var(--error-bg);
  color: var(--error-text);
}

.flash-success {
  background: var(--success-bg);
  color: var(--success-text);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

th,
td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.plus-one-row td {
  background: var(--bg);
  font-size: 0.9rem;
}

.plus-one-row .inline-input {
  margin-right: 0.4rem;
}

.attend-choice label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 400;
  margin: 0 0.8rem 0 0;
}

.attend-choice input {
  width: auto;
}

.info-page {
  text-align: center;
}

.info-page p,
.info-page dd {
  color: var(--info-text);
}

.info-page h1,
.info-page dt {
  color: var(--video-accent);
}

.info-page h1 {
  font-family: "Fleur De Leah", cursive;
  font-style: normal;
  font-weight: 400;
  font-size: 4.5rem;
  white-space: nowrap;
}

@media (max-width: 450px) {
  .info-page h1 {
    font-size: 2.6rem;
  }
}

.photo-frame {
  position: relative;
  width: 540px;
  max-width: 100%;
  aspect-ratio: 800 / 506;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-frame canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.photo-frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.couple-photo-wrap {
  position: relative;
  width: 30%;
  aspect-ratio: 1 / 1;
  z-index: 1;
  transform: translate(10%, -20%);
}

.couple-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px var(--border),
    0 0 46px 12px var(--video-accent);
  animation: photo-glow-pulse 1.6s ease-in-out infinite alternate;
  pointer-events: none;
}

.couple-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--card-bg);
  margin: 0;
}

/* Animating opacity (compositor-only) instead of the box-shadow's own
   size avoids forcing a repaint every frame, which was causing the
   pulse to stutter. */
@keyframes photo-glow-pulse {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .couple-photo-wrap::after {
    animation: none;
    opacity: 0.75;
  }
}

.info-page .info-list {
  display: inline-block;
  text-align: center;
}

.info-list dt {
  font-weight: 700;
  margin-top: 1.1rem;
}

.info-list dd {
  margin: 0.2rem 0 0;
}

.party-list {
  margin: 0;
  padding-left: 1.25rem;
}

.party-list li {
  margin-bottom: 0.35rem;
}

.total-count {
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.total-count strong {
  color: var(--text);
  font-size: 1.3rem;
}

.role-counts {
  margin-top: 0;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.role-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.3rem;
}

.address-line {
  white-space: pre-line;
}