/* Final interface review: accessible controls, legible supporting text, quiet feedback. */
:root {
  --control-border: #718694;
  --control-hover: #28414b;
  --control-selected: #243c48;
  --focus-ring: #b5d3d7;
}
.hero-intro,
.section-top > p,
.attire figcaption p,
.attire-note,
.rsvp h2 + p,
.rsvp-panel p:not(.demo-banner),
.location > div:last-child > p:first-child {
  font-size: 1rem;
}
.gifts p:not(.eyebrow):not(.gift-lead) { font-size: 1rem; }
.gifts .gift-note { font-size: .875rem !important; }
.choices label,
input:not([type=radio]),
textarea {
  border-color: var(--control-border);
}
.choices label { font-size: .875rem; }
.choices label:has(input:checked) {
  border-color: var(--accent);
  background: var(--control-selected);
}
.button[aria-disabled=true] { opacity: .7; cursor: wait; }
.botanical { pointer-events: none; }
.timer-toggle {
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .75rem;
  padding: .5rem 0;
  margin-top: .8rem;
  min-height: 32px;
  text-decoration: underline;
  text-underline-offset: .3em;
}
.text-link { min-height: 32px; padding-block: .4rem; }
.status { overflow-wrap: anywhere; }
#admin-message {
  position: static;
  margin: 0 0 2rem !important;
  border-color: var(--control-border);
}
.calendar-week { font-size: .75rem; }
.map-note, .footer p:not(.footer-names), .footer a { font-size: .8125rem; }
@media (hover: hover) {
  .choices label:hover { border-color: var(--accent); }
  .timer-toggle:hover { color: var(--ice); }
}
@media (max-width: 650px) {
  .botanical { opacity: .22; }
  .hero h1 { line-height: 1.06; }
  .hero-intro { max-width: 30ch; }
  .attire figure { gap: 1rem; }
  .attire figcaption p { font-size: .9rem; }
  .choices { flex-direction: column; }
  .choices label { padding: .7rem; }
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
  .choices label:has(input:checked) { border: 2px solid Highlight; }
  .calendar { border: 1px solid CanvasText; }
}

/* Tactile component system, remapped to the invitation's navy and ice palette. */
:root {
  --radius-control: 8px;
  --radius-surface: 12px;
  --raised-control: #1e2c38;
  --raised-control-hover: #2a3c49;
  --well: #101923;
  --paper: #e0eaed;
  --paper-well: #f2f6f7;
  --paper-selected: #ccdde2;
  --primary-fill: #d5e5ea;
  --primary-ink: #0e121b;
  --button-shadow: 0 0 0 .5px var(--control-border), 0 1px 2px rgb(0 0 0 / .5);
  --primary-shadow: 0 0 0 .5px var(--primary-fill), 0 1px 2px rgb(0 0 0 / .5);
  --ease-control: cubic-bezier(.23, 1, .32, 1);
}
.button {
  min-height: 44px;
  padding: .75rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  gap: .75rem;
  background: var(--raised-control);
  color: var(--ice);
  box-shadow: var(--button-shadow);
  font-size: .875rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-weight: 500;
  white-space: normal;
  text-align: center;
}
.button.light {
  background: var(--primary-fill);
  color: var(--primary-ink);
  box-shadow: var(--primary-shadow);
}
.button svg { flex-shrink: 0; width: 16px; height: 16px; stroke-linecap: round; stroke-linejoin: round; }
.hero-bottom .button { padding: .9rem 1.25rem; min-height: 50px; }
.nav-rsvp { border-bottom: 0 !important; padding: .65rem 0 !important; font-size: .8rem; }
.nav-rsvp span { margin-left: .4rem; }
.nav-rsvp::after { content: ''; display: block; height: 1px; margin-top: 5px; background: var(--control-border); }
.text-link, .timer-toggle { text-decoration-thickness: 1px; }
.illustration { border-radius: 120px 120px 8px 8px; padding-block: 2rem; }
.attire figcaption { padding-top: 1.25rem; }
.attire h3 { font-size: 1.9rem; }
.rsvp { gap: 5.5rem; }
.rsvp-panel {
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  border-radius: var(--radius-surface);
  padding: 2rem;
  box-shadow: 0 0 0 .5px #9bb1bc, 0 3px 4px -2px rgb(0 0 0 / .45);
}
.rsvp-panel h3 { font-size: 2rem; letter-spacing: -.02em; }
.rsvp-panel p { color: var(--dark-muted); }
.rsvp-panel p.status { color: #243e4b !important; }
.rsvp-panel .guest { border-bottom: .5px solid #afc1c9; padding-block: 1.5rem; }
.rsvp-panel .guest legend { font-size: .9375rem; line-height: 1.5; margin-bottom: .75rem; }
.rsvp-panel .choices { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.rsvp-panel .choices label {
  font-size: .8125rem;
  background: var(--paper-well);
  border: .5px solid var(--control-border);
  border-radius: var(--radius-control);
  color: var(--ink);
  gap: .5rem;
  padding: .8rem .7rem;
  min-height: 48px;
}
.rsvp-panel .choices label:has(input:checked) {
  background: var(--paper-selected);
  border-color: #496d7b;
  box-shadow: 0 0 0 .5px #496d7b;
}
.rsvp-panel .choices input { accent-color: #324c59; width: 16px; height: 16px; }
.rsvp-panel :focus-visible { outline-color: #324c59; outline-offset: 4px; }
.rsvp-panel .button.light { background: var(--ink); color: var(--ice); box-shadow: 0 1px 2px rgb(14 18 27 / .2); min-height: 48px; }
.rsvp-panel .demo-banner { border: 0; padding: 0 0 1rem; margin-bottom: .5rem !important; font-size: .75rem !important; color: var(--dark-muted); }
.invitation-capacity { display:flex; align-items:baseline; gap:.8rem; padding-block:1rem 1.5rem; margin-bottom:1rem; border-bottom:.5px solid #afc1c9; }
.invitation-capacity strong { font-family:var(--serif); font-size:4rem; line-height:1; font-weight:400; font-variant-numeric:tabular-nums; }
.invitation-capacity span { font-size:.9375rem; color:var(--dark-muted); }
.rsvp-panel form>label { display:block; font-size:.9375rem; margin-block:1.5rem .75rem; }
.rsvp-panel select { width:100%; min-height:50px; padding:.75rem; border:.5px solid var(--control-border); border-radius:var(--radius-control); background:var(--paper-well); color:var(--ink); font-size:1rem; }
.rsvp-panel p.capacity-help { font-size:.8125rem; margin-top:.65rem; }
.rsvp-panel .decline-button { width:100%; margin-top:.75rem; background:transparent; color:var(--dark-muted); border:.5px solid var(--control-border); box-shadow:none; min-height:46px; }
@media(hover:hover){.rsvp-panel .decline-button:not([aria-disabled=true]):hover{background:var(--paper-selected);color:var(--ink)}}
input:not([type=radio]), textarea {
  border-radius: var(--radius-control);
  background: var(--well);
  border: .5px solid var(--control-border);
  min-height: 44px;
  color: var(--ice);
}
input::placeholder, textarea::placeholder { color: #9dafb9; opacity: 1; }
.admin-main { max-width: 1120px; padding-block: 2rem 5rem; }
.admin-main h1 { font-family: var(--sans); font-size: 1.75rem; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; }
.admin-heading h1:focus { outline: none; }
.admin-main .eyebrow { display: none; }
.admin-main .totals { gap: 0; margin-block: 2rem; padding-block: 1.5rem; border-block: .5px solid var(--line); }
.admin-main .total { padding-inline: 1.5rem; border-inline-start: .5px solid var(--line); }
.admin-main .total:first-child { padding-inline-start: 0; border-inline-start: 0; }
.admin-main .total strong { font-family: var(--sans); font-size: 2rem; font-weight: 400; line-height: 1.3; letter-spacing: -.03em; }
.admin-main .total span { display: block; margin-top: .4rem; font-size: .8125rem; }
.admin-main .family-row h2 { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: -.01em; }
.admin-main .family-row { padding-block: 1.5rem; }
.admin-main .family-row .button { font-size: .8125rem; min-height: 36px; padding: .5rem .9rem; border-radius: 999px; }
.admin-main .new-family { border-top: 0; padding-top: .25rem; }
.admin-main .new-family summary { min-height: 40px; display: flex; align-items: center; gap: .7rem; list-style: none; }
.admin-main .new-family summary::before { content: '+'; font-size: 1.3rem; font-weight: 400; }
.admin-main .new-family[open] summary::before { content: '−'; }
.admin-main .search-label { margin-bottom: .7rem; }
.admin-main #search { max-width: 380px; }
.admin-main .admin-actions { align-items: center; }
.admin-main #login-panel { width: min(100%, 440px); margin: 3rem auto; padding: 2rem; border-radius: var(--radius-surface); background: var(--surface); box-shadow: 0 0 0 .5px var(--control-border), 0 3px 4px -2px rgb(0 0 0 / .45); }
.admin-main #login { margin-top: 1.5rem; }
.admin-main #login .button { width: 100%; }
.admin-main #admin-message { border-radius: var(--radius-control); font-size: .875rem; }
@media (hover: hover) {
  .button:not(:disabled):not([aria-disabled=true]):hover { background: var(--raised-control-hover); color: var(--ice); }
  .button.light:not(:disabled):not([aria-disabled=true]):hover { background: #c3d7de; color: var(--ink); }
  .rsvp-panel .button.light:not(:disabled):not([aria-disabled=true]):hover { background: #263b49; color: var(--ice); }
  .rsvp-panel .choices label:hover { background: #e8f0f2; border-color: #496d7b; }
}
@media (prefers-reduced-motion: no-preference) {
  .button { transition: background-color 150ms var(--ease-control), color 150ms var(--ease-control), transform 150ms var(--ease-control); }
  .button:not(:disabled):not([aria-disabled=true]):active { transform: scale(.97); }
}
@media (max-width: 900px) { .rsvp { gap: 2rem; } .rsvp-panel { padding: 1.5rem; } }
@media (max-width: 650px) {
  .button { min-height: 46px; font-size: .9375rem; }
  .rsvp-panel { padding: 1.5rem; }
  .rsvp-panel .choices { grid-template-columns: 1fr; }
  .rsvp-panel .choices label { font-size: .9375rem; min-height: 48px; }
  .rsvp-panel .guest legend { font-size: 1rem; }
  .rsvp-panel h3 { font-size: 1.9rem; }
  .illustration { border-radius: 80px 80px 6px 6px; }
  .attire h3 { font-size: 1.65rem; }
  .admin-heading > .admin-actions .button { flex: 1; }
  .admin-heading > .admin-actions { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .admin-main .total { padding: 1rem; }
  .admin-main .total:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .admin-main .totals { padding-block: .5rem; }
  .admin-main #login-panel { margin-block: 1rem; padding: 1.5rem; }
  .admin-main .family-row .button { min-height: 44px; }
}